.player{ background:linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent), color-mix(in oklab, var(--bg) 40%, transparent)); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius: var(--radius); padding:12px 16px 0; box-shadow: var(--shadow) }
.controls{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px }
.controls .vol{ display:inline-flex; align-items:center; gap:4px; font-weight:600; color:var(--muted) }
.controls input[type="range"]{ width:180px }
.controls .vol{ flex-direction:column; align-items:flex-start }
.vol-pct{ margin-top:0; font-size:.9rem; color:var(--text); line-height:1 }
.viz-wrap{ background: var(--bg-elev); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius:12px; overflow:hidden }
#viz{ display:block; width:100%; height:auto }
.gate{ display:flex; align-items:center; justify-content:center; padding:8px 0; gap:12px }
.gate .spacer{ flex:1 }
#likeBtn #likeCount{ display:none }
.btn.disabled{ opacity:.6; pointer-events:none }
.note{ color:var(--muted); margin-top:6px }
.player .note{ text-align:center; margin-top:10px }
.archive-list{ list-style:none; margin:0; padding:0; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius:12px; overflow:hidden; background:var(--bg-elev) }
.archive-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid color-mix(in oklab, var(--text) 8%, transparent) }
.archive-list li:last-child{ border-bottom:none }
.archive-list a{ color:var(--text) }
.archive-list .meta{ color:var(--muted); font-size:.9rem }

#downloadBtn{ margin-left:auto }