*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--fg:#e8e8e8;--fg-dim:#777;--fg-faint:#383838;--bg:#0a0a0a;--red:#c0392b}body,html{height:100%}body{background:var(--bg);color:var(--fg);font-family:Geist Mono,monospace;font-size:13px;font-weight:300;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;align-items:start;padding:56px 48px 48px}.middle,.top{width:100%;max-width:420px}.middle{display:flex;align-items:center;justify-content:center;padding:40px 0}.bottom{margin-top:auto;width:100%;max-width:420px}.title{font-size:28px;font-weight:300;letter-spacing:.06em;color:var(--fg);margin-bottom:8px}.status-line{display:flex;align-items:center;gap:10px;margin-bottom:52px}.dot{width:6px;height:6px;border-radius:50%;background:var(--fg-dim);flex-shrink:0;animation:pulse 2.4s ease-in-out infinite}.dot.live{background:var(--red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.status-text{font-size:11px;color:var(--fg-dim);letter-spacing:.08em}.status-text.live{color:var(--fg)}.player-block{width:100%;max-width:420px}.player-label{font-size:11px;color:var(--fg-dim);letter-spacing:.1em;margin-bottom:14px}.waveform{display:flex;align-items:flex-end;gap:2px;height:48px;margin-bottom:24px;transition:opacity .4s ease,height .4s ease}.waveform span{display:block;width:2px;border-radius:1px;background:var(--fg-faint);animation:bar var(--d,.8s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.waveform[data-state=active] span{background:var(--fg)}.waveform[data-state=waiting]{height:12px}.waveform[data-state=waiting] span{animation-name:bar-small}.waveform[data-state=offline]{opacity:0;height:0;margin-bottom:0;pointer-events:none}@keyframes bar{0%{height:var(--min,3px)}to{height:var(--max,36px)}}@keyframes bar-small{0%{height:1px}to{height:6px}}.controls{display:flex;flex-direction:flex-column;align-items:center;gap:24px}.play-btn{background:none;border:1px solid var(--fg-dim);color:var(--fg);font-family:Geist Mono,monospace;font-size:11px;letter-spacing:.1em;padding:6px 14px;cursor:pointer;transition:border-color .15s,color .15s}.play-btn:hover{border-color:var(--fg)}.play-btn.playing{border-color:var(--red);color:var(--red)}.vol-label{font-size:11px;color:var(--fg-dim)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:1px;background:var(--fg-dim);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:var(--fg);cursor:pointer}.archive-label{font-size:11px;color:var(--fg-dim);letter-spacing:.1em;margin-bottom:14px}.archive-row{display:flex;align-items:center;gap:10px}.archive-input{background:none;border:none;border-bottom:1px solid var(--fg-faint);color:var(--fg);font-family:Geist Mono,monospace;font-size:13px;font-weight:300;width:160px;padding:4px 0;outline:none;letter-spacing:.05em;transition:border-color .15s}.archive-input::placeholder{color:var(--fg-faint)}.archive-input:focus{border-bottom-color:var(--fg-dim)}.archive-btn{background:none;border:none;color:var(--fg-dim);font-family:Geist Mono,monospace;font-size:11px;letter-spacing:.1em;cursor:pointer;padding:0;transition:color .15s}.archive-btn:hover{color:var(--fg)}.archive-result{margin-top:14px;font-size:11px;color:var(--fg-dim);min-height:18px;letter-spacing:.04em}