:root{--ink:#0b0d10;--gold:#c8a458;--paper:#fbfbf8}
*{box-sizing:border-box}html{background:var(--ink)}body{margin:0;min-width:320px;overflow-x:hidden;background:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.story{position:relative;height:440vh;background:var(--ink)}
.stage{position:sticky;top:0;width:100%;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:var(--ink)}
.scene-world,.full-product{position:absolute;inset:0}.scene-world{z-index:1;will-change:transform,opacity;transform:translateZ(0)}
.office-closed,.closed-erase,.open-base{position:absolute;display:block;max-width:none;user-select:none;pointer-events:none;transform:translateZ(0)}
.closed-erase,.open-base{opacity:0;will-change:opacity;filter:none;box-shadow:none}
.open-lid{position:absolute;z-index:5;opacity:0;overflow:visible;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity;pointer-events:none;filter:none;box-shadow:none}
.lid-frame{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.screen-window{position:absolute;z-index:1;overflow:hidden;opacity:1;background:#05070a;border:0;border-radius:0;box-shadow:none;will-change:filter}
#preview-frame{position:absolute;top:0;left:0;border:0;transform-origin:0 0;pointer-events:none;background:var(--paper);opacity:0;will-change:opacity}
.screen-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.055),transparent 30%,rgba(255,255,255,.012) 58%,transparent 100%);mix-blend-mode:screen;opacity:.25}
.full-product{z-index:10;overflow:hidden;opacity:0;pointer-events:none;transform-origin:0 0;background:var(--paper);will-change:transform,opacity,border-radius}.full-product.is-live{pointer-events:auto}
#full-frame{display:block;width:100%;height:100%;border:0;background:var(--paper)}
.scroll-cue{position:absolute;z-index:20;left:50%;bottom:clamp(20px,4vh,42px);display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateX(-50%);filter:drop-shadow(0 3px 12px rgba(0,0,0,.65));will-change:opacity}
.scroll-cue span{color:rgba(255,255,255,.9);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.25);transform-origin:50% 0;opacity:.25}55%{transform:scaleY(1);opacity:1}100%{transform:translateY(12px) scaleY(.35);transform-origin:50% 100%;opacity:0}}
.progress{position:absolute;z-index:30;top:0;left:0;width:100%;height:2px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold),#f0d597);opacity:.8;pointer-events:none}
@media(max-width:760px){.story{height:350vh}}
@media(prefers-reduced-motion:reduce){.story{height:100vh;height:100svh}.scene-world,.scroll-cue,.progress{display:none}.full-product{opacity:1!important;transform:none!important;pointer-events:auto;border-radius:0!important}}