Scrubber

<!-- Scrubber — set widths via inline style or JS for live progress/buffer -->
<div class="nuda-scrub">
  <span class="nuda-scrub__time">1:24</span>
  <div class="nuda-scrub__track">
    <span class="nuda-scrub__buffer"   style="width: 55%"></span>
    <span class="nuda-scrub__progress" style="width: 38%"></span>
    <span class="nuda-scrub__thumb"    style="left: 38%"></span>
  </div>
  <span class="nuda-scrub__time">3:42</span>
</div>

/* Scrubber
   Track grows on hover; thumb appears; buffered region shown behind progress.
   Customize: --scrub-accent, --scrub-track */

.nuda-scrub {
  --scrub-accent: #e4ff54;
  --scrub-track: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  width: 100%;
  max-width: 480px;
}

.nuda-scrub__time {
  font: 600 0.7rem ui-monospace, monospace;
  color: #a1a1aa;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.nuda-scrub__track {
  position: relative;
  flex: 1;
  height: 4px;
  background: var(--scrub-track);
  border-radius: 2px;
  cursor: pointer;
  transition: height 0.2s;
}

.nuda-scrub__track:hover { height: 6px; }

.nuda-scrub__buffer {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.nuda-scrub__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--scrub-accent), rgba(228, 255, 84, 0.7));
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(228, 255, 84, 0.5);
}

.nuda-scrub__thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fafafa;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s;
  box-shadow: 0 0 8px rgba(228, 255, 84, 0.5);
}

.nuda-scrub__track:hover .nuda-scrub__thumb {
  transform: translate(-50%, -50%) scale(1);
}