/* Uses the same design tokens and navigation as the site index. */
:root{--muted:var(--sub)}*{box-sizing:border-box}body{font-size:15px}
main a{color:var(--accent);text-decoration:none}
main a:hover{text-decoration:underline}
main{max-width:1040px;margin:auto;padding:40px 24px 48px}
.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}
.eyebrow{font-size:10px;letter-spacing:.19em;color:var(--accent);margin:0 0 12px;font-weight:650}
h1{font-size:clamp(32px,5vw,48px);letter-spacing:-.02em;font-weight:700;line-height:1.08;margin:0}
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:14px;color:var(--muted);margin:0 2px 3px;text-align:right}
.observatory{position:relative;height:clamp(390px,53vw,630px);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#060a12}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}
.scene-top,.scene-bottom{position:absolute;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;z-index:2;pointer-events:none;font:10px var(--mono);letter-spacing:.09em;color:var(--muted)}
.scene-top{top:20px}
.scene-top i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px}
.scene-bottom{bottom:16px;gap:8px}
.scene-bottom b{padding:0 6px}
.scene-bottom button{pointer-events:auto;background:#0c1421d9}
.scene-bottom button:first-child,.scene-bottom button:nth-child(2){width:40px;padding:0;font-size:20px}
.transport{display:flex;align-items:center;gap:24px;padding:18px 0;flex-wrap:wrap}
main button{font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:9px 14px;min-height:42px;cursor:pointer}
main button:hover{border-color:var(--accent);background:var(--panel2)}
main button:focus-visible,main a:focus-visible,canvas:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.primary{background:var(--accent);color:var(--bg);min-width:110px;border-color:var(--accent)}
.primary:hover{background:var(--accent);filter:brightness(1.1)}
.speed{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}
.speed input{width:110px;accent-color:var(--accent)}output{min-width:92px;font:11px var(--mono);color:var(--ink)}
.toggle{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;min-height:42px;cursor:pointer}
.toggle input{accent-color:var(--accent);width:16px;height:16px}
#top{margin-left:auto;font-size:12px}
#planets{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;padding:10px 0 24px}
#planets button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;padding:10px 5px}
#planets button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-dim)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--planet);flex-shrink:0;box-shadow:0 0 12px color-mix(in srgb,var(--planet),transparent 65%)}
.details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
.details h2{font-size:28px;letter-spacing:-.035em;font-weight:500;margin:0 0 8px}
.details p:not(.eyebrow){color:var(--muted);font-size:13px;max-width:56ch;margin:0}
.details .eyebrow{margin-bottom:7px}dl{display:flex;align-items:center;justify-content:space-around;gap:24px;margin:0}dt{font-size:10px;color:var(--muted);letter-spacing:.12em;margin-bottom:8px}dd{font-size:24px;margin:0;letter-spacing:-.04em}
footer{display:flex;justify-content:space-between;gap:30px;color:var(--sub);font-size:11px;padding-top:18px}
footer p{max-width:85ch;margin:0}
footer a{white-space:nowrap}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.planet-label{position:absolute;color:#b1bfd0;font:10px var(--mono);white-space:nowrap;text-shadow:0 1px 5px #000;padding-left:7px;border-left:1px solid #738697}
.planet-label.selected{color:var(--accent);border-color:var(--accent)}
#error{position:absolute;inset:60px 20px;background:#101925ed;border:1px solid var(--line);border-radius:12px;padding:30px;z-index:3;align-content:center;text-align:center}
#error[hidden]{display:none}
@media(max-width:760px){main{padding:26px 16px 20px}
.intro{margin-bottom:22px}
.lede{display:none}
.observatory{height:470px}
.scene-top,.scene-bottom{left:14px;right:14px}
.scene-bottom{align-items:end}
.scene-bottom>span{max-width:120px;line-height:1.8;font-size:8px}
.scene-bottom button{font-size:11px;padding:8px}
.transport{gap:10px 16px}
.speed{flex:1;gap:8px}
.speed input{width:70px}
#planets{grid-template-columns:repeat(3,1fr);gap:7px}
.details{grid-template-columns:1fr;gap:23px}dl{justify-content:start;gap:50px}dd{font-size:22px}
footer{display:block}
footer a{display:inline-block;margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}