.page-rail { position: fixed; z-index: 15; right: 8px; top: 50%; transform: translateY(-50%); width: 44px; display: grid; justify-items: center; gap: 16px; }
.rail-end { color: var(--muted); font: 9px var(--mono); pointer-events: none; }
.rail-track { position: relative; width: 44px; height: min(46vh, 410px); min-height: 280px; }
.rail-line { pointer-events: none; position: absolute; width: 1px; top: 5px; bottom: 5px; left: 21px; background: #40454a; }
.rail-line>span { position: absolute; top: 0; width: 1px; height: 0; background: #ef795f; }
#page-position { appearance: none; -webkit-appearance: none; writing-mode: vertical-lr; direction: ltr; position: absolute; margin: 0; inset: 0; width: 44px; height: 100%; background: transparent; cursor: ns-resize; border-radius: 6px; }
#page-position::-webkit-slider-runnable-track { width: 1px; background: transparent; }
#page-position::-moz-range-track { width: 1px; background: transparent; }
#page-position::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 9px; height: 20px; margin-left: -4px; border-radius: 4px; background: var(--ink); border: 2px solid var(--black); box-shadow: 0 0 0 1px #737779; }
#page-position::-moz-range-thumb { width: 5px; height: 16px; border-radius: 4px; background: var(--ink); border: 2px solid var(--black); box-shadow: 0 0 0 1px #737779; }
.rail-stops { position: absolute; top: 10px; bottom: 10px; left: -24px; width: 44px; pointer-events: none; }
.rail-stops a { position: absolute; width: 44px; height: 44px; right: 0; transform: translateY(-50%); display: grid; place-items: center; pointer-events: auto; text-decoration: none; }
.rail-stops a:after { content: ''; width: 5px; height: 1px; background: #626b73; }
.rail-stops a[aria-current=location]:after { background: var(--ink); width: 10px; }
.rail-stops a>span { position: absolute; right: 38px; white-space: nowrap; padding: 5px 9px; background: #202427; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); font-size: 11px; opacity: 0; pointer-events: none; }
.rail-stops a:hover>span, .rail-stops a:focus-visible>span { opacity: 1; }

.mobile-chapters { display:none; }
@media(max-width:1100px) {
  .page-rail { right:0; }
  .rail-stops { display:none; }
}
@media(max-width:800px) {
  body:has(.page-rail:not([hidden])) { padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
  html:has(.page-rail:not([hidden])) { scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
  .page-rail { right:0; left:0; top:auto; bottom:0; transform:none; width:auto; display:grid; grid-template-columns:minmax(0,1fr) 38px; gap:0 12px; padding:8px 24px calc(8px + env(safe-area-inset-bottom)); background:var(--black); border-top:1px solid var(--rule-2); pointer-events:auto; }
  .mobile-chapters { display:flex; align-items:center; gap:4px; width:100%; grid-column:1/-1; }
  .mobile-chapters select { min-width:0; flex:1; height:44px; padding:0 8px 0 0; border:0; border-radius:0; background:var(--black); color:var(--ink); font:13px var(--sans); }
  .mobile-chapters select:focus-visible { outline:2px solid var(--vermilion); outline-offset:2px; }
  .mobile-chapters button { width:44px; height:44px; display:grid; place-items:center; flex:none; border:1px solid var(--rule); border-radius:4px; }
  .mobile-chapters button:disabled { opacity:.3; }
  .mobile-chapters svg { width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.5; }
  .rail-start { display:none; }
  .page-rail .rail-track { width:100%; min-height:0; height:44px; }
  .page-rail .rail-line { top:21px; bottom:auto; left:0; width:100%; height:2px; }
  .page-rail .rail-line>span { left:0; height:2px; }
  .page-rail #page-position { display:block; writing-mode:horizontal-tb; width:100%; height:44px; cursor:ew-resize; }
  .page-rail #page-position::-webkit-slider-runnable-track { width:100%; height:2px; background:transparent; }
  .page-rail #page-position::-moz-range-track { width:100%; height:2px; background:transparent; }
  .page-rail #page-position::-webkit-slider-thumb { width:20px; height:20px; margin:-9px 0 0; border-radius:50%; border:3px solid var(--black); box-shadow:0 0 0 1px var(--muted); }
  .page-rail #page-position::-moz-range-thumb { width:14px; height:14px; border:3px solid var(--black); border-radius:50%; box-shadow:0 0 0 1px var(--muted); }
  .page-rail #page-percent { display:block; align-self:center; font-size:10px; }
  .page-rail .rail-stops { display:none; }
}