.video-shell.interactive {
  display:block;
  aspect-ratio:auto;
  background:var(--bg)
}
.interactive #recording { display:none }
#audio-inspector { padding:18px 10px 6px; color:var(--muted); user-select:none }
.spectral-layout { display:grid; grid-template-columns:minmax(0,1fr) 38px; gap:8px }
.spectral-plot { height:clamp(280px,calc(100svh - 460px),380px); position:relative; min-width:0; overflow:hidden; border-radius:5px; background:#0c111d }
#spectrum { width:100%; height:100%; display:block; touch-action:pan-y; cursor:crosshair }
.spectral-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.spectral-cursor { position:absolute; top:0; bottom:0; width:1px; background:#fff; pointer-events:none; box-shadow:0 0 3px #000; transform:translateX(-1px) }
.spectral-cursor::before { content:""; position:absolute; width:7px; height:7px; background:#fff; top:0; left:-3px; border-radius:0 0 3px 3px }
#frequency-ticks { position:relative; font-size:11px; font-variant-numeric:tabular-nums }
#frequency-ticks::after { content:"Hz"; position:absolute; left:0; top:-14px; font-size:10px }
#frequency-ticks span { position:absolute; left:0; transform:translateY(50%) }
#frequency-ticks span:first-child { transform:none }
#frequency-ticks span:last-child { transform:translateY(100%) }
#time-ticks { display:flex; justify-content:space-between; margin:6px 46px 0 0; font-size:11px; font-variant-numeric:tabular-nums }
.spectral-legend { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--muted); margin-top:6px }
.spectral-palette { width:74px; height:5px; border-radius:4px; background:linear-gradient(90deg,#0c111d,#19254b,#284d94,#25a3b1,#efb551,#fff6ca) }
#spectrum-status { position:absolute; inset:0; display:grid; place-content:center; padding:20px; text-align:center; font-size:13px; pointer-events:none; background:#0c111de8 }
#filter-controls { display:grid; grid-template-columns:9em minmax(0,1fr) 44px; align-items:center; gap:6px; margin:0 8px; border-top:1px solid var(--line); font-size:12px }
#filter-summary { color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap }
#filter-controls.bypassed #filter-summary { color:var(--muted) }
#filter-controls.bypassed .frequency-range-track span { background:#888 }
.filter-reset { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--muted) }
.frequency-range { position:relative; height:44px; cursor:ew-resize; touch-action:none; user-select:none; --lower:0%; --upper:100% }
.frequency-range-track { position:absolute; top:20px; height:4px; left:9px; right:9px; border-radius:3px; background:#666 }
.frequency-range-track span { position:absolute; left:var(--lower); right:calc(100% - var(--upper)); height:100%; background:var(--blue); border-radius:inherit }
.frequency-range input[type=range] { position:absolute; inset:0; width:100%; height:44px; min-width:0; margin:0; padding:0; appearance:none; -webkit-appearance:none; background:transparent; pointer-events:none; border:0; outline:none }
.frequency-range input::-webkit-slider-runnable-track { background:transparent; height:4px }
.frequency-range input::-moz-range-track { background:transparent; height:4px }
.frequency-range input::-moz-range-progress { background:transparent }
.frequency-range input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:50%; margin-top:-7px; border:1px solid #ffffff70; background:#eee; box-shadow:0 1px 4px #0007 }
.frequency-range input::-moz-range-thumb { width:18px; height:18px; box-sizing:border-box; border-radius:50%; border:1px solid #ffffff70; background:#eee; box-shadow:0 1px 4px #0007 }
.frequency-range input:focus { z-index:1 }
.frequency-range input:focus-visible::-webkit-slider-thumb { outline:3px solid var(--blue); outline-offset:3px }
.frequency-range input:focus-visible::-moz-range-thumb { outline:3px solid var(--blue); outline-offset:3px }
#reset-filter:disabled { cursor:default }
@media(max-width:900px) {
  #audio-inspector { padding:18px 8px 6px }
  .spectral-plot { height:280px }
  .spectral-layout { grid-template-columns:minmax(0,1fr) 31px; gap:6px }
  #time-ticks { margin-right:37px; font-size:10px }
  #frequency-ticks { font-size:10px }
  #filter-controls { font-size:11px }
}