.klyp-Waveform{--waveform-bar-color:var(--color-bg-surface-solid);width:100%;display:block;position:relative}.klyp-Waveform__playedFill{inset-block:0;pointer-events:none;background:var(--color-accent);opacity:.25;transition:width var(--duration-fast) linear;border-radius:0;position:absolute;left:0}.klyp-Waveform__playhead{background:var(--color-accent);pointer-events:none;width:1px;transition:left var(--duration-fast) linear;position:absolute;inset-block:0;transform:translate(-50%)}.klyp-Waveform__handle{width:var(--space-12);height:var(--space-12);border-radius:var(--radius-full);background:var(--color-fg-on-active-nav);border:var(--bw-default) solid var(--color-border-strong);box-shadow:0 1px 3px var(--alpha-black-12);pointer-events:none;transition:left var(--duration-fast) linear;position:absolute;top:50%;transform:translate(-50%,-50%)}.klyp-Waveform__canvasWrap{position:absolute;inset:0}.klyp-Waveform__canvas{width:100%;height:100%;display:block}.klyp-Waveform--scrubber{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:var(--r-chip);overflow:hidden}.klyp-Waveform--scrubber:focus-visible{outline:var(--bw-default) solid var(--color-ring);outline-offset:var(--bw-emphasis)}.klyp-Waveform--scrubber[data-dragging]{cursor:grabbing}.klyp-Waveform--scrubber[data-dragging] .klyp-Waveform__playhead,.klyp-Waveform--scrubber[data-dragging] .klyp-Waveform__handle,.klyp-Waveform--scrubber[data-dragging] .klyp-Waveform__playedFill{transition-duration:0s}@media (prefers-reduced-motion:reduce){.klyp-Waveform__playhead,.klyp-Waveform__handle,.klyp-Waveform__playedFill{transition:none}}