:root {
  --bg: #02060c;
  --ink: #f7f4ed;
  --muted: #aeb8c5;
  --gold: #f4b743;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, Segoe UI, system-ui, sans-serif; }
button { font: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; min-height: 78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 18px clamp(20px,4vw,64px); background: linear-gradient(#02060ced, transparent); }
.brand { color: var(--ink); text-decoration:none; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(1.05rem,2vw,1.8rem); }
.brand small { display:block; margin-top:6px; color:var(--muted); font-size:.62rem; letter-spacing:.16em; font-weight:400; }
.motion-toggle { border:1px solid #73809166; border-radius:999px; padding:10px 16px; color:var(--ink); background:#07111dcc; cursor:pointer; }
.motion-toggle:hover, .motion-toggle:focus-visible { border-color:var(--gold); }
.hero { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background: radial-gradient(circle at 52% 50%, #10213a 0, #050b14 38%, #010307 78%); }
.starfield, .starfield::before, .starfield::after { content:""; position:absolute; inset:-20%; pointer-events:none; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.35px), radial-gradient(circle, #e9bb72 0 1px, transparent 1.2px); background-size:83px 83px, 137px 137px; background-position:12px 25px, 63px 18px; opacity:.48; }
.starfield::before { transform:rotate(17deg) scale(1.1); opacity:.4; }
.starfield::after { transform:rotate(-11deg) scale(1.25); opacity:.25; }
.system { position:absolute; left:56%; top:52%; width:min(1460px, 92vw); aspect-ratio:1.85; transform:translate(-50%,-50%); }
.sun { position:absolute; left:50%; top:50%; width:clamp(82px,9vw,152px); aspect-ratio:1; transform:translate(-50%,-50%); border:0; border-radius:50%; cursor:pointer; z-index:20; background:transparent; color:var(--ink); }
.sun__surface { position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 36% 32%, #fff9b8 0 4%, #ffd052 19%, #ff941f 55%, #c6460c 100%); box-shadow:0 0 25px #ffb331,0 0 70px #ff7f1caa,0 0 140px #ff5a0066; animation:sunPulse 4s ease-in-out infinite; }
.label { position:absolute; left:50%; top:calc(100% + 9px); transform:translateX(-50%); padding:3px 6px; color:#fff; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(.5rem,.65vw,.7rem); white-space:nowrap; text-shadow:0 2px 5px #000; pointer-events:none; }
.orbit { --w:30%; --h:34%; --duration:48s; --phase:.1; position:absolute; left:50%; top:50%; width:var(--w); height:var(--h); transform:translate(-50%,-50%); border:1px solid #acb9c322; border-radius:50%; }
.orbiter { position:absolute; inset:0; border-radius:50%; animation:orbit var(--duration) linear infinite; animation-delay:calc(var(--duration) * -1 * var(--phase)); }
.planet { --size:18px; position:absolute; left:50%; top:0; width:var(--size); aspect-ratio:1; transform:translate(-50%,-50%); border:0; border-radius:50%; padding:0; cursor:pointer; box-shadow: inset -5px -6px 8px #0008, 0 0 9px #000; animation:counterOrbit var(--duration) linear infinite; animation-delay:calc(var(--duration) * -1 * var(--phase)); transition:filter .2s ease, scale .2s ease; }
.planet:hover, .planet:focus-visible, .sun:hover, .sun:focus-visible { filter:brightness(1.25); scale:1.18; outline:2px solid #fff9; outline-offset:5px; }
.orbit:has(.planet:hover) .orbiter, .orbit:has(.planet:hover) .planet, .orbit:has(.planet:focus-visible) .orbiter, .orbit:has(.planet:focus-visible) .planet { animation-play-state:paused; }
.orbit--mercury { --w:23%; --h:30%; --duration:24s; --phase:.05; }
.orbit--venus   { --w:31%; --h:39%; --duration:36s; --phase:.28; }
.orbit--earth   { --w:40%; --h:49%; --duration:48s; --phase:.52; }
.orbit--mars    { --w:49%; --h:59%; --duration:64s; --phase:.74; }
.orbit--jupiter { --w:62%; --h:72%; --duration:100s; --phase:.18; }
.orbit--saturn  { --w:75%; --h:83%; --duration:130s; --phase:.42; }
.orbit--uranus  { --w:88%; --h:93%; --duration:160s; --phase:.66; }
.orbit--neptune { --w:100%; --h:100%; --duration:200s; --phase:.86; }
.mercury { --size:clamp(9px,.7vw,13px); background:radial-gradient(circle at 35% 30%,#c9b9a4,#6d6259 65%,#292622); }
.venus { --size:clamp(14px,1.15vw,22px); background:radial-gradient(circle at 35% 30%,#f0c77b,#a9672e 68%,#593117); }
.earth { --size:clamp(15px,1.2vw,23px); background:radial-gradient(circle at 32% 29%,#bde8ff 0 7%,#2674ad 28%,#235b35 45%,#0a2c59 76%); }
.mars { --size:clamp(11px,.9vw,17px); background:radial-gradient(circle at 35% 30%,#e4915d,#9c3c20 66%,#4a1b12); }
.jupiter { --size:clamp(38px,3.8vw,68px); background:repeating-linear-gradient(0deg,#b77d4d 0 8%,#e0b77d 8% 17%,#8f5538 17% 23%,#d6a26c 23% 31%); }
.saturn { --size:clamp(31px,3.1vw,56px); background:radial-gradient(circle at 36% 30%,#f0d298,#bb8548 72%,#70441e); z-index:3; }
.saturn__ring { position:absolute; left:50%; top:50%; width:175%; height:42%; transform:translate(-50%,-50%) rotate(-16deg); border:clamp(3px,.45vw,7px) solid #c7ad7aaa; border-left-color:#806b46aa; border-right-color:#ead5a9aa; border-radius:50%; z-index:-1; }
.uranus { --size:clamp(22px,2vw,37px); background:radial-gradient(circle at 35% 30%,#c9f5ef,#62b6bc 72%,#29676e); }
.neptune { --size:clamp(21px,1.95vw,36px); background:radial-gradient(circle at 35% 30%,#6bb8ff,#245dcb 64%,#102a75); }
.info-card { position:absolute; left:clamp(18px,3vw,48px); top:50%; z-index:25; width:min(300px,25vw); transform:translateY(-42%); padding:22px; border:1px solid #8b99aa55; border-radius:16px; background:#050c15d9; backdrop-filter:blur(12px); box-shadow:0 20px 55px #0008; }
.info-card__eyebrow { margin:0 0 8px; color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:.64rem; }
.info-card h2 { margin:0 0 10px; font-size:clamp(1.6rem,2.4vw,2.5rem); }
.info-card p { color:#d0d7df; line-height:1.55; }
dl { margin:18px 0 0; }
dl div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid #8491a322; }
dt { color:var(--muted); font-size:.75rem; } dd { margin:0; text-align:right; font-size:.76rem; }
.scale-note { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); width:min(760px,90vw); margin:0; color:#aeb8c5; text-align:center; font-size:.68rem; letter-spacing:.05em; }
.system.is-paused .orbiter, .system.is-paused .planet, .system.is-paused .sun__surface { animation-play-state:paused; }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes counterOrbit { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes sunPulse { 50% { transform:scale(1.035); filter:brightness(1.12); } }
@media (max-width: 900px), (max-height: 650px) {
  .site-header { min-height:64px; padding:12px 18px; }
  .brand small { display:none; }
  .system { left:50%; top:49%; width:min(1180px,98vw); }
  .info-card { top:auto; left:14px; right:14px; bottom:48px; width:auto; transform:none; padding:13px 16px; display:grid; grid-template-columns:auto 1fr; gap:4px 16px; }
  .info-card__eyebrow { grid-column:1/-1; margin:0; }
  .info-card h2 { margin:0; font-size:1.25rem; }
  .info-card p { margin:0; font-size:.76rem; }
  .info-card dl { display:none; }
}
@media (max-width: 620px) {
  .motion-toggle { padding:8px 11px; font-size:.72rem; }
  .system { width:165vw; left:64%; top:43%; }
  .scale-note { bottom:10px; font-size:.58rem; }
  .info-card { bottom:36px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbiter, .planet, .sun__surface { animation-play-state:paused !important; }
}