/* Website palettes mirror the application's promoTheme/lightTheme tokens.
   Media, device hardware and engineering drawing sheets retain their colours. */
:root {
  --bg:#060c18; --surface:#111e2b; --ink:#f6f0e5; --muted:#b3c2cd;
  --line:#354c59; --mint:#a1deca; --gold:#e5c992;
  --on-accent:#071b17; --soft:#152e30; --edge:#060e17;
  --surface-glint:#8faebe30; --shadow:#0004; --glow:#142b474d;
  --button-edge:#487e6f;
}
:root[data-theme='light'] {
  color-scheme:light;
  --bg:#edf2ed; --surface:#fbfcf8; --ink:#20362d; --muted:#4f655c;
  --line:#bdcec3; --mint:#245c49; --gold:#655016;
  --on-accent:#fff; --soft:#e4efe7; --edge:#c5d0c8;
  --surface-glint:#fff; --shadow:#20362d12; --glow:#dce9e380;
  --button-edge:#173f31;
}
body { background:radial-gradient(ellipse at 95% 0%,var(--glow),transparent 650px),var(--bg); }
.site-header { flex-wrap:wrap; gap:16px 24px; }
.site-header .brand { margin-right:auto; }
.site-header nav { order:1; gap:24px; }
.theme-toggle {
  order:2; min-height:44px; min-width:100px; padding:8px 12px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:8px; font-size:.8rem;
  box-shadow:inset 0 1px 0 var(--surface-glint),0 3px 0 var(--edge);
}
.theme-toggle:hover { border-color:var(--mint); }
.theme-toggle:active { box-shadow:inset 0 1px 0 var(--surface-glint); }
.theme-toggle:focus-visible { outline:3px solid var(--mint); outline-offset:4px; }
.primary { color:var(--on-accent); }
.button { box-shadow:0 4px 0 var(--button-edge); }
.button:hover { box-shadow:0 6px 0 var(--button-edge); }
.button:active { box-shadow:0 2px 0 var(--button-edge); }
.nav-action { border-color:var(--line); }
.walkthrough-player { background:var(--surface); border-color:var(--line); box-shadow:0 20px 60px var(--shadow); }
.access,.demo-card {
  background:linear-gradient(145deg,var(--soft),var(--surface)); border-color:var(--line);
  box-shadow:inset 0 1px 0 var(--surface-glint),0 6px 0 var(--edge),0 18px 32px var(--shadow);
}
.access-note,.pocket-methods span { border-color:var(--line); }
.sample-label,.demo-card>p { color:var(--muted); }
.demo-feedback { background:var(--soft); color:var(--ink); }
.story { background:var(--surface); color:var(--ink); border-block:1px solid var(--line); }
.story .eyebrow { color:var(--mint); }
.story .muted,.timeline p,.timeline-date,.story cite { color:var(--muted); }
.timeline li { border-color:var(--line); }
.timeline li::before { border-color:var(--surface); background:var(--mint); }
/* The jet renderer is transparent; its CSS canvas backdrop and controls follow the theme. */
#tm-jumo-flow {
  color-scheme:dark;
  --j-bg:var(--bg); --j-panel:var(--surface); --j-fg:var(--ink); --j-muted:var(--muted);
  --j-line:var(--line); --j-accent:var(--mint); --j-btn:var(--mint); --j-on:var(--on-accent);
  border:1px solid var(--line);
}
:root[data-theme='light'] #tm-jumo-flow { color-scheme:light; }
.wb-challenge {
  --wb-ink:var(--ink); --wb-muted:var(--muted); --wb-mint:var(--mint);
  color-scheme:dark; background:linear-gradient(145deg,var(--soft),var(--surface));
  border-color:var(--line); box-shadow:inset 0 1px var(--surface-glint),0 22px 60px var(--shadow);
}
.wb-primary { color:var(--on-accent); border-color:var(--mint); box-shadow:0 3px var(--button-edge); }
.wb-challenge button:focus-visible,.wb-challenge input:focus-visible { outline-color:var(--mint); }
:root[data-theme='light'] .wb-challenge { color-scheme:light; }
:root[data-theme='light'] .wb-feedback.is-incorrect { color:#84202a; background:#fff0f1; border-color:#b42332; }
:root[data-theme='light'] .wb-feedback.is-correct { color:#194b36; background:#e9f6ec; border-color:#28734c; }
:root[data-theme='light'] .hero-visual { box-shadow:0 8px 0 #c5d0c8,0 25px 70px #20362d18; }
:root[data-theme='light'] .orbit-core { background:radial-gradient(circle at 35% 25%,#fff,#dcebe1 65%); color:#245c49; box-shadow:inset 5px 6px 25px #fff8,12px 20px 40px #20362d18; }
.entry-transition { background:var(--bg); color:var(--ink); }
.entry-transition::backdrop { background:var(--bg); }
.entry-transition p { color:var(--muted); }
.entry-transition a { color:var(--mint); }
.entry-transition video { border-radius:14px; }
@media(max-width:1100px) {
  .site-header { padding-block:18px; }
  .theme-toggle { order:0; }
  .site-header nav { width:100%; flex-wrap:wrap; justify-content:space-between; gap:12px 20px; }
}
@media(max-width:420px) {
  .site-header nav { justify-content:flex-start; gap:10px 18px; }
  .site-header nav a { min-height:44px; display:inline-flex; align-items:center; }
  .theme-toggle { min-width:94px; }
}
@media(forced-colors:active) {
  .theme-toggle { border-color:ButtonText; }
}