@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;800;900;1000&display=swap');
*{box-sizing:border-box}body{margin:0;background:#06051a;color:#fff;font-family:Nunito,system-ui,sans-serif}main{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 75% 60%,#38248b66,transparent 53%),linear-gradient(125deg,#060b25,#140b35 60%,#101e4a)}.nebula{position:absolute;inset:-30%;background:radial-gradient(ellipse at 65% 45%,#106ef52e,transparent 35%),radial-gradient(ellipse at 50% 65%,#9f36ee40,transparent 30%);filter:blur(40px);animation:drift 18s ease-in-out infinite alternate}.stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,#b3eaff 80%,transparent),radial-gradient(1px 1px at 70% 60%,white 80%,transparent),radial-gradient(1px 1px at 45% 85%,#d5b6ff 80%,transparent);background-size:180px 220px,130px 170px,290px 260px;opacity:.6;animation:twinkle 7s infinite alternate}header,footer{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:25px 4vw;gap:15px}header span,footer{font-size:10px;letter-spacing:3px;color:#a5b0dc}a,button{color:white;text-decoration:none;border:1px solid #9ba7ff55;background:#11173588;border-radius:30px;padding:12px 20px;font:800 12px Nunito,system-ui;cursor:pointer}button:hover,a:hover{background:#47439b}button:focus-visible,a:focus-visible{outline:3px solid #69ecff;outline-offset:5px}.intro{position:relative;z-index:3;width:62%;padding:9vh 0 10vh 8vw;animation:arrive 1.3s both}.eyebrow{color:#76dfff;letter-spacing:5px;font-size:12px;font-weight:900}h1{font-size:clamp(40px,6.4vw,100px);line-height:.95;letter-spacing:-3px;margin:25px 0 18px;font-weight:1000;text-shadow:0 4px 35px #6d58ff55}h1 span{display:block;font-size:.65em;color:#cbb5ff;margin-bottom:16px}.subtitle{letter-spacing:8px;font-size:clamp(17px,2.2vw,32px);font-weight:900;color:#72e7ff}.description{font-size:18px;line-height:1.7;color:#bec5e6;margin:28px 0}.enter{padding:19px 37px;background:linear-gradient(110deg,#4b67ed,#9445dc);border:1px solid #c8afff;box-shadow:0 0 35px #6954ef55;font-size:15px;letter-spacing:1px}#status{font-size:12px;color:#aaaed2;min-height:18px}.details{display:flex;gap:22px;margin-top:30px;font-size:9px;letter-spacing:1px;color:#8c9cce}.character{position:absolute;right:4%;bottom:7%;width:36%;height:78%;animation:arrive 1.6s .2s both}.character img{position:relative;height:100%;width:100%;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 22px #7755ff44)}.halo{position:absolute;width:100%;aspect-ratio:1;top:16%;border-radius:50%;background:radial-gradient(circle,#6d49ee44,transparent 65%);box-shadow:0 0 80px #436ae822}.badge{position:absolute;bottom:4%;right:3%;padding:14px 23px;background:#111635cc;border:1px solid #8c8fcb77;border-radius:15px;letter-spacing:3px;font-weight:900}.badge small{font-size:8px;color:#7ce7ff;letter-spacing:2px}.orbit{position:absolute;width:75vw;height:30vw;border:1px solid #8391ed30;border-radius:50%;transform:rotate(-32deg);left:30%;top:25%;box-shadow:0 0 20px #5f68dd11}.two{width:90vw;height:40vw;left:24%;top:20%}.planet{position:absolute;width:75px;height:75px;border-radius:50%;right:13%;top:14%;background:radial-gradient(circle at 30% 25%,#7ae6ff,#4b3ab2 55%,#0c0b2c 80%);box-shadow:0 0 50px #6d7bff55;animation:drift 10s infinite alternate}footer{position:absolute;bottom:0;width:100%;font-size:9px}@keyframes drift{to{transform:translate(15px,-20px)}}@keyframes twinkle{to{opacity:.3}}@keyframes arrive{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@media(max-width:700px){header span{display:none}header{padding:17px}header a,header button{font-size:10px;padding:10px 13px}.intro{width:100%;padding:6vh 7vw 330px}h1{font-size:53px}.eyebrow{font-size:9px;letter-spacing:3px}.description{font-size:15px}.character{height:330px;width:65%;right:0;bottom:30px;opacity:.85}.details{gap:10px;font-size:7px}.badge{display:none}footer{font-size:7px;letter-spacing:1px}.subtitle{font-size:21px;letter-spacing:5px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
[hidden]{display:none!important}.orbit{animation:orbit-drift 24s ease-in-out infinite alternate}.orbit:after{content:'';position:absolute;top:50%;left:-5px;width:9px;height:9px;border-radius:50%;background:#a3f9ff;box-shadow:0 0 20px #38dbff}.two{animation-duration:35s;animation-direction:alternate-reverse}.stars:after{content:'';position:absolute;inset:0;background:radial-gradient(3px 3px at 30% 25%,white,transparent),radial-gradient(2px 2px at 80% 75%,#b8a2ff,transparent);background-size:310px 270px;animation:twinkle 2.7s ease-in-out infinite alternate}.grade-label{display:block;margin:20px 0 15px;color:#c9c9ee;font-size:13px}select{padding:10px;border-radius:10px;background:#20214a;color:white;border:1px solid #8d84c9;margin-left:10px}#start{font-size:12px;padding:14px 24px}.audio-controls{position:relative;display:flex;justify-content:center;gap:25px;padding:15px;background:#090c25;font-size:12px;color:#bac6ee}.audio-controls label{display:flex;align-items:center;gap:8px}.audio-controls input{width:90px;accent-color:#9f83ff}@keyframes orbit-drift{from{transform:rotate(-32deg) translateY(-12px)}to{transform:rotate(-18deg) translateY(18px)}}
#mission{position:relative;min-height:100svh;background:radial-gradient(ellipse at 50% 35%,#243367,#120b35 70%);padding:20px 4vw 35px}.mission-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.mission-top strong{color:#7feaff}.guide{display:flex;align-items:center;gap:20px;max-width:950px;margin:15px auto;background:#131a41cc;border:1px solid #6f78b8;border-radius:22px;padding:10px 20px}.guide img{height:100px;width:75px;object-fit:contain}.guide h2{font-size:22px;margin:0 0 6px}.guide p{margin:0;color:#c5d4f8;line-height:1.5}.solar{position:relative;max-width:1000px;margin:auto;padding:24px 15px;border:1px solid #6c8bde66;border-radius:25px;background:radial-gradient(ellipse at left,#e5a44022,transparent 60%),#090f2ab0}.sun{color:#ffcd65;font-weight:900;text-align:center;margin-bottom:22px;text-shadow:0 0 20px #ff9800}.slots{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}.slot{min-height:120px;padding:10px 3px;border:1px dashed #83a2da;background:#18234799;border-radius:50% 50% 15px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:11px}.slot small{font-size:10px;color:#adbde6}.slot.filled{border:1px solid #6cffe0;box-shadow:0 0 20px #4bebdb33}.sphere{display:block;width:44px;height:44px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,#ffffffaa,transparent 35%),radial-gradient(circle at 30% 30%,var(--p),#030921);box-shadow:inset -9px -5px 12px #0007,0 0 18px color-mix(in srgb,var(--p),transparent 65%);position:relative}.saturn:after{content:'';position:absolute;inset:15px -10px;border:5px solid #dfc790;border-radius:50%;transform:rotate(-25deg)}.filled .sphere{animation:bob 4s infinite alternate}.tray{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1000px;margin:22px auto}.planet-card{display:flex;flex-direction:column;align-items:center;gap:12px;border-radius:16px;padding:15px;min-width:92px;touch-action:none}.planet-card.selected{outline:3px solid #89f4ff;background:#4943a2}.planet-card:disabled{opacity:.25;cursor:default}.mission-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.feedback{text-align:center;min-height:30px;color:#a7f8e2;font-weight:800}.progress{height:6px;border-radius:8px;background:#323965;max-width:1000px;margin:15px auto;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#9469ff,#74f5e8);transition:width .5s}.note{text-align:center;color:#8f9dc7;font-size:11px}.answers{display:flex;justify-content:center;gap:15px;margin:28px}.answers button{font-size:24px;padding:22px 35px}#overlay{position:fixed;inset:0;z-index:20;background:#070b22f5;display:grid;place-items:center;padding:22px;text-align:center}.result{max-width:600px;width:100%;padding:30px;border:1px solid #7986e8;border-radius:28px;background:radial-gradient(ellipse at top,#4d358c,#111737)}.result h2{font-size:35px;color:#a5ecff}.result input{font:900 25px system-ui;letter-spacing:8px;text-align:center;width:140px;padding:12px;border-radius:12px;border:1px solid #a1a6ea;text-transform:uppercase}.result ol{text-align:left;line-height:2}.result button{margin:10px}.rocket{font-size:85px;display:block}.rocket.fly{animation:launch 3s ease-in forwards}@keyframes launch{to{transform:translateY(-110vh);opacity:0}}@keyframes bob{to{transform:translateY(-5px)}}@media(max-width:750px){.slots{grid-template-columns:repeat(4,1fr)}.slot{min-height:100px}.planet-card{min-width:70px;padding:12px;font-size:11px}.sphere{width:35px;height:35px}.guide{gap:10px;padding:12px}.guide h2{font-size:18px}.guide img{height:85px;width:55px}.guide p{font-size:13px}.intro{padding-bottom:380px}.mission-top{font-size:12px}.answers button{padding:18px}.audio-controls{gap:12px}}
/* Detailed, scalable solar-system scene */
.constellations{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:constellation-drift 12s ease-in-out infinite alternate}.constellations polyline{fill:none;stroke:#8dcfff;stroke-width:1;opacity:.3}.constellations circle{fill:#daf6ff;filter:drop-shadow(0 0 6px #9fd8ff);animation:star-pulse 2s ease-in-out infinite alternate}.nebula{animation-duration:7s}.stars{animation-duration:2s}.stars:after{animation-duration:1.3s}.orbit{animation-duration:9s}.orbit.two{animation-duration:13s}.planet{animation-duration:4s}#start{font-size:18px;padding:18px 60px;margin-top:8px}.intro{padding-top:6vh;padding-bottom:12vh}.sphere{background-size:100% 100%;background-color:transparent;box-shadow:0 0 14px #81b9ff24}.solar-map{max-width:1200px;padding:0;border:1px solid #5d74b86b;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#30528a22,transparent 65%),radial-gradient(ellipse at 80% 20%,#51318a40,transparent 60%),#030817;box-shadow:inset 0 0 90px #0009,0 20px 70px #0004}.orbit-field{position:relative;height:clamp(380px,43vw,570px);background-image:radial-gradient(1px 1px at 20% 30%,#b3eaff 80%,transparent),radial-gradient(1px 1px at 70% 60%,#b4bfff 80%,transparent);background-size:121px 143px,173px 199px}.orbit-track{position:absolute;left:50%;top:50%;width:var(--orbit-w);height:var(--orbit-h);transform:translate(-50%,-50%);border:1px solid #829bdc42;border-radius:50%;box-shadow:0 0 12px #427fff0c;pointer-events:none}.orbit-track.active{border-color:#74dbff9c;box-shadow:0 0 10px #48baff22}.orbit-track.active:after{content:'';position:absolute;inset:-2px;border:2px solid transparent;border-top-color:#9adfff;border-radius:50%;animation:orbital-sweep 8s linear infinite}.sun-core{position:absolute;left:50%;top:50%;width:65px;height:65px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe2,#ffe398 25%,#ffb322 62%,#fb641b);box-shadow:0 0 20px #fff4bba8,0 0 60px #ff990077,0 0 120px #fc8e1c33;animation:sun-glow 3s ease-in-out infinite alternate;z-index:2}.sun-core:after{content:'';position:absolute;inset:-9px;border:1px solid #ffc44b55;border-radius:50%;box-shadow:0 0 20px #ffb12b55}.sun-core span{position:absolute;top:calc(100% + 15px);left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:3px;color:#ffce7f}.solar-map .slots{display:block;position:absolute;inset:0}.solar-map .slot{position:absolute;transform:translate(-50%,-50%);width:84px;min-height:64px;gap:5px;padding:0;border:0;background:none;border-radius:50%;z-index:3;overflow:visible}.solar-map .slot:hover:not(:disabled){background:#425bb540}.solar-map .slot b{font-size:11px;color:#dfebff;white-space:nowrap;background:#08132ae0;padding:3px 8px;border-radius:10px;text-shadow:0 1px 4px black}.solar-map .slot.filled{box-shadow:none}.solar-map .slot .sphere{width:var(--planet-size);height:var(--planet-size);animation:planet-float 5s ease-in-out infinite alternate;filter:drop-shadow(0 0 9px #829fff44)}.empty-orbit{height:32px;width:32px;border-radius:50%;display:grid;place-items:center;border:1px dashed #8ab7e8;background:#112143bd;color:#b2d3ff;font-size:13px;box-shadow:0 0 16px #669dff22}.map-caption{position:absolute;bottom:15px;left:20px;font-size:8px;letter-spacing:3px;color:#7c92ba}.saturn:after{inset:35% -25%;border-width:5px;box-shadow:0 1px 3px #0005}.guide{margin:12px auto}.guide img{height:85px}.tray{margin:18px auto}.progress{max-width:1200px}.solar-map+.note{margin:9px 0}@keyframes constellation-drift{to{transform:translate(18px,-12px) scale(1.025)}}@keyframes star-pulse{from{opacity:.25}to{opacity:1}}@keyframes sun-glow{to{box-shadow:0 0 25px #fff4bbbc,0 0 75px #ff990099,0 0 140px #fc8e1c44}}@keyframes orbital-sweep{to{transform:rotate(360deg)}}@keyframes planet-float{to{transform:translateY(-4px) rotate(4deg)}}@media(max-width:700px){.orbit-field{height:440px}.solar-map .slot{width:60px}.solar-map .slot b{font-size:9px;padding:2px 4px}.solar-map .slot .sphere{width:calc(var(--planet-size)*.7);height:calc(var(--planet-size)*.7)}.empty-orbit{width:26px;height:26px;font-size:11px}.sun-core{width:37px;height:37px}.map-caption{letter-spacing:1px;font-size:7px}.intro{padding-bottom:350px}.guide img{height:70px}.guide h2{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}
.orbit-track.active:after{animation:star-pulse 2.5s ease-in-out infinite alternate;border-top-color:#9adfff66}
/* Illustrated observatory with live interactive controls */
#mission{container-type:inline-size;width:100%;aspect-ratio:16/9;min-height:0;padding:0;background:#100d32 url(observatory.png) center/100% 100% no-repeat;overflow:hidden;isolation:isolate}#mission:before{content:'';position:absolute;inset:9% 4% 47% 36%;pointer-events:none;background:radial-gradient(3px 3px at 16% 25%,#fff,transparent),radial-gradient(3px 3px at 64% 11%,#c7eaff,transparent),radial-gradient(4px 4px at 80% 70%,#e3c4ff,transparent);animation:star-pulse 1.8s infinite alternate;z-index:-1}.mission-top{position:absolute;left:45%;right:2%;top:2%;padding:1% 1.5%;gap:1%;border:2px solid #60d9ff;border-radius:40px;background:linear-gradient(#1f287acb,#071837eb);box-shadow:0 0 12px #4acbff88,inset 0 0 15px #5a70fe77;font-size:clamp(10px,1.3cqw,20px);z-index:6}.mission-top strong{display:none}.mission-top button{font-size:clamp(10px,1.1cqw,17px);padding:.6em .9em;background:#29336b;border-color:#777aff}.mission-top #score{color:#ffe270}.guide{position:absolute;left:17.7%;top:29.5%;width:15%;height:20.5%;margin:0;padding:0;background:none;border:0;border-radius:0;display:block;z-index:5}.guide img{display:none}.guide h2{font-size:clamp(13px,1.8cqw,28px);color:#80f3ff;text-shadow:0 0 12px #4adfff;margin:0 0 .5em}.guide p{font-size:clamp(10px,1.12cqw,18px);line-height:1.4;color:#eff8ff;text-shadow:0 2px 4px #000}.progress{position:absolute;left:18%;top:50.5%;width:14%;height:4px;margin:0;z-index:6;background:#063774}.solar-map{position:absolute;left:20%;top:42%;width:76%;height:32%;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}.orbit-field{height:100%;background:none}.solar-map .sun-core,.solar-map .orbit-track,.map-caption{display:none}.solar-map .slot{width:12%;min-height:0;height:36%;gap:0;justify-content:flex-end;z-index:3}.solar-map .slot b{font-size:clamp(8px,.85cqw,14px);padding:2px 6px;background:#041c46dc;border:1px solid #4fa9ec77;line-height:1.15}.empty-orbit{position:absolute;bottom:23%;width:80%;height:38%;border-radius:50%;border:2px solid #a9faff;background:#1c6ec16b;box-shadow:0 0 12px #4bcfff,inset 0 0 12px #45cfff;color:#fff;font-size:clamp(10px,1.1cqw,17px);text-shadow:0 0 5px #fff}.solar-map .slot.filled:after{content:'';position:absolute;bottom:25%;width:80%;height:30%;border-radius:50%;box-shadow:0 0 14px #63ffce;border:2px solid #aeffe9;z-index:-1}.solar-map .slot .sphere{width:clamp(28px,4.3cqw,72px);height:clamp(28px,4.3cqw,72px);margin-bottom:3%;filter:drop-shadow(0 0 8px #74dfff)}.tray{position:absolute;left:13%;right:6%;top:76%;height:20%;margin:0;max-width:none;display:grid;grid-template-columns:repeat(8,1fr);gap:1.4%;align-items:end;z-index:5}.planet-card{position:relative;min-width:0;width:100%;height:100%;padding:3% 0 7%;border:none;background:none;border-radius:18%;gap:3%;font-size:clamp(9px,1cqw,16px);justify-content:flex-end;color:white;text-shadow:0 2px 3px #000}.planet-card:after{content:'';position:absolute;bottom:8%;height:28%;width:95%;border-radius:35% 35% 20% 20%;background:linear-gradient(#346fc5,#0c1b3d);border-top:3px solid #9ef7ff;box-shadow:0 -3px 10px #3ed7ff,0 6px 10px #020725;z-index:-1}.planet-card .sphere{width:clamp(35px,6.3cqw,102px);height:clamp(35px,6.3cqw,102px);filter:drop-shadow(0 8px 8px #020c2c);margin-bottom:5%}.planet-card.selected{background:#6c9cff24;outline:2px solid #affaff;box-shadow:0 0 20px #5df1ff77;transform:translateY(-5px)}.planet-card:hover:not(:disabled){background:#679aff22;transform:translateY(-4px)}.planet-card:disabled{opacity:.18}.feedback{position:absolute;top:11%;left:43%;right:4%;margin:0;padding:.6% 2%;min-height:0;border-radius:20px;background:#10163ad9;border:1px solid #8974bb88;font-size:clamp(10px,1.15cqw,18px);color:#dbfaff;z-index:5}.mission-actions{position:absolute;left:18%;top:55%;width:14%;display:flex;flex-direction:column;gap:5px;z-index:7}.mission-actions button{font-size:clamp(9px,.9cqw,14px);padding:.5em;background:#102c61e8;border-color:#5ac7ff}.note{position:absolute;bottom:.4%;right:3%;font-size:clamp(7px,.6cqw,10px);margin:0;color:#d4dffa;text-shadow:0 1px 3px #000}.fuel-mode .solar{position:absolute;top:54%;left:38%;width:53%;height:20%;margin:0;padding:1%;border:1px solid #72d9ff;background:#0a1746e8;border-radius:20px;box-shadow:0 0 25px #696dff88}.fuel-mode .sun{font-size:clamp(10px,1.3cqw,20px);margin:0}.fuel-mode .answers{margin:3% 0;gap:5%}.fuel-mode .answers button{font-size:clamp(16px,2cqw,30px);padding:.3em 1.2em}.fuel-mode .guide h2{font-size:clamp(11px,1.35cqw,21px)}
@media(max-width:700px) and (orientation:portrait){#mission{aspect-ratio:auto;min-height:900px;background-size:auto 600px;background-position:center top;background-repeat:no-repeat;background-color:#0b1234}.mission-top{left:3%;right:3%;top:12px;font-size:12px}.mission-top button{font-size:11px}.guide{left:4%;top:80px;width:48%;height:120px;padding:12px;background:#081e4ce8;border:1px solid #4fdfff;border-radius:14px}.guide h2{font-size:18px}.guide p{font-size:13px}.progress{left:6%;top:205px;width:42%}.feedback{left:4%;right:4%;top:615px;font-size:13px}.solar-map{left:3%;top:290px;width:94%;height:240px}.solar-map .slot{height:30%;width:16%}.solar-map .slot b{font-size:9px}.solar-map .slot .sphere{width:36px;height:36px}.empty-orbit{font-size:12px}.tray{left:4%;right:4%;top:675px;height:190px;grid-template-columns:repeat(4,1fr);gap:14px}.planet-card{font-size:11px}.planet-card .sphere{width:50px;height:50px}.mission-actions{left:5%;top:225px;width:40%;flex-direction:row}.mission-actions button{font-size:11px}.note{bottom:8px;font-size:8px}.fuel-mode .solar{top:360px;left:8%;width:84%;height:150px}.fuel-mode .sun{font-size:16px}.fuel-mode .answers button{font-size:24px}.fuel-mode .guide h2{font-size:17px}}
#mission:after{content:'';position:absolute;left:49%;top:36%;width:14%;height:25%;border-radius:50%;background:radial-gradient(circle,#fff2a914,transparent 65%);box-shadow:0 0 40px #ffc13b22;mix-blend-mode:screen;pointer-events:none;animation:star-pulse 2.5s ease-in-out infinite alternate;z-index:1}.solar-map{z-index:2}.empty-orbit{animation:target-glow 2s ease-in-out infinite alternate}@keyframes target-glow{to{box-shadow:0 0 20px #79efff,inset 0 0 18px #45cfff}}@media(max-width:700px) and (orientation:portrait){#mission:after{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}