.waveform-player{color:inherit;font-family:inherit;line-height:var(--waveform-line-height,1.4);--wfp-accent:#71717a;--wfp-button-color:#ffffffe6;--wfp-text-color:#fff;--wfp-text-secondary-color:#fff9}.waveform-player.waveform-theme-light{--wfp-button-color:#000c;--wfp-text-color:#333;--wfp-text-secondary-color:#0009}.waveform-player *{box-sizing:border-box}.waveform-body{gap:var(--waveform-body-gap,8px);flex-direction:column;display:flex}.waveform-track{align-items:center;gap:var(--waveform-track-gap,12px);display:flex;position:relative}.waveform-btn{width:var(--wfp-btn-size,36px);height:var(--wfp-btn-size,36px);min-width:var(--wfp-btn-size,36px);color:var(--wfp-button-color,inherit);cursor:pointer;opacity:.9;background:0 0;border:2px solid;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.waveform-btn:hover:not(:disabled){opacity:1;transform:scale(1.05)}.waveform-btn-minimal{width:calc(var(--wfp-btn-size,36px)*1.1);height:calc(var(--wfp-btn-size,36px)*1.1);min-width:calc(var(--wfp-btn-size,36px)*1.1);opacity:.7;border:none;border-radius:0}.waveform-btn-minimal:hover:not(:disabled){opacity:1;transform:none}.waveform-btn.waveform-btn-minimal svg{width:calc(var(--wfp-btn-size,36px)*.94);height:calc(var(--wfp-btn-size,36px)*.94)}.waveform-btn:disabled{cursor:not-allowed;opacity:.3}.waveform-btn>*{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.waveform-btn svg{width:calc(var(--wfp-btn-size,36px)*.45);height:calc(var(--wfp-btn-size,36px)*.45);fill:currentColor;display:block}.waveform-icon-play svg{margin-left:1px}.waveform-container{cursor:pointer;flex:1;width:100%;min-width:0;min-height:60px;position:relative}.waveform-container:focus-visible{outline:2px solid}.waveform-container canvas{z-index:1;width:100%;max-width:100%;height:100%;transition:opacity .3s;display:block;position:relative}.waveform-info{align-items:center;gap:8px;min-height:20px;font-size:13px;display:flex}.waveform-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.waveform-title{color:var(--wfp-text-color);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.waveform-artist{color:var(--wfp-text-secondary-color);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.waveform-time{color:var(--wfp-text-secondary-color);white-space:nowrap;flex-shrink:0;font-size:11px}.waveform-bpm{color:var(--wfp-text-secondary-color);white-space:nowrap;flex-shrink:0;align-items:center;gap:4px;font-size:11px;display:inline-flex}.waveform-loading{z-index:10;background:#0000001a;position:absolute;inset:0}.waveform-error{z-index:10;background:#0003;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.waveform-error-text{opacity:.7;text-align:center;padding:0 20px;font-size:12px}.waveform-markers{pointer-events:none;z-index:5;position:absolute;inset:0}.waveform-marker{cursor:pointer;pointer-events:all;background:#ffffff80;border:none;width:2px;height:100%;padding:0;transition:all .2s;position:absolute;top:0}.waveform-marker:hover{z-index:20;width:4px}.waveform-marker.active{z-index:10;background:currentColor;width:4px}.waveform-marker-tooltip{color:#fff;white-space:nowrap;pointer-events:none;opacity:0;z-index:1000;background:#000000e6;border-radius:4px;padding:4px 8px;font-size:11px;transition:opacity .2s;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)}.waveform-marker:hover .waveform-marker-tooltip,.waveform-marker.show-label .waveform-marker-tooltip{opacity:1}.waveform-hover-time{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;z-index:1000;background:#000000e6;border-radius:4px;padding:3px 7px;font-size:11px;transition:opacity .15s;position:absolute;bottom:calc(100% + 4px);transform:translate(-50%)}.waveform-seek-handle{opacity:0;pointer-events:none;z-index:6;background:#fff;border-radius:50%;width:11px;height:11px;transition:opacity .12s,transform .12s;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)scale(0);box-shadow:0 1px 4px #00000059}.waveform-seek-handle.is-visible{opacity:1;transform:translate(-50%,-50%)scale(1)}.waveform-seek-handle.is-active{transform:translate(-50%,-50%)scale(1.25)}.waveform-btn:focus-visible{outline-offset:2px;outline:2px solid}.waveform-marker:focus-visible{outline-offset:1px;outline:2px solid;width:4px}.waveform-speed{flex-shrink:0;position:relative}.speed-btn{color:inherit;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:4px;min-width:40px;padding:4px 8px;font-size:11px;transition:all .2s}.speed-btn:hover{background:#ffffff0d;border-color:#ffffff4d}.speed-value{font-weight:600}.speed-menu{z-index:100;background:#000000f2;border:1px solid #fff3;border-radius:6px;min-width:60px;margin-bottom:4px;padding:4px;position:absolute;bottom:100%;right:0}.speed-option{color:#ffffffb3;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:4px;width:100%;padding:6px 12px;font-size:12px;transition:all .2s;display:block}.speed-option:hover{color:#fff;background:#ffffff1a}.speed-option.active{color:#fff;background:#ffffff29;font-weight:600}.waveform-player.waveform-focused{outline:2px solid var(--wfp-accent);outline-offset:2px;border-radius:4px}.waveform-player:focus{outline:none}.waveform-player:focus-visible{outline:1px solid var(--wfp-accent);outline-offset:1px}.waveform-layout-preview .waveform-meta{display:none!important}.waveform-layout-preview .waveform-info{justify-content:center}.waveform-layout-preview .waveform-text{text-align:center;flex:0 auto;align-items:center}.waveform-player.waveform-focused{outline:none}.waveform-track.waveform-align-top{align-items:flex-start}.waveform-track.waveform-align-top .waveform-btn{margin-top:5px}.waveform-track.waveform-align-center{align-items:center}.waveform-track.waveform-align-bottom{align-items:flex-end}.waveform-track.waveform-align-bottom .waveform-btn{margin-bottom:5px}@media (max-width:480px){.waveform-btn{width:32px;min-width:32px;height:32px}.waveform-container{min-height:50px}.waveform-info{font-size:12px}.waveform-artist,.waveform-time,.waveform-bpm{font-size:10px}}@media (prefers-reduced-motion:reduce){.waveform-player *,.waveform-player :before,.waveform-player :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
