.cinema-canvas,.scene-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.cinema-canvas{z-index:1}.scene-canvas{z-index:0}.route>.wrap{z-index:2}.route .section-heading{position:relative}.scene-status{position:absolute;right:0;top:52px;font-size:13px!important;color:#e8c081;max-width:330px!important;text-align:right;letter-spacing:.02em}.hero-signal{display:none}.motion-enabled:not(.no-vhs) .grain{animation:tape-grain .38s steps(3) infinite;opacity:.045}.grain{inset:-8px}.hero-art:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(0deg,transparent 0 3px,#08130e12 3px 4px);opacity:.8}.no-vhs .hero-art:after{display:none}.motion-enabled:not(.no-vhs) .monitor-lines{animation:tape-lines 1.2s linear infinite}.motion-enabled:not(.no-vhs) .route:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 4px,#e7ddbc07 4px 5px);animation:tape-lines 1.2s linear infinite;z-index:1}
@keyframes tape-grain{0%{transform:translate(0,0)}33%{transform:translate(3px,-2px)}66%{transform:translate(-3px,3px)}100%{transform:translate(1px,-3px)}}@keyframes tape-lines{to{background-position:0 20px}}
@media(max-width:700px){.scene-status{position:static;text-align:left;margin-top:9px!important;font-size:11px!important;max-width:100%!important}.route .orbit{margin-top:110px}}

/* Story screen is self-contained: interface never sits under moving artwork. */
.route.route-story{min-height:0;overflow:hidden;background:#111b17;padding-top:100px;padding-bottom:90px}
.route.route-story:before,.route.route-story:after{display:none!important}
.route-story>.wrap{position:relative}
.route-story .section-heading{margin-bottom:40px;align-items:flex-end}
.route-story .section-heading h2{font-size:clamp(40px,4.9vw,70px)}
.route-story .section-heading>p{font-size:16px;line-height:1.65}
.story-viewport{position:relative;isolation:isolate;height:clamp(390px,35vw,510px);overflow:hidden;background:#08130f 50% 28% / cover no-repeat;border-top:1px solid #c8bea344;border-bottom:1px solid #c8bea32b}
.story-viewport:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08130f25 20%,#08130f00 65%,#08130f50)}
.story-viewport:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 85px #06100b66;background:linear-gradient(#0b140d8a,transparent 20%,transparent 78%,#0b140d9c)}
.story-viewport .scene-canvas{z-index:0;display:block}
.story-frame-top,.story-frame-bottom{position:absolute;z-index:2;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.045em;pointer-events:none;color:#ddd4bb}
.story-frame-top{top:20px}.story-frame-bottom{bottom:18px;color:#c8bfa8}.story-frame-top>span:first-child{font-size:12px;letter-spacing:.02em}.story-chapter-code{white-space:nowrap;font-size:10px;color:#b5b7a8}.story-chapter-code b{color:#edd3a0;font-weight:400}
.story-frame-bottom>div{display:flex;align-items:center;gap:9px}
.route-story .scene-status{position:static;text-align:left;font-size:12px!important;margin:0!important;max-width:none!important;color:#ead1a3;letter-spacing:.015em}
.story-live-dot{display:block;width:5px;height:5px;background:#e7b875;border-radius:50%;box-shadow:0 0 9px #edbb7780;flex-shrink:0}
.story-fallback{position:absolute;left:22%;top:38%;width:28%;z-index:0}.story-fallback img{display:block;width:100%;height:auto}.story-art-ready .story-fallback{display:none}
.story-navigation{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid #c9c0a933;margin-top:0}
.story-navigation button{position:relative;padding:24px 16px 26px;display:flex;align-items:center;gap:16px;text-align:left;font-size:16px;min-height:78px;color:#b5b5a5;transition:background .2s,color .2s}
.story-navigation button+button{border-left:1px solid #c9c0a91a}
.story-navigation small{font-size:10px;letter-spacing:.08em;color:#a8a890}.story-navigation i{position:absolute;bottom:-3px;left:16px;width:5px;height:5px;background:#777e6d;border-radius:50%}
.story-navigation button[aria-pressed=true]{background:#e5bd7710;color:#f1deba;box-shadow:inset 0 -1px #e5bc75}.story-navigation button[aria-pressed=true] small{color:#e8be7b}.story-navigation button[aria-pressed=true] i{background:#e8bd7a;box-shadow:0 0 14px #e8bd7a99}
.story-navigation button:hover{color:#f1deba;background:#e5bd7709}.story-navigation button:focus-visible{outline-offset:-5px}
.route-story .story-detail{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);gap:70px;min-height:305px;padding:42px 0 0;border-top:0;margin-top:0}
.story-stage-heading{display:grid;grid-template-columns:45px 1fr;gap:13px 21px;align-content:start}.story-stage-heading #stage-count{font-size:10px;letter-spacing:.04em;color:#a3a998;padding-top:8px;white-space:nowrap}
.route-story .story-stage-heading h3{font-size:30px;line-height:1.2;max-width:100%;margin:0}
.route-story .story-stage-heading p{grid-column:2;font-size:15px;line-height:1.65;max-width:43ch;margin:0;color:#b6bbaa;border:0;padding:0}
.route-story .story-stage-heading button{grid-column:2;justify-self:start;align-self:start;margin-top:8px;font-size:13px;padding:5px 0;color:#e9d7b4}
.story-deliverables{margin:0;display:grid;align-content:start;gap:0}.story-deliverables>div{display:grid;grid-template-columns:112px 1fr;gap:20px;padding:0 0 17px;margin-bottom:17px;border-bottom:1px solid #c5bca31c}.story-deliverables>div:last-child{margin-bottom:0;border-bottom:0}.story-deliverables dt{font-size:11px;color:#b2b79e;line-height:1.7}.story-deliverables dd{margin:0;font-size:14px;color:#d1d0bd;line-height:1.65}
.route-story .story-note{font-size:11px;color:#87937f;line-height:1.7;max-width:none;padding-top:24px;border-top:1px solid #c9c0a91a;margin-top:18px}
@media(min-width:1500px){.story-viewport{height:530px}}
@media(max-width:1050px){.route-story .story-detail{gap:36px;grid-template-columns:1fr 1fr}.story-navigation button{font-size:14px;gap:10px;padding-inline:12px}.story-stage-heading{grid-template-columns:1fr;gap:12px}.route-story .story-stage-heading h3,.route-story .story-stage-heading p,.route-story .story-stage-heading button{grid-column:1}.story-stage-heading #stage-count{padding:0}.story-deliverables>div{grid-template-columns:85px 1fr;gap:12px}}
@media(max-width:700px){.route.route-story{padding-block:65px}.route-story .section-heading h2{font-size:40px}.route-story .section-heading{margin-bottom:27px}.route-story .section-heading>p{font-size:14px;margin-top:19px}.story-viewport{height:320px;margin-inline:-20px;background-size:auto 100%;background-position:50% 0}.story-frame-top,.story-frame-bottom{left:20px;right:20px;gap:12px}.story-frame-top{top:15px}.story-frame-top>span:first-child{font-size:10px;max-width:180px}.story-chapter-code{font-size:9px}.story-frame-bottom{bottom:15px;align-items:flex-start;flex-direction:column;gap:4px}.story-frame-bottom>span{font-size:9px;padding-left:14px}.route-story .scene-status{font-size:11px!important}.story-navigation{margin-inline:-10px}.story-navigation button{min-height:84px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:13px 8px 19px;font-size:11px}.story-navigation small{font-size:9px}.story-navigation i{left:8px}.route-story .story-detail{display:block;padding-top:30px;min-height:0}.story-stage-heading{grid-template-columns:39px 1fr;gap:12px 12px}.story-stage-heading #stage-count{font-size:9px;padding-top:7px}.route-story .story-stage-heading h3,.route-story .story-stage-heading p,.route-story .story-stage-heading button{grid-column:2}.route-story .story-stage-heading h3{font-size:25px}.route-story .story-stage-heading p{font-size:14px;line-height:1.6}.story-deliverables{padding-top:30px;margin-top:30px;border-top:1px solid #c9c0a933}.story-deliverables>div{grid-template-columns:88px 1fr;gap:16px;padding-bottom:15px;margin-bottom:15px}.story-deliverables dd{font-size:13px}.story-deliverables dt{font-size:10px}.route-story .story-note{font-size:10px;margin-top:12px;padding-top:19px}}
@media(prefers-reduced-motion:reduce){.story-navigation button{transition:none}}
/* Гейт Г8: фон сцены маршрута — только при подходе к секции #route. */
.story-viewport.sid-bg{background-image:url('../img/route-art-v2.webp')}
@media(scripting:none){.story-viewport{background-image:url('../img/route-art-v2.webp')}}