Scroll Counter Bar

<!-- A side rail whose fill + knob track scroll progress -->
<div class="nuda-scrollcb__rail" role="progressbar"
     aria-label="Scroll position">
  <div class="nuda-scrollcb__fill"></div>
  <div class="nuda-scrollcb__knob"></div>
</div>

/* Scroll Counter Bar
   A vertical rail with a fill (scaleY) and a knob (translateY) that
   both track scroll progress via scroll() timelines. transform only. */

.nuda-scrollcb__rail { position: relative; overflow: hidden; }

.nuda-scrollcb__fill {
  position: absolute;
  inset: 0;
  background: #e4ff54;
  transform-origin: 50% 0;
  transform: scaleY(0);
  animation: nuda-scrollcb-fill linear;
  animation-timeline: scroll(nearest block);
}

.nuda-scrollcb__knob {
  animation: nuda-scrollcb-knob linear;
  animation-timeline: scroll(nearest block);
}

@keyframes nuda-scrollcb-fill { to { transform: scaleY(1); } }
@keyframes nuda-scrollcb-knob { to { transform: translateY(100%); } }

@supports not (animation-timeline: scroll()) {
  .nuda-scrollcb__fill { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-scrollcb__fill,
  .nuda-scrollcb__knob {
    animation: none;
    animation-timeline: none;
  }
  .nuda-scrollcb__fill { transform: scaleY(1); }
}