:root{color-scheme:dark;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:#040915;color:#f0f6ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 0%,#12244a 0%,#040915 58%)}
button,select,input{font:inherit}button,select{border:1px solid #4b648d;background:#192b47;color:#f4f8ff;border-radius:11px;padding:10px 13px;min-height:44px;cursor:pointer}
button:hover{background:#283f67}
:focus-visible{outline:3px solid #b5dcff;outline-offset:3px}
a{color:#bedcfc}
main{max-width:1430px;margin:auto;padding:clamp(12px,2.7vw,30px)}
h1{font-size:clamp(26px,3.5vw,46px);line-height:1.15;letter-spacing:-.035em;margin:0 0 8px}
h2{font-size:clamp(19px,2.2vw,25px)}
.eyebrow{margin:0 0 6px;color:#9dbaf1;font-size:12px;font-weight:750;letter-spacing:.12em}
.subtitle{color:#c3d3ec;margin:0}
.header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}
.header>div{flex:1}
.view-headings{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 8px}
.view-headings>div{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline;padding:0 8px}
.view-headings strong{letter-spacing:.01em;font-size:16px}
.view-headings small{grid-column:2;color:#abc0de}
.view-number{font-size:11px;color:#f6d080;font-weight:800}
.canvas-wrapper{position:relative;border:1px solid #335078;border-radius:20px;overflow:hidden;background:#07142c;box-shadow:0 18px 48px #02071170}
.canvas-wrapper canvas{display:block;width:100%;height:clamp(410px,53vh,620px);cursor:crosshair;touch-action:none;outline-offset:-5px}
.canvas-divider{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,#52759b,transparent);pointer-events:none}
.canvas-note{position:absolute;left:12px;bottom:10px;background:#060c20ce;padding:5px 9px;font-size:11px;border-radius:7px;border:1px solid #4d678a;color:#d6dfed;pointer-events:none}
.phase-stats{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:14px 4px}
.phase-stats>div{display:flex;flex-direction:column}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#92b5dc}
.phase-stats strong{font-size:clamp(16px,2vw,22px);line-height:1.25}
.phase-stats output{color:#9dc2e9;font-size:12px;margin-left:auto}
.controls{background:#0c1a32;border:1px solid #334c72;border-radius:16px;padding:14px;display:grid;gap:12px}
.timeline-row,.options-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.timeline-row output{font-size:13px;font-variant-numeric:tabular-nums;color:#c9d8ed;white-space:nowrap}
.timeline{display:flex;flex:1;gap:10px;align-items:center;min-width:220px;font-size:13px;color:#bdcfe5}
input[type=range]{accent-color:#f9c766;cursor:pointer;min-height:36px}
.timeline input{width:100%;flex:1}
.options-row label{display:flex;align-items:center;gap:8px;font-size:13px;color:#bacdeb}
.options-row label:has([data-yaw]){flex:1;min-width:180px}
.options-row [data-yaw]{width:100%;max-width:230px}
.phase-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:16px}
.phase-strip button{font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 3px;line-height:1.25;min-height:72px}
.phase-strip button span[aria-hidden=true]{font-size:25px;line-height:1.2}
.phase-strip button [data-phase-label]{font-size:inherit;line-height:inherit;overflow-wrap:anywhere}
.phase-strip [aria-pressed=true]{border-color:#f9cc84;box-shadow:inset 0 0 0 1px #f9cc84;background:#324561}
.explanation{max-width:950px;margin:30px auto 50px;font-size:15px;line-height:1.8;color:#d1e0f0}
.explanation p{margin:10px 0}
.skip{position:absolute;left:12px;top:-100px;padding:10px;z-index:10;background:#fff;color:#000}
.skip:focus{top:12px}
[data-renderer=fallback] .canvas-wrapper{min-height:140px}
[data-mode=kids] .phase-strip button{min-height:82px;font-weight:700}

/* Language and accessible mobile captions are real DOM, never CSS-English text. */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.locale-choice{display:flex;align-items:center;gap:7px;font-size:13px;color:#c6dcf2}
.locale-choice select{min-height:44px;padding:8px 11px}
.mobile-heading{display:none}
.kids-guidance{display:none}
[data-mode=kids] .kids-guidance{display:flex;align-items:center;justify-content:space-between;gap:20px;
 margin:0 0 14px;padding:18px 20px;border:1px solid #4f84aa;border-radius:16px;
 background:linear-gradient(115deg,#12365a,#1c3454)}
.kids-guidance-copy{min-width:0;max-width:740px}
.kids-guidance strong{font-size:clamp(19px,2.6vw,27px);color:#ffdd96}
.kids-guidance p{margin:4px 0;color:#eef7ff}
.kids-guidance .kids-tip{font-weight:700;font-size:clamp(16px,2.1vw,21px)}
.kids-guidance small{display:block;color:#c7e0f6}
.kids-guidance [data-next-phase]{background:#f4c467;color:#12233d;border-color:#f4c467;
 font-weight:750;min-width:160px}
[data-mode=kids] [data-advanced]{display:none}
[data-mode=kids] .phase-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-mode=kids] .phase-strip button:nth-child(even){display:none}
[data-mode=kids] .phase-strip button{font-size:14px;min-height:96px}
[data-mode=kids] .explanation{display:none}

@media(max-width:920px){.phase-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.phase-stats output{margin-left:0;width:100%}}
@media(max-width:719px){
 .header{flex-direction:column;align-items:stretch;gap:11px}
 .header>div:first-child{width:100%;flex:none}
 .header-actions{order:-1;display:flex;width:100%;flex:none;justify-content:space-between;align-items:center}
 .header button{font-size:12px;padding:9px;min-width:85px}
 .view-headings{display:none}
 .canvas-wrapper canvas{height:clamp(580px,83vh,740px)}
 .canvas-divider{top:50%;left:0;right:0;bottom:auto;width:auto;height:1px}
 .mobile-heading{display:block;position:absolute;z-index:2;pointer-events:none;
  font-weight:700;font-size:13px;background:#030b1ec8;padding:5px 9px;
  border-radius:7px;color:#eaf5ff;left:9px;max-width:calc(100% - 18px)}
 .mobile-space{top:8px}
 .mobile-earth{top:calc(50% + 8px)}
 .locale-choice{font-size:12px;flex-wrap:nowrap;justify-content:flex-start}
 .locale-choice select{max-width:156px}
 [data-mode=kids] .kids-guidance{flex-direction:column;align-items:stretch;padding:15px}
 [data-mode=kids] .kids-guidance [data-next-phase]{width:100%;min-height:52px}
 [data-mode=kids] .phase-strip button{font-size:12px;min-height:88px}
 .canvas-note{right:8px;left:auto;font-size:10px}
 .phase-strip{gap:7px}
 .options-row{gap:10px}.options-row label{width:100%}
 .timeline-row{gap:10px}
 .timeline{order:2;width:100%}
}
@media(max-width:390px){.phase-strip button{font-size:11px}.phase-strip button span[aria-hidden=true]{font-size:22px}.phase-stats{gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
 :root,body{background:white;color:black}
 .controls,.canvas-wrapper,.view-headings,.phase-strip,.header button,.header-actions,.kids-guidance{display:none}
 .phase-stats output{display:none}
 .explanation{color:black}
 a{color:black}
}

/* Fullscreen always provides interactive scrub/play/speed controls at the
   viewport edge. The canvas remains scrollable and no controls are clipped. */
.fullscreen-controls{display:none}
[data-moon-root]:fullscreen{
 max-width:none;width:100%;height:100dvh;overflow-x:hidden;overflow-y:auto;
 padding:clamp(8px,1.4vw,20px) clamp(8px,1.4vw,20px) 154px;
 background:#040915;scrollbar-gutter:stable;
}
[data-moon-root]:fullscreen .fullscreen-controls{
 position:fixed;z-index:50;left:max(8px,env(safe-area-inset-left));
 right:max(8px,env(safe-area-inset-right));
 bottom:max(8px,env(safe-area-inset-bottom));
 display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
 gap:9px 12px;padding:12px 14px;margin:0 auto;max-width:1200px;
 background:#0c1a32f7;border:1px solid #6b8bad;border-radius:15px;
 box-shadow:0 6px 28px #000a;
}
.fullscreen-timeline{display:flex;flex:1;align-items:center;gap:9px;min-width:200px;color:#c8d7ee;font-size:12px}
.fullscreen-timeline input{flex:1;min-width:75px}
.fullscreen-speed{display:flex;align-items:center;gap:7px;color:#c8d7ee;font-size:12px}
.fullscreen-controls output{color:#f0f6ff;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
[data-moon-root]:fullscreen .canvas-wrapper canvas{height:clamp(290px,58dvh,650px)}
@media(max-width:719px){
 [data-moon-root]:fullscreen{padding-bottom:165px}
 [data-moon-root]:fullscreen .canvas-wrapper canvas{height:clamp(330px,65dvh,660px)}
 [data-moon-root]:fullscreen .fullscreen-controls{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:3px 8px;padding:8px;
 }
 .fullscreen-controls .fullscreen-timeline{grid-row:1;grid-column:2;min-width:0;display:flex;flex-direction:column;gap:0}
 .fullscreen-controls [data-play-fullscreen]{grid-row:1;grid-column:1}
 .fullscreen-controls [data-exit-fullscreen]{grid-row:1;grid-column:3}
 .fullscreen-controls .fullscreen-speed{grid-row:2;grid-column:1/3;min-width:0}
 .fullscreen-controls output{grid-row:2;grid-column:3;font-size:10px;max-width:118px;overflow:hidden;text-overflow:ellipsis}
 .fullscreen-controls button{padding:8px;font-size:12px}
 .fullscreen-controls select{min-width:0;max-width:130px;padding:7px;font-size:12px}
}
@media print{.fullscreen-controls{display:none!important}}