:root{--ink:#123f73;--muted:#55718d;--line:#c6dfe9;--sky:#008df6;--night:#091b34}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:linear-gradient(145deg,#effaff,#fffdf6);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{min-height:44px;cursor:pointer;border:1px solid #a9cde0;border-radius:12px;background:white;color:var(--ink);padding:.65rem 1rem;font-weight:650}button:hover:not(:disabled){background:#e9f7ff;border-color:#008df6}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b25e00;outline-offset:3px}button.primary{background:#008cf4;color:white;border-color:#008cf4;box-shadow:0 3px 0 #006cca}.primary:hover:not(:disabled){background:#0076d3}.skip-link{position:fixed;top:-100px}.skip-link:focus{top:0;z-index:99;background:white;padding:1rem}main{max-width:1180px;margin:auto;padding:24px 24px 32px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.4;margin-bottom:0;letter-spacing:.04em}h1 span{margin-left:.3em}h2{font-size:1.2rem;line-height:1.5}p{line-height:1.7}.eyebrow{font-size:.78rem;letter-spacing:.07em;font-weight:650;color:#487893;margin-bottom:5px}.lab-title{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:21px}.title-note{font-size:.92rem;line-height:1.8;margin:0}.title-note span{font-size:.8rem;color:var(--muted)}.tabs{display:flex;gap:8px;margin-bottom:18px}.tabs button{flex:1;background:#fff}.tabs button[aria-pressed=true]{color:#00518f;background:#e2f3ff;border:2px solid #0789ed}.tabs small{font-weight:400}.intro{margin:8px 0 12px;font-size:.9rem}.views{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:start}.view{overflow:hidden;border-radius:20px;border:1px solid var(--line);background:white;min-width:0}.view-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:8px}.view-heading h2{font-size:1rem;margin:0}.view-heading h2 span{display:inline-block;color:#1588a5;margin-right:6px}.view-heading button{font-size:.76rem;min-height:36px;padding:6px 10px}.north{font-size:.73rem;white-space:nowrap;color:var(--muted)}.space-stage,.earth-stage{background:radial-gradient(ellipse at 50% 60%,#163257 0%,#091b34 70%);position:relative;overflow:hidden}.space-stage{height:322px;touch-action:none}.earth-stage{height:322px}.space-stage>canvas,.earth-stage>canvas{display:block;width:100%;height:100%}.space-label{position:absolute;transform:translate(-50%,-50%);color:#e9f4ff;font-size:12px;padding:3px 6px;border-radius:6px;pointer-events:none;background:#102038d9;white-space:nowrap}.label-2{color:#ffe0a0}.space-toolbar{padding:10px 14px}.mode-buttons{display:flex;gap:6px}.mode-buttons button{font-size:.8rem;flex:1;min-height:40px}.mode-buttons button[aria-pressed=true]{background:#e5f6fa;border-color:#39a3c2;color:#086781}.space-toolbar p{font-size:.73rem;margin:6px 0;color:var(--muted)}details{font-size:.84rem}summary{cursor:pointer;min-height:36px;padding:8px 0}.camera-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.camera-buttons button{font-size:.76rem;padding:8px}.phase-caption{padding:12px 16px 6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}.phase-caption strong{font-size:1.02rem}.phase-caption span{font-size:.75rem;color:var(--muted)}.earth-footnote{font-size:.72rem;line-height:1.5;padding:4px 16px 12px;margin:0;color:var(--muted)}#earth-hidden{height:373px;text-align:center;background:#0c203b;color:#d7eafa;padding:40px 20px}#earth-hidden>span{font-size:5rem;color:#fbe2a4}#earth-hidden p{font-size:.88rem}.panel{border:1px solid var(--line);border-radius:18px;background:white;padding:20px}.controls{margin-top:14px;padding:14px 18px}.slider-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}.slider-row label{font-size:.85rem;font-weight:700;white-space:nowrap}.slider-row input{flex:1;min-width:0;height:32px;accent-color:#008ef5;touch-action:pan-y}.slider-row output{font-size:.83rem;min-width:40px;text-align:right}.move-buttons{display:flex;gap:8px}.move-buttons button{flex:1;font-size:.86rem}.move-buttons .primary{flex:1.3}.feedback{border-radius:14px;padding:16px;margin-top:14px;background:#e9f7ef;border:1px solid #9dccb6;line-height:1.8}.feedback[data-correct=false]{background:#fff6df;border-color:#edcd7d}.feedback strong{display:block;font-size:1.05rem}.feedback p{margin-bottom:0;font-size:.9rem}.feedback.celebrate{animation:glow .7s ease-out}@keyframes glow{50%{box-shadow:0 0 0 6px #ffe39b}}#next-actions{display:flex;gap:10px;margin-top:12px}.model-note{font-size:.74rem;color:var(--muted);margin:12px 0}.mission-prompt{display:flex;gap:20px;align-items:center;margin-bottom:16px;padding:16px}.mission-prompt h2{margin-bottom:6px}.mission-prompt p{margin-bottom:4px;font-size:.9rem}.mission-prompt canvas{flex:0 0 112px;width:112px;height:112px;border-radius:16px;background:#0e2441}.text-button{border:0;padding:8px 0;font-size:.8rem;text-decoration:underline;background:transparent}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.choices button{text-align:left;line-height:1.7;font-size:.94rem;display:flex;align-items:center;gap:12px}.choices canvas{width:70px;height:70px;background:#0e2441;border-radius:12px;flex-shrink:0}#mission-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#mission-list button{display:flex;align-items:center;gap:12px;text-align:left;padding:18px}#mission-list .number{border-radius:50%;width:38px;height:38px;flex-shrink:0;background:#e9f5fe;display:grid;place-items:center;color:#067dc4}#mission-list small{display:block;font-size:.75rem;color:var(--muted);margin-top:3px}.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}.photo{border:1px solid var(--line);border-radius:16px;overflow:hidden;padding-bottom:14px;min-width:0}.photo canvas{width:100%;height:auto;display:block;background:radial-gradient(ellipse,#1b3455,#08192f)}.photo h3{font-size:.97rem;margin:14px 14px 8px}.photo p{font-size:.8rem;margin:6px 14px}.photo label{display:block;margin:10px 14px 0;font-size:.8rem}.photo select{display:block;max-width:100%;width:calc(100% - 28px);margin:7px 14px 10px;min-height:44px;font-size:.8rem;padding:7px;border:1px solid #acc9db;border-radius:8px;background:white;color:var(--ink)}.photo button{margin:0 14px;font-size:.8rem}#achievements{display:flex;flex-wrap:wrap;gap:8px}#achievements span{border-radius:20px;background:#f0f5f9;padding:7px 10px;font-size:.8rem}#achievements .done{background:#e1f4e7;color:#146944}.empty-note{grid-column:1/-1;padding:30px 10px;color:var(--muted)}.reduce{font-size:.8rem;display:flex;align-items:center;gap:8px;margin:18px 0}.reduce input{width:20px;height:20px}.about{border-top:1px solid var(--line);padding:12px 0}.about p{font-size:.82rem}.about li{margin:8px 0}.about a{overflow-wrap:anywhere}footer{display:flex;flex-wrap:wrap;gap:18px;font-size:.8rem;padding-top:16px}footer span{margin-left:auto;color:var(--muted)}.explanation{margin-top:14px}.explanation h3{font-size:1rem}.reason-diagrams{display:flex;gap:20px;justify-content:center}.reason-diagrams figure{margin:0;width:240px;text-align:center}.reason-diagrams svg{width:100%;height:150px}.reason-diagrams canvas{height:150px;width:150px;background:#0d213c;border-radius:14px}.reason-diagrams figcaption{font-size:.8rem}.explanation p{font-size:.85rem;margin-top:12px}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#save-status:empty{display:none}#save-status,#fallback-note{font-size:.8rem;color:#865414;background:#fff3d9;padding:12px;border-radius:10px}.reduced-motion *{animation:none!important;transition:none!important}
@media(max-width:760px){main{padding:14px 12px 24px}.lab-title{margin-bottom:12px}.title-note{display:none}.eyebrow{font-size:.7rem}h1{font-size:1.5rem}.tabs{gap:5px;margin-bottom:10px}.tabs button{font-size:.82rem;padding:10px 5px}.tabs small{font-size:.7rem}.views{grid-template-columns:1fr;gap:10px}.view{border-radius:15px}.view-heading{padding:8px 12px}.view-heading h2{font-size:.88rem}.view-heading button{min-height:36px}.space-stage{height:214px}.earth-stage{height:190px}.space-toolbar{padding:7px 12px}.space-toolbar details{margin-top:0}.space-toolbar summary{font-size:.72rem;padding:3px 0;min-height:28px}.space-toolbar #gesture-help{display:none}.mode-buttons button{min-height:38px;padding:6px;font-size:.76rem}.phase-caption{padding:8px 12px 3px}.phase-caption strong{font-size:.9rem}.earth-footnote{font-size:.67rem;padding:3px 12px 8px}.earth-footnote br{display:none}.controls{padding:10px 12px;margin-top:10px}.slider-row{gap:10px;margin-bottom:6px}.move-buttons{flex-wrap:wrap;gap:6px}.move-buttons button{flex:1 1 28%;padding:8px 5px;font-size:.75rem}.move-buttons .primary{flex:1 1 100%;font-size:.9rem}.panel{padding:16px}.intro{font-size:.8rem;margin:6px 0 9px}.mission-prompt{gap:10px;padding:12px}.mission-prompt canvas{width:76px;height:76px;flex-basis:76px}.mission-prompt h2{font-size:1rem}.mission-prompt p{font-size:.77rem}.mission-prompt .text-button{font-size:.72rem;min-height:30px;padding:4px}.choices{grid-template-columns:1fr}.choices button{font-size:.85rem;padding:10px 14px}.choices canvas{width:55px;height:55px}#earth-hidden{height:220px;padding:15px}#earth-hidden>span{font-size:3rem}#mission-list{grid-template-columns:1fr}.photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.photo h3{font-size:.83rem;margin:10px}.photo p,.photo label{font-size:.74rem;margin-left:10px;margin-right:10px}.photo select{width:calc(100% - 20px);margin-left:10px;margin-right:10px}.photo button{font-size:.7rem;margin:0 10px;padding:8px}.reason-diagrams{gap:10px}.reason-diagrams figure{width:50%}.reason-diagrams canvas{max-width:100%;height:auto}.reason-diagrams svg{height:125px}#next-actions button{font-size:.8rem;padding:8px}.feedback{padding:13px}.feedback p{font-size:.82rem}footer span{margin-left:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* Keep both linked views and the controls close together, especially on phones. */
@media(min-width:761px){.space-stage,.earth-stage{height:270px}.space-toolbar #gesture-help{display:none}.lab-title{margin-bottom:14px}.space-toolbar summary{min-height:30px;padding:5px 0}}
@media(max-width:760px){.space-stage{height:170px}.earth-stage{height:150px}.earth-footnote{display:none}.phase-caption{padding-bottom:10px}.space-toolbar summary{font-size:.7rem}}
@media(max-width:760px){#earth-visible{display:flex;align-items:center;background:#0c203b}.earth-stage{width:48%;flex-shrink:0}.phase-caption{display:block;color:#fff;padding:12px}.phase-caption strong{font-size:.86rem}.phase-caption span{display:block;color:#bdcee5;margin-top:8px;line-height:1.6}.space-toolbar details:not([open]){margin-bottom:-4px}.intro{font-size:.76rem}.controls{padding:8px 10px}.move-buttons button{min-height:44px}.slider-row{margin-bottom:2px}}
@media(max-width:760px){main{padding-top:8px}.lab-title{margin-bottom:8px}.tabs{margin-bottom:6px}.space-stage{height:158px}.space-toolbar{padding-top:4px;padding-bottom:4px}.view-heading{padding-top:6px;padding-bottom:6px}}
#moon-fallback,#map-fallback{object-fit:contain}
@media(max-width:760px){.mode-buttons button,.view-heading button{min-height:44px}}

/* Keep the next action in reach while leaving explanations and observations scrollable. */
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
  #lab:has(#next-actions:not([hidden]) #next-mission:not([hidden])){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  #lab :is(#next-actions:not([hidden]) #next-mission:not([hidden])){position:fixed;z-index:20;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;margin:0;min-height:52px;box-shadow:0 0 0 6px #fffdf7,0 -4px 18px #073e7d24}
}