.scroll-rail { position: absolute; inset: 10px auto 10px calc(100% + 3px); width: 26px; padding: 0 3px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background: none; pointer-events: auto; touch-action: none; cursor: ns-resize; user-select: none; }
.scroll-rail i { position: static; flex: none; display: block; width: var(--tick-width, 4px); height: 2px; background: var(--line); opacity: 1; transition: width 80ms linear, background-color 80ms linear; pointer-events: none; }
.scroll-rail i[data-visible="true"] { background: var(--ink-4); }
.scroll-rail i[data-current="true"] { background: var(--ink-1); }
.scroll-rail:focus-visible i[data-current="true"] { background: var(--hot); width: 22px; }
@media (min-width: 761px) {
  .scroll-rail { top: calc(10px + var(--scroll-inset-start)); bottom: calc(10px + var(--scroll-inset-end)); }
}
@media (max-width: 760px) {
  .scroll-rail { inset: calc(var(--mobile-content-top) + 12px) -7px calc(10px + var(--gap)) auto; width: 6px; padding: 0; align-items: center; pointer-events: none; }
  .scroll-rail i { width: 3px; }
  .scroll-rail i[data-current="true"] { width: 5px; }
}
@media (prefers-reduced-motion: reduce) { .scroll-rail i { transition: none; } }