:root{--ink:#f4f4f6;--muted:#9a9aa6;--stage:#08080a;--glass:#1010149e;--line:#ffffff1a;--live:#ff3b4a;color:var(--ink);background:var(--stage);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:var(--stage);height:100%;margin:0;overflow:hidden}#player{place-items:center;width:100vw;height:100dvh;display:grid;position:relative}#screen{object-fit:contain;background:var(--stage);width:100%;height:100%;transition:opacity .4s,filter .4s}#player:not([data-state=live]) #screen{opacity:.25;filter:blur(6px)saturate(.6)}button{font:inherit;color:inherit;cursor:pointer}svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.top{pointer-events:none;background:linear-gradient(#0000008c,#0000);align-items:center;gap:12px;padding:16px 20px 40px;transition:opacity .3s;display:flex;position:absolute;inset:0 0 auto}h1{letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:15px;font-weight:600;overflow:hidden}.badge{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#ffffff1f;border-radius:6px;align-items:center;gap:6px;padding:3px 9px 3px 8px;font-size:11px;font-weight:700;display:inline-flex}.badge i{background:currentColor;border-radius:50%;width:7px;height:7px}#player[data-state=live] .badge{background:var(--live);color:#fff}#player[data-state=live] .badge i{animation:2s ease-in-out infinite blink}.status{text-align:center;justify-items:center;gap:6px;padding:24px;display:grid;position:absolute}#player[data-state=live] .status{display:none}.status p{margin:0;font-size:17px;font-weight:600}.status .detail{color:var(--muted);max-width:34ch;font-size:14px;font-weight:400}.pulse{background:var(--muted);border-radius:50%;width:14px;height:14px;margin-bottom:10px;animation:1.8s ease-out infinite ring;box-shadow:0 0 #9a9aa680}#player[data-state=offline] .pulse,#player[data-state=none] .pulse{opacity:.5;animation:none}.unmute{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:600;display:inline-flex;position:absolute;bottom:84px}.unmute[hidden]{display:none}.unmute:hover{background:#24242acc}.controls{background:linear-gradient(#0000,#0009);align-items:center;gap:10px;padding:40px 16px 14px;transition:opacity .3s;display:flex;position:absolute;inset:auto 0 0}.controls button{background:0 0;border:0;border-radius:8px;place-items:center;width:36px;height:36px;padding:0;display:grid}.controls button:hover{background:#ffffff1f}#sound .off,#player.audible #sound .on{display:block}#sound .on,#player.audible #sound .off{display:none}#volume{width:96px;accent-color:var(--ink)}.spacer{flex:1}.stats{color:var(--muted);white-space:nowrap;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}#player.idle .controls,#player.idle .top{opacity:0}#player.idle{cursor:none}@media (max-width:520px){#volume,.stats{display:none}}@keyframes blink{50%{opacity:.35}}@keyframes ring{to{box-shadow:0 0 0 18px #9a9aa600}}