:root {
  --theme-mix: 0;
  --theme-weight: 0%;
  --scene-weight: var(--theme-weight);
  --page-bg: color-mix(in srgb, #fff, #05060a var(--theme-weight));
  --ink: color-mix(in srgb, #080808, #f4f5f8 var(--theme-weight));
  --ink-muted: color-mix(in srgb, #626672, #a6afc2 var(--theme-weight));
  --surface: color-mix(in srgb, #fff, #151b28 var(--theme-weight));
  --surface-hover: color-mix(in srgb, #f5f7fb, #1e2638 var(--theme-weight));
  --line: color-mix(in srgb, rgb(18 26 49 / .10), rgb(167 189 238 / .15) var(--theme-weight));
  --focus: color-mix(in srgb, #375eff, #8daaff var(--theme-weight));
  --scene-bg: color-mix(in srgb, #000, #fff var(--scene-weight));
  --scene-ink: color-mix(in srgb, #fff, #080808 var(--scene-weight));
  --scene-muted: color-mix(in srgb, #f8f8fb, #252b38 var(--scene-weight));
  --scene-rule: color-mix(in srgb, #ffffff38, #142d602e var(--scene-weight));
  --route-base: color-mix(in srgb, #e7efff, #5477b7 var(--scene-weight));
  --route-idle: color-mix(in srgb, #17243e, #b9c9e6 var(--scene-weight));
  --route-reached: color-mix(in srgb, #80a6ff, #2558dc var(--scene-weight));
  --scene-label: color-mix(in srgb, #8caaff, #284fb7 var(--scene-weight));
  --capsule-bg: color-mix(in srgb, #020202, #f6f8ff var(--theme-weight));
  --handle-bg: color-mix(in srgb, #fff, #11151e var(--theme-weight));
  --handle-ink: color-mix(in srgb, #060606, #fff var(--theme-weight));
  --charge-head: color-mix(in srgb, #fff, #05060a var(--theme-weight));
  --charge-head-alt: color-mix(in srgb, #c9ffff, #3156c2 var(--theme-weight));
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}

/* Palette pixels use the shared JS mix directly; no secondary color easing. */
.carousel-control { transition: opacity .24s ease; }
.position-counter { transition: opacity .25s ease; }
.experience-card {
  box-shadow: 0 calc(17px + var(--theme-mix) * 7px) calc(29px + var(--theme-mix) * 15px) calc(-9px - var(--theme-mix) * 7px) rgb(0 0 0 / calc(.2 + var(--theme-mix) * .55)), 0 3px calc(7px + var(--theme-mix) * 1px) rgb(0 0 0 / calc(.035 + var(--theme-mix) * .165));
}
.card-face { box-shadow: inset 0 1px 1px rgb(255 255 255 / calc(.16 + var(--theme-mix) * .08)); }
.card-glow-pulse { background: rgb(var(--glow-rgb, 77 164 255) / calc(.9 + var(--theme-mix) * .04)); }
.return-launcher .charge-track { box-shadow: 0 0 0 1px rgb(160 184 255 / calc(var(--theme-mix) * .18)), 0 10px 28px rgb(0 0 0 / calc(var(--theme-mix) * .22)); }

@media (prefers-reduced-motion: reduce) {
  [data-theme-ready] .position-counter,
  .carousel-control, .position-counter { transition: none; }
}