@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #eeede7;
    --paper: #0d0d0c;
    --grey: #7d7c75;
    --grey-strong: #a3a29a;
    --line: rgba(238, 237, 231, 0.16);
    --line-strong: rgba(238, 237, 231, 0.3);
    --tint: rgba(238, 237, 231, 0.04);
    --text-soft: #c9c8c1;
    --text-body: #d8d7d0;
    --guide-major: rgba(238, 237, 231, 0.9);
    --guide-minor: rgba(238, 237, 231, 0.36);
    --guide-h: rgba(238, 237, 231, 0.44);
    --noise-dot: #fff;
    --noise-blend: screen;
    --noise-opacity: 0.05;
    --grid-invert: invert(1);
    --planet-1: #e6e5df;
    --planet-2: #9b9a93;
    --planet-3: #55544e;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eeede7;
  --paper: #0d0d0c;
  --grey: #7d7c75;
  --grey-strong: #a3a29a;
  --line: rgba(238, 237, 231, 0.16);
  --line-strong: rgba(238, 237, 231, 0.3);
  --tint: rgba(238, 237, 231, 0.04);
  --text-soft: #c9c8c1;
  --text-body: #d8d7d0;
  --guide-major: rgba(238, 237, 231, 0.9);
  --guide-minor: rgba(238, 237, 231, 0.36);
  --guide-h: rgba(238, 237, 231, 0.44);
  --noise-dot: #fff;
  --noise-blend: screen;
  --noise-opacity: 0.05;
  --grid-invert: invert(1);
  --planet-1: #e6e5df;
  --planet-2: #9b9a93;
  --planet-3: #55544e;
}

html[data-theme="dark"] .splash-logo,
html[data-theme="dark"] .stage-logo {
  filter: invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .splash-logo,
  :root:not([data-theme="light"]) .stage-logo {
    filter: invert(1);
  }
}

html[data-theme="dark"] .splash-logo {
  filter: invert(1) blur(7px);
}
html[data-theme="dark"] #splash.phase-logo .splash-logo {
  filter: invert(1) blur(0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .splash-logo {
    filter: invert(1) blur(7px);
  }
  :root:not([data-theme="light"]) #splash.phase-logo .splash-logo {
    filter: invert(1) blur(0);
  }
}

html.theme-switching body,
html.theme-switching .stage,
html.theme-switching .splash-bg,
html.theme-switching .overlay-nav {
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html.theme-switching body,
  html.theme-switching .stage,
  html.theme-switching .splash-bg,
  html.theme-switching .overlay-nav {
    transition: none;
  }
  .theme-toggle i { transition: none !important; }
}