:root{--black:#07090c;--panel:#101317;--panel2:#13181c;--line:rgba(231,237,244,.12);--text:#f4f5f3;--muted:#a5abb5;--mute2:#7c858e;--red:#ef363a;--redlight:#ff6667;--green:#62a49a;--gold:#d9c49a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 16% 10%,rgba(239,54,58,.18),transparent 24%),radial-gradient(circle at 85% 5%,rgba(98,164,154,.13),transparent 20%),linear-gradient(180deg,#07090c,#0a0c11 18%,#08090d 100%);color:var(--text);margin:0;font-family:Inter,"Arial",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}button{font:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--redlight);outline-offset:4px}::selection{background:#ba3436;color:white}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:radial-gradient(rgba(255,255,255,.4) .8px,transparent .8px);background-size:10px 10px;mix-blend-mode:soft-light}
.skip{position:fixed;left:1rem;top:-70px;background:#fff;color:#000;padding:1rem;z-index:999}.skip:focus{top:1rem}
.page-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:rgba(255,255,255,.08)}.page-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--redlight));box-shadow:0 0 12px var(--red)}
.header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5.2vw,100px);position:absolute;z-index:50;top:0;left:0;width:100%;border-bottom:1px solid rgba(255,255,255,.075);backdrop-filter:blur(12px)}.wordmark{display:flex;align-items:center;gap:18px;position:relative;white-space:nowrap}.wordmark-name{font-size:2rem;font-weight:950;line-height:1;letter-spacing:-.09em;font-style:italic}.dot{color:var(--red)}.wordmark-desc{font-size:.54rem;letter-spacing:.18em;color:#aeb3bc;font-weight:800;padding:0 0 0 17px;border-left:1px solid rgba(255,255,255,.24);max-width:90px;white-space:normal;line-height:1.6}.nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,50px);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:750}.nav a{transition:color .2s,transform .25s}.nav a:hover{color:var(--redlight);transform:translateY(-2px)}.edition{font-size:.61rem;letter-spacing:.14em;color:#949da5;font-weight:750;white-space:nowrap}.header-right{display:flex;align-items:center;gap:28px}.menu-btn{display:none;flex-direction:column;justify-content:center;gap:6px;width:38px;height:38px;border:0;background:transparent}.menu-btn i{width:24px;height:2px;display:block;background:#fff}.mobile-nav[hidden]{display:none!important}.mobile-nav{position:absolute;top:77px;left:0;right:0;background:#0b0e13;border-bottom:1px solid #343940;padding:22px 5vw;display:grid;gap:18px;box-shadow:0 20px 40px #0009}.mobile-nav a{font-size:.9rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.opening{position:relative}.stage{position:sticky;top:0;width:100%;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 58% 75% at 74% 42%,rgba(32,39,41,.95) 0%,#0d1116 42%,#090b10 85%)}.scroll-depth{height:700vh}.atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}.atmosphere:before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 18% 15%,rgba(239,54,58,.18),transparent 16%),radial-gradient(circle at 82% 28%,rgba(98,164,154,.13),transparent 20%),radial-gradient(circle at 66% 78%,rgba(239,54,58,.09),transparent 22%);filter:blur(24px);animation:auraDrift 15s linear infinite alternate}.atmosphere:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0d13 0%,rgba(11,13,19,.95) 20%,rgba(11,13,19,.25) 54%,transparent 78%),linear-gradient(0deg,#080a0f,transparent 20%,transparent 78%,#090b10)}.orb{position:absolute;filter:blur(45px);opacity:.5;border-radius:50%}.orb-a{background:rgba(195,33,40,.15);width:60vw;height:45vw;left:36%;top:-22%}.orb-b{background:rgba(51,135,111,.12);width:32vw;height:34vw;right:0;bottom:-30%}.grid-lines{position:absolute;inset:0;opacity:.18;background:linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(255,255,255,.18) calc(100% - 1px)) 0 0 / 92px 92px,linear-gradient(transparent 0 calc(100% - 1px),rgba(255,255,255,.18) calc(100% - 1px)) 0 0 / 92px 92px;mask-image:linear-gradient(90deg,transparent 5%,#000 100%)}
.scene-top{position:absolute;top:calc(78px + 24px);left:clamp(22px,5.2vw,100px);right:clamp(22px,5.2vw,100px);display:flex;justify-content:space-between;align-items:center;z-index:4}.serial,.scene-top-right{font-weight:800;letter-spacing:.18em;font-size:.62rem;color:#bdc2cb}.serial{display:flex;align-items:center;gap:10px}.serial i{width:7px;height:7px;background:#e14b4b;border-radius:50%;box-shadow:0 0 0 5px #e14b4b19}.scene-top-right{color:#929ba5}.scene-top-right b{color:#e4474c;margin:0 6px}.top-count{color:#fff;padding-left:28px}
.scene-visual{position:absolute;z-index:1;right:4%;width:66%;height:79%;top:13%;touch-action:pan-y;user-select:none}.scene-visual:before{content:"";position:absolute;inset:10% 6% 18% 10%;border-radius:38px;background:radial-gradient(circle at 48% 48%,rgba(239,54,58,.12),transparent 28%),radial-gradient(circle at 60% 54%,rgba(255,255,255,.04),transparent 38%);filter:blur(16px);z-index:0}.scene-visual canvas{width:100%;height:100%;display:block;position:absolute;inset:0;z-index:2;outline:0;cursor:grab}.scene-visual canvas:active{cursor:grabbing}.scene-visual canvas[hidden]{display:none}.board-fallback{position:absolute;max-width:90%;width:90%;top:17%;left:5%;transform:rotate(-11deg);filter:drop-shadow(0 25px 48px #000b);z-index:1;pointer-events:none}.scene-visual.loaded .board-fallback{display:none}.focus-pin{position:absolute;z-index:4;width:98px;height:98px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .35s}.pin-ring{position:absolute;inset:0;border:1px solid rgba(255,90,90,.75);border-radius:50%;box-shadow:0 0 34px #ec3e3f44,inset 0 0 25px #ed3e3f1c;animation:pinbreathe 2s infinite}.pin-ring:after{content:"";position:absolute;inset:22%;border:1px solid #ef565660;border-radius:50%}.pin-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#ff5f62;left:calc(50% - 2px);top:calc(50% - 2px)}@keyframes pinbreathe{50%{transform:scale(1.25);opacity:.65}}
.model-meta{position:absolute;top:2%;right:6%;z-index:4;display:flex;gap:9px;align-items:center;font-size:.58rem;letter-spacing:.15em;color:#b9c4c1;pointer-events:none}.meta-led{width:7px;height:7px;background:#61e1bd;border-radius:50%;box-shadow:0 0 9px #61e1bd}.model-meta-sep{color:#75847c}.viewer-control{position:absolute;bottom:4%;right:6%;display:flex;align-items:center;gap:15px;z-index:6}.viewer-control button{background:#141920af;border:1px solid #414951;border-radius:999px;color:#eceff0;font-size:.61rem;font-weight:800;letter-spacing:.13em;padding:12px 16px;cursor:pointer;transition:.3s}.viewer-control button:hover,.viewer-control button[aria-pressed="true"]{background:#70272b;border-color:#bd4249}.orbit-icon{font-size:1.18rem;vertical-align:-2px;padding-right:6px}.viewer-tip{font-size:.57rem;letter-spacing:.13em;font-weight:800;color:#919ba4;max-width:90px;line-height:1.5}
.chapters{position:absolute;z-index:5;top:18%;width:min(40vw,620px);height:62%;pointer-events:none}.chapter{position:absolute;inset:auto;opacity:0;transform:translateY(28px) scale(.98);transition:opacity .5s ease,transform .65s ease,filter .4s ease;visibility:hidden;max-width:min(42vw,580px)}.chapter.active{opacity:1;transform:translateY(0) scale(1);visibility:visible;filter:none}.chapter:before{content:"";position:absolute;inset:-20px -24px auto -24px;height:calc(100% + 40px);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:28px;backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.24);z-index:-1;opacity:.8}
.chapter-index{display:flex;align-items:center;gap:16px;color:#c0c7cc;font-weight:800;letter-spacing:.16em;font-size:.62rem;white-space:nowrap}.chapter-index span:first-child{color:#ff5b60}.chapter-rule{height:1px;width:30px;background:#727c84}.chapter h1,.chapter h2{font-size:clamp(3.4rem,5.9vw,7rem);line-height:.94;letter-spacing:-.065em;font-weight:950;margin:30px 0 20px;white-space:nowrap;text-transform:uppercase;transform-origin:left center;animation:titlePulse 7s ease-in-out infinite}.chapter h1 em,.chapter h2 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#f24447,#ffd1d1 55%,#f24447);-webkit-background-clip:text;background-clip:text}.chapter p{font-size:clamp(.94rem,1.12vw,1.13rem);line-height:1.8;color:#d2d8de;max-width:395px;margin:0}.chapter p strong{font-weight:700;color:#f5f5f4}.chapter-scroll,.chapter-next{color:#fff;font-size:.72rem;letter-spacing:.17em;font-weight:850;border-bottom:1px solid var(--red);display:inline-flex;align-items:center;gap:24px;margin-top:37px;padding-bottom:14px;pointer-events:auto}.chapter-scroll span,.chapter-next span{color:#ff5055;font-size:1.3rem}.chapter-spec{margin-top:33px;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;display:grid;gap:8px;background:rgba(255,255,255,.03)}.chapter-spec span{color:#8d99a3;font-size:.59rem;letter-spacing:.16em;font-weight:850}.chapter-spec strong{font-size:.79rem;letter-spacing:.06em;font-weight:750}
.chapter[data-chapter="0"]{left:clamp(26px,8vw,144px);top:7%}.chapter[data-chapter="1"]{left:clamp(56px,11vw,200px);top:16%}.chapter[data-chapter="2"]{right:clamp(44%,47vw,53%);top:10%}.chapter[data-chapter="3"]{left:clamp(38px,7vw,122px);top:38%}.chapter[data-chapter="4"]{right:clamp(42%,46vw,51%);top:30%}.chapter[data-chapter="5"]{left:clamp(80px,13vw,220px);top:42%}.chapter[data-chapter="6"]{right:clamp(44%,48vw,55%);top:18%}.chapter[data-chapter="7"]{left:clamp(38px,7vw,120px);top:24%}
.scene-rail{position:absolute;z-index:8;right:clamp(15px,2.5vw,45px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px}.rail-label{writing-mode:vertical-rl;font-size:.54rem;font-weight:850;letter-spacing:.18em;color:#9aa0aa;transform:rotate(180deg)}.rail-buttons{display:flex;align-items:center;flex-direction:column;gap:10px;margin-top:6px}.rail-buttons button{width:4px;height:17px;background:#666e77;border:0;opacity:.68;cursor:pointer;padding:0;transition:.3s}.rail-buttons button.active{background:var(--red);height:31px;opacity:1;box-shadow:0 0 12px #e9444e88}.rail-buttons button:focus-visible{outline:2px solid #fff;outline-offset:4px}.rail-count{font-size:.6rem;font-weight:800;letter-spacing:.12em;white-space:nowrap}.rail-count b{color:#737a81;padding:0 3px}.scene-bottom{position:absolute;z-index:5;bottom:32px;left:clamp(22px,5.2vw,100px);right:clamp(22px,5.2vw,100px);display:flex;justify-content:space-between;gap:15px;pointer-events:none;font-size:.58rem;color:#8c949d;letter-spacing:.17em;font-weight:750}.scene-bottom b{color:#d04149}.scene-bottom-end{text-align:right}
.section-wrap{width:min(1360px,calc(100% - clamp(44px,11vw,200px)));margin:0 auto}.overline{color:#e85b60;font-size:.72rem;font-weight:850;letter-spacing:.2em;text-transform:uppercase}.premium-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:end}.postcard{padding:clamp(110px,12vw,210px) 0 90px;position:relative;border-top:1px solid #22262c;background:linear-gradient(180deg,#08090d 0%,#0c1015 100%)}.postcard:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 24%,rgba(239,54,58,.12),transparent 24%),radial-gradient(circle at 78% 12%,rgba(98,164,154,.12),transparent 20%);pointer-events:none}.premium-copy,.premium-panel,.storyline-card,.hardware-spec,.closing{position:relative}.premium-copy p,.premium-panel p,.section-heading p,.closing-row p{color:#bec5cd;line-height:1.85;font-size:1.02rem}.kinetic-title,h2{font-size:clamp(3rem,5.4vw,6rem);line-height:.95;letter-spacing:-.06em;text-transform:uppercase;margin:16px 0 0}.kinetic-title em,h2 em{font-style:normal;color:transparent;background:linear-gradient(90deg,var(--redlight),#ffe8e8 55%,var(--redlight));-webkit-background-clip:text;background-clip:text}.premium-panel{padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));backdrop-filter:blur(16px);box-shadow:0 24px 80px rgba(0,0,0,.2)}.panel-kicker{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:.68rem;letter-spacing:.18em;color:#d0d6de}
.architecture{padding:40px 0 120px}.split-heading{display:grid;grid-template-columns:1fr .8fr;gap:28px;align-items:end;margin-bottom:42px}.storyline-shell{display:grid;grid-template-columns:1fr;gap:22px}.storyline-card{min-height:260px;padding:34px;border-radius:34px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:0 30px 80px rgba(0,0,0,.22);overflow:hidden}.storyline-card:before{content:"";position:absolute;inset:auto -10% -40% auto;width:380px;height:380px;background:radial-gradient(circle,rgba(239,54,58,.18),transparent 62%);filter:blur(18px)}.storyline-card:after{content:"";position:absolute;left:-20%;top:-40%;width:340px;height:340px;background:radial-gradient(circle,rgba(98,164,154,.14),transparent 60%);filter:blur(18px)}.storyline-card>*{position:relative;z-index:1}.storyline-kicker{display:inline-flex;margin-bottom:14px;font-size:.68rem;letter-spacing:.22em;color:#d6dbe2;font-weight:800}.storyline-card h3{font-size:clamp(1.8rem,3vw,3.2rem);line-height:.96;letter-spacing:-.04em;margin:0 0 16px}.storyline-card p{max-width:68ch;color:#d0d6de;line-height:1.9;margin:0 0 24px}.storyline-meta{display:flex;gap:14px;flex-wrap:wrap}.storyline-meta span,.storyline-meta strong{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:.74rem;letter-spacing:.12em}
.storyline-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;padding:28px 0 0}.storyline-track:before{content:"";position:absolute;left:0;right:0;top:26px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.05))}.story-stop{position:relative;background:none;border:0;color:#ced3da;padding:0;cursor:pointer;text-align:left;display:grid;gap:12px;transition:transform .25s ease,color .25s ease}.story-stop:before{content:"";width:14px;height:14px;border-radius:50%;background:#a7adb6;border:4px solid #0b0f15;box-shadow:0 0 0 1px rgba(255,255,255,.18);transition:.25s ease;position:relative;z-index:1}.story-stop.active:before,.story-stop:hover:before,.story-stop:focus-visible:before{background:var(--redlight);box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 18px rgba(239,54,58,.4)}.story-stop.active,.story-stop:hover,.story-stop:focus-visible{color:#fff;transform:translateY(-6px)}.stop-index{font-size:.68rem;letter-spacing:.2em;color:#8b929b;font-weight:800}.stop-label{font-size:.82rem;letter-spacing:.14em;font-weight:850;text-transform:uppercase}
.closing{padding:0 0 120px}.closing-row{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}.contact-button{display:inline-flex;align-items:center;gap:14px;padding:18px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));font-size:.78rem;font-weight:900;letter-spacing:.16em;transition:transform .3s ease,border-color .3s ease}.contact-button:hover{transform:translateY(-3px);border-color:rgba(239,54,58,.45)}
.footer{border-top:1px solid rgba(255,255,255,.08);background:#07090d}.footer-inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8b919a;font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;flex-wrap:wrap}.footer-logo{font-size:1.45rem;font-weight:950;color:#fff;letter-spacing:-.08em;font-style:italic}.footer-logo span{color:#e64048}
.reveal-block{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s ease}.reveal-block.is-visible{opacity:1;transform:translateY(0)}
@keyframes auraDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.06)}}@keyframes titlePulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(max-width:1180px){.chapters{width:min(46vw,620px)}.scene-visual{width:61%}.chapter[data-chapter="2"],.chapter[data-chapter="4"],.chapter[data-chapter="6"]{right:clamp(39%,43vw,48%)}.split-heading,.premium-intro,.closing-row{grid-template-columns:1fr}.storyline-track{grid-template-columns:repeat(3,1fr);row-gap:28px}.storyline-track:before{top:26px}}
@media(max-width:980px){.nav,.edition{display:none}.menu-btn{display:flex}.header{padding:0 22px}.scene-top{top:98px}.scene-visual{position:absolute;top:18%;left:50%;right:auto;transform:translateX(-50%);width:min(82vw,760px);height:44%}.chapters{left:22px!important;right:22px!important;top:auto;bottom:100px;width:auto;height:210px}.chapter{max-width:none;left:0!important;right:0!important;top:0!important}.chapter:before{inset:-14px -14px auto -14px}.chapter h1,.chapter h2{white-space:normal;font-size:clamp(2.6rem,10vw,4.6rem)}.chapter p{max-width:100%}.scene-rail{display:none}.scene-bottom{font-size:.5rem;letter-spacing:.12em;bottom:18px}.viewer-control{bottom:21%;right:22px}.model-meta{right:22px}.section-wrap{width:min(100% - 32px,1220px)}.storyline-track{grid-template-columns:repeat(2,1fr)}.closing{padding-bottom:88px}}
@media(max-width:680px){.scene-visual{top:15%;width:94vw;height:38%}.viewer-tip{display:none}.scene-top-right{display:none}.storyline-track{grid-template-columns:1fr}.storyline-track:before{display:none}.story-stop{padding:14px 14px 14px 0;border-top:1px solid rgba(255,255,255,.1)}.story-stop:before{position:absolute;right:0;top:22px}.storyline-card{padding:24px}.closing-row{gap:22px}.footer-inner{justify-content:flex-start}}
/* existing fallback board visuals */
.fallback-model{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:auto}.fallback-board-face{position:absolute;left:16%;top:22%;width:68%;backface-visibility:hidden;transform-style:preserve-3d}.fallback-board-face img{width:100%;display:block}.front-face{transform:translateZ(2px)}.back-face{transform:rotateY(180deg) translateZ(2px)}.fallback-edge{position:absolute;left:16%;top:22%;width:68%;height:42%;transform-style:preserve-3d}.fallback-components{position:absolute;left:16%;top:22%;width:68%;height:42%;transform-style:preserve-3d}
.fallback-part{position:absolute;transform:rotate(var(--rot)) translateZ(var(--depth));transform-style:preserve-3d;background:#212830;border-radius:4px;box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}.fallback-part.is-cpu,.fallback-part.is-ic{background:#161b20}.fallback-part.is-capacitor{background:#d9c8a8}.fallback-part.is-resistor{background:#50575c}.fallback-part.is-other{background:#252c33}.fallback-part span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(4px,.55vw,9px);white-space:nowrap;color:#f1f4f7;font-weight:900;letter-spacing:.08em;text-shadow:0 1px 5px #000}.fallback-part span b{color:#ff6868}
@media(max-width:980px){.fallback-model{top:3%;left:0;width:100%}.fallback-board-face,.fallback-edge,.fallback-components{left:8%;width:84%;top:12%}}
/* Hide front-facing 3D packages while inspecting the backside in fallback mode. */
.fallback-model.rear-view .fallback-components{visibility:hidden}
/* R3: actual AMPSEAL flange extents; the cavity/profile remains a presentation reconstruction. */
.fallback-ampseal{position:absolute;transform:translateZ(9px);transform-style:preserve-3d;background:linear-gradient(145deg,#30393f,#171b20);border:2px solid #445159;border-radius:8%;box-shadow:0 8px 18px #000b,inset 0 1px 1px #66727a;pointer-events:none}.fallback-ampseal.natural{background:linear-gradient(135deg,#c3c9c2,#8b928d);border-color:#d3d9d3;box-shadow:0 9px 19px #0008,inset 0 1px 3px #e9efe7}.fallback-ampseal-socket{position:absolute;border:5px solid #323b42;background:#0b1016;box-shadow:inset 0 0 0 3px #191f25,inset 0 6px 7px #000;outline:1px solid #111820;border-radius:13%;overflow:hidden;transform:translateZ(12px);transform-style:preserve-3d}.natural .fallback-ampseal-socket{border-color:#c4cbc3;box-shadow:inset 0 0 0 3px #59615b,inset 0 7px 8px #1a2020}.ampseal-pin{position:absolute;display:block;width:3%;aspect-ratio:1;border-radius:50%;background:#f2d89d;box-shadow:0 0 0 1px #aa8d51,0 1px 2px #000;transform:translate(-50%,-50%)}.ampseal-post{position:absolute;width:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#0c1014 30%,#4f5658 35%,#222931 80%);transform:translate(-50%,-50%);box-shadow:0 1px 3px #000a}.natural .ampseal-post{background:radial-gradient(circle,#151b1d 30%,#a3aaa2 35%,#707971 80%)}.ampseal-label{position:absolute;bottom:0;left:50%;transform:translate(-50%,115%);color:#e7e7e2;font-weight:900;font-size:clamp(4px,.55vw,9px);letter-spacing:.1em;white-space:nowrap;text-shadow:0 2px 6px #000}

@media(max-width:980px){.chapter-scroll,.chapter-next{margin-top:16px}.scene-bottom{display:none}}

/* R4: visual parity between captured introductory composition and GPU playback.
   The genuine WebGL viewer remains active and takes over progressively on scroll. */
.scene-visual.webgl-ready .fallback-model{
  z-index:3;
  opacity:var(--poster-opacity,0);
  pointer-events:none;
  transition:none;
}
.scene-visual.webgl-ready canvas{z-index:2;opacity:calc(1 - var(--poster-opacity,0))}
.scene-visual.webgl-ready .focus-pin{z-index:4}
@media (prefers-reduced-motion:reduce){.scene-visual.webgl-ready .fallback-model{opacity:0}}


/* R5: compositing / responsive corrections after production QA (2026-11-11).
   Entire camera remains inside its own scene viewport. Chapter text never leaves safe inset.
   Site graphics and functionality preserved; no enclosure or provisional software screens. */
.stage{isolation:isolate;overflow:hidden}
.scene-visual{right:2.5%;left:auto;top:14%;width:57%;height:72%;overflow:hidden;isolation:isolate;border-radius:20px;contain:paint}
.scene-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,17,.11),transparent 14%);z-index:3;pointer-events:none}
.scene-visual canvas{object-fit:contain}
.scene-visual.webgl-ready .fallback-model{z-index:3;overflow:hidden}
.scene-visual.webgl-ready .focus-pin{z-index:5}
.scene-visual .model-meta{top:2%;right:3%;z-index:6;flex-wrap:wrap;justify-content:flex-end;max-width:98%;text-shadow:0 1px 4px #000}
.scene-visual .viewer-control{bottom:3%;right:3%;z-index:7}
/* Safe editorial zone: cards are positioned within a stable viewport, never outside it. */
.chapters{left:clamp(28px,5.4vw,112px)!important;right:auto!important;top:26%!important;bottom:auto!important;width:min(39%,600px)!important;height:auto!important;min-height:390px;z-index:5;pointer-events:none}
.chapter,.chapter[data-chapter]{position:absolute;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;width:100%!important;max-width:100%!important;padding:clamp(18px,2vw,28px);overflow-wrap:break-word;transform:translateY(18px) scale(.985);box-sizing:border-box}
.chapter.active{transform:translateY(0) scale(1)}
.chapter:before{inset:0!important;height:100%!important;border-radius:24px;background:linear-gradient(145deg,rgba(23,27,35,.92),rgba(11,13,19,.75));backdrop-filter:blur(14px);opacity:.92;box-shadow:0 22px 60px #0004}
.chapter-index{max-width:100%;white-space:normal;gap:9px;line-height:1.4;font-size:.58rem}
.chapter h1,.chapter h2{font-size:clamp(2.2rem,3.6vw,4.6rem);line-height:1.01;white-space:normal!important;max-width:100%;letter-spacing:-.065em;overflow-wrap:normal;word-break:normal;margin:17px 0 18px}
.chapter h1 em,.chapter h2 em{white-space:normal}
.chapter p{max-width:min(100%,430px);font-size:clamp(.87rem,1.02vw,1rem);line-height:1.58}
.chapter-spec{margin-top:17px;padding:10px 12px;border-radius:12px;max-width:100%;overflow-wrap:anywhere}
.chapter-scroll,.chapter-next{margin-top:20px;font-size:.65rem;padding-bottom:8px}
.chapter-spec strong{font-size:.7rem;overflow-wrap:anywhere}
/* Long titles should not occlude the product, even at 1024px. */
@media(min-width:981px) and (max-width:1400px){
 .chapters{width:43%!important;left:3.5%!important}
 .scene-visual{right:1.5%;width:55%;top:18%;height:66%}
 .chapter h1,.chapter h2{font-size:clamp(2.1rem,3.65vw,3.9rem)}
 .chapter p{font-size:.91rem}
 .scene-rail{right:10px}
}
/* Tablet: stacked, self-contained editorial zone below a smaller canvas. */
@media(max-width:980px){
 .stage{height:100svh;min-height:690px}
 .scene-top{top:76px;left:5%;right:5%;z-index:8}
 .scene-top-right{display:none}
 .scene-visual{left:5%!important;right:5%!important;top:13%!important;transform:none!important;width:90%!important;height:41%!important;border-radius:18px}
 .scene-visual .model-meta{font-size:.48rem;letter-spacing:.06em;right:2%;top:3%;max-width:93%}
 .scene-visual .viewer-control{bottom:2%;right:2%}
 .chapters{left:5%!important;right:5%!important;top:58%!important;width:90%!important;min-height:0;height:37%!important;bottom:auto!important}
 .chapter,.chapter[data-chapter]{left:0!important;right:0!important;top:0!important;bottom:auto!important;padding:14px 17px 12px}
 .chapter:before{border-radius:16px}
 .chapter h1,.chapter h2{font-size:clamp(2.15rem,5.7vw,3.5rem);margin:11px 0 12px;line-height:1.01}
 .chapter p{font-size:clamp(.84rem,1.65vw,.97rem);line-height:1.42;max-width:100%}
 .chapter-spec{margin-top:10px;padding:7px 10px;gap:3px}
 .chapter-scroll,.chapter-next{margin-top:12px}
 .scene-bottom{display:none}
 .scene-rail{display:none}
 .fallback-model{top:0;left:0;width:100%}
}
@media(max-width:540px){
 .header{height:61px;padding:0 16px}
 .wordmark-name{font-size:1.85rem}
 .wordmark-desc{font-size:.42rem;max-width:72px;padding-left:10px}
 .mobile-nav{top:60px}
 .stage{height:100svh;min-height:600px}
 .scene-top{top:69px;left:5%;right:5%}
 .serial{font-size:.47rem;letter-spacing:.09em}
 .scene-visual{top:12%!important;height:36.5%!important;left:3%!important;right:3%!important;width:94%!important}
 .scene-visual .model-meta{font-size:.39rem;letter-spacing:.02em;gap:4px}
 .scene-visual .viewer-control{bottom:2%;right:3%}
 .viewer-control button{padding:7px 10px;font-size:.51rem}
 .chapters{top:52.5%!important;left:4%!important;right:4%!important;width:92%!important;height:44%!important}
 .chapter,.chapter[data-chapter]{padding:13px 15px 12px}
 .chapter-index{font-size:.47rem;letter-spacing:.09em;gap:7px}
 .chapter-rule{width:16px}
 .chapter h1,.chapter h2{font-size:clamp(1.98rem,8vw,2.8rem);line-height:1.02;margin:9px 0 9px}
 .chapter p{font-size:clamp(.78rem,2.95vw,.85rem);line-height:1.37}
 .chapter-spec{margin-top:9px;padding:6px 10px}
 .chapter-spec span{font-size:.46rem}
 .chapter-spec strong{font-size:.59rem}
 .chapter-scroll,.chapter-next{font-size:.56rem;margin-top:12px}
 .scene-rail,.scene-bottom{display:none}
 .premium-intro,.split-heading,.closing-row{grid-template-columns:1fr}
 .kinetic-title,.section-heading h2,.closing h2{font-size:clamp(2.5rem,10vw,3.6rem)}
 .storyline-card{padding:20px}
}
@media(max-width:370px) and (max-height:730px){
 .stage{min-height:590px}
 .scene-visual{height:33%!important}
 .chapters{top:49%!important;height:48%!important}
 .chapter h1,.chapter h2{font-size:1.89rem}
 .chapter p{font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){.chapter h1,.chapter h2{animation:none}}

/* On small screens the chapter rail becomes a compact, accessible timeline. */
@media(max-width:980px){
  .scene-rail{display:flex;z-index:9;top:auto;bottom:20px;left:5%;right:5%;width:auto;transform:none;flex-direction:row;align-items:center;justify-content:space-between;gap:13px}
  .rail-label{display:none}
  .rail-buttons{display:flex;flex:1;flex-direction:row;gap:7px;justify-content:flex-start;align-items:center;margin:0}
  .rail-buttons button{width:clamp(18px,5vw,44px);height:4px;border-radius:4px;opacity:.65}
  .rail-buttons button.active{width:clamp(27px,7vw,60px);height:5px;opacity:1}
  .rail-count{display:block;font-size:.56rem;white-space:nowrap}
}
@media(max-width:540px){
  .scene-rail{bottom:17px;left:5%;right:5%;gap:8px}
  .rail-buttons{gap:5px}
  .rail-buttons button{width:clamp(16px,4.7vw,30px);height:3px}
  .rail-buttons button.active{width:clamp(24px,7vw,40px);height:4px}
}

/* R6: show the actual WebGL model immediately. The flattened CSS PCB is strictly a fallback. */
.scene-visual.loading-gpu .fallback-model{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.scene-visual.webgl-ready .fallback-model{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.scene-visual.webgl-ready canvas{display:block!important;opacity:1!important;visibility:visible!important}
.scene-visual:not(.webgl-ready):not(.loading-gpu) .fallback-model{opacity:1!important;visibility:visible!important}
.scene-visual .pcb-loader{position:absolute;z-index:9;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s}
.scene-visual.loading-gpu .pcb-loader{opacity:1;visibility:visible}
.pcb-loader .pcb-loader-ring{width:23px;height:23px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:#f2525a;animation:mezSpin 1s linear infinite}
.pcb-loader span{font-size:.65rem;font-weight:800;letter-spacing:.15em;color:#aab3be}
@keyframes mezSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pcb-loader .pcb-loader-ring{animation:none}}
