/* Native scroll timelines pan full-size products; only chapter boundaries need JS. */
.story-scroll.story-large{position:relative;height:calc(100svh + var(--story-distance,3600px))!important;padding-bottom:0}
.story-scroll.story-large .story-sticky{position:sticky!important;top:88px!important;height:calc(100svh - 88px)!important;padding:18px 20px 14px;overflow:hidden}
.story-scroll .story-heading{margin-bottom:10px}.story-scroll .story-heading h2{font-size:clamp(30px,3.6vw,48px);margin:8px 0}.story-scroll .story-heading>p{display:none}
.story-scroll>.story-heading{padding:30px 20px 10px;text-align:center;margin:0}
.story-scroll .story-navigation{margin-bottom:12px}
.story-scroll.story-large .story-scenes{position:relative;display:block;flex:1;min-height:0;overflow:hidden}
.story-scroll.story-large .story-scene{position:absolute!important;inset:0 0 auto!important;padding:0;gap:16px;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .35s ease}
.story-scroll.story-large .story-scene.active{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.story-scroll .story-scene .story-device{animation:none!important}
/* Switch and pan only at chapter boundaries, never on every scroll pixel. */
.story-scroll .story-scene{animation:none!important;transform:translateY(0);transition:opacity .2s ease,transform .24s ease-out}
.story-scroll .story-scene.story-at-end{transform:translateY(calc(-1 * var(--scene-travel,0px)))}
.story-scroll .story-sticky,.story-scroll .story-scenes{contain:layout paint}
.story-scroll .device-screen{overflow:hidden!important}
/* Highlight previews are static: wheel gestures must always reach the page.
   `clip` does not create the nested scrolling box that `hidden` creates. */
#featured .device-screen,#featured .lofi-screen,#featured .lofi-screen-crop{overflow:clip!important;overscroll-behavior:auto!important}
.story-marker{position:absolute;width:1px;left:0;pointer-events:none;visibility:hidden}
.gallery-thumbs,.device-screen{scrollbar-width:none!important}.gallery-thumbs::-webkit-scrollbar,.device-screen::-webkit-scrollbar{display:none!important;width:0;height:0}
.zoomable-screen{overflow:auto!important}.case-preview .device-laptop>.zoomable-screen>img{max-width:none!important;height:auto!important}
.preview-zoom{display:flex;align-items:center;gap:12px;font-size:12px}.preview-zoom button{width:34px;height:34px;border:1px solid #cbdadd;border-radius:50%;background:white;font-size:19px}
.video-external-play{display:inline-flex;align-items:center;background:var(--spinel);padding:13px 24px;border-radius:28px;font-size:13px;font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.github-follow{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--cerulean);padding:11px 0}.github-logo{width:21px;height:21px;flex:none;fill:currentColor}.contact-socials .github-profile{display:inline-flex;align-items:center;gap:8px}
@media(max-width:760px){.story-scroll.story-large .story-sticky{top:112px!important;height:calc(100svh - 112px)!important;padding:12px 7px}.story-scroll .story-heading h2{font-size:30px}.story-scroll .story-navigation{margin-bottom:8px}.story-scroll .story-heading>span{font-size:11px}.language-switch button{padding:6px}.github-follow{font-size:11px}}