:root { --ink:#e8f4ff; --void:#02040a; --mx:0; --my:0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--void); }
body { margin:0; overflow-x:hidden; background:var(--void); color:var(--ink); font-family:"Courier New",monospace; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.space-scene { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% 48%,rgba(31,71,121,.13),transparent 27%),radial-gradient(ellipse at 15% 90%,rgba(31,83,112,.08),transparent 34%),#02040a; }
.stars { position:absolute; inset:-8%; pointer-events:none; will-change:transform; }
.stars-a { opacity:.7; background-image:radial-gradient(circle,rgba(235,248,255,.85) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(130,182,234,.55) 0 .7px,transparent 1.2px); background-position:0 0,38px 62px; background-size:131px 137px,191px 181px; transform:translate(calc(var(--mx) * -18px),calc(var(--my) * -18px)); animation:starDrift 42s linear infinite; }
.stars-b { opacity:.35; background-image:radial-gradient(circle,#fff 0 .6px,transparent 1px); background-size:79px 83px; background-position:24px 18px; transform:translate(calc(var(--mx) * -34px),calc(var(--my) * -34px)) scale(1.03); animation:starDrift 68s linear infinite reverse; }
.dust { position:absolute; width:54vw; height:26vw; left:23%; top:38%; opacity:.15; filter:blur(34px); background:linear-gradient(105deg,transparent 8%,rgba(39,91,148,.55),rgba(103,42,128,.18) 54%,transparent 83%); transform:rotate(-13deg) translate(calc(var(--mx) * 16px),calc(var(--my) * 12px)); animation:breathe 8s ease-in-out infinite; }

.signal-header { position:absolute; z-index:8; top:clamp(24px,4vw,58px); left:clamp(22px,5vw,78px); right:clamp(22px,5vw,78px); display:flex; align-items:flex-start; justify-content:space-between; gap:20px; pointer-events:none; }
.signal { margin:0 0 8px; color:#6d839a; font-size:10px; font-weight:700; letter-spacing:.22em; }
.signal-header h1 { margin:0; color:#e9f3ff; font-family:Arial,Helvetica,sans-serif; font-size:clamp(24px,3vw,46px); font-weight:700; letter-spacing:-.04em; }
.ticker { padding:9px 14px; border:1px solid rgba(155,196,230,.2); border-radius:999px; color:#9fb8cd; background:rgba(4,8,15,.45); backdrop-filter:blur(10px); font-size:11px; letter-spacing:.12em; }

.orbit-stage { position:relative; width:min(1040px,92vw); height:min(760px,86svh); min-height:580px; margin:6svh auto 0; }
.object-wrap { position:absolute; z-index:4; left:50%; top:51%; width:min(650px,62vw); transform:translate(calc(-50% + var(--mx) * 16px),calc(-50% + var(--my) * 10px)); animation:objectFloat 7s ease-in-out infinite; filter:drop-shadow(0 38px 44px rgba(0,0,0,.5)); }
.space-object { display:block; width:100%; height:auto; border:0; background:#000; mix-blend-mode:screen; user-select:none; pointer-events:none; }
.object-glow { position:absolute; z-index:-1; inset:24% 18% 15%; border-radius:50%; background:rgba(49,106,178,.11); filter:blur(44px); animation:pulse 6s ease-in-out infinite; }
.orbit-line { position:absolute; z-index:1; left:50%; top:51%; border:1px solid rgba(150,184,218,.11); border-radius:50%; transform:translate(-50%,-50%) rotate(-12deg); }
.orbit-line::after { content:""; position:absolute; width:4px; height:4px; top:18%; left:4%; border-radius:50%; background:#9de7ff; box-shadow:0 0 12px #6dcbff; }
.orbit-line-one { width:81%; height:61%; }
.orbit-line-two { width:96%; height:78%; border-style:dashed; opacity:.55; transform:translate(-50%,-50%) rotate(16deg); }

.planet-button { position:absolute; z-index:6; display:grid; place-items:center; gap:10px; min-width:104px; padding:0; border:0; color:white; background:transparent; text-align:center; cursor:pointer; transition:transform .25s ease,filter .25s ease; }
.planet-button:hover,.planet-button:focus-visible { outline:none; transform:scale(1.12); filter:brightness(1.16) saturate(1.1); }
.planet-core { position:relative; z-index:2; display:grid; place-items:center; width:74px; height:74px; overflow:hidden; isolation:isolate; border:1px solid rgba(220,239,255,.38); border-radius:50%; box-shadow:inset -17px -14px 23px rgba(0,0,0,.58),inset 8px 7px 15px rgba(255,255,255,.12),0 0 0 4px rgba(104,160,205,.035),0 11px 32px rgba(0,0,0,.42); }
.planet-core::after { content:""; position:absolute; z-index:4; width:42%; height:20%; top:9%; left:17%; border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.04)); transform:rotate(-24deg); filter:blur(1px); }
.planet-core b { position:relative; z-index:5; display:grid; place-items:center; min-width:30px; min-height:30px; padding:5px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#f4f9ff; background:rgba(1,5,10,.28); box-shadow:0 3px 12px rgba(0,0,0,.28); backdrop-filter:blur(2px); font-family:Arial,sans-serif; font-size:17px; line-height:1; letter-spacing:-.05em; }
.planet-label { position:relative; z-index:5; padding:5px 8px 4px; border:1px solid rgba(132,168,197,.16); border-radius:999px; color:#a9c0d3; background:rgba(3,7,13,.66); backdrop-filter:blur(5px); font-size:9px; font-weight:700; line-height:1; letter-spacing:.16em; text-shadow:0 2px 8px #000; }

.planet-x { left:5%; top:34%; animation:satelliteA 6s ease-in-out infinite; }
.planet-x::before { content:""; position:absolute; z-index:0; top:-8px; width:92px; height:92px; border:1px solid rgba(122,191,225,.18); border-radius:50%; box-shadow:0 0 18px rgba(61,126,164,.18),inset 0 0 16px rgba(78,145,183,.11); }
.planet-x::after { content:""; position:absolute; z-index:3; top:7px; right:5px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#d6e4eb,#475663 67%,#182029); box-shadow:-70px 57px 0 -3px #38434c; }
.planet-x .planet-core { background:radial-gradient(circle at 20% 64%,rgba(146,174,190,.28) 0 4px,transparent 5px),radial-gradient(circle at 68% 28%,rgba(168,190,200,.22) 0 7px,transparent 8px),radial-gradient(circle at 61% 72%,rgba(0,0,0,.5) 0 8px,transparent 9px),radial-gradient(circle at 34% 35%,#708393,#222c35 45%,#080b0f 78%); }
.planet-x .planet-core::before { content:""; position:absolute; z-index:2; inset:-22%; opacity:.24; background:repeating-linear-gradient(112deg,transparent 0 7px,rgba(181,215,233,.22) 8px 9px,transparent 10px 17px); transform:rotate(8deg); animation:planetSpin 18s linear infinite; }

.planet-pump { right:6%; top:25%; animation:satelliteB 7.5s ease-in-out infinite; }
.planet-pump::before { content:""; position:absolute; z-index:1; top:26px; width:128px; height:34px; border:7px double rgba(165,220,83,.52); border-left-color:rgba(82,139,30,.26); border-right-color:rgba(219,255,143,.75); border-radius:50%; transform:rotate(-16deg); box-shadow:0 0 15px rgba(116,203,51,.18); }
.planet-pump::after { content:""; position:absolute; z-index:3; top:40px; left:2px; width:18px; height:5px; border-radius:50%; background:rgba(220,255,156,.5); transform:rotate(-16deg); }
.planet-pump .planet-core { width:88px; height:88px; background:radial-gradient(ellipse at 28% 28%,rgba(226,255,154,.6),transparent 24%),repeating-linear-gradient(176deg,#9cda3b 0 5px,#71ae25 6px 11px,#b7ea54 12px 15px,#4d8f1b 16px 20px),#6eac27; }
.planet-pump .planet-core::before { content:""; position:absolute; z-index:2; inset:0; opacity:.56; background:radial-gradient(ellipse at 68% 45%,rgba(37,86,9,.65) 0 10%,transparent 11%),radial-gradient(ellipse at 30% 70%,rgba(217,255,132,.38) 0 8%,transparent 9%); animation:gasPulse 5s ease-in-out infinite; }
.planet-pump .planet-core b { color:#eaffc8; border-color:rgba(228,255,182,.45); background:rgba(20,48,4,.45); font-size:23px; }

.planet-dex { right:3%; bottom:17%; animation:satelliteA 8.5s ease-in-out -2s infinite; }
.planet-dex::before { content:""; position:absolute; z-index:0; top:2px; width:88px; height:88px; border:1px dashed rgba(229,130,255,.35); border-radius:50%; animation:ringTurn 12s linear infinite; }
.planet-dex::after { content:""; position:absolute; z-index:3; top:-2px; left:17px; width:13px; height:13px; border-radius:44% 56% 52% 48%; background:linear-gradient(145deg,#ffc8ff,#7d319e 60%,#21102e); box-shadow:61px 58px 0 -4px #8d55a2; }
.planet-dex .planet-core { background:conic-gradient(from 22deg at 52% 48%,#38124e,#9c41bd 12%,#582073 22%,#c66ee0 31%,#4b185f 44%,#b45ed4 56%,#321042 70%,#8a36a7 84%,#38124e); }
.planet-dex .planet-core::before { content:""; position:absolute; z-index:2; inset:0; opacity:.7; background:linear-gradient(64deg,transparent 44%,rgba(255,195,255,.55) 45% 47%,transparent 48%),linear-gradient(129deg,transparent 55%,rgba(36,6,55,.7) 56% 59%,transparent 60%),linear-gradient(18deg,transparent 63%,rgba(255,255,255,.25) 64% 65%,transparent 66%); }
.planet-dex .planet-core b { font-size:10px; letter-spacing:.04em; background:rgba(39,7,53,.48); }

.planet-ca { left:8%; bottom:15%; animation:satelliteB 7s ease-in-out -1s infinite; }
.planet-ca::before { content:""; position:absolute; z-index:0; top:-6px; width:94px; height:94px; border-radius:50%; background:radial-gradient(circle,rgba(191,218,239,.13),transparent 64%); box-shadow:0 0 22px rgba(153,197,230,.12); }
.planet-ca .planet-core { width:82px; height:82px; color:#1d2430; background:radial-gradient(circle at 32% 27%,#f3f0df,#aab2bc 52%,#3b4450 83%); clip-path:polygon(4% 36%,11% 16%,29% 5%,51% 1%,72% 8%,92% 29%,98% 51%,91% 75%,74% 94%,49% 99%,23% 91%,6% 72%); }
.planet-ca .planet-core::before { content:""; position:absolute; z-index:2; inset:0; opacity:.42; background:radial-gradient(circle at 68% 62%,#28313a 0 8px,rgba(255,255,255,.1) 9px,transparent 12px),radial-gradient(circle at 25% 44%,#303943 0 5px,rgba(255,255,255,.14) 6px,transparent 8px),radial-gradient(circle at 48% 20%,#555f68 0 3px,transparent 4px),radial-gradient(circle at 49% 83%,#313a43 0 6px,transparent 7px),repeating-radial-gradient(circle at 80% 20%,transparent 0 7px,rgba(20,30,40,.11) 8px 9px); }
.planet-ca .planet-core b { color:#242c33; border-color:rgba(25,36,45,.25); background:rgba(239,244,240,.33); }

.object-note { position:absolute; z-index:8; left:50%; bottom:5.5svh; width:min(430px,70vw); margin:0; color:#7790a6; transform:translateX(-50%); font-size:11px; line-height:1.6; letter-spacing:.08em; text-align:center; }
.scroll-cue { position:absolute; z-index:9; right:clamp(22px,5vw,78px); bottom:5svh; display:flex; align-items:center; gap:12px; color:#668096; font-size:9px; letter-spacing:.16em; }
.scroll-cue i { display:block; width:28px; height:28px; border:1px solid rgba(143,183,218,.22); border-radius:50%; }
.scroll-cue i::after { content:""; display:block; width:6px; height:6px; margin:8px auto 0; border-right:1px solid #8dc0eb; border-bottom:1px solid #8dc0eb; transform:rotate(45deg); animation:arrow 1.6s ease-in-out infinite; }

.dex-section { position:relative; min-height:100svh; padding:clamp(64px,8vw,120px) clamp(20px,6vw,96px); border-top:1px solid rgba(129,174,210,.14); background:radial-gradient(circle at 50% 30%,#0b1624,#03060c 44%,#010205 80%); }
.dex-section::before { content:""; position:absolute; inset:0; opacity:.25; pointer-events:none; background-image:radial-gradient(circle,#cbeaff 0 .6px,transparent .8px); background-size:97px 101px; }
.dex-topline,.chart-frame { position:relative; z-index:1; max-width:1220px; margin-inline:auto; }
.dex-topline { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.dex-topline h2 { margin:0; font:700 clamp(30px,5vw,62px)/.9 Arial,sans-serif; letter-spacing:-.05em; }
.dex-topline a { padding-bottom:5px; border-bottom:1px solid #476781; color:#9cc7ec; font-size:10px; letter-spacing:.14em; }
.chart-frame { height:min(72vh,720px); overflow:hidden; border:1px solid rgba(122,179,224,.23); border-radius:22px; background:#080d15; box-shadow:0 35px 90px rgba(0,0,0,.45); }
.chart-frame iframe { display:block; width:100%; height:100%; border:0; }

@keyframes starDrift { to { background-position:131px 137px,229px 243px; } }
@keyframes breathe { 50% { opacity:.24; transform:rotate(-10deg) scale(1.06); } }
@keyframes objectFloat { 0%,100% { margin-top:-8px; rotate:-1deg; } 50% { margin-top:14px; rotate:1.3deg; } }
@keyframes pulse { 50% { opacity:.55; transform:scale(1.13); } }
@keyframes satelliteA { 50% { margin-top:-12px; rotate:4deg; } }
@keyframes satelliteB { 50% { margin-top:13px; rotate:-5deg; } }
@keyframes arrow { 50% { opacity:.45; transform:translateY(4px) rotate(45deg); } }
@keyframes planetSpin { to { transform:rotate(368deg); } }
@keyframes gasPulse { 50% { opacity:.8; transform:translateX(4px) scale(1.04); } }
@keyframes ringTurn { to { transform:rotate(360deg); } }

@media (max-width:760px) {
  .space-scene { min-height:790px; }
  .signal-header { align-items:center; }
  .signal { font-size:8px; }
  .orbit-stage { width:100vw; height:680px; min-height:0; margin-top:50px; }
  .object-wrap { top:49%; width:min(470px,92vw); }
  .orbit-line-one { width:92%; height:54%; }
  .orbit-line-two { width:112%; height:70%; }
  .planet-button { min-width:84px; }
  .planet-core { width:62px; height:62px; }
  .planet-pump .planet-core { width:72px; height:72px; }
  .planet-pump::before { top:22px; width:108px; height:28px; }
  .planet-dex::before { width:74px; height:74px; }
  .planet-ca .planet-core { width:66px; height:66px; }
  .planet-ca::before { width:77px; height:77px; }
  .planet-x { left:3%; top:24%; }
  .planet-pump { right:3%; top:22%; }
  .planet-dex { right:5%; bottom:15%; }
  .planet-ca { left:5%; bottom:15%; }
  .object-note { bottom:40px; }
  .scroll-cue { display:none; }
  .dex-topline { align-items:flex-start; flex-direction:column; }
  .chart-frame { height:68vh; border-radius:14px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }