:root{
  --night:#0B1440; --navy:#14225E; --deep:#1C2D78; --violet:#2A1E5C; --teal:#0F3463;
  --ink:#0A0E2A; --shade:#04061A; --cream:#FFF7E8; --cream-2:#FCEBC8;
  --text:#EAF0FF; --muted:#BCC7F2;
  --sun:#FFC83D; --orange:#FF8A3D; --orange-2:#FFD3A8; --red:#E8483B;
  --sky:#5BC0EB; --sky-2:#D3EEFA; --mint:#4FD1B5; --pink:#F06C9B; --purple:#8E6CEF; --green-2:#4FB477;
  --r:28px;
  --font-d:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-b:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font-b);color:var(--ink);background:var(--night);font-size:18px;line-height:1.7;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px;border-radius:12px}

/* top bar */
.topbar{position:fixed;inset:12px 12px auto;z-index:50;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;background:rgba(255,247,232,.94);backdrop-filter:blur(10px);border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--shade)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--font-d);font-size:22px;white-space:nowrap}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--font-d);font-size:18px;text-decoration:none;padding:6px 14px;border-radius:999px;white-space:nowrap;transition:background .2s}
.nav a:hover,.nav a.active{background:var(--sun)}
.sound-toggle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;border:3px solid var(--ink);flex:none}
.sound-toggle[aria-pressed="false"]{background:#aaa}
.sound-toggle[aria-pressed="false"] .wave{opacity:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:20px;padding:10px 22px;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:0 5px 0 var(--shade);text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--shade)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--shade)}
.btn:disabled{opacity:.45;transform:none;box-shadow:0 5px 0 var(--shade)}
.btn-big{font-size:26px;padding:14px 32px;background:var(--orange);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn-sun{background:var(--sun);color:var(--ink);text-shadow:none}
.btn-ghost{background:rgba(255,255,255,.9);color:var(--ink)}
.btn-ghost.light{background:rgba(255,255,255,.1);color:#fff;border-color:#fff;box-shadow:0 5px 0 rgba(255,255,255,.35)}
.speak.talking{background:var(--mint);color:var(--ink)}
.btn-ghost.light.talking{background:var(--mint);color:var(--ink);border-color:var(--ink)}

/* twinkle stars */
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stars i{position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.8);animation:tw var(--d,3s) ease-in-out var(--dl,0s) infinite}
.stars i.big{background:none;box-shadow:none;width:14px;height:14px}
.stars i.big::before,.stars i.big::after{content:"";position:absolute;left:50%;top:50%;background:#FFF6C8;border-radius:2px;transform:translate(-50%,-50%)}
.stars i.big::before{width:14px;height:3px}.stars i.big::after{width:3px;height:14px}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}

/* hero */
.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--night)}
.hero-scene{position:absolute;inset:0;z-index:0}
.layer{position:absolute;will-change:transform;transition:transform .25s ease-out}
.l-bg{inset:-6%}
.l-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 80%}
.l-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(11,20,64,.55),rgba(11,20,64,0) 60%),linear-gradient(transparent 78%,var(--night))}
.l-stars{inset:-4%}
.l-saturn{left:3%;top:15%;width:min(22vw,270px)}
.l-moon{right:5%;top:12%;width:min(13vw,160px)}
.l-alien{left:0;top:58%;width:min(11vw,130px)}
.l-astro{left:9%;bottom:14%;width:min(14vw,170px)}
.l-rocket{right:14%;bottom:8%;width:min(12vw,150px)}
.l-saturn img,.l-moon img,.l-astro img{filter:drop-shadow(0 0 24px rgba(120,160,255,.35))}
.rocket-btn{display:block;width:100%;border-radius:40px}
.rocket-btn img{filter:drop-shadow(0 0 30px rgba(255,170,60,.5))}
.rocket-btn.launch{animation:launch 2.6s cubic-bezier(.55,0,.75,.3) forwards}
.rocket-btn.back{animation:comeback 1.2s cubic-bezier(.2,1.3,.4,1) both}
@keyframes launch{0%{transform:none}8%{transform:translate(-3px,2px)}12%{transform:translate(3px,0)}16%{transform:translate(-2px,1px)}100%{transform:translateY(-140vh) scale(.6)}}
@keyframes comeback{from{transform:translateY(60vh)}to{transform:none}}
.smoke{position:absolute;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,.4) 60%,transparent 70%);pointer-events:none;z-index:4}

.fly{animation:fly 26s linear infinite}
@keyframes fly{0%{transform:translate(-20vw,0) rotate(-6deg)}50%{transform:translate(50vw,-8vh) rotate(6deg)}100%{transform:translate(120vw,0) rotate(-6deg)}}
.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(14px,-22px) rotate(8deg)}}
.sway{animation:sway 9s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(4deg) translateY(-10px)}}
.spin-slow{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-copy{position:relative;z-index:5;text-align:center;padding:120px 20px 30vh;max-width:820px}
.hero-kicker{display:inline-block;font-family:var(--font-d);font-size:24px;color:var(--ink);background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:2px 18px;margin-bottom:14px;box-shadow:0 4px 0 var(--shade)}
.title-3d{font-family:var(--font-d);font-weight:400;font-size:clamp(60px,12.5vw,150px);line-height:1;color:#fff;letter-spacing:.04em;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
  text-shadow:0 2px 0 #9FB4FF,0 4px 0 #8E6CEF,0 6px 0 #7A57E0,0 8px 0 #6845CC,0 10px 0 var(--ink),0 0 40px rgba(140,170,255,.6);
  animation:titleIn 1s cubic-bezier(.2,1.6,.4,1) both;transform-origin:50% 80%}
@keyframes titleIn{from{transform:scale(.4) rotateX(60deg);opacity:0}to{transform:none;opacity:1}}
.hero-sub{font-size:22px;margin:20px auto 24px;max-width:30em;font-weight:700;color:#fff;text-shadow:0 2px 0 var(--ink),0 0 16px var(--night)}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hint{display:inline-block;margin-top:16px;font-size:16px;font-weight:700;color:var(--ink);background:rgba(255,247,232,.94);border-radius:999px;padding:4px 16px}

/* sections */
.sec{position:relative;padding:clamp(64px,9vw,120px) clamp(16px,4vw,48px);color:var(--text);overflow:hidden}
.sec > *:not(.stars){position:relative;z-index:1}
.sec-head{text-align:center;max-width:760px;margin:0 auto 40px}
.sec-head h2{font-family:var(--font-d);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1.15;margin:12px 0 10px}
.sec-head p{font-size:19px;color:var(--ink);margin-bottom:14px}
.sec-head.light h2{color:#fff;text-shadow:0 4px 0 var(--shade)}.sec-head.light p{color:var(--muted)}
.chip{display:inline-block;font-family:var(--font-d);font-size:18px;padding:4px 16px;border-radius:999px;background:var(--mint);color:var(--ink);border:3px solid var(--ink)}
.chip-orange{background:var(--orange);color:#fff}.chip-pink{background:var(--pink);color:#fff}.chip-purple{background:var(--purple);color:#fff}.chip-red{background:var(--red);color:#fff}
.note{font-size:14px;color:var(--muted);font-weight:700}
.era-time{display:inline-block;font-weight:800;color:#fff;background:var(--purple);border-radius:999px;padding:2px 14px;font-size:16px}
.card-box{background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--shade)}

.sec-solar{background:radial-gradient(ellipse at 50% 30%,#22348C,var(--night) 70%)}
.sec-moon{background:linear-gradient(var(--night),var(--violet) 60%,#1E1850)}
.sec-astro{background:linear-gradient(#1E1850,var(--teal) 40%,#0C2550)}
.sec-games{background:linear-gradient(#0C2550,var(--violet))}

/* orrery */
.orrery-wrap{max-width:1000px;margin:0 auto}
.orrery{--S:min(900px,94vw);--tilt:62deg;position:relative;height:calc(var(--S)*.6);perspective:1400px;perspective-origin:50% 30%}
.plane{position:absolute;left:50%;top:45%;width:var(--S);height:var(--S);margin:calc(var(--S)/-2) 0 0 calc(var(--S)/-2);transform-style:preserve-3d;transform:rotateX(var(--tilt))}
.plane::before{content:"";position:absolute;inset:-4%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,61,.35),rgba(120,140,255,.08) 30%,transparent 62%)}
.orbit{position:absolute;left:50%;top:50%;width:calc(var(--rr)*var(--S));height:calc(var(--rr)*var(--S));margin:calc(var(--rr)*var(--S)/-2) 0 0 calc(var(--rr)*var(--S)/-2);border:2px dashed rgba(190,205,255,.45);border-radius:50%;transform-style:preserve-3d}
.orbit.sel{border:3px solid var(--sun)}
.arm{position:absolute;inset:0;transform-style:preserve-3d;transform:rotate(var(--a0));animation:orbit var(--t) linear infinite}
@keyframes orbit{from{transform:rotate(var(--a0))}to{transform:rotate(calc(var(--a0) + -360deg))}}
.pl{position:absolute;left:100%;top:50%;width:0;height:0;transform-style:preserve-3d}
.pl-spin{position:absolute;transform-style:preserve-3d;transform:rotate(calc(-1 * var(--a0)));animation:counter var(--t) linear infinite}
@keyframes counter{from{transform:rotate(calc(-1 * var(--a0)))}to{transform:rotate(calc(-1 * var(--a0) + 360deg))}}
.paused .arm,.paused .pl-spin{animation-play-state:paused}
.pl-face{position:absolute;transform-style:preserve-3d;transform:rotateX(calc(-1 * var(--tilt)));transform-origin:50% 100%}
.pbtn{position:absolute;left:0;bottom:calc(var(--ps)*-.25);width:calc(var(--ps)*1.5);padding:calc(var(--ps)*.25);transform:translate(-50%,0);border-radius:50%;transition:scale .2s}
.pbtn img{position:relative;width:100%}
.pbtn::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,220,120,.75),rgba(255,200,61,0) 65%);opacity:0;transition:opacity .2s}
.pbtn.sel::before{opacity:1}
.pbtn:hover,.pbtn.sel{scale:1.25}
.pbtn .lbl{position:absolute;left:50%;top:80%;transform:translateX(-50%);font-family:var(--font-d);font-size:14px;color:#fff;white-space:nowrap;text-shadow:0 2px 0 var(--ink);pointer-events:none}
.sun-c{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.sun-c .pl-face{transform:rotateX(calc(-1 * var(--tilt)))}
.sun-c .pbtn{--ps:calc(var(--S)*.19);bottom:calc(var(--S)*-.1)}
.sun-c .pbtn img{animation:spin 40s linear infinite}
.sun-c .pbtn::before{opacity:1;background:radial-gradient(circle,rgba(255,190,60,.8),rgba(255,150,40,0) 62%)}
.plane,.plane *{pointer-events:none}
.plane .pbtn{pointer-events:auto}
.orrery-ctrl{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:4px}

.planet-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:960px;margin:26px auto 26px}
.pchip{display:flex;align-items:center;gap:6px;font-family:var(--font-d);font-size:18px;padding:4px 14px 4px 6px;border-radius:999px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:0 4px 0 var(--shade)}
.pchip img{width:28px;height:28px;object-fit:contain}
.pchip.on{background:var(--sun);transform:translateY(2px);box-shadow:0 2px 0 var(--shade)}

.pinfo{max-width:1000px;margin:0 auto;perspective:1400px}
.pcard{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;padding:28px;background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--shade);animation:cardIn .6s cubic-bezier(.2,1.2,.3,1) both;transform-origin:50% 50% -200px}
@keyframes cardIn{from{transform:rotateY(-60deg) translateX(20%);opacity:0}to{transform:none;opacity:1}}
.pc-art{position:relative;aspect-ratio:1;border-radius:22px;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#2B3C93,var(--night) 75%);overflow:hidden}
.pc-art img{width:72%;max-height:80%;object-fit:contain;animation:wobble 6s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(160,190,255,.45))}
.pc-art.wide img{width:92%}
@keyframes wobble{0%,100%{transform:perspective(600px) rotateY(-14deg) rotate(-3deg) translateY(0)}50%{transform:perspective(600px) rotateY(14deg) rotate(3deg) translateY(-10px)}}
.pc-art .stars i{--s:2px}
.pc-txt h3{font-family:var(--font-d);font-weight:400;font-size:clamp(36px,4.5vw,52px);line-height:1.15;margin:8px 0}
.pc-txt .badge{display:inline-block;font-weight:800;font-size:15px;padding:2px 12px;border-radius:999px;background:var(--sky-2);border:2px solid var(--ink);margin:0 6px 6px 0}
.pc-txt ul{list-style:none;display:grid;gap:8px;margin:8px 0 16px}
.pc-txt li{position:relative;padding-left:32px}
.pc-txt li::before{content:"";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;background:var(--sun);border:3px solid var(--ink)}
.pc-nav{display:flex;gap:10px;flex-wrap:wrap}

/* compare */
.compare{max-width:1100px;margin:56px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cmp-card{background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--shade);padding:24px;min-width:0}
.cmp-card h3{font-family:var(--font-d);font-weight:400;font-size:32px;line-height:1.2;margin-bottom:6px}
.cmp-card > p{font-size:16px;line-height:1.6;color:#3B3F66}
.size-row-wrap{margin:16px 0;border-radius:18px;background:var(--night);border:3px solid var(--ink);overflow-x:auto;overflow-y:hidden}
.size-row{position:relative;display:flex;align-items:center;gap:10px;min-height:190px;padding:12px 14px 30px 46px;width:max-content;min-width:100%}
.size-row::before{content:"";position:absolute;left:-560px;top:50%;width:600px;height:600px;margin-top:-312px;border-radius:50%;background:radial-gradient(circle at 70% 50%,#FFE27A,#FFB12E 60%,#FF8A3D);box-shadow:0 0 40px 10px rgba(255,180,60,.6)}
.sz{position:relative;flex:none;display:grid;place-items:center;min-width:34px}
.sz img{max-width:none}
.sz img{width:var(--w);height:auto}
.sz span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-size:12px;font-weight:800;color:#fff;white-space:nowrap}
.swipe{font-size:13px;font-weight:800;color:#555B8A;text-align:right;margin:-8px 4px 6px}
.bubbles{list-style:none;display:grid;gap:8px;margin:10px 0 16px}
.bubbles li{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:6px 14px;font-size:16px;line-height:1.5}
.bubbles b{color:#C2410C;font-size:1.15em}
.dist{position:relative;height:110px;margin:20px 12px 6px 40px}
.dist-line{position:absolute;left:0;right:0;top:54px;height:10px;border-radius:10px;background:#D9DDF5;border:2px solid var(--ink);overflow:hidden}
.dist-fill{height:100%;width:0;background:linear-gradient(90deg,var(--sun),#fff)}
.dist-p{position:absolute;top:59px;transform:translate(-50%,-50%);width:var(--w);z-index:1}
.dist-p img{width:100%}
.dist-p span{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;white-space:nowrap}
.dist-p.up span{bottom:calc(100% + 6px)}.dist-p.dn span{top:calc(100% + 6px)}
.dist-p.hit img{filter:drop-shadow(0 0 6px var(--sun)) drop-shadow(0 0 3px #fff)}
.dist-sun{position:absolute;left:-42px;top:59px;transform:translateY(-50%);width:40px;z-index:2}
.dist-ship{position:absolute;left:0;top:59px;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 12px 6px rgba(255,240,170,.9);z-index:3;opacity:0}
.dist-read{text-align:center;font-family:var(--font-d);font-size:22px;min-height:2.6em;line-height:1.3}
.dist-read b{color:#C2410C}

/* moon phase */
.phase{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.phase-orbit{position:relative;aspect-ratio:1;width:100%;border-radius:var(--r);border:4px solid var(--ink);background:radial-gradient(circle at 50% 50%,#1F2B70,#0A1035 72%);box-shadow:0 10px 0 var(--shade);touch-action:none;overflow:hidden}
.sunbeam{position:absolute;left:0;top:0;bottom:0;width:22%;background:linear-gradient(90deg,rgba(255,210,90,.75),rgba(255,210,90,0));display:flex;align-items:center}
.sunbeam span{align-self:flex-start;margin-top:12px;writing-mode:vertical-rl;font-family:var(--font-d);font-size:20px;color:var(--ink);margin-left:8px;background:var(--sun);border:3px solid var(--ink);border-radius:14px;padding:8px 2px}
.sunbeam::after{content:"";position:absolute;left:46px;right:-40%;top:50%;height:0;border-top:3px dashed rgba(255,220,120,.6)}
.po-earth{position:absolute;left:50%;top:50%;width:28%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 20px rgba(91,192,235,.6))}
.po-ring{position:absolute;left:50%;top:50%;width:72%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px dashed rgba(200,210,255,.5);border-radius:50%}
.po-moon{position:absolute;left:50%;top:50%;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:50%;border:3px solid var(--ink);overflow:hidden;cursor:grab;touch-action:none;box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.po-moon:active{cursor:grabbing}
.po-lit{position:absolute;inset:0;background:linear-gradient(90deg,#FFF3B0 50%,#3A4170 50%)}
.po-moon.drag{box-shadow:0 0 0 10px rgba(255,200,61,.45)}
.po-tip{position:absolute;right:12px;bottom:12px;font-family:var(--font-d);font-size:17px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:2px 12px}
.phase-view{background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--shade);padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pv-cap{font-weight:800;color:#3B3F66}
.pv-moon{width:min(52%,220px);margin:10px 0;filter:drop-shadow(0 0 24px rgba(255,230,140,.6))}
.phase-view h3{font-family:var(--font-d);font-weight:400;font-size:40px;line-height:1.2}
.phase-view p{font-size:17px;line-height:1.6;min-height:3.2em;margin:4px 0 12px}
.pv-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;width:100%;margin-bottom:14px}
.pv-steps button{aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);padding:2px;background:var(--night)}
.pv-steps button.on{outline:3px solid var(--orange);outline-offset:2px}
.pv-steps svg{width:100%;height:100%;display:block}
.moon-why{max-width:1100px;margin:28px auto 0;padding:20px 24px;border:3px dashed rgba(255,255,255,.55);border-radius:var(--r);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.moon-why p{flex:1 1 420px;color:var(--text)}
.moon-why b{color:var(--sun)}

.apollo{max-width:1100px;margin:64px auto 0;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.apollo-pic{position:relative;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--shade);overflow:visible;transform-style:preserve-3d;transition:transform .3s ease-out}
.apollo-pic > img:first-child{border-radius:calc(var(--r) - 4px);width:100%;aspect-ratio:4/3;object-fit:cover}
.apollo-lander{position:absolute;right:-6%;bottom:-10%;width:32%;transform:translateZ(60px);filter:drop-shadow(0 12px 12px rgba(0,0,0,.5));animation:bob 4s ease-in-out infinite}
.apollo-copy h3{font-family:var(--font-d);font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1.2;margin:10px 0;color:#fff}
.apollo-copy p{margin-bottom:10px;color:var(--text)}
.apollo-copy b{color:var(--sun)}

.mcards,.cards{max-width:1150px;margin:56px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
.card{perspective:1100px;height:330px;transition:transform .3s}
.card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.card.flip .card-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 8px 0 var(--shade);overflow:hidden;cursor:pointer;color:var(--ink)}
.front{display:flex;flex-direction:column;background:var(--c,#FFD3A8)}
.front .pic{flex:1;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.7),rgba(255,255,255,0) 65%)}
.front .pic svg,.front .pic img{width:62%;max-height:170px;object-fit:contain;transition:transform .3s;filter:drop-shadow(0 10px 8px rgba(0,0,0,.2))}
.card:hover .front .pic svg,.card:hover .front .pic img{transform:scale(1.08) rotate(-3deg)}
.front .nm{background:#fff;border-top:4px solid var(--ink);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.front .nm b{font-family:var(--font-d);font-weight:400;font-size:26px;line-height:1.15}
.front .nm small{font-size:13px;font-weight:800;color:#555B8A;white-space:nowrap}
.back{transform:rotateY(180deg);background:#fff;padding:20px;display:flex;flex-direction:column;gap:10px}
.back h3{font-family:var(--font-d);font-weight:400;font-size:26px;line-height:1.2}
.back p{font-size:16px;line-height:1.6;flex:1}
.mini{font-size:15px;font-weight:800;padding:6px 12px;border-radius:999px;border:3px solid var(--ink);background:var(--sun);color:var(--ink);display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
.mini.on{background:var(--mint)}

/* station */
.station-pic{position:relative;max-width:1150px;margin:0 auto;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--shade);overflow:hidden;transition:transform .3s ease-out}
.station-pic > img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%}
.grav{position:absolute;right:2.5%;top:5%;width:min(34%,320px);background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:22px;padding:12px;box-shadow:0 6px 0 var(--shade)}
.grav-box{position:relative;height:150px;border-radius:14px;background:linear-gradient(#D3EEFA,#fff);border:3px solid var(--ink);overflow:hidden}
.grav-box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:#C9B48A;border-top:3px solid var(--ink)}
.gi{position:absolute;top:var(--y);left:var(--x);width:var(--sz);height:var(--sz);transition:top .7s cubic-bezier(.5,0,.6,1.4)}
.grav-box[data-mode="space"] .gi{animation:drift var(--d) ease-in-out infinite alternate}
.grav-box[data-mode="earth"] .gi{top:calc(100% - var(--sz) - 10px);animation:none}
@keyframes drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.gi-apple{--x:10%;--y:18%;--sz:34px;--d:3.2s;--dx:12px;--dy:20px;--rot:40deg;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 35% 35%,#FF8A80,#E8483B);border:3px solid var(--ink)}
.gi-pen{--x:38%;--y:40%;--sz:40px;--d:4s;--dx:-10px;--dy:-24px;--rot:-200deg;height:10px!important;border-radius:5px;background:linear-gradient(90deg,var(--sun) 80%,var(--ink) 80%);border:3px solid var(--ink)}
.grav-box[data-mode="earth"] .gi-pen{top:calc(100% - 20px)}
.gi-drop{--x:62%;--y:12%;--sz:28px;--d:2.8s;--dx:-8px;--dy:28px;--rot:20deg;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#5BC0EB 60%);border:3px solid var(--ink)}
.gi-ball{--x:78%;--y:46%;--sz:36px;--d:3.6s;--dx:-14px;--dy:-30px;--rot:120deg;border-radius:50%;background:conic-gradient(var(--purple) 0 25%,var(--sun) 0 50%,var(--purple) 0 75%,var(--sun) 0);border:3px solid var(--ink)}
.grav-box[data-mode="earth"] .gi-drop{border-radius:50%/30%;height:16px;top:calc(100% - 26px)}
.grav-btns{display:flex;gap:8px;justify-content:center;margin-top:10px}
.grav-btns .mini{align-self:auto}

.tiangong{max-width:1150px;margin:64px auto 0;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.tg-pic{perspective:900px;display:grid;place-items:center;padding:20px}
.tg-img{width:100%;animation:tg 10s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(120,180,255,.5))}
@keyframes tg{0%,100%{transform:rotateY(-18deg) rotateX(8deg) rotate(-4deg) translateY(0)}50%{transform:rotateY(18deg) rotateX(-6deg) rotate(4deg) translateY(-16px)}}
.tg-copy h3{font-family:var(--font-d);font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1.2;margin:10px 0;color:#fff}
.tg-copy p{margin-bottom:10px}
.tg-copy b{color:var(--sun)}
.tg-mods{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.tg-mod{font-size:15px;font-weight:700;padding:6px 14px;border-radius:16px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:0 4px 0 var(--shade)}
.tg-mod b{font-family:var(--font-d);font-weight:400;font-size:22px;margin-right:2px;color:var(--ink)}
.tg-mod.on{background:var(--sun)}
.tg-out{background:rgba(255,255,255,.08);border:3px dashed rgba(255,255,255,.4);border-radius:16px;padding:10px 14px;font-size:16px;min-height:4.4em}

/* games */
.game-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.gtab{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:22px;padding:10px 20px;border:3px solid var(--ink);border-radius:20px;background:var(--cream);color:var(--ink);box-shadow:0 5px 0 var(--shade);transition:transform .15s}
.gtab.on{background:var(--pink);color:#fff;transform:translateY(3px);box-shadow:0 2px 0 var(--shade)}
.gicon{width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);background:var(--sun)}
.gi-build{background:var(--red);border-radius:50% 50% 8px 8px}.gi-stars{background:var(--night);box-shadow:inset 0 0 0 5px #fff}.gi-mem{background:var(--sky)}
.game{display:none;max-width:920px;margin:0 auto;background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 10px 0 var(--shade);padding:24px}
.game.on{display:block;animation:pop .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.92) rotateX(20deg)}to{transform:none}}
.g-tip{font-size:19px;font-weight:800;text-align:center;margin-bottom:16px}
.g-mini{text-align:center;font-size:15px;color:#555B8A;font-weight:700;margin-top:14px}
.g-row{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.score{font-family:var(--font-d);font-size:22px;text-align:center}
.score b{color:#C2410C;font-size:28px;font-weight:800;font-family:var(--font-b)}

/* order game */
.order-track{position:relative;display:grid;grid-template-columns:1.3fr repeat(8,1fr);gap:6px;align-items:center;padding:14px 10px;border-radius:20px;background:var(--night);border:3px solid var(--ink)}
.order-track .osun{width:100%;filter:drop-shadow(0 0 14px rgba(255,180,40,.8))}
.slot{aspect-ratio:1;border-radius:50%;border:3px dashed rgba(255,255,255,.5);display:grid;place-items:center;position:relative;font-family:var(--font-d);color:rgba(255,255,255,.6);font-size:18px}
.slot img{width:92%;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.slot.full{border-style:solid;border-color:var(--sun)}
.slot small{position:absolute;top:100%;font-size:12px;color:#fff;white-space:nowrap;font-family:var(--font-b);font-weight:800;margin-top:2px}
.order-track{padding-bottom:28px}
.order-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;min-height:96px}
.obtn{width:88px;padding:6px;border-radius:20px;border:3px solid var(--ink);background:#fff;box-shadow:0 5px 0 var(--shade);display:flex;flex-direction:column;align-items:center;font-family:var(--font-d);font-size:17px;transition:transform .15s}
.obtn img{width:56px;height:56px;object-fit:contain}
.obtn:hover{transform:translateY(-3px) rotate(-3deg)}
.obtn.no{animation:no .45s}
.obtn.gone{transform:scale(0);opacity:0;pointer-events:none;transition:transform .3s,opacity .3s}
@keyframes no{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}

/* build game */
.build{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end}
.pad{position:relative;height:440px;border-radius:20px;border:3px solid var(--ink);background:linear-gradient(#0B1440,#2B3C93 70%,#5BC0EB);overflow:hidden}
.pad .stars{opacity:.8}
.stack{position:absolute;left:50%;bottom:44px;width:120px;margin-left:-60px;display:flex;flex-direction:column-reverse;align-items:center;z-index:2}
.stack svg{display:block;width:120px;animation:drop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes drop{from{transform:translateY(-120px);opacity:0}to{transform:none;opacity:1}}
.stack .flame{position:absolute;top:100%;left:50%;width:46px;height:70px;margin-left:-23px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:radial-gradient(circle at 50% 25%,#fff,#FFE27A 30%,#FF8A3D 60%,rgba(232,72,59,0) 72%);opacity:0;transform-origin:50% 0}
.stack.fire .flame{opacity:1;animation:flick .12s ease-in-out infinite alternate}
@keyframes flick{from{transform:scaleY(.85)}to{transform:scaleY(1.2)}}
.stack.go{animation:liftoff 2.8s cubic-bezier(.6,0,.8,.4) forwards}
@keyframes liftoff{0%{transform:none}10%{transform:translateX(-2px)}14%{transform:translateX(2px)}100%{transform:translateY(-560px)}}
.pad-base{position:absolute;left:0;right:0;bottom:0;height:44px;background:repeating-linear-gradient(90deg,#8A8FB0 0 24px,#6E7396 24px 48px);border-top:3px solid var(--ink)}
.count{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-d);font-size:140px;color:var(--sun);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);pointer-events:none;z-index:3}
.count span{animation:countIn .9s ease-out both}
@keyframes countIn{from{transform:scale(2.2);opacity:0}30%{opacity:1}to{transform:scale(.8);opacity:.2}}
.parts{display:grid;gap:12px}
.part{display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:20px;border:3px solid var(--ink);background:#fff;box-shadow:0 5px 0 var(--shade);font-family:var(--font-d);font-size:22px;text-align:left;transition:transform .15s}
.part svg{width:64px;height:48px;flex:none}
.part:hover{transform:translateX(4px)}
.part.used{opacity:.3;pointer-events:none;box-shadow:none}
.part.no{animation:no .45s}
.part .n{margin-left:auto;font-size:15px;font-family:var(--font-b);font-weight:800;color:#555B8A}

/* constellation */
.con-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.con-tab{font-family:var(--font-d);font-size:19px;padding:6px 16px;border-radius:999px;border:3px solid var(--ink);background:#fff}
.con-tab.on{background:var(--ink);color:#fff}
.con-tab.done::after{content:" ✓"}
.sky{position:relative;max-width:640px;margin:0 auto;aspect-ratio:4/3;border-radius:22px;border:4px solid var(--ink);background:radial-gradient(ellipse at 50% 30%,#22348C,#060B2A 80%);overflow:hidden}
.sky svg{position:absolute;inset:0;width:100%;height:100%}
.sky .ln{stroke:var(--sun);stroke-width:.9;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;animation:line .5s ease-out forwards;filter:drop-shadow(0 0 1px #fff)}
@keyframes line{to{stroke-dashoffset:0}}
.sky .st{cursor:pointer}
.sky .st .core{fill:#fff;transition:r .2s}
.sky .st .glow{fill:rgba(255,255,255,.18)}
.sky .st.next .glow{fill:rgba(255,200,61,.45);animation:pulse 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sky .st.lit .core{fill:var(--sun)}
.sky .st text{font-size:4px;font-weight:800;fill:#fff;font-family:var(--font-b);pointer-events:none}
@keyframes pulse{50%{transform:scale(1.4)}}
.sky-done{position:absolute;left:4%;right:4%;bottom:4%;background:rgba(255,247,232,.95);border:3px solid var(--ink);border-radius:16px;padding:8px 14px;font-size:16px;line-height:1.5;transform:translateY(160%);transition:transform .5s cubic-bezier(.2,1.5,.4,1)}
.sky-done b{font-family:var(--font-d);font-weight:400;font-size:22px}
.sky-done.show{transform:none}

/* memory */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:600px;margin:0 auto}
.mcard{aspect-ratio:3/4;perspective:700px}
.mcard .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.mcard.open .in,.mcard.done .in{transform:rotateY(180deg)}
.mcard .f,.mcard .b{position:absolute;inset:0;border:4px solid var(--ink);border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.mcard .f{background:radial-gradient(circle at 30% 30%,#fff 1.5px,transparent 2px) 0 0/22px 22px,radial-gradient(circle at 70% 70%,#cfd8ff 1px,transparent 1.5px) 0 0/18px 18px,var(--deep)}
.mcard .f::after{content:"?";font-family:var(--font-d);font-size:44px;color:var(--sun);-webkit-text-stroke:2px var(--ink)}
.mcard .b{transform:rotateY(180deg);background:var(--night);padding:10px}
.mcard .b img{width:100%;height:100%;min-height:0;object-fit:contain}
.mcard.done .b{background:#3B2F8A;box-shadow:inset 0 0 0 4px var(--sun);animation:pop .5s}

.confetti{position:fixed;width:12px;height:12px;top:0;z-index:99;pointer-events:none;border-radius:50%}

.foot{background:var(--ink);color:#fff;text-align:center;padding:72px 20px 40px;position:relative;border-top:4px solid var(--purple)}
.foot-astro{width:120px;margin:-130px auto 10px;animation:float 7s ease-in-out infinite}
.foot p{font-family:var(--font-d);font-size:22px}
.foot .small{font-family:var(--font-b);font-size:14px;opacity:.85;max-width:560px;margin:8px auto 0;line-height:1.7}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,200px);visibility:hidden;z-index:80;background:var(--sun);color:var(--ink);border:3px solid var(--ink);font-family:var(--font-d);font-size:22px;padding:8px 22px;border-radius:999px;transition:transform .4s cubic-bezier(.2,1.5,.4,1);white-space:nowrap}
.toast.show{transform:translate(-50%,0);visibility:visible}

.reveal{opacity:0;transform:translateY(40px) rotateX(12deg);transition:opacity .8s,transform .8s cubic-bezier(.2,1,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .nav{display:none}
  .topbar{padding-right:8px}
  .sound-toggle{margin-left:auto}
  .pcard{grid-template-columns:1fr;padding:18px;gap:16px}
  .pc-art{aspect-ratio:16/10}
  .pc-art img{width:auto;height:78%}
  .pc-art.wide img{width:86%;height:auto}
  .compare,.phase,.apollo,.tiangong{grid-template-columns:1fr}
  .phase-orbit{max-width:520px;width:100%;margin:0 auto}
  .grav{position:relative;inset:auto;width:auto;border:0;border-top:4px solid var(--ink);border-radius:0;box-shadow:none}
  .station-pic > img{aspect-ratio:4/3}
  .build{grid-template-columns:1fr}
  .parts{grid-template-columns:1fr 1fr}
  .apollo-lander{right:-2%;width:28%}
  .tg-pic{order:-1}
}
@media (max-width:560px){
  body{font-size:17px}
  .brand{font-size:20px}
  .l-saturn{width:40vw;left:-6%;top:12%}.l-moon{width:22vw;top:14%;right:2%}
  .l-astro{width:28vw;left:2%;bottom:7%}.l-rocket{width:20vw;right:8%;bottom:6%}.l-alien{width:20vw;top:76%}
  .hero-copy{padding-bottom:36vh}
  .hero-sub{font-size:19px}
  .btn-big{font-size:22px;padding:12px 24px}
  .hero-kicker{font-size:19px}
  .pbtn .lbl{display:none}
  .orrery{height:calc(var(--S)*.62)}
  .pchip{font-size:16px;padding:3px 10px 3px 4px}
  .pchip img{width:24px;height:24px}
  .cmp-card{padding:18px}
  .size-row{min-height:150px}
  .order-track{gap:3px;padding:10px 6px 26px}
  .slot{border-width:2px;font-size:14px}
  .slot small{font-size:10px}
  .obtn{width:72px;font-size:15px;padding:4px}
  .obtn img{width:44px;height:44px}
  .order-pool{gap:8px}
  .game{padding:18px 12px}
  .mem-grid{gap:8px}
  .pad{height:380px}
  .part{font-size:17px;padding:6px 8px;gap:6px}
  .part svg{width:44px;height:36px}
  .part .n{display:none}
  .count{font-size:110px}
  .card{height:310px}
  .gtab{font-size:19px;padding:8px 14px}
  .phase-view h3{font-size:34px}
  .po-tip{font-size:14px}
  .sunbeam span{font-size:16px}
  .toast{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .stars i{opacity:.8}
}