/* Three coordinated accent palettes; blue is the default. */
:root {
 color-scheme:dark; --bg:#081321; --panel:rgba(19,34,52,.93); --text:#edf4fb; --muted:#b5c3d3; --line:rgba(192,214,239,.16); --accent:#83bdff; --accent-strong:#5599eb; --accent-cool:#a8c5e6; --glass-edge:rgba(151,194,235,.24);
 --theme-glow:rgba(65,129,202,.16); --theme-glow-soft:rgba(93,145,200,.09); --theme-panel:rgba(24,43,65,.91); --theme-panel-2:rgba(17,32,50,.94); --theme-focus:#a9d2ff; --theme-button-text:#071a2a;
}
:root[data-palette="sea"] {
 --bg:#0b121a; --panel:rgba(21,34,46,.93); --text:#eef3f5; --muted:#b3c1c9; --line:rgba(199,220,225,.15); --accent:#78d6c1; --accent-strong:#48b69f; --accent-cool:#9cbcb7; --glass-edge:rgba(174,221,210,.22);
 --theme-glow:rgba(82,174,151,.16); --theme-glow-soft:rgba(91,139,147,.10); --theme-panel:rgba(31,50,61,.91); --theme-panel-2:rgba(16,29,38,.95); --theme-focus:#a6efdc; --theme-button-text:#092019;
}
:root[data-palette="amber"] {
 --bg:#15120e; --panel:rgba(38,29,20,.94); --text:#f7f1e7; --muted:#c9bcaa; --line:rgba(237,213,174,.16); --accent:#f0c276; --accent-strong:#d49a4a; --accent-cool:#d7bd92; --glass-edge:rgba(239,205,151,.23);
 --theme-glow:rgba(186,124,43,.17); --theme-glow-soft:rgba(143,105,65,.11); --theme-panel:rgba(56,43,28,.92); --theme-panel-2:rgba(37,29,20,.95); --theme-focus:#ffdda0; --theme-button-text:#281a0c;
}
body { background:radial-gradient(ellipse 700px 500px at 85% 0,var(--theme-glow),transparent 66%),radial-gradient(ellipse 600px 520px at 6% 38%,var(--theme-glow-soft),transparent 70%),linear-gradient(145deg,var(--bg),var(--panel) 55%,var(--bg)); }
a { color:var(--accent); } a:hover { color:var(--theme-focus); }
header { background:color-mix(in srgb,var(--bg) 90%,transparent); border-bottom-color:var(--line); box-shadow:0 8px 34px rgba(2,4,12,.22); }
.brand-icon { border-color:var(--glass-edge); background:linear-gradient(150deg,color-mix(in srgb,var(--accent-strong) 65%,#223044),var(--theme-panel-2)); }
.version { border-color:var(--line); color:var(--muted); }
.header-tools { display:flex; align-items:center; gap:12px; }
.nav-label,.eyebrow { color:var(--accent); }
nav a.active { background:color-mix(in srgb,var(--accent-strong) 22%,var(--panel)); color:var(--text); }
@media(hover:hover) and (pointer:fine) { nav a:hover:not(.active) { background:color-mix(in srgb,var(--accent) 10%,var(--panel)); color:var(--text); } }
.dot { background:var(--accent); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 42%,transparent); }
.hero { border-color:var(--glass-edge); background:linear-gradient(120deg,var(--theme-panel),var(--theme-panel-2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 70px rgba(0,0,0,.23); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); }
.hero-mark { border-color:color-mix(in srgb,var(--accent) 20%,transparent); }
.hero-mark span { color:color-mix(in srgb,var(--accent) 11%,transparent); }
.primary { background:linear-gradient(125deg,var(--accent),var(--accent-strong)); color:var(--theme-button-text); }
.primary:hover { filter:brightness(1.08); }
.lead { color:var(--muted); }
.intro-strip { color:var(--muted); }
.intro-strip span:before { color:var(--accent); }
.step-number { border-color:var(--line); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.card,.mini-program-flow figure,.walkthrough,.field-list>div,details,.configuration {
 background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 7%,transparent),rgba(0,0,0,.01)),var(--panel);
 border-color:var(--line);
}
.card-label,.pill { color:var(--accent); }
p,dd,.mini-program-flow figcaption { color:var(--muted); }
strong { color:var(--text); }
.notice { border-left-color:var(--accent-strong); background:color-mix(in srgb,var(--accent-strong) 14%,var(--panel)); }
code { color:var(--theme-focus); background:color-mix(in srgb,var(--accent-strong) 18%,var(--panel)); }
.path li:before { color:var(--accent); }
.shot { border-color:var(--line-strong,var(--glass-edge)); }
.pill { border-color:var(--line); }
button:focus-visible,a:focus-visible,summary:focus-visible { outline-color:var(--theme-focus); }
dialog { border-color:var(--glass-edge); background:var(--theme-panel-2); }
.viewer-bar { background:color-mix(in srgb,var(--panel) 96%,transparent); }
.viewer-bar button { border-color:var(--line); background:color-mix(in srgb,var(--accent) 16%,var(--panel)); color:var(--text); }
.skip:focus { background:var(--accent); color:var(--theme-button-text); }
.theme-switch { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--bg) 84%,transparent); }
.theme-switch__option { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:30px; padding:3px 8px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:11px; line-height:1; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.theme-switch__option:hover { color:var(--text); background:color-mix(in srgb,var(--accent) 9%,var(--panel)); }
.theme-switch__option[aria-pressed="true"] { color:var(--text); background:color-mix(in srgb,var(--accent) 13%,var(--panel)); border-color:var(--glass-edge); }
.theme-switch__option:focus-visible { outline:2px solid var(--theme-focus); outline-offset:2px; }
.theme-switch__swatch { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--theme-swatch); box-shadow:0 0 0 1px rgba(255,255,255,.3); }
.theme-switch__option[data-theme-choice="blue"] { --theme-swatch:#65aafa; }
.theme-switch__option[data-theme-choice="sea"] { --theme-swatch:#63c9ad; }
.theme-switch__option[data-theme-choice="amber"] { --theme-swatch:#e3ae58; }
@media(max-width:680px) {
 header { padding:0 16px; }
 .header-tools { gap:6px; }
 .header-note { font-size:0; }
 .version { font-size:10px; margin-left:0; padding:3px 6px; }
 .theme-switch { gap:0; padding:2px; }
 .theme-switch__option { width:28px; min-height:28px; padding:0; }
 .theme-switch__label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}