.page-scroll-progress {
  position: fixed;
  z-index: 3;
  inset-block: 0;
  right: 0;
  width: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--rule, #ad8f95) 32%, transparent);
  pointer-events: none;
}

.page-scroll-progress::before {
  content: "";
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--accent, #7d294a) 72%, transparent);
  transform: scaleY(var(--scroll-progress, 0));
  transform-origin: top;
}

@media (max-width: 600px) {
  .page-scroll-progress { width: 2px; }
}