/* Position slider on the left edge: shows how far down the page you are (and lets you click to jump). */
.scroll-rail{
  position:fixed;z-index:40;left:18px;top:50%;translate:0 -50%;
  width:22px;height:min(46vh,380px);display:none;cursor:pointer;
}
.js-rail .scroll-rail{display:block}
.scroll-rail-track{
  position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;border-radius:99px;
  background:rgba(255,255,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);overflow:hidden;
}
.scroll-rail-fill{
  position:absolute;left:0;right:0;top:0;height:100%;transform-origin:50% 0;scale:1 var(--p,0);
  background:linear-gradient(180deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5));
  background-size:100% 380px;
}
.scroll-rail-thumb{
  position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--c3) 55%,var(--c2));
  border:2px solid var(--bg);box-shadow:0 2px 6px rgba(0,0,0,.6),0 0 0 2px rgba(var(--c3-rgb),.45),0 0 14px rgba(var(--c3-rgb),.6);
}
.scroll-rail-label{
  position:absolute;left:30px;top:calc(var(--p,0) * 100%);translate:0 -50%;
  padding:3px 8px;border-radius:99px;background:var(--panel);border:1px solid var(--line);
  font-size:11px;font-weight:700;color:var(--muted);opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.scroll-rail:hover .scroll-rail-label,.scroll-rail.is-active .scroll-rail-label{opacity:1}
/* section markers on the track */
.scroll-rail-tick{position:absolute;left:50%;width:10px;height:2px;margin-left:-5px;background:rgba(255,255,255,.35);border-radius:2px}
@media (max-width:1280px){.scroll-rail{display:none!important}}