:root{--bg: #07070c;--ink: #eef0f7;--ink-dim: #9aa0b5;--glass: rgba(18, 18, 30, .5);--glass-line: rgba(255, 255, 255, .1);--live: #5ce6b0;--amber: #ffb46b}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(ellipse at 50% 45%,#14142a 0%,var(--bg) 70%);color:var(--ink);font:400 16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.field{position:fixed;inset:0;overflow:hidden;z-index:0}.blob{position:absolute;display:block;width:78vmax;height:78vmax;border-radius:50%;filter:blur(70px);opacity:.9;mix-blend-mode:screen;will-change:transform}.blob--a{background:radial-gradient(circle at 50% 50%,#6d4bff 0%,#3a1fa8 42%,transparent 72%);top:-22vmax;left:-18vmax;animation:driftA 44s ease-in-out infinite alternate}.blob--b{background:radial-gradient(circle at 50% 50%,#1fd4b8 0%,#0d6b6f 45%,transparent 72%);bottom:-28vmax;right:-14vmax;animation:driftB 58s ease-in-out infinite alternate}.blob--c{background:radial-gradient(circle at 50% 50%,#d94ec0 0%,#6d1f74 45%,transparent 70%);top:8vmax;right:-24vmax;animation:driftC 71s ease-in-out infinite alternate}.blob--d{background:radial-gradient(circle at 50% 50%,#ff9a4d 0%,#a33f16 45%,transparent 68%);bottom:-20vmax;left:2vmax;opacity:.5;animation:driftD 87s ease-in-out infinite alternate}@keyframes driftA{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(22vmax,14vmax,0) scale(1.25)}}@keyframes driftB{0%{transform:translateZ(0) scale(1.1)}to{transform:translate3d(-20vmax,-16vmax,0) scale(.85)}}@keyframes driftC{0%{transform:translateZ(0) scale(.9)}to{transform:translate3d(-16vmax,20vmax,0) scale(1.2)}}@keyframes driftD{0%{transform:translateZ(0) scale(1.15)}to{transform:translate3d(18vmax,-12vmax,0) scale(.9)}}.grain{position:absolute;inset:-50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.035;pointer-events:none}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.42) 100%);pointer-events:none}.gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#07070c8c;backdrop-filter:blur(6px);transition:opacity .6s ease,backdrop-filter .6s ease}.gate--gone{opacity:0;pointer-events:none;backdrop-filter:blur(0)}.gate__inner{text-align:center;padding:2rem}.gate__title{margin:0;font-size:clamp(2.6rem,9vw,5rem);font-weight:200;letter-spacing:.16em;text-transform:lowercase}.gate__sub{margin:.5rem 0 2rem;color:var(--ink-dim);font-size:.95rem;letter-spacing:.04em}.gate__btn{appearance:none;border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);font:inherit;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;padding:.85rem 2.4rem;border-radius:999px;cursor:pointer;backdrop-filter:blur(12px);transition:transform .2s ease,background .2s ease,border-color .2s ease}.gate__btn:hover{background:#1e1e30b3;border-color:#ffffff3d;transform:translateY(-1px)}.gate__btn:focus-visible,.ctl:focus-visible,.vol__input:focus-visible{outline:2px solid var(--amber);outline-offset:3px}.stage{position:relative;z-index:10;height:100%;display:flex;align-items:flex-end;justify-content:center;padding:0 1rem calc(2.5rem + env(safe-area-inset-bottom));pointer-events:none}.player[hidden]{display:none}.player{pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;width:min(560px,100%);padding:.85rem 1.15rem;border-radius:18px;border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 12px 40px #0006;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}.player__status{display:flex;align-items:center;gap:.5rem}.live{width:8px;height:8px;border-radius:50%;background:var(--ink-dim);flex:none}.live[data-state=live]{background:var(--live);box-shadow:0 0 #5ce6b099;animation:pulse 2.4s ease-out infinite}.live[data-state=connecting],.live[data-state=error]{background:var(--amber);animation:blink 1.2s ease-in-out infinite}@keyframes pulse{to{box-shadow:0 0 0 12px #5ce6b000}}@keyframes blink{50%{opacity:.3}}.live__label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}.player__meta{min-width:0;text-align:center}.track{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}.listeners{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-top:.15rem;min-height:1em}.player__controls{display:flex;align-items:center;gap:.75rem}.ctl{appearance:none;border:0;background:none;padding:.25rem;cursor:pointer;color:var(--ink);line-height:0;border-radius:8px;transition:color .2s ease,opacity .2s ease}.ctl:hover{color:#fff}.ctl__icon{width:22px;height:22px;fill:currentColor}.ctl__icon .wave{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.ctl__icon--off{display:none}.ctl[aria-pressed=true]{color:var(--ink-dim)}.ctl[aria-pressed=true] .ctl__icon--on{display:none}.ctl[aria-pressed=true] .ctl__icon--off{display:inline}.vol__input{appearance:none;width:92px;height:3px;border-radius:999px;background:#ffffff38;cursor:pointer}.vol__input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--ink);border:0;transition:transform .15s ease}.vol__input::-webkit-slider-thumb:hover{transform:scale(1.2)}.vol__input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--ink);border:0}@media (max-width: 460px){.player{grid-template-columns:auto minmax(0,1fr);gap:.6rem .9rem}.player__controls{grid-column:1 / -1;justify-content:space-between}.vol__input{width:100%}}@media (prefers-reduced-motion: reduce){.blob,.live,.player{animation:none!important}.gate{transition:opacity .2s linear}}