/* hide the native scrollbar everywhere; the journey rail replaces it */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

.rail{position:fixed;right:18px;top:120px;bottom:120px;z-index:27;width:26px;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .6s,visibility .6s,transform .8s cubic-bezier(.16,1,.3,1)}
.rail.on{opacity:1;visibility:visible;transform:none}
.rail-track{position:relative;flex:1;width:26px;cursor:ns-resize;touch-action:none}
.rail-track:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(#ffffff2e 0 6px,transparent 6px 12px);border-radius:2px}
.rail-fill{position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;background:linear-gradient(#ff2a5500,#ff2a55 30%,#ff2a55);transform-origin:top;transform:scaleY(0);box-shadow:0 0 12px #ff2a55aa;border-radius:2px}
.rail-stop{position:absolute;left:50%;top:calc(var(--p)*100%);width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;background:none;cursor:pointer}
.rail-stop:before{content:'';position:absolute;inset:5px;border-radius:3px;border:1.5px solid #ffffff59;background:#09090b;transform:rotate(45deg);transition:background .3s,border-color .3s,transform .4s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.rail-stop b{display:none}
.rail-stop span{position:absolute;right:30px;top:50%;transform:translate(8px,-50%);white-space:nowrap;pointer-events:none;padding:6px 11px;border-radius:999px;background:#09090be6;border:1px solid #ffffff24;font:500 11px var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#f3eee6;opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.rail-stop:hover:before{border-color:#fff;transform:rotate(45deg) scale(1.3)}
.rail-stop:hover span,.rail.dragging .rail-stop.active span{opacity:1;transform:translate(0,-50%)}
.rail-stop.passed:before{background:#ff2a55;border-color:#ff2a55}
.rail-stop.active:before{background:#ff2a55;border-color:#fff;box-shadow:0 0 0 5px #ff2a5533,0 0 18px #ff2a55}
.rail-thumb{position:absolute;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;display:grid;place-items:center;border-radius:50%;background:#0b0b0d;border:1.5px solid #ff2a55;box-shadow:0 0 0 6px #ff2a5522,0 8px 24px #000;pointer-events:none;transition:transform .3s}
.rail-thumb img{width:18px;height:auto}
.rail.dragging .rail-thumb{transform:scale(1.15)}
.rail-pct{margin-top:14px;font:500 11px var(--mono,monospace);letter-spacing:.1em;color:#f3eee6;writing-mode:vertical-rl;transform:rotate(180deg)}
.in-wing .rail{opacity:.35;pointer-events:none}

/* keep the right gallery door and cards clear of the rail */
@media (min-width:901px){.wd-right{right:58px!important}}
@media (max-width:900px){
  .rail{right:6px;top:110px;bottom:150px;width:18px}
  .rail-track{width:18px}
  .rail-stop{width:16px;height:16px;margin:-8px 0 0 -8px}
  .rail-stop span{display:none}
  .rail-thumb{width:24px;height:24px;margin:-12px 0 0 -12px}
  .rail-thumb img{width:12px}
  .rail-pct{display:none}
}