.waveform {
  min-width: 0;
  width: 100%;
}
.waveform-track {
  position: relative;
  width: 100%;
  height: var(--waveform-height, 48px);
  min-height: 40px;
  display: grid;
  align-items: center;
}
.waveform-graphic {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--waveform-ink, var(--muted));
  grid-area: 1 / 1;
  pointer-events: none;
}
.waveform-played {
  color: var(--waveform-played-ink, var(--accent));
  clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
}
.waveform-track input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.waveform-track:has(input:focus-visible) {
  outline: 2px solid var(--waveform-played-ink, var(--accent));
  outline-offset: 3px;
  border-radius: 3px;
}
.waveform-times {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .3rem;
  font: .7rem/1.4 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}