:root{--warm-1: 255, 226, 180;--warm-2: 255, 168, 84;--warm-3: 255, 138, 64;--ice: 214, 224, 235}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#000}body{font-family:Space Mono,Courier New,monospace;color:#cfd2d6;-webkit-font-smoothing:antialiased;cursor:pointer;-webkit-user-select:none;user-select:none}.stage{--env: 0;--beat: 0;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 38%,#1c16108c,#0000 60%),radial-gradient(80% 60% at 70% 80%,#121a2866,#0000 70%),#000}.starfield,.ocean{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.stage-ocean{background:linear-gradient(180deg,#1c2a40,#6a5446 16%,#3a5570 38%,#1a3145 70%,#0a1626)}.stage-ocean .vignette{background:radial-gradient(ellipse 92% 82% at 50% 40%,#0000 58%,#02080e47)}.scene{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;transform:translateY(-3%);z-index:1;pointer-events:none}.scene>*{grid-area:1 / 1}.blackhole{position:relative;width:min(64vmin,680px);height:min(64vmin,680px)}.blackhole>*{position:absolute;top:50%;left:50%}.bh-glow{width:90%;height:90%;border-radius:50%;transform:translate(-50%,-50%) scale(calc(1 + var(--env) * .5 + var(--beat) * .55));background:radial-gradient(closest-side,rgba(var(--warm-1),.45),rgba(var(--warm-2),.16) 45%,rgba(var(--warm-3),.04) 70%,transparent 80%);opacity:min(1,calc(.34 + var(--env) * .5 + var(--beat) * .35));filter:blur(6px);z-index:0;will-change:transform,opacity}.bh-halo{width:54%;height:54%;border-radius:50%;transform:translate(-50%,-50%) scaleX(1.03);background:radial-gradient(closest-side,transparent 0 70%,rgba(var(--warm-1),.85) 76%,rgba(var(--warm-2),.55) 84%,transparent 92%);box-shadow:0 -8px 34px rgba(var(--warm-2),.45),0 8px 34px rgba(var(--warm-3),.3);opacity:min(1,calc(.55 + var(--env) * .4 + var(--beat) * .5));filter:blur(.4px);z-index:2;will-change:opacity}.bh-disk{width:122%;height:122%;transform:translate(-50%,-50%) scaleY(.24);border-radius:50%;filter:brightness(calc(1 + var(--env) * .7 + var(--beat) * .6)) saturate(calc(1 + var(--env) * .5)) blur(.5px);will-change:filter}.bh-disk-back{z-index:1}.bh-disk-front{z-index:5;clip-path:polygon(0 52%,100% 52%,100% 100%,0 100%)}.bh-spin{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;-webkit-mask:radial-gradient(closest-side,transparent 0 40%,#000 50%,#000 100%);mask:radial-gradient(closest-side,transparent 0 40%,#000 50%,#000 100%);background:conic-gradient(from 0deg,rgba(var(--warm-1),0),rgba(var(--warm-2),.7) 38deg,rgba(var(--warm-1),.98) 88deg,rgba(var(--warm-3),.6) 150deg,#78482a24 220deg,rgba(var(--warm-2),.72) 300deg,rgba(var(--warm-1),0) 360deg);animation:bh-spin 17s linear infinite;will-change:transform}.bh-disk-front .bh-spin{animation-duration:21s;animation-direction:reverse}@keyframes bh-spin{to{transform:rotate(360deg)}}.bh-core{width:44%;height:44%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,#000 0,#000 72%,#080604,#140e08);box-shadow:inset 0 0 30px 6px #000000e6,0 0 22px 6px #000000d9;z-index:3}.bh-photon{width:47%;height:47%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,transparent 0 88%,rgba(var(--warm-1),.95) 93%,rgba(var(--warm-1),0) 99%);opacity:min(1,calc(.7 + var(--env) * .3 + var(--beat) * .3));filter:brightness(calc(1 + var(--beat) * .6));z-index:4;will-change:opacity,filter}.dial{width:min(86vmin,900px);height:min(86vmin,900px);overflow:visible;z-index:6}.ticks line{opacity:min(1,calc(var(--base) + var(--env) * .55 + var(--beat) * .35))}.hand{transform-box:fill-box;transform-origin:center;opacity:min(1,calc(.7 + var(--env) * .3 + var(--beat) * .3));filter:drop-shadow(0 0 5px rgba(238,241,244,.55));will-change:transform,opacity}.vignette{position:fixed;top:0;right:0;bottom:0;left:0;z-index:7;pointer-events:none;background:radial-gradient(ellipse at center 42%,#0000 46%,#0009)}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;background:radial-gradient(ellipse at center,#00000059,#000000d1);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);transition:opacity 1.1s ease}.intro.hide{opacity:0;pointer-events:none}.intro-ring{width:66px;height:66px;border:1px solid rgba(var(--ice),.55);border-radius:50%;position:relative;animation:breathe 3.4s ease-in-out infinite}.intro-ring:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:#eef1f4;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 16px 5px #eef1f4b3}.intro-label{letter-spacing:.45em;text-transform:uppercase;font-size:.74rem;font-weight:400;color:rgba(var(--ice),.85);padding-left:.45em}.intro-sub{font-family:Cormorant,Georgia,serif;font-style:italic;letter-spacing:.3em;font-size:1.05rem;color:rgba(var(--ice),.4);padding-left:.3em}@keyframes breathe{0%,to{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:1}}.status{position:fixed;left:50%;bottom:28px;transform:translate(-50%);z-index:10;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--ice),.65);background:#0006;padding:8px 14px;border:1px solid rgba(var(--ice),.2);border-radius:2px;pointer-events:none}.play-hint{position:fixed;right:26px;bottom:24px;z-index:8;width:40px;height:40px;display:grid;place-items:center;font-size:.7rem;color:rgba(var(--ice),.55);background:#0000004d;border:1px solid rgba(var(--ice),.18);border-radius:50%;pointer-events:none;opacity:.7}.volume{position:fixed;left:26px;bottom:24px;z-index:8;display:flex;align-items:center;gap:12px;opacity:.45;transition:opacity .55s ease}.volume:hover,.volume:focus-within{opacity:1}.volume-icon{display:grid;place-items:center;width:20px;height:20px;padding:0;background:none;border:0;color:rgba(var(--ice),.85);cursor:pointer}.volume-icon svg{width:18px;height:18px;display:block}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:96px;height:2px;border-radius:2px;cursor:pointer;outline:none;background:linear-gradient(90deg,rgba(var(--ice),.85) 0 var(--pct, 80%),rgba(var(--ice),.16) var(--pct, 80%) 100%)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#eef1f4;box-shadow:0 0 10px 2px #eef1f480;transition:box-shadow .2s ease}.volume-slider:hover::-webkit-slider-thumb,.volume-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 14px 3px #eef1f4bf}.volume-slider::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#eef1f4;box-shadow:0 0 10px 2px #eef1f480}.scene-switch{position:fixed;left:50%;bottom:64px;transform:translate(-50%);z-index:9;display:flex;gap:10px;padding:6px;border-radius:999px;background:#00000047;border:1px solid rgba(var(--ice),.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.scene-dot{display:grid;place-items:center;padding:7px 16px;font-family:Space Mono,monospace;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(var(--ice),.5);background:transparent;border:0;border-radius:999px;cursor:pointer;transition:color .4s ease,background .4s ease,letter-spacing .4s ease}.scene-dot span{padding-left:.26em}.scene-dot:hover{color:rgba(var(--ice),.85)}.scene-dot.on{color:#0a0c10;background:rgba(var(--ice),.9);letter-spacing:.3em;box-shadow:0 0 18px rgba(var(--ice),.25)}@media (max-width: 560px){.intro-label{font-size:.66rem}.scene-dot{padding:6px 12px;font-size:.5rem;letter-spacing:.18em}}