:root {
  color-scheme: light;
  --alive-ink: #282532;
  --alive-muted: rgba(40, 37, 50, .62);
  --alive-faint: rgba(40, 37, 50, .42);
  --alive-panel: rgba(247, 248, 253, .72);
  --alive-surface: rgba(255, 255, 255, .48);
  --alive-surface-soft: rgba(255, 255, 255, .3);
  --alive-surface-solid: #f7f8fc;
  --alive-input: rgba(255, 255, 255, .56);
  --alive-border: rgba(255, 255, 255, .7);
  --alive-border-soft: rgba(61, 55, 75, .12);
  --alive-shadow: 0 28px 80px rgba(36, 31, 53, .16);
  --alive-link: #6348c8;
  --alive-accent: #765cff;
  --alive-page-tint: rgba(241, 242, 249, .17);
}

:root[data-color-mode="dark"] {
  color-scheme: dark;
  --alive-ink: #f8f8fc;
  --alive-muted: rgba(248, 248, 252, .62);
  --alive-faint: rgba(248, 248, 252, .4);
  --alive-panel: rgba(12, 13, 20, .72);
  --alive-surface: rgba(255, 255, 255, .065);
  --alive-surface-soft: rgba(255, 255, 255, .04);
  --alive-surface-solid: #171821;
  --alive-input: rgba(6, 7, 12, .42);
  --alive-border: rgba(255, 255, 255, .15);
  --alive-border-soft: rgba(255, 255, 255, .1);
  --alive-shadow: 0 28px 80px rgba(0, 0, 0, .3);
  --alive-link: #b7aaff;
  --alive-accent: #9b87ff;
  --alive-page-tint: rgba(6, 7, 12, .32);
}

body {
  isolation: isolate;
  color: var(--alive-ink);
  transition: color 260ms ease;
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: var(--alive-page-tint);
  pointer-events: none;
  transition: background 320ms ease;
}

.color-mode-toggle {
  display: block;
  width: 48px;
  height: 28px;
  min-height: 0;
  padding: 0;
  color: var(--alive-ink);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.color-mode-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--alive-accent) 40%, transparent);
  outline-offset: 3px;
}

.color-mode-toggle__track {
  position: relative;
  display: block;
  width: 48px;
  height: 28px;
  border: 1px solid var(--alive-border-soft);
  border-radius: 999px;
  background: var(--alive-surface);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .12);
}

.color-mode-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffd568, #f2a936);
  box-shadow: 0 3px 9px rgba(93, 63, 16, .3);
  color: #6b4811;
  font: 800 .72rem/1 "Segoe UI Symbol", sans-serif;
  transition:
    transform 360ms cubic-bezier(.22, 1, .36, 1),
    color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease;
}

.color-mode-toggle__thumb::before {
  content: "☀";
}

:root[data-color-mode="dark"] .color-mode-toggle__thumb {
  transform: translateX(20px);
  background: linear-gradient(145deg, #d9d4ff, #887fc7);
  box-shadow: 0 3px 10px rgba(109, 96, 185, .36);
  color: #302a65;
}

:root[data-color-mode="dark"] .color-mode-toggle__thumb::before {
  content: "☾";
}

@media (prefers-reduced-motion: reduce) {
  .color-mode-toggle,
  .color-mode-toggle *,
  body,
  body::after {
    transition: none;
  }
}