/* Scroll chapters complement the existing pixel windows; native scrolling stays native. */
.story-surface{translate:0 var(--story-y,0px);scale:var(--story-scale,1);opacity:var(--story-opacity,1);transform-origin:50% 20%;transition:opacity .12s linear,translate .12s ease-out,scale .12s ease-out}
.story-bridge{display:none!important}
.story-bridge{--story-charge:0;max-width:1060px;margin:-8px auto 15px;height:36px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;pointer-events:none;color:#d8b8e9;font:11px/1.3 var(--font-px),monospace;letter-spacing:.06em;opacity:calc(.42 + var(--story-charge)*.58)}
.story-bridge:before,.story-bridge:after{content:'';height:1px;width:min(14vw,140px);background:linear-gradient(90deg,transparent,#ad8cc7)}
.story-bridge:after{transform:rotate(180deg)}
.story-bridge-star{display:inline-block;color:#ffe4a8;font-size:17px;translate:0 calc((1 - var(--story-charge))*8px);text-shadow:0 0 10px #dfafff66;transition:translate .15s ease-out}
.story-bridge-label{color:#d9c0e7}
.story-rail{position:fixed!important;inset:auto 14px auto auto!important;top:50%!important;width:max-content!important;max-width:42px!important;translate:0 -50%;z-index:1100!important;display:flex;flex-direction:column;gap:8px;padding:13px 7px;background:#30203e9c;border:1px solid #ba93cc66;box-shadow:2px 2px #190d2b;border-radius:3px;isolation:isolate}
.story-rail:before,.story-rail:after{content:'';position:absolute;left:50%;top:24px;bottom:24px;width:1px;z-index:-1;background:#c09cd844}
.story-rail:after{background:linear-gradient(#f4b1db,#a5f0f0);transform:scaleY(var(--story-progress,0));transform-origin:50% 0}
.story-rail button{position:relative;display:grid;place-items:center;width:25px;height:25px;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;color:#bc9acf;cursor:pointer;font:12px/1 var(--font-px),monospace}
.story-rail-mark{display:block;width:7px;height:7px;border:1px solid currentColor;background:#362246;rotate:45deg;transition:background .24s,scale .24s,color .24s}
.story-rail button[aria-current='step']{color:#fff0b6}
.story-rail button[aria-current='step'] .story-rail-mark{background:#ffc7ea;scale:1.4;box-shadow:0 0 9px #f4aadf88}
.story-rail-label{position:absolute;right:35px;top:50%;translate:6px -50%;opacity:0;pointer-events:none;white-space:nowrap;padding:7px 10px;background:#372445;border:1px solid #ae8ac3;color:#f8dff1;font:12px/1.3 var(--font-ui),sans-serif;transition:opacity .15s,translate .15s}
.story-rail button:hover .story-rail-label,.story-rail button:focus-visible .story-rail-label{opacity:1;translate:0 -50%}
.story-rail button:focus-visible{outline:2px solid #b0f0ef!important;outline-offset:2px}
.story-progress{position:fixed!important;inset:0 0 auto!important;width:100%!important;height:3px;z-index:1200!important;pointer-events:none;background:#c8a7db1a}
.story-progress i{display:block;width:100%;height:100%;transform:scaleX(var(--story-progress,0));transform-origin:0 50%;background:linear-gradient(90deg,#d7a4ee,#f2b5da,#a5eff1);box-shadow:0 0 8px #dbb4ef88}
body.editing .story-surface,body.story-static .story-surface{translate:none!important;scale:1!important;opacity:1!important;transition:none!important}
body.editing .story-rail,body.editing .story-bridge,body.viewing-artwork .story-rail{visibility:hidden;pointer-events:none}
html.hx-entry-open .story-rail,html.hx-entry-open .story-progress{visibility:hidden}
@media(max-width:1300px){.story-rail{right:5px!important;gap:6px;padding:10px 3px}.story-rail button{width:22px;height:22px}}
@media(max-width:1050px){.story-rail{display:none}.story-bridge{font-size:10px;gap:9px;height:29px;margin:-4px 18px 10px}.story-bridge-star{font-size:14px}}
@media(prefers-reduced-motion:reduce){.story-surface{translate:none!important;scale:1!important;opacity:1!important;transition:none!important}.story-bridge-star{translate:none!important}.story-rail *, .story-bridge *{transition:none!important}}
@media print{.story-rail,.story-progress,.story-bridge{display:none!important}.story-surface{translate:none!important;scale:1!important;opacity:1!important}}
