:root {
  color-scheme: dark;
  --ink: #1a1035;
  --cream: #fcfbff;
  --lime: #00def4;
  --purple: #ff31b9;
  --night: #100a26;
  --night-panel: #20133e;
  --night-text: #faf8ff;
  --night-muted: #c6bddb;
  --night-line: #493667;
  --sunshine: #ffe454;
}

body { background: var(--night); color: var(--night-text); }
header { border-bottom: 1px solid var(--night-line); }
nav a:hover, .text-link:hover, footer > a:last-child:hover { color: var(--lime); }
.small-button { border-color: var(--lime); color: var(--lime); }
.small-button:hover { background: var(--lime); color: var(--ink); }
.brand-icon, h1 em { color: var(--lime); }
h1 em:after { background: var(--purple); }
.eyebrow span { background: var(--lime); }
.hero-copy > p:not(.lead):not(.eyebrow) { color: var(--night-muted); }
.author-line {
  background: var(--night-panel);
  border-color: var(--night-line);
  color: var(--night-text) !important;
}
.button {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
  box-shadow: 4px 4px 0 var(--purple);
}
.facts { border-color: var(--night-line); color: var(--night-muted); }
.facts b { color: var(--night-text); }
.orbit {
  background: radial-gradient(circle at 20% 35%, #00def420, transparent 70%),
    radial-gradient(circle at 85% 70%, #ff31b925, transparent 70%);
  border: 0;
}
.orbit:after { border: 1px dashed #65517e; }
.book { box-shadow: 12px 18px 0 #ff31b94a, 3px 4px 0 var(--ink); }
.sticker { background: var(--sunshine); color: var(--ink); }
.spark-one { color: var(--purple); }
.spark-two { color: var(--sunshine); }
.art-caption { color: var(--night-muted); }
.ticker { background: var(--night-panel); color: var(--lime); border-block: 1px solid var(--night-line); }
.ticker-star { color: var(--purple); }
.section-heading > p, .gallery-note { color: var(--night-muted); }
.gallery-note a { color: var(--lime); }

.page-card {
  color-scheme: light;
  background: var(--cream);
  color: var(--ink);
  border-top: 5px solid var(--lime);
  box-shadow: 0 8px 25px #00000020;
}
.page-card.peach { border-top-color: var(--purple); }
.page-card.mint { border-top-color: var(--sunshine); }
.page-card:hover { box-shadow: 0 12px 30px #00000040; }
.page-number { color: #655e79; }
.crew-art, .story-art { background: var(--night-panel); }
.crew-sticker { background: var(--sunshine); color: var(--ink); }
.crew-page { color-scheme: light; background: var(--cream); color: var(--ink); }
.crew-page > span { background: var(--cream); }
.crew-member { border-color: var(--night-line); }
.crew-member div > p:last-child { color: var(--night-muted); }
.crew-role { color: var(--night-muted); }
.crew-symbol { color: var(--ink); }
.crew-symbol.peach { background: var(--purple); }
.crew-symbol.lavender { background: var(--lime); }
.crew-symbol.mint { background: var(--sunshine); }
.authors-banner { color: var(--ink); border-color: var(--lime); box-shadow: 4px 5px 0 var(--purple); }
.authors-banner > span { color: var(--ink); }
.story-sticker { background: var(--sunshine); color: var(--ink); }
.handnote { color: var(--lime); }

.mission-wrap { color-scheme: light; background: var(--cream); color: var(--ink); border-color: #e5ddf0; }
.mission-tagline { color: #9a1f80; }
.mission-short, .mission-statement p, .code-heading p, .explorer-code p { color: #655e79; }
.mission-statement p:first-of-type { color: var(--ink); }
.code-block { border-color: #ddd5ed; }
.mission-closing { color: var(--ink); border-color: var(--lime); }

.dj-name-box { background: var(--night-panel); border-color: var(--night-line); box-shadow: none; }
.dj-name-copy > p:not(.eyebrow) { color: var(--night-muted); }
.dj-name-copy .name-example { color: var(--night-text); border-color: var(--purple); }
.name-fields select { color-scheme: light; border-color: #b6a7d0; }
.name-result { color-scheme: light; color: var(--ink); border-color: #ada0c5; }
#dj-name-output { color: #655e79; }
#dj-name-output.has-name { color: #9a1f80; }
.name-result > p:last-child { color: #655e79; }

.free { background: var(--night-panel); border-block: 1px solid var(--night-line); }
.free-art img { background: var(--cream); box-shadow: 9px 10px 0 #ff31b94a; }
.fine { color: var(--night-muted); }
details, details:last-child { border-color: var(--night-line); }
details p { color: var(--night-muted); }
summary span { color: var(--lime); }
.release { background: var(--night-panel); border-block: 1px solid var(--night-line); }
.release .eyebrow { color: var(--night-muted); }
.release-pill { background: var(--sunshine); color: var(--ink); }
.release-pill span { background: var(--ink); }
.edition-note { color: var(--night-muted); }
footer { color: var(--night-muted); }
footer .brand { color: var(--night-text); }
dialog { color-scheme: light; background: var(--cream); color: var(--ink); }
dialog::backdrop { background: #070311d9; }
:focus-visible { outline-color: var(--purple); }
dialog :focus-visible, .mission-wrap :focus-visible, .name-result :focus-visible { outline-color: #9a1f80; }