/* Product UI uses shared theme tokens; the deep-space scene keeps its own
   astronomical palette, like an image, in both light and dark UI themes. */
:root{--atlas-space:#050c18;--atlas-starlight:#ddecff;--atlas-muted:#9eafca;--atlas-gold:#efd49a}
body{min-height:100dvh}button{border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ui-ink);padding:8px 12px}button:hover{background:var(--ui-soft)}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}
.masthead{height:80px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-line)}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700}.brand-mark{font-size:32px;color:var(--ui-accent)}.brand small{display:block;font:10px var(--ui-mono);letter-spacing:.2em;color:var(--ui-muted);margin-top:2px}.header-tools{display:flex;align-items:center;gap:18px}.header-tools>span{font-size:12px;color:var(--ui-muted)}
main{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:calc(100dvh - 80px)}.universe{position:relative;min-width:0;min-height:650px;overflow:hidden;color:var(--atlas-starlight);background:radial-gradient(ellipse at 40% 48%,#0d1e37 0%,var(--atlas-space) 65%)}#scene{position:absolute;inset:0;touch-action:none;outline-offset:-5px}#scene canvas{display:block;width:100%;height:100%;cursor:grab}#scene canvas:active{cursor:grabbing}
.intro{position:absolute;left:32px;top:27px;pointer-events:none;z-index:2}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--ui-muted);margin:0 0 12px}.intro .eyebrow{color:var(--atlas-muted)}h1{font-size:clamp(27px,2.7vw,43px);line-height:1.35;letter-spacing:.035em;margin:0;font-weight:500}.intro>p:last-child{font-size:13px;color:var(--atlas-muted);margin-top:12px}
.scene-toolbar{position:absolute;right:22px;top:24px;display:flex;gap:8px;z-index:3}.scene-toolbar button{color:var(--atlas-muted);background:var(--atlas-space);border-color:#293c57;font-size:12px}.scene-toolbar button:hover{color:var(--atlas-starlight);background:#17253a}.scene-footer{position:absolute;bottom:22px;left:32px;right:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;pointer-events:none}.scene-footer p{font-size:11px;color:var(--atlas-muted);max-width:230px;margin:0}.legend{list-style:none;padding:0;margin:0;display:flex;gap:18px;font-size:11px;color:var(--atlas-muted);flex-wrap:wrap}.legend li{display:flex;align-items:center;gap:8px}.legend-star{width:7px;height:7px;border:1px solid #9fbadb;border-radius:50%;display:inline-block;background:#446081}.legend-star.solved{background:#d9ebff;box-shadow:0 0 9px #91baff}.legend-star.complete{background:var(--atlas-gold);box-shadow:0 0 12px #d4af6f}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.constellation-label{position:absolute;left:0;top:0;white-space:nowrap;transform:translate(-50%,-50%);text-align:center;font-size:12px;letter-spacing:.06em;text-shadow:0 2px 8px #000;color:#c4d5ec;transition:opacity 120ms}.constellation-label small{display:block;font-size:9px;letter-spacing:.15em;margin-top:4px;color:var(--atlas-muted)}.constellation-label.complete{color:var(--atlas-gold)}.constellation-label.active{font-weight:700}.constellation-label.active::before{content:'› ';color:#93bded}
#tooltip{position:absolute;z-index:6;pointer-events:none;background:#101e32;border:1px solid #405773;border-radius:6px;padding:8px 12px;font-size:12px;max-width:240px;color:var(--atlas-starlight)}#scene-error{position:absolute;left:32px;bottom:100px;max-width:360px;font-size:14px;background:#101e32;padding:16px;border:1px solid #405773}
aside{background:var(--ui-surface);border-left:1px solid var(--ui-line);padding:26px 22px;min-width:0;max-height:calc(100dvh - 80px);overflow:auto}.nav-heading h2{font-size:21px;font-weight:600;margin:0}.nav-heading>p:last-child{font-size:12px;color:var(--ui-muted);margin:8px 0 24px}#constellation-list{display:grid;gap:2px}.chapter-button{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;text-align:left;width:100%;border-color:transparent;background:transparent;padding:9px 8px}.chapter-button .chapter-number{font:11px var(--ui-mono);color:var(--ui-muted)}.chapter-button .chapter-title{font-size:14px}.chapter-button .chapter-status{font-size:11px;color:var(--ui-muted)}.chapter-button[aria-current="true"]{background:var(--ui-accent-soft);border-color:var(--ui-line)}.chapter-button.finished .chapter-number{color:var(--ui-accent)}
.level-panel{border-top:1px solid var(--ui-line);margin-top:24px;padding-top:20px}.chapter-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.chapter-heading h3{font-size:13px;margin:0}.chapter-heading span{font-size:11px;color:var(--ui-muted)}#star-list{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 22px}.star-button{width:44px;padding:8px 0;font:12px var(--ui-mono);position:relative}.star-button[aria-pressed="true"]{background:var(--ui-accent);color:var(--ui-on-accent)}.star-button.done:not([aria-pressed="true"]){background:var(--ui-accent-soft)}#selection h3{font-size:24px;line-height:1.5;font-weight:500;margin:0 0 12px}#level-story{font-size:13px;color:var(--ui-muted);line-height:1.8}#level-meta{font-size:11px;color:var(--ui-muted);margin:16px 0}#start-level{width:100%;background:var(--ui-accent);color:var(--ui-on-accent);border-color:var(--ui-accent)}#start-level:hover{background:var(--ui-accent-hover)}.quiet{margin-top:8px;width:100%;font-size:12px;background:transparent}.demo-note{font-size:11px;color:var(--ui-muted);line-height:1.8;margin:24px 0 0}#choose-note{font-size:13px;color:var(--ui-muted)}
.announcement{position:fixed;bottom:25px;left:50%;transform:translate(-50%,12px);background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);padding:12px 20px;border-radius:6px;z-index:40;opacity:0;pointer-events:none;max-width:calc(100% - 24px);transition:opacity 180ms,transform 300ms cubic-bezier(.4,0,.2,1)}.announcement.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-surface);color:var(--ui-ink);padding:30px;max-width:min(440px,calc(100% - 32px))}dialog::backdrop{background:rgb(2 8 18 / .75)}dialog h2{font-size:24px}dialog p{font-size:14px}dialog button{width:100%;margin-top:18px}
@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 350px}.intro{left:44px;top:42px}.masthead{padding:0 44px}}
@media(max-width:800px){.masthead{height:72px;padding:0 18px}.brand{font-size:15px}.brand small{font-size:8px}.header-tools{gap:8px}.header-tools>span{display:none}main{display:block;min-height:0}.universe{height:62dvh;min-height:470px}.intro{left:20px;top:23px}h1{font-size:27px}.intro>p:last-child{display:none}.intro .eyebrow{font-size:9px}.scene-toolbar{top:auto;bottom:56px;right:16px}.scene-toolbar button{font-size:11px;padding:6px 9px}.scene-footer{left:20px;right:20px;bottom:20px}.scene-footer p{display:none}.legend{gap:16px;font-size:10px}aside{max-height:none;border-left:0;border-top:1px solid var(--ui-line);padding:23px 20px}.nav-heading>p:last-child{margin-bottom:16px}#constellation-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.chapter-button{grid-template-columns:18px 1fr;gap:7px;padding:9px 7px}.chapter-button .chapter-status{grid-column:2;font-size:10px}.chapter-title{white-space:nowrap}.level-panel{margin-top:18px}.constellation-label{font-size:10px}.constellation-label small{font-size:8px}#selection{max-width:540px}#tooltip{max-width:180px}.demo-note{margin-top:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#scene svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene svg:active{cursor:grabbing}.flat-star{cursor:pointer;outline:none}.flat-star:focus .flat-focus,.flat-star:hover .flat-focus{opacity:1}.flat-focus{opacity:0;fill:none;stroke:#f2f7ff;stroke-width:1.5}.flat-chapter:hover .flat-edge{stroke-opacity:.8}.flat-star:focus-visible .flat-core{fill:#fff}.flat-name{fill:#c4d5ec;font:13px var(--ui-font);letter-spacing:.04em}.flat-status{fill:#9eafca;font:10px var(--ui-font)}.flat-hit{fill:transparent;pointer-events:all}.flat-complete .flat-name{fill:var(--atlas-gold)}.flat-view .scene-toolbar{flex-wrap:wrap}.flat-view #motion{display:none}
@media(max-width:800px){.scene-toolbar{gap:4px;left:16px;justify-content:flex-end}.scene-toolbar button{padding:6px 8px}.scene-toolbar #view-mode{margin-right:auto}}