:root{--bg:#02050b;--panel:#0a1322;--line:#233a59;--text:#eef7ff;--muted:#9fb2c9;--cyan:#45c8ff;--purple:#a84cff;--gold:#ffd35a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#02050b;color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.space-app{min-height:100vh;overflow-x:hidden}.stars{position:absolute;inset:-8%;background-image:radial-gradient(#fff 1.2px,transparent 1.2px),radial-gradient(#64c9ff 1px,transparent 1px);background-size:92px 92px,147px 147px;background-position:0 0,38px 58px;opacity:.48;pointer-events:none}.stars-back{animation:starDrift 38s linear infinite}.stars-front{background-size:177px 177px,231px 231px;opacity:.3;animation:starDrift 22s linear infinite reverse}@keyframes starDrift{to{transform:translate3d(-55px,24px,0)}}
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#010208;transition:.65s}.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}.intro-card{position:relative;z-index:2;width:min(650px,91vw);padding:42px;border:1px solid #294368;border-radius:28px;background:rgba(6,12,24,.9);text-align:center;box-shadow:0 35px 110px #000}.intro-card h1{font-size:clamp(42px,7vw,76px);margin:8px 0 14px}.eyebrow{font-size:11px;letter-spacing:.18em;color:#b98aff;font-weight:900}.primary,.ghost{border:1px solid #315075;border-radius:14px;padding:12px 18px;font-weight:850;cursor:pointer}.primary{background:linear-gradient(90deg,var(--purple),var(--cyan));color:#fff}.ghost{background:#091323;color:#d9eaff}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 4vw;border-bottom:1px solid #17243a;background:#040913}.topbar h2{margin:3px 0 0}.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.scene{position:relative;height:min(68vw,720px);min-height:540px;overflow:hidden;background:radial-gradient(circle at 8% 50%,rgba(255,154,26,.12),transparent 28%),linear-gradient(#020713,#01030a);perspective:1200px}.camera{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.25s cubic-bezier(.2,.8,.2,1)}.camera.zoomed{transform:perspective(1100px) rotateX(3deg) scale(1.28)}.camera.preview-zoom{transform:perspective(1100px) rotateX(2deg) scale(1.08)}.camera.traveling-camera{transform:perspective(1100px) rotateX(7deg) rotateZ(-1deg) scale(1.04)}.solar-stage{position:absolute;inset:0;min-width:900px;transform-origin:50% 50%;transform-style:preserve-3d;transition:transform-origin 1s ease}.sun-visual{position:absolute;left:-7%;top:50%;width:18%;aspect-ratio:1;border-radius:50%;transform:translateY(-50%) translateZ(30px);background:radial-gradient(circle at 64% 40%,#fffbd1 0 6%,#ffe259 18%,#ffb11b 52%,#ef6910 76%,#d64100 100%);box-shadow:0 0 35px #ffb11b,0 0 90px rgba(255,138,0,.52);cursor:pointer;z-index:4;animation:sunPulse 5s ease-in-out infinite}.sun-glow{position:absolute;inset:-9%;border-radius:50%;border:2px solid rgba(255,187,48,.24);animation:halo 3.6s ease-in-out infinite}@keyframes sunPulse{50%{filter:brightness(1.13) saturate(1.12)}}@keyframes halo{50%{transform:scale(1.06);opacity:.45}}
.body-label{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:900;color:#fff;text-shadow:0 2px 7px #000}.sun-visual .body-label{left:78%;top:48%;transform:none;font-size:13px}.orbit-arc{position:absolute;left:-10%;top:50%;transform:translateY(-50%) rotateX(62deg);transform-origin:center;border:1px solid rgba(207,224,245,.25);border-left-color:transparent;border-radius:50%;height:118%;box-shadow:0 0 1px rgba(116,193,255,.2)}.arc1{width:29%}.arc2{width:41%;height:125%}.arc3{width:53%;height:132%}.arc4{width:65%;height:139%}.arc5{width:78%;height:146%}.arc6{width:91%;height:153%}.arc7{width:105%;height:160%}.arc8{width:119%;height:167%}
.planet{position:absolute;z-index:6;transform:translate(-50%,-50%) translateZ(20px);cursor:pointer;transition:transform .35s,filter .35s}.planet:hover,.planet.selected{transform:translate(-50%,-50%) translateZ(48px) scale(1.12);filter:drop-shadow(0 0 14px rgba(91,202,255,.8))}.planet.active{filter:drop-shadow(0 0 22px rgba(91,202,255,.95))}.planet.active .sphere{outline:3px solid var(--cyan);outline-offset:6px}.sphere{position:relative;display:block;border-radius:50%;box-shadow:inset -12px -10px 18px rgba(0,0,0,.38),inset 6px 5px 11px rgba(255,255,255,.18),0 10px 25px rgba(0,0,0,.5);overflow:hidden;animation:planetSpin 18s linear infinite;transform-origin:center}.sphere:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,rgba(255,255,255,.26),transparent 36%,transparent 63%,rgba(0,0,0,.32));pointer-events:none}@keyframes planetSpin{to{transform:rotate(360deg)}}.mercury .sphere{animation-duration:26s}.venus .sphere{animation-duration:32s}.earth .sphere{animation-duration:16s}.mars .sphere{animation-duration:18s}.jupiter .sphere{animation-duration:10s}.saturn .sphere{animation-duration:12s}.uranus .sphere{animation-duration:20s}.neptune .sphere{animation-duration:17s}.mercury{left:12.5%;top:48%}.mercury .sphere{width:22px;height:22px;background:linear-gradient(145deg,#d5d0c9,#827f7c)}.venus{left:19%;top:55%}.venus .sphere{width:36px;height:36px;background:linear-gradient(135deg,#f0b56a,#b86c2f)}.earth{left:27%;top:43%}.earth .sphere{width:42px;height:42px;background:radial-gradient(circle at 62% 38%,#72d87a 0 9%,transparent 10%),radial-gradient(circle at 35% 63%,#5bcf77 0 12%,transparent 13%),linear-gradient(145deg,#48d2ff,#1767c9)}.mars{left:36%;top:56%}.mars .sphere{width:30px;height:30px;background:linear-gradient(135deg,#ef8b5f,#a83e27)}.jupiter{left:48%;top:40%}.jupiter .sphere{width:76px;height:76px;background:repeating-linear-gradient(0deg,#d4aa7c 0 8px,#9d7355 8px 14px,#eee0c2 14px 20px)}.saturn{left:63%;top:54%}.saturn .sphere{width:62px;height:62px;background:linear-gradient(#dec798,#b49a6b)}.saturn .ring{position:absolute;width:105px;height:26px;border:5px solid rgba(228,204,153,.75);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-13deg);z-index:-1;animation:ringTurn 9s ease-in-out infinite}@keyframes ringTurn{50%{transform:translate(-50%,-50%) rotate(-21deg) scaleX(.92)}}.uranus{left:78%;top:42%}.uranus .sphere{width:52px;height:52px;background:linear-gradient(145deg,#a7f0ef,#54b9cf)}.neptune{left:91%;top:55%}.neptune .sphere{width:48px;height:48px;background:linear-gradient(145deg,#6ca5ff,#214dad)}
.rocket{position:absolute;z-index:20;left:27%;top:64%;font-size:43px;transform:translate(-50%,-50%) rotate(-44deg);filter:drop-shadow(0 0 16px #49c9ff);will-change:left,top,transform}.rocket-flame{position:absolute;width:13px;height:28px;left:50%;top:72%;transform:translateX(-50%) rotate(8deg);background:linear-gradient(#fff6a8,#ff9b21,#ff3c18,transparent);border-radius:50%;filter:blur(1px);opacity:.7;animation:flame .16s alternate infinite;z-index:-1}.rocket.traveling .rocket-flame{height:47px;opacity:1}@keyframes flame{to{transform:translateX(-50%) rotate(8deg) scaleY(.72)}}
.shooting-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}.shooting-star{position:absolute;width:var(--len);height:2px;background:linear-gradient(90deg,transparent,rgba(122,211,255,.4),#fff);transform:rotate(-26deg);filter:drop-shadow(0 0 6px #79d6ff);animation:shoot var(--dur) linear forwards}@keyframes shoot{0%{transform:translate3d(0,0,0) rotate(-26deg);opacity:0}10%{opacity:1}100%{transform:translate3d(430px,210px,0) rotate(-26deg);opacity:0}}
.travel-hud{position:absolute;left:50%;bottom:68px;transform:translateX(-50%);z-index:31;width:min(520px,86vw);padding:10px 14px;border:1px solid #23456b;border-radius:16px;background:rgba(2,8,20,.78);backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.35)}.travel-route{display:flex;justify-content:center;gap:10px;font-size:12px;color:#dff4ff}.progress-track{height:7px;margin:8px 0;background:#0b1728;border-radius:999px;overflow:hidden;border:1px solid #1d3855}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#8f4dff,#41d5ff,#ffd45a);border-radius:inherit;transition:width .08s linear}.distance-row{display:flex;justify-content:space-between;gap:10px;color:#8fb1d2;font-size:11px}.distance-row strong{color:#d9f5ff}.travel-message{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;padding:10px 16px;border:1px solid #27466d;border-radius:999px;background:rgba(2,8,20,.86);color:#a8dfff;font-weight:800;text-align:center}
.controls{display:flex;justify-content:center;gap:12px;padding:18px;flex-wrap:wrap}.facts-panel{width:min(1100px,92vw);margin:0 auto 24px;padding:24px;border-radius:24px;border:1px solid #263755;background:linear-gradient(145deg,#0b1425,#070d19);display:grid;grid-template-columns:100px 1fr;gap:22px}.planet-badge{font-size:68px;width:100px;height:100px;display:grid;place-items:center;border-radius:24px;background:#111d32}.facts-panel h2{font-size:42px;margin:3px 0 8px}.facts-panel p{color:var(--muted);line-height:1.6}.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.fact-grid article{padding:13px;border:1px solid #21324d;border-radius:14px;background:#08101f}.fact-grid article.distance-highlight{border-color:#365f83;background:linear-gradient(145deg,#0b1b30,#0b1424)}.fact-grid span{display:block;font-size:11px;color:#7e94b1;margin-bottom:6px}.fact-grid b{font-size:15px}.distance-highlight b{color:#68d6ff;font-size:17px}.curiosity{padding:14px 16px;border-left:3px solid var(--purple);background:#0d1429;border-radius:12px;color:#d9e6f5}.planet-strip{width:min(1100px,92vw);margin:0 auto 34px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}.planet-chip{min-width:0;padding:10px 5px;border-radius:12px;border:1px solid #233855;background:#091222;color:#cad8e8;cursor:pointer;font-size:12px}.planet-chip.active{border-color:#52cfff;color:#fff;background:#10213a;box-shadow:0 0 0 1px rgba(82,207,255,.2)}
@media(max-width:900px){.scene{height:590px;overflow-x:auto;overflow-y:hidden}.camera,.solar-stage{width:1000px;min-width:1000px}.topbar{align-items:flex-start}.facts-panel{grid-template-columns:80px 1fr}.planet-badge{width:80px;height:80px;font-size:52px}.planet-strip{display:flex;overflow:auto}.planet-chip{min-width:112px}.fact-grid{grid-template-columns:repeat(2,1fr)}.camera.zoomed{transform:perspective(1000px) rotateX(2deg) scale(1.16)}}
@media(max-width:650px){.topbar{padding:15px;flex-direction:column}.top-actions{width:100%;justify-content:flex-start}.scene{min-height:520px}.facts-panel{grid-template-columns:1fr}.fact-grid{grid-template-columns:1fr 1fr}.facts-panel h2{font-size:34px}.travel-message{width:88%}.travel-hud{bottom:78px}.controls{position:sticky;bottom:0;z-index:40;background:rgba(2,5,11,.94)}.primary,.ghost{padding:10px 13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.shooting-layer{display:none}}
/* Managed planet images */.sun-visual,.sphere{background-position:center!important;background-repeat:no-repeat!important}.planet-badge img{max-width:100%;max-height:100%;object-fit:contain;display:block}.planet-badge:has(img){padding:8px}