/* Two explicit themes. First visits use black; a reader's choice stays local. */
html { color-scheme: light; }
.theme-toggle {
  width: 42px;
  min-width: 42px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: #ffffff38;
}
.theme-toggle svg { width: 20px; height: 20px; pointer-events: none; }
.theme-sun { display: none; }
html[data-theme=dark] .theme-sun { display: block; }
html[data-theme=dark] .theme-moon { display: none; }
html[data-theme=dark] {
  color-scheme: dark;
  --paper: #07090c;
  --ink: #e5edf5;
  --muted: #a8b7c7;
  --line: #ffffff24;
  --soft: #121a24;
  --white: #141b24;
  --glass-edge: #a9c5df40;
  --glass-highlight: #d7eaff70;
}
html[data-theme=dark] body {
  background: radial-gradient(ellipse at 82% 6%, #17243455, transparent 27%), var(--paper);
}
html[data-theme=dark] em { color: #91acc4; }
html[data-theme=dark] a:focus-visible,
html[data-theme=dark] button:focus-visible,
html[data-theme=dark] summary:focus-visible { outline-color: #a4d6ff; }
html[data-theme=dark] .header {
  background: #11171fe0;
  border-color: #c3ddf239;
  border-top-color: #d8ecff73;
  box-shadow: inset 0 1px 0 #f4faff18, inset 0 -1px 0 #ffffff05, 0 12px 32px #0005;
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  html[data-theme=dark] .header { background: #171e2b99; }
}
html[data-theme=dark] .header .small-cta,
html[data-theme=dark] .theme-toggle {
  background: #ffffff08;
  border-color: #d3e7ff38;
  box-shadow: inset 0 1px 0 #ffffff16;
}
html[data-theme=dark] .header nav a:hover { color: #b9dfff; }
html[data-theme=dark] .button { color: #101b25; background: #dceaf5; border-color: #dceaf5; }
html[data-theme=dark] .button:hover { background: #fff; }
html[data-theme=dark] .hero-art { background-image: radial-gradient(#93b9d82b .7px, transparent .7px); }
html[data-theme=dark] .hero-art::before {
  background: radial-gradient(ellipse at 62% 43%, #6093c14d, #3b658b1c 45%, transparent 72%);
}
html[data-theme=dark] .orbit { border-color: #a0c5e62b; }
html[data-theme=dark] .editorial-layer {
  background: linear-gradient(135deg, #d5eaff26, #7e9ebd13 58%, #bed9f21c);
  border-color: #b4d7f447;
  border-top-color: #e5f3ffb3;
  border-left-color: #d5eaff66;
  box-shadow: inset 0 1px 0 #fff3, inset -1px -1px 0 #d5eaff17, 12px 18px 35px #0006;
}
html[data-theme=dark] .editorial-layer::after { border-color: #d5eaff20; }
html[data-theme=dark] .layer-index { color: #c8dfef; }
html[data-theme=dark] .layer-lines i { background: #b7d9f55c; }
html[data-theme=dark] .layer-evidence-mark { color: #aacfe9; }
/* The opaque newspaper is intentionally paper-colored in either theme. */
html[data-theme=dark] .mini-paper {
  --ink: #19364f;
  --muted: #536b7e;
  --line: #c7d3dc;
  color: var(--ink);
  background: #f4f6f8;
  border-color: #dde7f0;
  box-shadow: 0 20px 55px #0009, 0 0 55px #9cbcd614;
}
html[data-theme=dark] .glass-tag {
  color: #e7f2fc;
  background: #243547b8;
  border-color: #c2dff04d;
  border-top-color: #e4f3ffc9;
  box-shadow: inset 0 1px 0 #fff2, 0 12px 28px #0005;
}
html[data-theme=dark] .glass-tag small { color: #c2d4e3; }
html[data-theme=dark] .status-dot { background: #b9e7dc; box-shadow: 0 0 10px #a8e1d778; }
html[data-theme=dark] .story-rank { color: #9dbbd2; }
html[data-theme=dark] .newsroom-section {
  background: radial-gradient(ellipse at 50% 60%, #22354b50, transparent 63%), #0a0e14;
  border-color: var(--line);
}
html[data-theme=dark] .newsroom-figure { background: #0a0e14; border-color: #c7dff22b; }
html[data-theme=dark] .newsroom-figure img {
  filter: invert(1) grayscale(1) brightness(1.35);
  mix-blend-mode: screen;
}
html[data-theme=dark] .newsroom-figure figcaption { border-color: var(--line); }
html[data-theme=dark] .workflow {
  background-image: linear-gradient(90deg, transparent 49.5%, #9bc2e221 50%, transparent 50.5%);
}
html[data-theme=dark] .workflow button {
  color: #e5edf5;
  background: linear-gradient(140deg, #cfe5fc26, #577a9c0a 50%, #a9c8eb12);
  border-color: #b3d8f345;
  border-top-color: #e4f2ff96;
  box-shadow: inset 0 1px 0 #fff3, inset -1px -1px 0 #c5e7ff14, 0 15px 24px #0005;
}
html[data-theme=dark] .workflow button::before { border-color: #def2ff21; }
html[data-theme=dark] .workflow button[aria-pressed=true] {
  background: linear-gradient(140deg, #8bbfe052, #416d9533 70%, #acdafa38);
  border-color: #a8d5f4aa;
  border-top-color: #f3fbff;
  box-shadow: inset 0 1px 0 #fff8, 0 0 30px #7aadd91a, 0 18px 28px #0006;
}
html[data-theme=dark] .workflow button[aria-pressed=true]::after { background: #c8edff; box-shadow: 0 0 12px #a2d6ffb3; }
html[data-theme=dark] .workflow small { color: #b8cddd; }
html[data-theme=dark] .room-visual svg { stroke: #afd4ef; }
html[data-theme=dark] .room-wall { fill: #cee9ff07; }
html[data-theme=dark] .room-floor { fill: #afd8f326; stroke: #acd1ec; }
html[data-theme=dark] .room-object { stroke: #d8edfd; }
html[data-theme=dark] .room-desk { fill: #c2e7ff19; }
html[data-theme=dark] .stage-detail {
  background: linear-gradient(120deg, #bddcfa12, #b1cdea05);
  border-color: #bad5ee30;
  border-top-color: #d5eaff60;
  box-shadow: inset 0 1px 0 #ffffff12, 0 12px 24px #0003;
}
html[data-theme=dark] .receipt { background: #050a1238; border-color: #9ebfd43d; }
html[data-theme=dark] .excluded { border-color: #b9cbd832; }
html[data-theme=dark] .dna-panel { background: #111923; border-color: #a9c7df45; box-shadow: 8px 8px 0 #bdddf10a; }
html[data-theme=dark] .preset-switch { background: #080c12; }
html[data-theme=dark] .preset-switch button[aria-pressed=true] { color: #102131; background: #c5d9e8; }
html[data-theme=dark] .dna-row { border-color: var(--line); }
html[data-theme=dark] .dna-note { border-color: #a9cce775; }
html[data-theme=dark] .closing-star { color: #a4c8e2; }
html[data-theme=dark] .skip-link { background: #dceaf5; color: #101b25; }
@media (max-width: 600px) {
  .header .small-cta { display: none; }
  .header-actions { gap: 17px; }
  html[data-theme=dark] .workflow { scrollbar-color: #789cb6 #121a24; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme=dark] .header,
  html[data-theme=dark] .editorial-layer,
  html[data-theme=dark] .glass-tag,
  html[data-theme=dark] .workflow button,
  html[data-theme=dark] .stage-detail,
  html[data-theme=dark] .receipt { background: #17212d; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme=dark] .workflow button[aria-pressed=true] { background: #2c475f; }
}