/* Approved camera choreography, closer editorial layout and persistent live screens. */
.story-final { --copy-left:max(80px,calc(50% - 600px)); --stage-left:max(440px,calc(50% - 240px)); }
.story-final .story-stage { inset:64px 24px 124px var(--stage-left); display:flex;align-items:center;justify-content:flex-start;transform:none;overflow:visible;mask:none;-webkit-mask:none; }
.story-final .cinema-stage { width:min(100%,calc((100svh - 188px)*4/3));height:auto;max-height:none;aspect-ratio:4/3;mix-blend-mode:normal;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 90%,transparent);mask-composite:intersect; }
.story-final .cinema-world { position:absolute;inset:0;transform-origin:74% 35%;will-change:transform; }
.story-final .cinema-world > img,.story-final .cinema-world > .story-travel,.story-final .cinema-world > .story-live-film { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block; }
.story-final .cinema-poster { mask:none;z-index:0; }
.story-final .story-travel { opacity:0;z-index:1;pointer-events:none; }
.story-final .story-travel.is-ready { opacity:1; }
.story-final .story-live-film { opacity:0;z-index:2;pointer-events:none;transition:opacity 100ms linear; }
.story-final .story-live-film[data-active="true"].is-ready { opacity:1; }
.story-final .story-glow,.story-final .story-pin::after { display:none; }
.story-final .story-copy { left:var(--copy-left);width:min(350px,27vw);top:47%; }
.story-final .story-card { filter:none;transition:opacity 180ms ease,transform 220ms ease; }
.story-final .story-card h2 { font-size:clamp(31px,3.45vw,49px);line-height:1.03;letter-spacing:-.025em;text-shadow:none; }
.story-final .story-nav { bottom:93px;left:var(--stage-left);right:24px; }
.story-final .story-scroll-progress { left:calc(var(--copy-left) - 27px);right:auto;top:23%;bottom:auto;height:49%;width:2px;background:#33312e; }
.story-final .story-scroll-progress span { transform:scaleY(var(--story-progress,0));transform-origin:center top;background:#d9ba95; }
.story-final .story-pin > .motion-control { top:37px;bottom:auto;right:30px; }
.xy-modes { position:absolute;left:14%;right:0;bottom:2px;display:flex;justify-content:center;gap:7px;z-index:6;opacity:0;visibility:hidden;transition:opacity 180ms; }
.story[data-step="3"] .xy-modes { opacity:1;visibility:visible; }
.xy-modes span { display:flex;align-items:center;gap:7px;min-height:36px;padding:7px 10px;background:#141413;border:1px solid #393733;border-radius:4px;color:#a7a29b;font:10px var(--mono,monospace); }
.xy-modes span::before { content:'';width:5px;height:5px;border-radius:50%;background:var(--mode-color); }
.xy-modes span.active { color:#f3e9d9;border-color:var(--mode-color);background:#24221e; }
.xy-modes span.active::before { box-shadow:0 0 9px var(--mode-color); }
.spot-simple .spot-grid { width:min(1180px,100% - 96px);grid-template-columns:minmax(280px,370px) minmax(0,620px);gap:64px;justify-content:center; }
.spot-simple.spot-flip .spot-grid { grid-template-columns:minmax(0,620px) minmax(280px,370px); }
.spot-simple .spot-window { width:100%;max-width:600px;justify-self:center; }
.spot-simple .spot-pin { background:none; }
#page-mod .frame { clip-path:polygon(4.1% 2.9%,94.8% 2.9%,97.9% 77.1%,97.3% 99.8%,1.7% 99.8%,.9% 77.1%); }
#page-seq .frame { clip-path:polygon(3.2% 0,96.7% 0,100% 77.2%,99.3% 100%,.6% 100%,0 77.2%); }
#page-fx .frame { clip-path:polygon(3.2% 0,96.9% 0,100% 77.2%,99.3% 100%,.6% 100%,0 77.2%); }
@media(min-width:1700px) { .story-final { --copy-left:calc(50% - 650px); --stage-left:calc(50% - 245px); } }
@media(max-width:1050px) and (min-width:861px) {
 .story-final { --copy-left:55px;--stage-left:360px; }
 .story-final .story-copy { width:275px; }
 .spot-simple .spot-grid,.spot-simple.spot-flip .spot-grid { gap:32px;width:calc(100% - 64px); }
 .xy-modes { left:0;gap:4px; }
 .xy-modes span { padding:6px;font-size:9px; }
}
@media(max-width:860px) {
 .story-final { --copy-left:28px; }
 .story-final .story-stage { inset:72px 8px auto;height:35svh;justify-content:center; }
 .story-final .cinema-stage { width:min(100%,calc(35svh*4/3));height:auto; }
 .story-final .story-copy { top:calc(35svh + 98px);left:28px;right:24px;width:auto;transform:none; }
 .story-final .story-card,.story-final .story-card[data-for] { top:0;transform:none; }
 .story-final .story-card h2 { font-size:clamp(27px,6.9vw,34px); }
 .story-final .story-nav { bottom:111px;left:24px;right:24px; }
 .story-final .story-scroll-progress { left:12px;top:calc(35svh + 100px);height:220px;bottom:auto;right:auto;width:1px; }
 .story-final .story-pin > .motion-control { top:50px;right:12px; }
 .xy-modes { left:0;right:0;bottom:-19px;gap:4px; }
 .xy-modes span { min-height:30px;font-size:9px;padding:6px 7px;gap:5px; }
 .spot-simple .spot-grid,.spot-simple.spot-flip .spot-grid { grid-template-columns:1fr;width:calc(100% - 40px);gap:28px; }
 .spot-simple .spot-window { width:90%;max-width:540px; }
}
@media(max-width:860px) and (max-height:740px) {
 .story-final .story-stage { top:48px;height:30svh; }
 .story-final .cinema-stage { width:min(100%,40svh); }
 .story-final .story-copy { top:calc(30svh + 80px); }
 .story-final .story-scroll-progress { top:calc(30svh + 82px);height:200px; }
 .story-final .story-card h2 { font-size:24px; }
 .story-final .story-card > p:not(.num):not(.eyebrow):not(.story-hint) { font-size:12px;line-height:1.4; }
 .story-final .story-hint { display:none; }
 .story-final .story-pin > .motion-control { top:16px; }
}
@media(prefers-reduced-motion:reduce) {
}
.story-final .story-travel.is-ready { opacity:0; }
.story-final .story-travel.is-ready[data-active="true"] { opacity:1; }
.story-final .live-display { position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;z-index:5;pointer-events:none;mix-blend-mode:screen;opacity:0; }
.story-final .live-display.is-ready { opacity:1; }
.story-final .xy-live-display { width:1014px;height:820px; }
.story-final .xy-lamps-display { width:580px;height:184px; }

.story-final .live-displays { position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:screen; }

.story-final .scene-composite { position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;opacity:0; }
.story-final .has-composite .scene-composite { opacity:1; }
.story-final .has-composite > .story-travel,.story-final .has-composite > .story-live-film,.story-final .has-composite > .live-displays { opacity:0!important; }
.story-final .story-live-film { transition:none; }

.story[data-compositor="atomic-webgl"] .live-displays { visibility:hidden; }

/* The pointer follows the presented XY puck through the camera projection. */
.story-final .xy-demo-cursor { position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;opacity:var(--xy-focus,0); }
.xy-demo-cursor path { fill:#f5eee3;stroke:#171411;stroke-width:1.5;stroke-linejoin:round; }
@media(prefers-reduced-motion:reduce) { .story-final .xy-demo-cursor { display:none; } }

/* Keep the instrument, tagline and actions together inside the opening view. */
.hero-ui.live-instrument { margin-top:calc(-2.5vw - 8px);flex-shrink:0; }
.hero-stack .hero-foot { margin-top:clamp(-44px,-3vw,-24px); }
.hero .hero-stack .hero-actions { margin-top:18px; }
.showcase-wrap { max-width:1440px;grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr);gap:clamp(32px,4vw,56px); }
.offer-art .offer-plugin { width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;mask:none;mix-blend-mode:normal; }
.offer-art-duo { grid-template-columns:minmax(0,1.35fr) auto minmax(0,1fr); }
@media(max-width:900px) {
 .showcase-wrap { max-width:780px;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "video";gap:32px; }
}
@media(max-width:860px) {
 .hero-ui.live-instrument { margin-top:calc(-1vw - 8px); }
 .hero-stack .hero-foot { margin-top:-2vw; }
 .hero:has(.hero-stack) { padding-bottom:36px; }
}

.story-final .cinema-world > .import-waveform { position:absolute;inset:auto;left:0;top:0;width:552px;height:144px;max-width:none;z-index:10;transform-origin:0 0;pointer-events:none;visibility:hidden; }

/* The real character display runs independently of the camera and drop gesture. */
.story-final .character-live-layer { position:absolute;inset:0;z-index:6;pointer-events:none; }
.story-final .character-live-display { position:absolute;left:0;top:0;width:520px;height:502px;max-width:none;transform-origin:0 0;visibility:hidden; }
.story-final[data-imported="true"] .character-live-display.is-ready { visibility:visible; }
.story-final .has-composite > .character-live-layer { opacity:0!important; }

.story-final .synth-live-display { position:absolute;left:0;top:0;width:526px;height:502px;max-width:none;transform-origin:0 0;visibility:hidden; }
.story-final .synth-live-display.is-ready { visibility:visible; }

/* Both OSC 1 states keep playing; the drop only switches their visibility. */
.story-final .character-native-display { position:absolute;left:0;top:0;width:520px;height:502px;max-width:none;transform-origin:0 0;visibility:hidden; }
.story-final[data-imported="false"] .character-native-display.is-ready { visibility:visible; }

/* Keep the mode legend with the performance explanation. */
.story-final .story-scroll-progress span { background:#fff; }
.story-final .story-copy .xy-modes { position:static;display:flex;flex-wrap:nowrap;width:100%;gap:5px;margin-top:22px; }
.story-final .story-copy .xy-modes span { flex:1 0 auto;justify-content:center;min-height:32px;padding:6px 5px;gap:4px;white-space:nowrap;font-size:10px; }
.story-final .story-copy .xy-modes span::before { flex-shrink:0; }
.story-final .character-loading-display { position:absolute;left:0;top:0;width:520px;height:502px;max-width:none;transform-origin:0 0;visibility:hidden; }
.story-final[data-screen-phase="loading"] .character-loading-display.is-ready { visibility:visible; }
.story-final[data-screen-phase="loading"] .character-live-display { visibility:hidden; }

@media(max-width:860px) {
 .story-final[data-step="3"] .story-copy { top:calc(35svh + 64px); }
 .story-final .story-copy .xy-modes { margin-top:14px; }
}
@media(max-width:860px) and (max-height:740px) {
 .story-final[data-step="3"] .story-copy { top:calc(30svh + 58px); }
 .story-final .story-copy .xy-modes { gap:5px;margin-top:10px; }
 .story-final .story-copy .xy-modes span { min-height:26px;padding:4px 7px;font-size:8px; }
}

/* Chapters follow the active copy, keeping the product view clear. */
.story-final .story-copy .story-card[aria-hidden] { top:auto;bottom:auto;transform:none; }
.story-final .story-copy .story-card[aria-hidden="true"] { position:absolute;visibility:hidden; }
.story-final .story-copy .story-card[aria-hidden="false"] { position:relative;visibility:visible; }
.story-final .story-copy .story-nav { position:static;inset:auto;width:100%;margin-top:20px;display:flex;justify-content:space-between;gap:8px; }
.story-final .story-copy .story-nav button { padding:10px 0;font-size:10px;white-space:nowrap; }
.story-final .story-copy .story-nav button::after { left:0;right:0; }
@media(min-width:861px) { .story-final .story-copy { top:44%; } }
@media(min-width:861px) and (max-width:1050px) {
 .story-final .story-copy .story-nav { display:grid;grid-template-columns:1fr 1fr;gap:0 14px; }
 .story-final .story-copy .story-nav button { text-align:left; }
}
@media(max-width:860px) {
 .story-final .story-copy .story-nav { margin-top:14px;gap:7px; }
}

/* Give both instruments room, with the bundle shown side by side. */
.offer-art { position:relative;height:auto;min-height:0;aspect-ratio:1.75;margin:-18px -18px 0;border-radius:16px;align-items:center;justify-items:center;padding:18px;overflow:visible; }
.offer-art .offer-plugin { width:100%;height:auto;max-height:100%;border-radius:14px;background:#000;transform:none; }
.offer-art-duo { display:grid;grid-template-columns:minmax(0,1.15fr) auto minmax(0,1fr);gap:10px; }
.offer-art-duo .offer-plugin { position:static;width:100%;transform:none; }
.offer-art-duo .modfx-art { position:static;width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:14px; }
.offer-art-duo .plus { position:static;font-size:24px;line-height:28px; }

@media(max-width:1200px) {
 .story-final .story-copy .xy-modes { gap:4px; }
 .story-final .story-copy .xy-modes span { font-size:9px;padding-inline:4px; }
}
@media(max-width:360px) {
 .story-final .story-copy .xy-modes { gap:3px; }
 .story-final .story-copy .xy-modes span { font-size:8px;padding-inline:3px;gap:3px; }
}

/* Fade the completed progress track; restore it when re-entering the walkthrough. */
.story-final .story-scroll-progress { opacity:1;transition:opacity 350ms ease-out;pointer-events:none; }
.story-final .story-scroll-progress.is-complete { opacity:0; }
@media(prefers-reduced-motion:reduce) { .story-final .story-scroll-progress { transition:none; } }