@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#070b10;--text:#edf1f5;--muted:#9aa9b8;--line:#ffffff18;--accent:#e8bd7c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:#101820c9;border-radius:8px;min-height:44px;transition:background .2s,border-color .2s}button:hover{background:#24303b;border-color:#ffffff50}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}#app{height:100dvh;min-height:480px;overflow:hidden;position:relative}#space,#labels{position:absolute;inset:0}#space canvas{display:block;touch-action:none}#labels{pointer-events:none;overflow:hidden}.planet-label{position:absolute;left:0;top:0;pointer-events:auto;border:0;background:transparent;min-height:30px;font-size:12px;color:#aab8c5;white-space:nowrap;padding:6px 9px;text-shadow:0 1px 6px #000}.planet-label:before{content:'';display:inline-block;width:4px;height:4px;border:1px solid currentColor;border-radius:50%;margin-right:7px}.planet-label:hover{color:white;background:#15202ccc}header{position:absolute;top:0;left:0;right:0;padding:28px 34px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;background:linear-gradient(#070b10b0,transparent)}header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font:500 24px 'Space Grotesk',sans-serif;letter-spacing:5px}.brand svg{width:40px;stroke:var(--accent);fill:none}.brand svg circle{fill:var(--accent);stroke:none}.brand small{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:2.2px;color:var(--muted);margin-top:5px}.top-actions{display:flex;gap:10px}.top-actions button{padding:0 15px;font-size:14px}#fullscreen{font-size:25px;width:46px;padding:0}.scene-caption{position:absolute;left:40px;top:143px;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted);font-weight:500}h1{font:400 clamp(32px,4.7vw,66px) 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:10px 0}h1+p{color:var(--muted);margin:0;font-size:15px}#info{position:absolute;right:34px;top:142px;width:300px;padding:24px;background:linear-gradient(140deg,#14202acc,#0c121bd9);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(16px);max-height:calc(100dvh - 340px);overflow-y:auto;scrollbar-width:thin}.info-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.info-head .eyebrow{font-size:10px;letter-spacing:1.7px}.info-head button{min-height:28px;width:28px;border:0;background:none;font-size:24px;color:var(--muted)}h2{font:400 36px 'Space Grotesk',sans-serif;letter-spacing:-1px;margin:10px 0 14px}#description{font-size:14px;color:#b7c2cd;line-height:1.65;margin:0 0 22px}dl{margin:0}dl>div{display:flex;justify-content:space-between;gap:8px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}dt{color:var(--muted)}dd{margin:0;text-align:right}.distance{padding-top:22px}.distance>span{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted)}.distance strong{font:400 24px 'Space Grotesk',sans-serif;display:block;margin-top:8px}.distance-track{height:2px;margin-top:15px;background:linear-gradient(90deg,var(--accent),#bd98674d,#ffffff15);position:relative}.distance-track i{position:absolute;left:20%;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}.info-note{font-size:12px;color:var(--muted);line-height:1.6;margin:17px 0}.text-button{border:0;background:none;color:var(--accent);font-size:14px;padding:0;min-height:32px}.view-controls{position:absolute;left:34px;bottom:210px;display:flex;flex-direction:column;gap:7px}.view-controls button{width:42px;font-size:23px}footer{position:absolute;left:34px;right:34px;bottom:max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:linear-gradient(transparent,#070b10 30%)}.timeline{display:flex;align-items:center;gap:34px;padding:18px 0}.clock{display:flex;align-items:center;gap:15px}.clock .eyebrow{font-size:10px;letter-spacing:1.5px}.clock strong{font:400 14px 'Space Grotesk',sans-serif;min-width:85px;font-variant-numeric:tabular-nums}.playback{display:flex;align-items:center;gap:12px}.playback>label{font-size:14px;color:var(--muted)}#play{width:42px;font-size:18px;border-color:#d9b27f66;color:var(--accent)}select{height:40px;border:0;background:#151c26;border-radius:6px;padding:0 10px;font-size:14px}.toggles{margin-left:auto;display:flex;gap:20px;font-size:14px;color:#bbc7d2}.toggles label{display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}input{accent-color:var(--accent);width:15px;height:15px}#planet-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;padding:3px 0 10px}#planet-nav button{flex:1;min-width:72px;min-height:62px;background:transparent;border-color:transparent;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;font-size:12px;color:var(--muted);border-radius:8px}#planet-nav button[aria-pressed=true]{background:#1a26328a;border:1px solid #88b0c544;color:white}#planet-nav button:hover{background:#1a2632}.nav-dot{width:12px;height:12px;border-radius:50%;background:var(--planet);box-shadow:inset -3px -2px 4px #0007}.bottom-line{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#83929f;padding-top:5px}.bottom-line>span:last-child{letter-spacing:1.1px;font-size:10px}dialog{background:#101922;color:var(--text);border:1px solid #ffffff25;border-radius:18px;padding:35px;max-width:540px;width:calc(100% - 28px);max-height:85dvh;line-height:1.7}dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}dialog h2{margin-top:15px}dialog p{color:#bdc9d4;font-size:15px}.dialog-close{float:right;width:40px;font-size:24px}a{color:var(--accent)}.credits{font-size:12px!important}#loading,#error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:15px;background:#070b10;z-index:10;font-size:15px}#error{padding:30px;text-align:center;flex-direction:column}#error[hidden],#loading[hidden]{display:none}.loader{width:20px;height:20px;border:1px solid #ffffff30;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1000px){.clock{display:block}.clock strong{display:block;margin-top:5px}.timeline{gap:20px}.scene-caption{left:25px}#info{width:260px;right:20px;padding:20px}.toggles{gap:12px}.gesture{max-width:45%}}
@media(max-width:680px){header{padding:20px}.brand{font-size:20px;gap:8px}.brand svg{width:32px}.brand small{font-size:8px;letter-spacing:1.4px}.top-actions{gap:6px}.top-actions button{padding:0 10px;font-size:12px}.scene-caption{left:22px;top:105px}.scene-caption h1{font-size:34px;letter-spacing:-1px;margin:7px 0}.scene-caption p{font-size:13px}.scene-caption .eyebrow{font-size:9px}.view-controls{left:auto;right:16px;bottom:255px;gap:5px}.view-controls button{width:40px;min-height:40px}#info{top:auto;bottom:214px;left:14px;right:14px;width:auto;max-height:37dvh;padding:16px 20px;z-index:3}#info h2{font-size:25px;margin:3px 0 7px}#info #description{font-size:14px;line-height:1.5;margin-bottom:12px}#info dl{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}#info dl>div{font-size:12px;padding:7px 0;display:block}#info dd{text-align:left;margin-top:3px;color:white}#info .distance{padding-top:10px}#info .distance strong{font-size:20px}#info .distance-track,#info .info-note{display:none}#info .text-button{margin-top:6px}footer{left:16px;right:16px;bottom:max(10px,env(safe-area-inset-bottom))}.timeline{flex-wrap:wrap;gap:8px 15px;padding:10px 0 5px}.clock{display:block;margin-right:auto}.clock .eyebrow{font-size:8px}.clock strong{font-size:13px}.playback{gap:7px}.playback label{display:none}.toggles{width:100%;margin:4px 0 0;font-size:12px;gap:18px}#planet-nav{padding-bottom:5px}#planet-nav button{min-width:64px;min-height:56px;font-size:11px;padding:8px 4px}.bottom-line .gesture{display:none}.bottom-line>span:last-child{font-size:8px;letter-spacing:.7px}dialog{padding:24px}dialog h2{font-size:28px}dialog p{font-size:14px}}
@media(max-height:650px) and (min-width:681px){#info{top:100px;max-height:calc(100dvh - 280px)}.scene-caption{top:110px}.view-controls{bottom:190px}.timeline{padding:10px 0}}