/* У сцены одна система пиксельных координат: круги, пины и подписи не растягиваются. */
.scroll-story.section{padding:0;position:relative}
.story-sticky{padding:18px 0}.story-content{display:flex;flex-direction:column}
.story-intro.section-intro{flex:none;margin-bottom:8px}.story-intro .eyebrow{margin-bottom:12px}
.story-intro.section-intro h2{font-size:32px;font-weight:500;line-height:1.13;letter-spacing:-1px;white-space:nowrap}
.story-intro.section-intro>.intro-copy{max-width:485px;padding-top:0;font-size:16px;line-height:1.65}
.story-map{order:1;height:650px;position:relative;isolation:isolate;contain:layout paint;overflow:hidden;border:1px solid #324b50;border-radius:12px;background:#0c1921;font-family:Inter,Arial,sans-serif;font-stretch:normal;font-synthesis:none}
.matter-canvas,.pcb-layer,.story-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.matter-canvas{z-index:2}.board-assembly{position:absolute;inset:0;z-index:1}.pcb-layer{z-index:0}.story-lines{z-index:1}
.board-substrate{fill:#142824;stroke:#4c6b59;stroke-width:1;opacity:var(--board-build,1)}
.board-stack{opacity:var(--board-build,1)}.board-perimeter{fill:none;stroke:#92ae82;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--board-build,1));opacity:var(--board-build,1)}
.board-fittings{fill:#34463a;stroke:#8ca280;stroke-width:1;opacity:var(--board-build,1)}.board-fittings .mount-hole{fill:#091217;stroke:#486454;stroke-width:1}
.board-blueprint{stroke:#507060;stroke-width:.7;fill:none;opacity:calc(var(--board-build,1)*.65)}.board-silkscreen{font:10px 'IBM Plex Mono',monospace;fill:#8fa28e;stroke:none;opacity:var(--board-build,1)}
.board-details{opacity:var(--component-build,1)}.board-smd{fill:#273b32;stroke:#82947d;stroke-width:.65}.board-smd .smd-cap{fill:#9b946c;stroke:#b3af85}.board-smd .smd-resistor{fill:#172c29;stroke:#779088}.board-smd .smd-pad{fill:#8f9d7b;stroke:none}.board-smd .smd-mark{fill:none;stroke:#b8c4ab;stroke-width:.65}
.board-detail-trace{fill:none;stroke:#486b59;stroke-width:.75;stroke-linejoin:round;stroke-linecap:round}.board-via{fill:#152921;stroke:#77936d;stroke-width:.85}.board-led{fill:#c0d58d;stroke:none}.board-bus{stroke:#547c64;stroke-width:.7;fill:none}
.board-empty-footprint{fill:#1b3023;stroke:#819176;stroke-width:.7}.board-empty-footprint rect{stroke-dasharray:3 2}.board-empty-footprint path{stroke:#a1aa84;fill:none}
.board-channel{--route-build:1}.channel-trace{stroke:var(--tone);stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--route-build));opacity:calc(var(--route-build)*.72)}
.channel-packet{stroke:var(--tone);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.024 .976;opacity:0}
.js .story-visible .board-active .channel-packet{opacity:.95;animation:board-packet-flow 5.2s linear infinite;animation-delay:var(--delay,0s)}
.js .story-visible .board-active .channel-in .channel-packet{animation-direction:reverse}
@keyframes board-packet-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.board-port{position:absolute;left:var(--port-x,16%);top:var(--port-y,50%);width:var(--port-width,17%);height:var(--port-height,36px);transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--tone) 48%,#31463b);border-radius:3px;background:#13241e;box-shadow:0 3px #091a14,0 4px #415849;z-index:3;opacity:var(--port-build,1);box-sizing:border-box}
.package-ic,.package-wide,.package-barcode{border-radius:2px;padding-bottom:13px;background:#15251f}
.package-wide{border-width:1px 3px;box-shadow:inset 0 0 0 3px #263a2c,0 3px #091a14,0 4px #415849}
.package-tower{border-radius:2px;justify-content:center;padding:5px 4px;background:#1b2c24}.package-tower .port-code{display:none!important}
.board-port.package-tower:before,.board-port.package-tower:after{top:5px;bottom:5px;width:3px;height:auto;border:0;border-left:2px dashed #819a7a;left:-4px;right:auto}.board-port.package-tower:after{left:auto;right:-6px}
.package-axial{border-radius:12px;background:#263125}.package-axial:before,.package-axial:after{display:none}
.package-slot{border-radius:2px;background:#14291f;border-block-color:#9daa82;box-shadow:inset 0 2px #354b36,0 2px #091a14}
.port-package-detail{position:absolute;bottom:4px;left:12px;right:12px;display:flex;gap:3px;height:4px;pointer-events:none}
.port-package-detail>i{width:7px;border:1px solid var(--tone);opacity:.6}.package-slot .port-package-detail,.package-axial .port-package-detail{display:none}
.package-tower .port-package-detail{height:4px;top:6px;bottom:auto;left:5px;right:5px;justify-content:center}.package-tower .port-package-detail>i{width:3px}
.package-barcode .port-package-detail{gap:3px;height:7px}.package-barcode .port-package-detail>i{border:0;border-left:1px solid var(--tone);border-right:2px solid var(--tone);width:9px}
.board-port:before,.board-port:after{content:'';position:absolute;left:12px;right:12px;height:3px;border-top:2px dashed #819a7a;opacity:.65}
.board-port:before{top:-4px}.board-port:after{bottom:-4px}
.board-port .port-code{font:10px/1 var(--mono);color:var(--tone);opacity:.85;display:block;flex:none;width:auto;height:auto}
.board-port.package-vertical{width:var(--vertical-width);height:var(--vertical-height);padding:4px;justify-content:center}.board-port.package-vertical strong{writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;letter-spacing:.3px}
.board-port>div{min-width:0}.board-port strong{display:block;font-size:14px;line-height:1.3;font-weight:450;color:#d8e2d6;white-space:nowrap}
.board-port small{display:block;font-size:13px;line-height:1.4;color:#94b2a9;margin-top:5px}
.port-out{left:83%;top:calc(25% + var(--row)*25%);height:66px;width:clamp(162px,18%,220px);background:#193027;border-color:color-mix(in srgb,var(--tone) 65%,#395b49)}
.port-out strong{font-size:17px;font-weight:550;color:var(--tone)}.port-out small{color:#c3d7c9}
.port-pad{position:absolute;right:-6px;top:calc(50% - 2px);width:5px;height:4px;background:var(--tone);box-shadow:0 -7px #657a60,0 7px #657a60}.port-out .port-pad{left:-6px;right:auto}
.story-core.processor-core{position:absolute;left:50%;top:50%;width:var(--core-size,250px);height:var(--core-size,250px);transform:translate(-50%,-50%);z-index:4;background:#1e3029;border:1px solid #789c7c;border-radius:4px;box-shadow:0 0 0 3px #11231b,0 0 0 4px #496a50,0 6px 0 4px #0a1913,0 8px 0 4px #405b45}
.core-package{position:absolute;inset:7px;background:#14241e;border:1px solid #506d54;border-radius:2px;overflow:hidden}
.core-die{position:absolute;inset:0;width:100%;height:100%;stroke-width:.7}
.die-carrier{fill:#16291f;stroke:#4a6752}.die-outline{stroke:#8ca181;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--die-build,1))}
.die-zone{opacity:clamp(0,calc((var(--die-build,1) - var(--zone)*.14)*2),1);fill:#2b3c2c;stroke:var(--zone-tone)}
.die-zone>rect:first-child{fill:color-mix(in srgb,var(--zone-tone) 10%,#1d3028)}.die-zone .die-cell{stroke-width:.5;fill:color-mix(in srgb,var(--zone-tone) 22%,#1d3028);stroke-opacity:.7}
.die-buses{stroke:#7c9672;stroke-width:.8}.die-buses>path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--die-build,1));opacity:var(--die-build,1)}.die-register{stroke:#a2b18a}.die-orientation{fill:#b3be83;stroke:none}
.core-engraving{position:absolute;left:10%;right:10%;top:50%;transform:translateY(-50%);height:34px;display:flex;align-items:center;justify-content:center;clip-path:inset(0 calc((1 - var(--etch,1))*100%) 0 0)}
.core-engraving strong{font-family:Inter,Arial,sans-serif;font-size:clamp(19px,2vw,27px);font-weight:500;letter-spacing:-.4px;line-height:1;color:#c6d7b3;text-shadow:0 1px #09180f}
.core-engraving>i{position:absolute;left:calc(var(--etch,1)*100% - 2px);top:5px;height:24px;width:1px;background:#d6e8c3;opacity:calc(1 - var(--system-run,1))}
.core-engraving{left:13%;right:13%;height:calc(var(--core-size,250px)*.17);min-height:27px;max-height:42px;background:#29372b;border:1px solid #7d8b70;border-radius:2px;clip-path:none;box-shadow:inset 0 1px #4c5d47,inset 0 -1px #102116}
.core-engraving:before,.core-engraving:after{content:'';position:absolute;top:3px;width:2px;height:2px;border-radius:50%;background:#a4b28f;box-shadow:0 1px #102116}.core-engraving:before{left:3px}.core-engraving:after{right:3px}
.core-engraving strong{font-family:'IBM Plex Mono',monospace;font-size:clamp(13px,1.35vw,18px);font-weight:500;letter-spacing:1px;color:#a9b69b;text-shadow:0 1px #0c1a10,0 -1px #4f624c;clip-path:inset(0 calc((1 - var(--etch,1))*100%) 0 0)}
.core-engraving>i{top:4px;bottom:4px;height:auto;background:#c9d4b3}
.core-index{position:absolute;left:11%;top:4%;font:7px/1 var(--mono);letter-spacing:.4px;color:#889d80;opacity:var(--etch,1)}.core-index-bottom{top:auto;bottom:4%;left:auto;right:11%;font-size:6px}
.processor-pins{position:absolute;inset:0;pointer-events:none}.processor-pin{position:absolute;background:#acac85;box-shadow:inset 0 -1px #e0c99c;opacity:clamp(0,calc((var(--pins-build,1) - var(--order))*5),1)}
.pins-top .processor-pin,.pins-bottom .processor-pin{left:var(--pin);width:3px;height:9px;transform:translateX(-50%)}.pins-top .processor-pin{top:-11px}.pins-bottom .processor-pin{bottom:-11px}
.pins-left .processor-pin,.pins-right .processor-pin{top:var(--pin);width:9px;height:3px;transform:translateY(-50%)}.pins-left .processor-pin{left:-11px}.pins-right .processor-pin{right:-11px}
.js .story-core.processor-core{clip-path:inset(calc((1 - var(--package-build,1))*50% - 13px) round 3px);overflow:visible}
.story-footer{order:0;position:relative;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:24px;height:44px;min-height:44px;padding:3px 0 10px}
.matter-stage-label{position:absolute;z-index:6;left:4%;top:12%;width:29%;max-width:370px;min-width:0;padding:22px 24px;border:1px solid var(--line);border-left:2px solid var(--brand);border-radius:8px;background:var(--scene-note-bg,#111d23ed);pointer-events:none;box-sizing:border-box}
.story-step{display:block;color:var(--brand);font:11px/1.4 var(--mono);margin-bottom:10px}
.matter-stage-label>strong{display:block;font-size:22px;line-height:1.28;letter-spacing:-.3px;font-weight:500;color:var(--text)}.matter-stage-label>p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted)}
.scroll-story:is([data-phase="1"],[data-phase="3"],[data-phase="5"]) .matter-stage-label{left:auto;right:4%;top:16%}
.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label{left:4%;right:auto;top:4%;width:21%;max-width:none;padding:13px 15px;border:1px solid #6f8b70;border-radius:3px;background:var(--scene-board-note-bg,#1a3027);box-shadow:0 3px var(--scene-note-shadow,#0a1b13)}
.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label:before,.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label:after{content:'';position:absolute;top:8px;width:3px;height:3px;border:1px solid #879d79;border-radius:50%}.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label:before{left:6px}.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label:after{right:6px}
.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label .story-step{font-size:10px;margin-bottom:7px}.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label>strong{font-size:18px;line-height:1.24}.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label>p{font-size:12px;line-height:1.45;margin-top:7px}
@media(max-width:900px){.matter-stage-label,.scroll-story:is([data-phase="1"],[data-phase="3"],[data-phase="5"]) .matter-stage-label{left:6%;right:6%;top:5%;width:auto;max-width:none;padding:17px 18px}.matter-stage-label>strong{font-size:19px}.matter-stage-label>p{font-size:14px}.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label{left:6%;right:6%;top:3.5%;width:auto;padding:12px 15px}.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label>strong{font-size:15px}.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label>p{font-size:11px;margin-top:5px}.scroll-story:is([data-phase="6"],[data-phase="7"]) .matter-stage-label .story-step{font-size:9px;margin-bottom:5px}}
.story-controls{display:flex;align-items:center;gap:13px;flex:none}.story-chapters{display:flex;gap:4px;align-items:center}
.story-chapters>button{display:block;min-width:24px;width:25px;height:28px;padding:0;color:#718891;font:12px/26px Inter,Arial,sans-serif;text-align:center;border:0;border-bottom:2px solid #2b3e47;border-radius:0;background:transparent;cursor:pointer;transition:color .2s,border-color .2s}
.story-chapters>button.is-past{color:#9eb9ae;border-color:#52766a}.story-chapters>button.is-current{color:#c5e7b9;border-color:#8be675}.story-chapters>button:hover{color:#e1ebdf;border-color:#a1c992}
.story-skip{display:none;border:1px solid #3a535d;border-radius:6px;background:#131f28;padding:8px 11px;color:#c1d2d7;font:400 13px/1.4 Inter,Arial,sans-serif;white-space:nowrap;cursor:pointer}.story-skip:hover{border-color:#7caa8c}.story-skip[hidden]{display:none!important}.skip-label-short{display:none}
.story-scroll-hint{display:none!important}.story-progress{position:absolute;bottom:5px;left:0;right:0;height:1px;background:#263b42}.story-progress>i{display:block;width:100%;height:100%;background:#92b678;transform-origin:left}
.js .matter-story .story-scroll-track{height:720svh;position:relative}.js .is-scroll-story .story-sticky{position:sticky;top:0;height:100svh}.js .is-scroll-story .story-content{height:100%}.js .is-scroll-story .story-map{height:auto;flex:1;min-height:0}.js .is-scroll-story .story-skip{display:block}
.js .matter-story:not([data-phase]) :is(.pcb-layer,.story-lines,.story-core,.board-port){opacity:0}
.js .story-static .story-scroll-track{height:auto}.js .story-static .story-sticky{position:relative;height:auto}.js .story-static .story-map{height:650px;flex:none}
.scroll-story:not(.story-visible) .channel-packet{animation-play-state:paused!important}
html:not(.js) .matter-stage-label,html:not(.js) .story-controls{display:none}
/* Мелкая пыль остаётся на трёх планах; крупных фоновых корпусов здесь нет. */
.matter-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.depth-plane{position:absolute;inset:-10px;opacity:calc(.62 - var(--field-pull,0)*.15);animation:depth-drift 24s ease-in-out infinite alternate;animation-play-state:paused}
.depth-plane.depth-far{opacity:calc(.38 - var(--field-pull,0)*.10);animation-duration:34s}.depth-plane.depth-near{opacity:calc(.28 - var(--field-pull,0)*.08);animation-direction:alternate-reverse;animation-duration:28s}
.depth-dot{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:var(--tone);border-radius:50%;opacity:.65}
.depth-far .depth-dot{filter:blur(.6px)}.depth-dot:nth-child(4n){animation:dust-flicker 5.6s ease-in-out infinite;animation-delay:var(--delay);animation-play-state:paused}
.story-visible .depth-plane,.story-visible .depth-dot{animation-play-state:running}.page-hidden .depth-plane,.page-hidden .depth-dot{animation-play-state:paused!important}
@keyframes depth-drift{to{transform:translate3d(12px,-18px,0)}}
@keyframes dust-flicker{0%,100%{opacity:.15}35%{opacity:.9}70%{opacity:.4}}
/* Микромир живёт тремя готовыми SVG-планами; импульсы не запускают дополнительный кадровый JS-цикл. */
.quantum-field{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.quantum-plane{stroke:#91b7ad;animation:quantum-drift 26s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:center;opacity:.45}
.quantum-plane-0{opacity:.23;animation-duration:39s;stroke:#789da6}.quantum-plane-2{opacity:.65;animation-duration:21s;animation-direction:alternate-reverse;stroke:#a9c2aa}
.quantum-wave{stroke-width:.65;stroke-dasharray:.36 .64;opacity:.25;animation:quantum-wave 7s linear infinite;animation-delay:var(--delay);animation-play-state:paused}
.quantum-neutrino{stroke-width:.9;stroke-linecap:round;stroke-dasharray:.075 .925;stroke-dashoffset:1;animation:neutrino-cross var(--life) linear infinite;animation-delay:var(--delay);animation-play-state:paused;opacity:0}
.quantum-fluctuation{--life:6s;--delay:0s}.quantum-virtual{stroke:#b5cebd;transform-box:fill-box;transform-origin:center;animation:quantum-pair var(--life) ease-in-out infinite;animation-delay:var(--delay);animation-play-state:paused;opacity:0}
.quantum-photon{stroke:#b7cfb7;stroke-width:1;stroke-linecap:round;stroke-dasharray:.055 .945;stroke-dashoffset:1;animation:quantum-emission var(--life) linear infinite;animation-delay:var(--delay);animation-play-state:paused;opacity:0}
.story-visible .quantum-plane,.story-visible .quantum-wave,.story-visible .quantum-neutrino,.story-visible .quantum-virtual,.story-visible .quantum-photon{animation-play-state:running}
.page-hidden .quantum-field *{animation-play-state:paused!important}
@keyframes quantum-drift{to{transform:translate3d(-15px,22px,0) scale(1.025)}}
@keyframes quantum-wave{0%,100%{opacity:.15;stroke-dashoffset:1}50%{opacity:.4;stroke-dashoffset:0}}
@keyframes neutrino-cross{0%,7%{opacity:0;stroke-dashoffset:1}8%{opacity:.55}22%{opacity:.55;stroke-dashoffset:0}24%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes quantum-pair{0%,43%,100%{opacity:0;transform:scale(.35)}12%,25%{opacity:.9;transform:scale(1)}37%{opacity:.25;transform:scale(.6)}}
@keyframes quantum-emission{0%,15%{opacity:0;stroke-dashoffset:1}18%{opacity:.75}34%{opacity:.5;stroke-dashoffset:0}37%,100%{opacity:0;stroke-dashoffset:0}}
@media(max-width:900px){
 .story-sticky{padding:14px 0 12px}.story-intro.section-intro{display:block;margin-bottom:3px;padding:0 4px}.story-intro .eyebrow{font-size:13px;margin-bottom:6px}.story-intro.section-intro h2{font-size:26px;letter-spacing:-.8px}.story-intro.section-intro>.intro-copy{display:none}
 .story-map{height:610px;border-radius:10px}.story-core.processor-core{top:66%}.core-package{inset:5px}.core-engraving strong{font-size:12px;letter-spacing:.5px}.core-index{font-size:5px}.core-index-bottom{font-size:4px}
 .story-map .board-port.port-in{left:var(--mobile-x);top:var(--mobile-y);width:var(--mobile-width);max-width:150px;height:var(--mobile-height);padding:2px;justify-content:center;gap:0;box-shadow:0 2px #091a14,0 3px #415849}
 .story-map .port-in:is(.package-ic,.package-wide,.package-barcode){padding-bottom:9px}.story-map .package-wide{border-inline-width:1px;box-shadow:inset 0 0 0 2px #263a2c,0 2px #091a14}.port-package-detail{left:6px;right:6px;bottom:3px;height:3px;gap:3px}.port-package-detail>i{width:5px}.package-barcode .port-package-detail{height:4px}.story-map .package-tower .port-package-detail{top:4px;left:4px;right:4px}
 .story-map .board-port.package-vertical{width:var(--mobile-vertical-width);height:var(--mobile-vertical-height);padding:3px}.story-map .board-port.package-vertical strong{font-size:11px}
 .story-map .board-port.port-in strong{font-size:11px;letter-spacing:-.2px;white-space:nowrap}.port-code{display:none!important}
 .story-map .board-port.port-out{left:calc(21% + var(--row)*29%);top:94%;height:27px;width:23%;max-width:150px;padding:3px 2px;justify-content:center;text-align:center}
 .board-port small{display:none}.story-map .port-out strong{font-size:12px}.board-port:before,.board-port:after{left:6px;right:6px;height:2px}
 .port-in[data-mobile-pad="left"] .port-pad{left:-6px;right:auto}
 .port-in[data-mobile-pad="top"] .port-pad,.port-in[data-mobile-pad="bottom"] .port-pad,.port-out .port-pad{left:calc(50% - 2px);right:auto;top:-6px;bottom:auto;width:4px;height:5px;box-shadow:-7px 0 #657a60,7px 0 #657a60}
 .port-in[data-mobile-pad="bottom"] .port-pad{top:auto;bottom:-6px}
 .story-footer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;min-height:42px;height:42px;padding:4px 0 10px}.matter-stage-label{max-width:none}.matter-stage-label>strong{font-size:19px;min-height:0;line-height:1.3}.matter-stage-label>p{display:block}.story-step{font-size:11px;margin-bottom:7px}
 .story-controls{justify-content:space-between;gap:10px}.story-chapters{gap:2px}.story-chapters>button{min-width:20px;width:20px;height:28px;font-size:11px}.story-skip{font-size:12px;padding:5px 8px}.skip-label-full{display:none}.skip-label-short{display:inline}
 .board-silkscreen{font-size:7px}
}
@media(max-width:400px){.story-intro.section-intro h2{font-size:23px}.story-map .board-port.port-in strong{font-size:11px}.story-map .board-port.port-out strong{font-size:12px}.story-chapters>button{min-width:18px;width:18px}.core-engraving strong{font-size:11px;letter-spacing:.3px}}
@media(prefers-reduced-motion:reduce){.channel-packet,.depth-plane,.depth-dot{animation:none!important}.js .matter-story .story-scroll-track{height:auto}.js .is-scroll-story .story-sticky{position:relative;height:auto}.js .is-scroll-story .story-map{height:650px;flex:none}.story-skip{display:none!important}}
@media(prefers-reduced-motion:reduce){.quantum-field *{animation:none!important}.quantum-virtual{opacity:.4}}
