.song-result{container-type:inline-size}.song-preview{grid-template-columns:1fr auto;grid-template-areas:"wave wave""time time""play volume";align-items:center;gap:10px 16px;display:grid}.song-preview-play{grid-area:play}.song-preview-wave{grid-area:wave;min-width:0}.song-preview-time{grid-area:time;justify-content:space-between;gap:6px;display:flex}.song-preview-volume{grid-area:volume}.song-preview-time-separator{display:none}.song-preview-error{grid-column:1/-1}.song-preview-wave-control{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;display:flex;position:relative}.song-preview-wave-control[data-disabled]{cursor:default;opacity:.5}.song-preview-wave-image{fill:none;stroke-width:2px;stroke-linecap:round;width:100%;height:100%;display:block}.song-preview-wave-rest{stroke:var(--fg-4);opacity:.55}.song-preview-wave-played{stroke:var(--bg-accent)}.song-preview-playhead{background:var(--bg-accent);opacity:0;border-radius:999px;outline:none;width:1.5px;height:20px}.song-preview-wave-control:hover .song-preview-playhead,.song-preview-wave[data-dragging] .song-preview-playhead{opacity:1}.song-preview-playhead:has(:focus-visible){opacity:1}.song-preview-playhead:has(:focus-visible){outline:2px solid var(--border-focus);outline-offset:4px;border-radius:2px}.song-preview-playhead[data-disabled]{visibility:hidden}@container (width>=560px){.song-preview{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"play wave time volume"}.song-preview-time-separator{display:inline}}