/* The story occupies one canvas. Scene boundaries never move across the page. */
.has-film body{background:#0a0c10}
.has-film .experience-timeline{position:relative;height:1300svh}
.has-film .film-viewport{position:sticky;top:0;height:100svh;width:100%;overflow:clip;background:var(--stage-bg,#0a0c10);isolation:isolate}
.has-film .film-atmosphere{position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at calc(65% - var(--travel,0)*30%) calc(35% + var(--travel,0)*25%),#e67b5c0c,transparent 50%);transform:translate3d(calc(var(--travel,0)*20px),0,0)}
.has-film .chapter{position:absolute;inset:0;width:100%;height:100%;background:transparent!important;opacity:var(--scene-alpha,0);visibility:hidden;pointer-events:none;z-index:1;contain:layout style}
.has-film .chapter.is-visible{visibility:visible}
.has-film .chapter>.sticky{position:absolute;inset:0;top:0;height:100%;min-height:0;background:transparent!important;overflow:visible;isolation:auto}
.has-film .chapter .chapter-copy,.has-film .chapter .program-title,.has-film .chapter .learning-heading,.has-film .chapter .finale-content{opacity:var(--copy-alpha,1);transform:translate3d(0,calc(var(--text-shift,0)*1px),0)}
.has-film .hero-copy{opacity:var(--copy-alpha,1);transform:translateY(calc(-50% + var(--text-shift,0)*1px))}
.has-film .chapter .visual{transform:translate3d(calc(var(--visual-shift,0)*1px),calc(var(--drift,0)*1px),0)}
.has-film .hero-room{transform:translate3d(calc(var(--visual-shift,0)*1px),calc(-44% - var(--p)*30px),0) rotate(calc(-3deg + var(--p)*5deg)) scale(calc(.97 + var(--p)*.09))}
.has-film .program-panel{transform:perspective(1400px) translate3d(calc(var(--visual-shift,0)*1px),calc(var(--drift,0)*.5px),0) rotateX(calc(12deg - var(--p)*14deg)) rotateY(calc(-7deg + var(--p)*10deg)) scale(calc(.94 + var(--p)*.08))}
.has-film .learning-device{transform:perspective(1400px) translate3d(calc(var(--visual-shift,0)*1px),calc(var(--drift,0)*.5px),0) rotateX(calc(8deg - var(--p)*10deg)) rotateY(calc(-4deg + var(--p)*6deg)) scale(calc(.97 + var(--p)*.04))}
.has-film .visual-caption,.has-film .scene-disclaimer,.has-film .learning-disclaimer,.has-film .guide-preview-note,.has-film .hero-detail,.has-film .hero-bottom,.has-film .commission-status,.has-film .finale footer{opacity:var(--copy-alpha,1)}
.has-film .program-phase,.has-film .learning-labels{opacity:var(--copy-alpha,1)}
.has-film .hero .scroll-cue{opacity:calc(1 - var(--p)*2)}
.has-film .room-signals{stroke-dashoffset:calc(var(--p)*-360)}
.has-film .hero-room .room-signals{opacity:calc(var(--a)*.3)}
.has-film .hero-room .room-hotspots{opacity:var(--a)}
.has-film .commission-room{transform:scale(calc(.91 + var(--p)*.12)) translateY(calc(15px - var(--p)*30px))}
.has-film .plan-sheet{transform:perspective(1200px) rotateX(calc(17deg - var(--p)*15deg)) rotateY(calc(-10deg + var(--p)*12deg)) rotateZ(calc(-9deg + var(--p)*9deg))}
.has-film .page-cover{transform:translateX(calc(var(--a)*-72px)) rotateZ(calc(-5deg - var(--p)*13deg)) rotateY(calc(-12deg + var(--p)*8deg))}
/* Materials and craftsmanship to match the rack. */
.room-svg{filter:drop-shadow(0 24px 35px #0003)}
.room-hotspots circle{filter:drop-shadow(0 0 4px #9fe5ce99)}
.plan-sheet{background:linear-gradient(135deg,#faf8f0,#e7e4d9);box-shadow:0 2px 3px #0002,0 35px 65px #0006,0 0 0 1px #fff4}
.plan-sheet:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:3px;background:linear-gradient(125deg,#fff6,transparent 35%,#fff1 65%,transparent)}
.plan-underlay{position:absolute;left:10%;top:13%;width:79%;height:72%;background:#c5cec6;border:1px solid #cad1cd88;border-radius:3px;box-shadow:0 20px 50px #0003;transform-origin:center}
.underlay-one{transform:perspective(1100px) rotateX(7deg) rotateY(-8deg) rotateZ(calc(-8deg + var(--p)*3deg)) translate(12px,18px)}
.underlay-two{transform:perspective(1100px) rotateX(7deg) rotateY(-8deg) rotateZ(calc(-5deg + var(--p)*2deg)) translate(18px,32px);background:#aaa99f}
.floorplan{color:#57616c;background-image:linear-gradient(#54667a05 1px,transparent 1px),linear-gradient(90deg,#54667a05 1px,transparent 1px);background-size:13px 13px;background-clip:content-box}
.sheet-top{border-bottom-color:#acb5b740}.sheet-top b{color:#4c5a60;font-weight:600;letter-spacing:1.2px}
.thought{background:linear-gradient(120deg,#252f3be8,#171f2be8);border-color:#76869533;box-shadow:0 12px 22px #0005,inset 0 1px 0 #ffffff09}
.staging-platform{background:linear-gradient(135deg,#454853,#202631 80%);border:1px solid #7b828e44;box-shadow:0 35px 70px #0008,inset 0 0 20px #ffffff08}
.staging-box{overflow:visible;border-radius:2px;background:linear-gradient(110deg,#cbb08b,#bda17c 45%,#aa8963);border:1px solid #e8c69c55;box-shadow:3px 4px 4px #0003,15px 26px 35px #0007}
.staging-box:before{height:27px;left:9px;right:-10px;top:-28px;background:linear-gradient(120deg,#e0c9a5,#c1a17a);transform:skewX(-36deg);border:1px solid #edd8b755;border-radius:1px 1px 0 0;z-index:0}
.staging-box:after{content:'';position:absolute;top:-14px;bottom:14px;right:-23px;width:22px;transform:skewY(-53deg);background:linear-gradient(90deg,#8a6a4c,#a3835d);border:1px solid #cca87d44;border-left:0;border-radius:0 2px 2px 0;z-index:-1}
.box-tape{background:linear-gradient(90deg,#e4d1ac33,#f6dfb55c,#e4d1ac44);border-inline:1px solid #a1865f44;box-shadow:1px 0 2px #654b2922}
.box-tape:before{content:'';position:absolute;left:0;right:0;height:27px;top:-28px;background:#ead5af77;transform:skewX(-36deg);transform-origin:bottom}
.box-crease{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#fff0 0 3px,#1a100a03 3px 4px);pointer-events:none;border-radius:2px}
.box-label{background:#e9e3d4;padding:11px 14px;border:1px solid #d0c2a7;box-shadow:0 2px 2px #704c2020;top:20%;left:9%;font-size:43px;line-height:1;letter-spacing:-3px;min-width:47%}
.box-label small{font-size:5px;letter-spacing:1.1px;line-height:1.5;margin-top:8px;color:#766850}
.box-three .box-label{font-size:30px;padding:8px 10px;top:19%}.box-three .box-label small{font-size:4px;letter-spacing:.5px}
.barcode{bottom:10%;height:14px;opacity:.65}
.manifest{background:linear-gradient(140deg,#252a32ed,#141a23ef);border-color:#606d8044;box-shadow:0 24px 50px #0007,inset 0 1px 0 #ffffff09}
.panel-device{background:linear-gradient(125deg,#727781,#323741 3%,#10131a 6%,#161a22 92%,#454b57 97%,#7f8590);border:1px solid #9196a033;box-shadow:0 2px 3px #0008,0 25px 65px #0007,0 0 0 2px #070b11}
.panel-edge{position:absolute;inset:1px;border-radius:19px;border:1px solid #8e94a022;pointer-events:none}
.panel-glass{box-shadow:0 0 0 1px #000,inset 0 0 15px #0004}
.panel-camera{box-shadow:0 0 0 1px #05080b,0 1px 1px #6e798b44;background:radial-gradient(circle at 40% 35%,#345269,#0c1522);border-color:#1e2632}
.teams-bg{background:radial-gradient(ellipse at 7% 80%,#8d99c7 0,transparent 55%),radial-gradient(ellipse at 100% 0,#5b7d9a,transparent 60%),linear-gradient(120deg,#526384,#343654 60%,#343246)}
.teams-ribbon{position:absolute;width:85%;height:140%;border:7cqw solid #bfcbe23b;border-right-color:#d7ddee05;border-bottom-color:#19263d33;border-radius:50%;transform:rotate(35deg);filter:drop-shadow(-1cqw 3cqw 1cqw #0e163555);box-shadow:inset 1cqw 0 1cqw #ffffff0b}
.ribbon-one{right:-27%;top:-70%}.ribbon-two{left:-55%;bottom:-80%;transform:rotate(20deg);border-color:#d0c7df44;border-right-color:#d0c7df05;border-bottom-color:#19263d22}
.teams-top{color:#f5f3fc;text-shadow:0 1px 3px #0003}.teams-clock{font-weight:250;text-shadow:0 1px 10px #192a4033}
.meeting{background:linear-gradient(120deg,#151c35b0,#1c203fa0);border-color:#eef0ff20;box-shadow:0 8px 20px #10172b22,inset 0 1px 0 #fff1;backdrop-filter:blur(10px)}
.join-pill{background:linear-gradient(#8b8bd1,#7778c1);box-shadow:0 2px 4px #1116,inset 0 1px 0 #fff2}
.teams-bottom{background:#17213e88;backdrop-filter:blur(12px);border-top:1px solid #ffffff09}
.controls-page{background:linear-gradient(130deg,#f8f9fb,#edf0f4)}
.controls-header{box-shadow:0 1px 2px #202b3b05;background:#ffffffeb}
.control-nav{background:linear-gradient(90deg,#e4e8ef,#edf0f5);border-right-color:#dce1e9}
.control-nav>span.selected{box-shadow:0 3px 6px #2733450b,inset 0 1px 0 #fff;border:1px solid #dde2eb}
.display-tile{box-shadow:0 4px 7px #1b2b3d06,inset 0 1px 0 #fff;background:linear-gradient(135deg,#fff,#f9fafb)}
.display-tile.active{box-shadow:0 3px 9px #c3715822,inset 0 1px 0 #fff;background:linear-gradient(135deg,#fff9f6,#fff2ec);border-color:#d99c8c}
.training-panel:before{content:'';position:absolute;left:25%;right:25%;height:21%;bottom:-11%;background:linear-gradient(90deg,#868b92,#afb3b8 50%,#737a82);transform:perspective(800px) rotateX(40deg);clip-path:polygon(24% 0,75% 0,100% 85%,100% 100%,0 100%,0 85%);filter:drop-shadow(0 10px 10px #0003)}
.training-callout{background:linear-gradient(135deg,#fffefaed,#f6f5f0ed);border-color:#cccec5;box-shadow:0 8px 22px #1d282410,inset 0 1px 0 #fff}
.guide-page{box-shadow:1px 2px 2px #0001,5px 15px 40px #0002;background:linear-gradient(120deg,#fffefa,#f0efe8);border-color:#cfd1c6}
.page-cover{background:linear-gradient(110deg,#29333f,#18232f 5%,#16212d 70%,#23313d);border-color:#3a4651;box-shadow:2px 0 0 #7f8682,4px 0 0 #deded3,6px 0 0 #a9ada7,12px 20px 40px #0003}
.page-cover:before{content:'';position:absolute;left:12px;top:0;bottom:0;width:1px;background:#ffffff08;box-shadow:2px 0 2px #0003}
.page-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,#fff1,transparent 35%,#ffffff03);pointer-events:none}
.page-cover h3{color:#f8f1e2;text-shadow:0 1px 1px #0006}.page-cover .doc-brand{text-shadow:0 1px 1px #0009}
.cover-graphic{opacity:.9}.page-middle{background:linear-gradient(130deg,#fefdf9,#f4f2e9)}.page-back{background:linear-gradient(130deg,#f7f6ef,#e8e9e0)}
.doc-mini-diagram{height:55px;background:#e2e6df;border:1px solid #d2d8d0;display:flex;align-items:center;justify-content:center;gap:15px;margin-top:20px;color:#7f9386}.doc-mini-diagram .icon{height:22px;width:22px}.doc-mini-diagram i{height:1px;width:35px;background:#a9b7aa}
.learning-device{background:#111721;border:7px solid #262d36;border-top-width:13px;border-bottom-width:13px;border-radius:15px 15px 9px 9px;box-shadow:0 2px 4px #0009,0 35px 75px #0006,inset 0 1px 0 #b3bdca33,0 0 0 1px #7f8b983b}
.laptop-camera{position:absolute;top:-8px;left:50%;width:4px;height:4px;background:radial-gradient(circle,#31506b,#0e1522);border:1px solid #59647355;border-radius:50%}
.browser-bar{background:linear-gradient(#e8eaed,#dfe2e6);border-bottom-color:#cdd3db}.browser-bar>div{background:#f7f8fa;border:1px solid #d7dbe2}
.laptop-lip{left:-5%;right:-5%;height:15px;bottom:-27px;background:linear-gradient(#bac1ca 0%,#7d8794 15%,#444d59 45%,#171e28 100%);border-top:1px solid #d4dbe3;box-shadow:0 8px 10px #0007}
.laptop-lip:before{height:5px;background:linear-gradient(#414b59,#6a7583)}
.help-item{box-shadow:0 2px 5px #202d3e04}.web-sidebar{background:linear-gradient(110deg,#202c3c,#141d2b)}
/* Section titles are readable while the visuals keep travelling. */
.has-film .assembly-label,.has-film .assembly-seal{z-index:3}
@media(max-width:1100px) and (min-width:761px){.box-label{font-size:36px;padding:9px 11px}.box-three .box-label{font-size:26px}.box-label small{font-size:4px}}
@media(max-width:760px){
 .has-film .hero-copy{transform:translateY(calc(var(--text-shift,0)*1px))}
 .has-film .hero-room{transform:translate3d(calc(var(--visual-shift,0)*.5px),calc(var(--p)*-15px),0) rotate(calc(-3deg + var(--p)*4deg)) scale(calc(.96 + var(--p)*.08))}
 .has-film .chapter .visual{transform:translate3d(calc(var(--visual-shift,0)*.5px),calc(var(--drift,0)*.6px),0)}
 .has-film .program-panel{transform:perspective(1000px) translate3d(calc(var(--visual-shift,0)*.5px),calc(var(--drift,0)*.5px),0) rotateX(calc(8deg - var(--p)*10deg)) scale(calc(.97 + var(--p)*.05))}
 .has-film .learning-device{transform:perspective(1000px) translate3d(calc(var(--visual-shift,0)*.5px),calc(var(--drift,0)*.5px),0) rotateX(calc(6deg - var(--p)*7deg)) scale(calc(.97 + var(--p)*.03))}
 .plan-underlay{top:12%;height:69%;left:13%;width:74%}
 .underlay-one{transform:perspective(1100px) rotateX(7deg) rotateY(-8deg) rotateZ(-7deg) translate(7px,10px)}
 .underlay-two{transform:perspective(1100px) rotateX(7deg) rotateY(-8deg) rotateZ(-5deg) translate(11px,18px)}
 .box-label{font-size:30px;padding:8px 10px;letter-spacing:-2px;top:20%;min-width:47%}.box-label small{font-size:3px;letter-spacing:.6px;margin-top:5px}.box-three .box-label{font-size:23px;padding:6px 7px}.box-three .box-label small{font-size:2.5px;letter-spacing:.2px}
 .staging-box:before{height:16px;top:-17px;left:6px;right:-6px}.staging-box:after{width:14px;right:-15px;top:-9px;bottom:9px}.box-tape:before{height:16px;top:-17px}.barcode{height:9px}
 .panel-edge{border-radius:12px}.mini-panel-wrap .panel-edge{border-radius:7px}
 .has-film .page-cover{transform:translateX(calc(var(--a)*-43px)) rotateZ(calc(-5deg - var(--p)*13deg)) rotateY(calc(-10deg + var(--p)*8deg))}
 .page-cover:before{left:8px}.doc-mini-diagram{height:35px;margin-top:12px;gap:8px}.doc-mini-diagram .icon{width:15px;height:15px}.doc-mini-diagram i{width:15px}
 .learning-device{border-width:4px;border-top-width:9px;border-bottom-width:7px;border-radius:10px 10px 5px 5px}.laptop-camera{width:3px;height:3px;top:-6px}.laptop-lip{height:9px;bottom:-15px;left:-2%;right:-2%}.laptop-lip:before{height:3px}
}
@media(prefers-reduced-motion:reduce){
 .has-film .chapter .visual,.has-film .hero-room,.has-film .hero-copy,.has-film .program-panel,.has-film .learning-device,.has-film .chapter .chapter-copy{transform:none!important}
 .has-film .hero-copy{transform:translateY(-50%)!important}
 .has-film .chapter{transition:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.has-film .hero-copy{transform:none!important}}
/* Solid materials stay opaque as they move; only the scene itself dissolves. */
.has-film .staging-box,.has-film .manifest,.has-film .thought{opacity:1}
.has-film .rack-unit{opacity:1}
.has-film .hero-room,.has-film .visual,.has-film .program-panel,.has-film .learning-device{filter:blur(calc(var(--scene-defocus,0)*1px))}
@media(max-width:760px){
 .guide-page{height:auto;aspect-ratio:.707;width:52%;left:25%;top:13%}
 .doc-screen{height:44px}
 .doc-step{padding:7px 0}
 .guide-page h4{margin-top:18px}
}