.playback{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:32rem;margin:0 auto;display:flex}.playback--message{text-align:center;padding:64px 0}.playback__status{color:var(--text-muted);font-size:14px}.playback__error{color:var(--danger);margin:0 0 8px;font-size:14px}.playback__link{color:var(--accent-text);background:0 0;font-size:14px;text-decoration:underline}.playback__stage{aspect-ratio:16/9;border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border);width:100%;position:relative;overflow:hidden}.playback__video{object-fit:contain;width:100%;height:100%}.playback__buffering{background:color-mix(in srgb, var(--accent) 35%, #0000008c);-webkit-backdrop-filter:blur(12px);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.playback__buffering-text{color:#fff;font-size:13px;font-weight:600}.playback__spinner{border:3px solid #fff6;border-top-color:#fff;border-radius:50%;width:32px;height:32px;animation:.8s linear infinite playback-spin}.playback__audio{border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border);text-align:center;width:100%;padding:32px 24px}.playback__audio-label{color:var(--text-muted);margin:0;font-size:13px}.playback__controls{flex-direction:column;gap:8px;width:100%;display:flex}.playback__scrub,.playback__volume{accent-color:var(--accent);cursor:pointer}.playback__scrub{width:100%}.playback__volume{width:80px}.playback__row{align-items:center;gap:12px;display:flex}.playback__spacer{flex:1}.playback__time{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:12px}.playback__icon-btn{border-radius:var(--radius);color:var(--text-muted);background:0 0;padding:8px;transition:color .15s,background-color .15s;display:inline-flex}.playback__icon-btn:hover{color:var(--text);background:var(--surface-2)}.playback__play{width:40px;height:40px;color:var(--text-on-accent);background:var(--accent);border-radius:50%;justify-content:center;align-items:center;transition:background-color .15s;display:inline-flex}.playback__play:hover{background:var(--accent-hover)}.playback__actions{gap:12px;margin-top:8px;display:flex}@keyframes playback-spin{to{transform:rotate(360deg)}}