:root{color-scheme:dark;--fg:rgba(232,239,255,.8);--line:rgba(203,217,245,.18)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#020309}
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.cosmos{position:relative;isolation:isolate;width:100vw;height:100vh;height:100dvh;min-height:350px;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 51% 44%,#11102a 0%,#04050e 64%,#010207 100%)}
.fallback-space{position:absolute;inset:0;background:radial-gradient(ellipse 42% 20% at 52% 47%,rgba(239,180,101,.48) 0%,rgba(123,86,180,.22) 24%,rgba(41,63,138,.18) 47%,transparent 79%),radial-gradient(ellipse 60% 40% at 48% 51%,rgba(36,49,92,.22),transparent 70%);transform:rotate(-19deg) scale(1.22)}
#universe{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.8s ease;touch-action:pan-y}
#universe.ready{opacity:1}
.horizon-vignette{position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(ellipse 63% 58% at 50% 50%,transparent 35%,rgba(1,3,9,.07) 67%,rgba(1,2,7,.62) 100%),linear-gradient(180deg,rgba(1,2,8,.29),transparent 19%,transparent 78%,rgba(1,2,7,.43));mix-blend-mode:multiply}
.brand{position:absolute;z-index:2;top:max(30px,env(safe-area-inset-top));left:max(35px,env(safe-area-inset-left));display:flex;align-items:center;gap:16px;color:rgba(240,243,255,.85);pointer-events:none;text-shadow:0 1px 22px #04050a;user-select:none}
.brand-sign{width:31px;height:31px;color:rgba(236,238,255,.89);filter:drop-shadow(0 0 10px rgba(171,177,255,.26))}
.brand-name{font-size:14px;font-weight:650;letter-spacing:.4em;margin-right:-.4em}
.brand-divider{height:17px;width:1px;background:var(--line);margin-left:10px}
.brand-index{font-size:9px;letter-spacing:.24em;color:rgba(199,209,238,.44);font-weight:500}
.status{position:absolute;z-index:2;left:max(45px,env(safe-area-inset-left));bottom:max(37px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;color:rgba(205,220,247,.41);font-size:9px;letter-spacing:.24em;font-weight:550;pointer-events:none;user-select:none}
.signal-dot{width:4px;height:4px;background:#9eb9ec;border-radius:50%;box-shadow:0 0 12px 3px rgba(124,166,235,.3);animation:signal 7.3s ease-in-out infinite}
.edge-label{position:absolute;z-index:2;right:40px;bottom:38px;font-size:9px;letter-spacing:.28em;color:rgba(198,213,244,.3);font-weight:500;user-select:none;pointer-events:none}
.no-webgl{position:absolute;z-index:3;left:50%;bottom:14%;transform:translateX(-50%);max-width:80vw;padding:12px 18px;color:rgba(228,229,255,.8);background:rgba(3,5,15,.82);border:1px solid rgba(206,223,255,.1);border-radius:8px;text-align:center;font-size:12px}
@keyframes signal{0%,100%{opacity:.22;transform:scale(.8)}50%{opacity:.95;transform:scale(1.2)}}
@media(max-width:680px){.brand{top:max(23px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));gap:10px}.brand-sign{width:27px;height:27px}.brand-name{font-size:13px;letter-spacing:.32em}.brand-divider{margin-left:4px}.brand-index{font-size:7px;letter-spacing:.1em}.status{left:max(27px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));font-size:8px;letter-spacing:.12em}.edge-label{display:none}.horizon-vignette{background:radial-gradient(ellipse 90% 64% at 50% 50%,transparent 31%,rgba(1,2,7,.64) 100%)}}
@media(prefers-reduced-motion:reduce){.signal-dot{animation:none}#universe{transition:none}}