:root{--blue:#245bcd;--navy:#102443;--gold:#ecaf32;--paper:#f7f9fc;--muted:#52627a;--line:#d6dfea;--scale:1}
*{box-sizing:border-box}html{background:var(--paper);color:var(--navy);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:calc(16px * var(--scale))}
body{margin:0;line-height:1.5;touch-action:pan-y pinch-zoom}button{font:inherit;cursor:pointer;touch-action:manipulation}
[hidden]{display:none!important}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1200px;margin:auto;padding:16px 24px;border-bottom:1px solid var(--line);font-size:.9rem}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.3rem;letter-spacing:-.04em}
main{max-width:1200px;margin:auto;padding:20px 24px 28px}.heading{display:flex;align-items:center;justify-content:space-between;gap:18px}h1{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.15;margin:.3em 0 .6em;letter-spacing:-.035em}h2{font-size:1.3rem;margin:.2em 0 .7em}.eyebrow{color:var(--blue);text-transform:uppercase;font-size:.76rem;letter-spacing:.08em;font-weight:800;margin:0}
#sceneProgress{color:var(--muted);font-size:.8rem}.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin:12px 0 20px}.scene-media{margin:0;position:relative;display:grid;place-items:center;min-height:280px;background:#07131d;border-radius:18px;overflow:hidden}.scene-media img{display:block;max-width:100%;max-height:340px;width:auto;height:auto;object-fit:contain;z-index:1}
#sceneFallback{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 30%,#194672,transparent 60%),#07131d;display:grid;place-items:center}
#sceneFallback::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#e8f5ff 0 1px,transparent 1.6px);background-size:39px 43px}
#fallbackLabel{position:absolute;bottom:16px;color:white;letter-spacing:.14em;font-weight:800;background:#07131de6;padding:4px 12px}
.planet{display:none;width:190px;height:190px;border-radius:50%;background:radial-gradient(ellipse at 30% 30%,#eefaff 0 3%,transparent 15%),repeating-linear-gradient(155deg,transparent 0 18px,#ffffff70 21px 26px,transparent 32px 42px),radial-gradient(circle at 30% 25%,#5dc6ff,#245bcd 48%,#061527 78%);box-shadow:0 0 26px #75d8ff88}
[data-visual="planet"] .planet{display:block}.message-panel{padding:24px;border:1px solid var(--line);border-radius:18px;background:white;display:flex;flex-direction:column;justify-content:center}#narration{font-size:1.15rem;margin:0}#sceneHint{color:var(--muted);font-size:.9rem}
#controls{display:flex;flex-wrap:wrap;gap:12px;padding:6px}#controls button{min-height:52px;min-width:110px;border:2px solid var(--line);border-radius:12px;background:white;color:var(--navy);padding:12px 18px;font-weight:700;flex:1}
#controls .primary{background:var(--blue);color:white;flex:2;min-width:210px}#controls .scan-focus{outline:4px solid var(--gold);outline-offset:2px;border-color:var(--navy);box-shadow:0 0 0 7px white}
button:focus-visible{outline:4px solid var(--navy);outline-offset:5px}#scanStatus{font-weight:700;margin-bottom:4px}#audioStatus,#saveStatus{font-size:.85rem;color:var(--muted);margin:4px 0}
#switchPad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:86px;width:100%;margin-top:16px;border:2px solid var(--blue);border-radius:16px;background:var(--navy);color:white;padding:12px}#switchPad strong{color:#ffce68;font-size:1.2rem}#switchPad small{font-size:.8rem}
body[data-mode="bottom"]{padding-bottom:25vh;padding-bottom:25dvh}body[data-mode="bottom"] #switchPad{position:fixed;bottom:0;left:0;height:25vh;height:25dvh;margin:0;border-radius:16px 16px 0 0;z-index:3;padding-bottom:max(12px,env(safe-area-inset-bottom))}
body[data-mode="external"] #switchPad{min-height:64px}#panel{padding:24px;background:white;border:1px solid var(--line);border-radius:18px;margin-bottom:20px}#panelCopy{max-width:70ch}#panelCopy p{margin:.7em 0}
@media(max-width:700px){main{padding:16px 14px}.topbar{padding:12px 14px;flex-wrap:wrap}.story-grid{grid-template-columns:1fr;gap:12px}.scene-media{min-height:210px}.scene-media img{max-height:230px}.message-panel{padding:18px}.heading{display:block}#sceneProgress{margin:0}#controls button{min-width:120px;padding:12px}#controls .primary{flex-basis:100%}#panel{padding:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(forced-colors:active){#controls .scan-focus{outline-color:Highlight}#switchPad strong{color:ButtonText}.planet{border:3px solid CanvasText}}

/* Keep the selected command visible without scrolling the story away. */
html{scroll-padding-bottom:calc(25dvh + 20px)}
body{padding-bottom:130px}
#switchPad{position:fixed;bottom:0;left:0;z-index:3;margin:0;height:110px;border-radius:16px 16px 0 0;padding-bottom:max(12px,env(safe-area-inset-bottom))}