:root{
  --bg:#05060a;--ink:#eef3fa;--mute:rgba(214,226,244,.6);
  --ui:'Space Grotesk','Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;--disp:'Unbounded','Arial Black',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:500 14px var(--ui);overflow:hidden}
button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #bfe0ff;outline-offset:4px;border-radius:50%}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.fallback{position:fixed;inset:0;display:none;place-items:center;font:900 18vw var(--disp);color:transparent;background:linear-gradient(180deg,#fff,#7a8aa0 50%,#fff 52%,#222);-webkit-background-clip:text;background-clip:text;letter-spacing:-.05em}
.nogl .fallback{display:grid}
.vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(0,0,4,.75) 100%)}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence 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:grain .8s steps(4) infinite}

/* gate */
.gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:radial-gradient(circle at 50% 50%,#10131c,#020307 75%);transition:opacity 1.2s ease,visibility 1.2s}
.gate.out{opacity:0;visibility:hidden;pointer-events:none}
.gate p{margin:0;font:400 11px var(--mono);letter-spacing:.35em;text-transform:uppercase;color:var(--mute)}
.orb{position:relative;width:170px;height:170px;border-radius:50%;display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
.orb:hover{transform:scale(1.08)}.orb:active{transform:scale(.95)}
.orb-in{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#fff,#6c7a90,#e9f2ff,#1a2030,#cfe0f7,#4b5668,#fff);box-shadow:0 0 0 1px rgba(255,255,255,.4),0 20px 60px rgba(120,160,255,.25),inset 0 0 30px rgba(0,0,0,.5);animation:spin 6s linear infinite,morph 7s ease-in-out infinite}
.orb-in:after{content:'';position:absolute;inset:7px;border-radius:inherit;background:radial-gradient(circle at 35% 25%,#fff 0,#b8c6dc 18%,#2a3345 58%,#080b12 100%);box-shadow:inset 0 -8px 20px rgba(0,0,0,.6)}
.orb-txt{position:relative;font:900 17px var(--disp);letter-spacing:.14em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8)}

/* ui over the liquid */
.top,.bio,.track,.snd,.avatar,.drops{opacity:0;transition:opacity 1.6s 2.2s}
.in .top,.in .bio,.in .track,.in .snd,.in .avatar,.in .drops{opacity:1}
.top{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px 30px;pointer-events:none}
.mk{font:900 15px var(--disp);letter-spacing:-.02em}.mk sup{font-size:9px;margin-left:2px}
.top .mid{font:400 11px var(--mono);letter-spacing:.35em;color:var(--mute)}
.bio{position:fixed;left:0;right:0;top:64%;z-index:20;margin:0;text-align:center;font:400 14px var(--mono);letter-spacing:.3em;text-transform:uppercase;min-height:20px;text-shadow:0 0 14px rgba(160,200,255,.6),0 2px 8px #000;cursor:pointer;pointer-events:none}

/* liquid drop hit areas */
.drops{position:fixed;inset:0;z-index:25;pointer-events:none}
.drop{position:fixed;left:0;top:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:50%;pointer-events:auto;cursor:pointer;will-change:transform;
  font:600 15px var(--ui);letter-spacing:.01em;color:#fff;padding-bottom:6%;text-shadow:0 1px 2px #000,0 0 6px #000,0 0 18px rgba(0,0,0,.85)}
.drop i{font-style:normal;transition:transform .3s}
.drop:hover i{transform:translate(3px,-3px)}
.drop span{transition:letter-spacing .3s}.drop:hover span{letter-spacing:.06em}
.drop svg{width:42%;height:42%;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))}
.drop.play .ic-play{display:none}.paused .drop.play .ic-play{display:block}.paused .drop.play .ic-pause{display:none}

/* avatar — an organic liquid shape */
.avatar{position:fixed;left:30px;bottom:26px;z-index:20;width:66px;height:66px;border-radius:50%;animation:morph 6s ease-in-out infinite}
.avatar img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:cover;border-radius:inherit}
.ring{position:absolute;inset:0;border-radius:inherit;background:conic-gradient(#fff,#5c6b82,#eaf3ff,#1a2030,#cfe0f7,#fff);animation:spin 5s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}

/* track + sound: bare text floating on the metal */
.track{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:20;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(420px,calc(100% - 220px))}
.t-top{display:flex;gap:12px;align-items:baseline;text-shadow:0 2px 10px #000}
.t-top b{font:600 15px var(--ui)}.t-top span{font:400 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.t-bar{display:flex;align-items:center;gap:12px;width:100%;color:var(--mute);text-shadow:0 2px 8px #000}
.t-bar input{flex:1;min-width:0}
.snd{position:fixed;right:30px;bottom:26px;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-shadow:0 2px 8px #000}
.snd button{text-transform:uppercase;letter-spacing:.2em;transition:color .2s}.snd button:hover{color:#fff}
.snd .off{display:none}.muted .snd .on,.snd.muted .on{display:none}.snd.muted .off{display:inline}
.snd input{width:90px}
input[type=range]{-webkit-appearance:none;appearance:none;height:18px;background:transparent;cursor:pointer;--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.22) var(--p))}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.22) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9fb0c8 60%,#3a4558);box-shadow:0 2px 8px rgba(0,0,0,.6)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9fb0c8 60%,#3a4558)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes morph{0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%}25%{border-radius:58% 42% 46% 54%/46% 56% 44% 54%}50%{border-radius:44% 56% 58% 42%/56% 44% 56% 44%}75%{border-radius:52% 48% 40% 60%/42% 58% 42% 58%}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-3%)}100%{transform:none}}

@media(max-width:700px){
  .top .mid{display:none}.bio{top:62%;font-size:11px;letter-spacing:.2em}
  .track{bottom:92px;width:calc(100% - 40px)}
  .avatar{left:20px;bottom:20px;width:56px;height:56px}.snd{right:20px;bottom:20px}.snd input{display:none}
  .drop{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}