/* Preserve the existing elevator; the handle represents actual page progress. */
#elevator { position: relative; }
#elevator .elevator-dots { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#elevator .elevator-track { position: absolute; top: 13px; bottom: 13px; left: 0; width: 100%; pointer-events: none; }
#elevator .elevator-thumb { position: absolute; top: 0; left: 50%; width: 28px; height: 20px; padding: 0; border: 1px solid var(--beige); border-radius: 999px; background: var(--cta-primary); box-shadow: 0 3px 10px rgba(36,26,22,.15), inset 0 1px 0 rgba(255,255,255,.5); transform: translate(-50%, var(--scrubber-y, 0px)); z-index: 2; touch-action: none; user-select: none; cursor: grab; pointer-events: auto; }
#elevator .elevator-thumb::after { content: ''; display: block; width: 10px; height: 2px; border-radius: 2px; margin: auto; background: var(--beige); box-shadow: 0 3px 0 rgba(255,250,243,.6); }
#elevator .elevator-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#elevator.is-dragging { user-select: none; }
#elevator.is-dragging .elevator-thumb { cursor: grabbing; }
/* Five context labels share the handle position; only visual hierarchy changes. */
#elevator { --label-spacing: 34px; }
#elevator .elevator-label { --label-step: 0; position: absolute; top: 10px; right: 38px; transform: translateY(calc(var(--scrubber-y,0px) + var(--label-step) * var(--label-spacing) - 50%)); padding: 6px 12px; background: linear-gradient(135deg,rgba(255,250,243,.96),rgba(255,250,243,.86)); color: var(--ink); border: 1px solid rgba(255,255,255,.92); border-radius: 12px; font-size: 13px; font-weight: 650; line-height: 1.25; white-space: nowrap; max-width: calc(100vw - 70px); box-shadow: 0 8px 24px rgba(36,26,22,.09),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(10px); opacity: 0; }
#elevator .elevator-label--near { padding: 5px 10px; font-size: 12px; font-weight: 600; background: linear-gradient(135deg,rgba(255,250,243,.84),rgba(255,250,243,.68)); box-shadow: 0 5px 16px rgba(36,26,22,.055); }
#elevator .elevator-label--far { padding: 4px 9px; font-size: 11px; font-weight: 500; background: rgba(255,250,243,.52); border-color: rgba(255,255,255,.55); box-shadow: none; }
#elevator .elevator-label[hidden] { display: none; }
#elevator:hover .elevator-label, #elevator.is-dragging .elevator-label, #elevator:focus-within .elevator-label { opacity: 1; }
#elevator:hover .elevator-label--near, #elevator.is-dragging .elevator-label--near, #elevator:focus-within .elevator-label--near { opacity: .82; }
#elevator:hover .elevator-label--far, #elevator.is-dragging .elevator-label--far, #elevator:focus-within .elevator-label--far { opacity: .52; }
#elevator .navdot .tooltip { display: none; }
#elevator .navdot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width:739px) { #elevator { --label-spacing: 29px; } #elevator .elevator-label { right: 36px; padding-inline: 10px; } #elevator .elevator-dots { gap: 8px; } #elevator .elevator-track { top: 10px; bottom: 10px; } }
@media (prefers-reduced-motion:reduce) { #elevator .navdot, #elevator .tooltip { transition: none; } }