.sr-scroll-gear {
  display: none;
  position: fixed;
  --cog-size: clamp(420px, 64vh, 800px);
  /* Never cross the 1280px content column, even on smaller desktop screens. */
  --cog-exposed: clamp(20px, calc((100vw - 1280px) / 2 - 24px), 230px);
  left: 0;
  top: calc(50% + 36px - var(--cog-size) / 2);
  width: var(--cog-exposed);
  height: var(--cog-size);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 50;
  opacity: .18;
  contain: layout paint;
}
.sr-scroll-gear-rotor {
  position: absolute;
  right: 0;
  width: var(--cog-size);
  height: var(--cog-size);
  max-width: none;
  transform-origin: 50% 50%;
}
@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  .sr-scroll-gear.is-ready { display: block; }
}
.sr-scroll-gear.is-running .sr-scroll-gear-rotor { will-change: transform; }