:root{color-scheme:dark;--ink:#050505;--white:#edf5f4;--muted:#89908f;--cyan:#80e9ff;--red:#ff3b21}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--white);font-family:Manrope,sans-serif}
button,a{font:inherit;color:inherit}.stage{position:relative;width:100vw;height:100svh;min-height:620px;overflow:hidden;background:#030303;isolation:isolate}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 15%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.72) 100%),linear-gradient(180deg,rgba(0,0,0,.4),transparent 25%,transparent 72%,rgba(0,0,0,.8))}
.noise{position:absolute;inset:-80%;z-index:8;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:noise .18s steps(2) infinite}
@keyframes noise{0%{transform:translate(1%,-2%)}33%{transform:translate(-2%,1%)}66%{transform:translate(2%,2%)}100%{transform:translate(-1%,-1%)}}
.header{position:absolute;z-index:4;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:30px clamp(22px,4vw,62px);font-family:DM Mono,monospace;font-size:10px;letter-spacing:.16em}
.identity{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.identity-mark{font-size:15px;color:var(--cyan);text-shadow:0 0 12px rgba(128,233,255,.7)}
.mode{color:#7d8584}.mode span{display:inline-block;width:5px;height:5px;margin-right:8px;border-radius:50%;background:#525b5b}.playing .mode span{background:var(--red);box-shadow:0 0 12px var(--red);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.25}}
.icon-button{justify-self:end;border:1px solid #343838;background:rgba(0,0,0,.35);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:17px}.icon-button.muted{opacity:.35}
.data{position:absolute;z-index:3;top:50%;display:flex;gap:9px;flex-direction:column;font-family:DM Mono;font-size:8px;letter-spacing:.13em;color:#5e6766}.data-left{left:clamp(20px,3vw,46px);transform:translateY(-50%)}.data-right{right:clamp(20px,3vw,46px);transform:translateY(-50%);text-align:right}
.title-block{position:absolute;left:clamp(22px,5vw,76px);bottom:clamp(155px,21vh,210px);z-index:3}.title-block p,.title-block span{font-family:DM Mono;font-size:8px;letter-spacing:.18em;color:#77807f}.title-block p{margin:0 0 8px}.title-block h1{font-size:clamp(50px,7vw,104px);line-height:.88;margin:0 0 13px;letter-spacing:-.065em;font-weight:500}
.player{position:absolute;z-index:4;left:clamp(22px,5vw,76px);right:clamp(22px,5vw,76px);bottom:clamp(24px,4vh,45px)}.time{display:flex;justify-content:space-between;margin-bottom:7px;font-family:DM Mono;font-size:9px;color:#858e8d;font-variant-numeric:tabular-nums}
.track{position:relative;display:block;width:100%;height:15px;padding:0;border:0;background:transparent;cursor:pointer}.track::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:#39403f}.track span{position:absolute;left:0;top:7px;height:1px;width:0;background:linear-gradient(90deg,var(--red),#fff,var(--cyan));box-shadow:0 0 9px rgba(128,233,255,.7)}.track i{position:absolute;left:50%;top:4px;width:1px;height:7px;background:#77807f}
.transport{display:flex;align-items:center;justify-content:center;gap:17px;margin-top:10px}.transport button{cursor:pointer}.minor{border:0;background:transparent;color:#6f7776;font-family:DM Mono;font-size:9px;width:40px;height:40px}.play{display:grid;place-items:center;width:54px;height:54px;border:1px solid #bac5c4;border-radius:50%;background:rgba(0,0,0,.4);font-family:DM Mono;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 12px 40px #000;transition:.25s}.play:hover{transform:scale(1.07);border-color:#fff}.play-glyph{margin-left:2px;font-size:18px}.pause-glyph{display:none;font-size:18px}.playing .play-glyph{display:none}.playing .pause-glyph{display:block}
.hint{position:absolute;z-index:3;right:clamp(22px,5vw,76px);bottom:clamp(155px,21vh,210px);font-family:DM Mono;font-size:8px;letter-spacing:.14em;color:#67706f}.hint span{display:inline-block;width:26px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:8px;box-shadow:0 0 9px var(--cyan)}.playing .hint{opacity:0;transition:opacity .8s}
.fx-panel{position:absolute;z-index:6;right:clamp(22px,3vw,46px);top:50%;transform:translateY(-46%);width:224px;padding:15px 14px 17px;border:0;background:transparent;box-shadow:none}.fx-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;font:9px DM Mono;letter-spacing:.14em;color:#a6b7b6;text-shadow:0 1px 10px #000}.fx-panel header button{border:0;background:none;padding:0;color:#677574;font:7px DM Mono;cursor:pointer;text-shadow:0 1px 8px #000}.knobs{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}.knob{display:flex;align-items:center;flex-direction:column;gap:5px;position:relative;isolation:isolate}.knob::before{content:"";position:absolute;z-index:-1;inset:-12px -9px -14px;border-radius:48%;background:rgba(1,9,13,.62);filter:blur(16px);backdrop-filter:blur(7px);pointer-events:none}.knob input{position:absolute;width:72px;height:72px;top:18px;opacity:0;cursor:ns-resize}.dial{display:block;width:68px;height:68px;border-radius:50%;border:1px solid #485756;background:radial-gradient(circle at 38% 32%,rgba(38,51,51,.88),rgba(8,12,13,.84) 61%);box-shadow:inset 0 0 18px #000,0 0 0 1px rgba(255,255,255,.02);transform:rotate(var(--angle,-135deg))}.dial i{position:absolute;width:2px;height:17px;left:32px;top:6px;background:#d9fbff;box-shadow:0 0 8px #69dfff}.knob b{font:8px DM Mono;letter-spacing:.1em;color:#9caaaa;text-shadow:0 1px 8px #000}.knob small{font:8px DM Mono;color:#a9bcba;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px #000}.knob:focus-within .dial{border-color:#83eaff;box-shadow:0 0 18px rgba(80,220,255,.28)}.fx-toggle{width:15px;height:15px;padding:0;border:1px solid #34403f;border-radius:50%;background:#080c0c;cursor:pointer}.fx-toggle i{display:block;width:5px;height:5px;margin:auto;border-radius:50%;background:#27302f}.fx-toggle.on i{background:#52ff8a;box-shadow:0 0 8px #52ff8a}.fx-one-reset{padding:0;border:0;background:none;color:#5e6c6b;font:6px DM Mono;letter-spacing:.12em;cursor:pointer;text-shadow:0 1px 8px #000}.fx-one-reset:hover{color:#b6c8c6}
@media(max-width:700px){.stage{min-height:560px}.header{padding:22px}.header{grid-template-columns:1fr 1fr}.mode{display:none}.data{display:none}.title-block{bottom:236px}.title-block h1{font-size:44px}.title-block p{max-width:240px}.hint{display:none}.player{bottom:20px}.transport{margin-top:4px}.play{width:50px;height:50px}.fx-panel{top:auto;bottom:116px;left:12px;right:12px;width:auto;transform:none;padding:8px 10px}.fx-panel header{margin-bottom:7px}.knobs{grid-template-columns:repeat(6,1fr);gap:3px}.dial{width:44px;height:44px}.dial i{left:21px;height:11px;top:4px}.knob input{width:46px;height:46px;top:16px}.knob::before{inset:-7px -4px -9px;filter:blur(11px)}.knob small{font-size:6px}.knob b{font-size:6px}.fx-one-reset{font-size:5px}}
@media(prefers-reduced-motion:reduce){.noise{animation:none}.playing .mode span{animation:none}}