:root{color-scheme:dark;font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;background:#05091c;color:#f5f8ff}
*{box-sizing:border-box}
body{margin:0}
button,select{font:inherit}
button,select{color:#f8fbff;background:#152443;border:1px solid #607ba9;border-radius:11px;min-height:43px;padding:8px 12px}
button{cursor:pointer}
button:hover,button:focus-visible,select:focus-visible{outline:2px solid #a8cafa;outline-offset:2px}
.solar-explorer{max-width:1500px;margin:auto;padding:clamp(12px,2vw,30px)}
.solar-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
h1{font-size:clamp(26px,3.5vw,42px);margin:0 0 5px;letter-spacing:-.035em}
.eyebrow{color:#aac4ff;letter-spacing:.13em;font-size:12px;font-weight:700;margin:0 0 6px}
.summary{color:#becde7;margin:0 0 14px}
.solar-toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:10px 0 13px}
.solar-toolbar button[data-mode]{font-weight:700;background:#344e7b}
.solar-toolbar select{min-width:90px}
.solar-toolbar label{font-size:13px;display:flex;gap:8px;align-items:center;color:#d8e5fb}
.solar-toolbar output{color:#b4c9ff;font-size:13px;margin-left:auto}
.scene-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(255px,310px);gap:13px;align-items:stretch}
.visual-wrap{position:relative;min-width:0;border:1px solid #25446e;border-radius:16px;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#182547,#040819 79%)}
canvas{width:100%;height:clamp(390px,65vh,730px);display:block;touch-action:none;outline-offset:-5px;cursor:grab}
canvas:active{cursor:grabbing}
.scene-badge{position:absolute;pointer-events:none;bottom:12px;left:12px;background:#040c1bcc;padding:7px 11px;border:1px solid #445c83;border-radius:9px;color:#cbdaef;font-size:12px}
.info-panel{border:1px solid #294572;border-radius:16px;background:#0b1730;padding:18px;max-height:730px;overflow-y:auto}
.info-panel h2{font-size:26px;margin:0}
.info-panel .body-type{text-transform:uppercase;font-size:12px;font-weight:800;color:#9ac4ff;letter-spacing:.1em;margin:4px 0 13px}
.facts{margin:14px 0 20px;display:grid;grid-template-columns:minmax(95px,1fr) 1.1fr;border-top:1px solid #304566}
.facts dt,.facts dd{margin:0;border-bottom:1px solid #304566;padding:10px 3px;font-size:13px}
.facts dt{color:#9fb5d7}
.info-panel a{color:#a4caff;text-decoration:underline}
.scientific-note{font-size:13px;max-width:1120px;color:#bed0eb}
.below{max-width:980px;color:#d8e0ed}
.below h2{margin-top:22px}
.skip-link{position:absolute;top:-100px;left:12px;z-index:100;background:#fff;color:#07142a;padding:12px}.skip-link:focus{top:12px}.print-note{display:none}
.draft-banner{color:#d8e5fb;font-size:14px}.draft-banner a,.below a{color:#b9d7ff}.below{line-height:1.75}.below p,.below li{max-width:75ch}.below h2{line-height:1.3}.below{overflow-wrap:anywhere}
.solar-explorer:fullscreen{max-width:none;overflow:auto;background:#040a1d;padding:14px}
.solar-explorer:fullscreen canvas{height:calc(100dvh - 205px);min-height:370px}
[data-renderer=fallback] .visual-wrap{min-height:70px}
[data-renderer=fallback] .scene-badge{position:static}
@media(max-width:850px){.scene-layout{grid-template-columns:1fr}.info-panel{max-height:none}canvas{height:min(62vh,490px)}.solar-toolbar output{width:100%;margin:0}}
@media(max-width:400px){.solar-toolbar{gap:7px}.solar-toolbar label{flex:1;justify-content:space-between}button,select{min-height:44px;padding:7px 9px;font-size:14px}canvas{height:360px}.solar-explorer{padding:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

[hidden]{display:none!important}
.scene-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.floating-label{position:absolute;transform:translate(-50%,0);padding:2px 5px;background:#030a1eb8;color:#f0f6ff;border-radius:5px;font-size:12px;text-shadow:0 1px 2px #000;white-space:nowrap}

/* Kids view is a single scientific-order strip. Keep bodies tappable on phones. */
[data-mode=kids] .visual-wrap{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-color:#456492 #0b1931}
 /* General mode uses touch drag to rotate; Kids mode uses horizontal page scrolling. */
[data-mode=kids] canvas{touch-action:pan-x}
[data-mode=kids] .scene-labels{min-width:980px}
[data-mode=kids] .scene-badge{white-space:nowrap}
.performance-hud{position:absolute;right:12px;top:12px;pointer-events:none;background:#07142add;border:1px solid #44658d;border-radius:8px;padding:5px 8px;color:#dbebff;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:900px){[data-mode=kids] canvas{min-width:980px}}

/* Visible swipe instruction next to the mode selector on narrow screens.
 * This does not overlap the canvas or intercept horizontal drag gestures. */
.kids-scroll-hint{display:inline-flex;align-items:center;color:#dceaff;background:#1a3458;border:1px solid #5274a7;border-radius:9px;padding:5px 9px;font-size:12px;font-weight:650}
@media(min-width:901px){.kids-scroll-hint{display:none!important}}
@media print{
 @page{margin:12mm}
 :root,body{background:#fff;color:#000;font:11pt/1.5 sans-serif}
 .solar-explorer{max-width:none;padding:0}.summary,.scientific-note,.below{color:#000;max-width:none}
 .scene-layout,.solar-toolbar,.solar-top button,.draft-banner,.skip-link,.kicker,header.top{display:none!important}
 .print-note{display:block}.below a{color:#000}.below a[href^="https:"]::after{content:" (" attr(href) ")";font-size:9pt}
 .below h2{break-after:avoid;font-size:15pt}p,li{orphans:3;widows:3}
}