/* An exploded product-design model, built entirely from CSS planes and edges.
   Each plane uses parallel projection; no canvas, bitmap or 3D dependency. */
.hero .specimen{perspective:none}
.hero .board-tools{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.hero .engine-toggle{display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 10px;margin-block:-15px;border:1px solid #d7cadc;border-radius:5px;background:#fffaf8;color:#4c325e;font:500 10px Inter,Arial,sans-serif;letter-spacing:0;cursor:pointer;transition:background .2s,border-color .2s}
.hero .engine-toggle[hidden]{display:none}
.hero .engine-toggle:hover{background:#f1e8f2;border-color:#ab92b7}
.hero .engine-toggle:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.hero .engine-toggle>span:last-child{font-size:16px;line-height:1;transition:transform .5s}
.hero .engine-toggle[aria-pressed=true]>span:last-child{transform:rotate(180deg)}
.hero .invention-board[data-stage=prototype] .board-phase{display:none}
.hero .narrative-engine{--engine-scale:.91;position:absolute;left:50%;top:48%;width:320px;height:330px;z-index:3;opacity:0;transform:translate(-40%,-36%) scale(.65);transition:transform .9s var(--scene-ease),opacity .38s;pointer-events:none}
.hero .invention-board[data-stage=prototype] .narrative-engine{opacity:1;transform:translate(-50%,-50%) scale(var(--engine-scale))}
.hero .invention-board[data-stage=product] .narrative-engine{opacity:1;transform:translate(-50%,-62%) scale(calc(var(--engine-scale)*1.13))}
.hero .engine-title{position:absolute;top:32px;left:33px;z-index:3;text-align:left;font:600 7px Space,Inter,sans-serif;letter-spacing:.12em;color:#fffaf8;opacity:0;transition:opacity .38s}
.hero .invention-board[data-stage=prototype] .engine-title,.hero .invention-board[data-stage=product] .engine-title{opacity:1}
.hero .invention-board:not([data-stage=idea]) .measurement{opacity:0}
.hero .engine-caption{display:block;margin-top:5px;font:400 5px Inter,Arial,sans-serif;letter-spacing:.15em;color:#f0f6ffb0}
.hero .engine-shadow{position:absolute;left:38px;right:38px;top:255px;height:68px;border-radius:50%;background:#21345638;filter:blur(13px);transform:scale(.95);transition:transform .9s var(--scene-ease),opacity .9s;opacity:.6}
.hero .engine-guides{position:absolute;inset:0;opacity:.55;transition:opacity .4s}
.hero .engine-guides>i{position:absolute;top:79px;left:50%;height:153px;border-left:1px dashed #f1f6ffb0}
.hero .engine-guides>i:nth-child(2){left:80px;top:117px;height:123px}
.hero .engine-guides>i:nth-child(3){left:240px;top:117px;height:123px}
.hero .iso-layer{--size:190px;--thickness:11px;--lift:0px;--side-left:#b5bfd2;--side-right:#8192b0;position:absolute;left:50%;top:238px;width:calc(var(--size)*1.4142);height:calc(var(--size)*.8112);transform:translate(-50%,-50%) translateY(var(--lift)) scale(1);transition:transform 1.05s var(--scene-ease);}
.hero .iso-surface{position:absolute;left:50%;top:50%;width:var(--size);height:var(--size);border:1px solid #ffffff99;border-radius:5px;transform:translate(-50%,-50%) rotateX(55deg) rotateZ(-45deg);background:#e5eaf4;z-index:2;box-shadow:inset 0 0 0 4px #ffffff33;backface-visibility:hidden}
.hero .iso-side{position:absolute;top:50%;width:50%;height:calc(50% + var(--thickness));z-index:1}
.hero .side-left{left:0;background:var(--side-left);clip-path:polygon(0 0,100% calc(100% - var(--thickness)),100% 100%,0 var(--thickness))}
.hero .side-right{right:0;background:var(--side-right);clip-path:polygon(0 calc(100% - var(--thickness)),100% 0,100% var(--thickness),0 100%)}
.hero .iso-print{position:absolute;top:12px;left:13px;font:600 7px Space,Inter,sans-serif;letter-spacing:.06em;color:#576982}
.hero .iso-screw{position:absolute;width:6px;height:6px;border:1px solid #54709280;border-radius:50%;background:linear-gradient(135deg,#fffaf8 42%,#637797 44%,#637797 56%,#fffaf8 58%);box-shadow:0 1px 2px #12203b33}
.hero .screw-a{left:9px;top:9px}.hero .screw-b{right:9px;top:9px}.hero .screw-c{right:9px;bottom:9px}.hero .screw-d{left:9px;bottom:9px}
.hero .engine-base{--size:194px;z-index:1}
.hero .engine-base .iso-surface{background:linear-gradient(135deg,#f4f2f1,#d9e1ee 60%,#b8c9e2);border-color:#edf3ff}
.hero .engine-base .iso-print{top:19px;left:20px;font-size:6px}
.hero .base-socket{position:absolute;inset:38px;border:2px solid #7c93b24d;border-radius:12px;background:repeating-linear-gradient(0deg,#7c93b224 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,#7c93b224 0 1px,transparent 1px 8px);box-shadow:inset 3px 3px 0 #8da4c136}
.hero .base-contacts{position:absolute;bottom:15px;left:47px;right:47px;height:8px;background:repeating-linear-gradient(90deg,#a9987770 0 4px,transparent 4px 9px);border-block:1px solid #aa9a7970}
.hero .base-brand{position:absolute;bottom:28px;right:17px;font:600 6px Space,Inter,sans-serif;letter-spacing:.1em;color:#6880a2}
.hero .engine-circuit{--size:166px;--thickness:7px;--lift:-65px;--side-left:#526e9d;--side-right:#273f6b;z-index:2}
.hero .engine-circuit .iso-surface{background:linear-gradient(135deg,#5576af,#344f84);border-color:#b0c6ea;box-shadow:inset 0 0 0 4px #94b5e91a}
.hero .engine-circuit .iso-print{color:#d5e4ff;font-size:6px;top:15px;left:20px}
.hero .circuit-traces{position:absolute;inset:28px 17px 19px;overflow:hidden}
.hero .circuit-traces>i{position:absolute;inset:13px 10px;border:1px solid #a0c4f5a8;border-radius:8px;}
.hero .circuit-traces>i:nth-child(2){inset:23px 20px;border-color:#9cc5ff80}
.hero .circuit-traces>i:nth-child(3){inset:34px 30px;border-color:#a8ceffad}
.hero .circuit-traces>i:nth-child(4){left:0;top:29px;width:100%;height:33px;border-radius:0;border-inline:0;transform:rotate(-45deg)}
.hero .circuit-traces>i:nth-child(5){left:0;top:37px;width:100%;height:15px;border-radius:0;border-inline:0;transform:rotate(-45deg)}
.hero .circuit-traces>i:nth-child(6){left:0;top:52px;width:100%;height:1px;border-radius:0;border-inline:0;transform:rotate(45deg)}
.hero .circuit-socket{position:absolute;inset:52px;border:2px solid #afc9e9;background:#293b60;border-radius:5px;box-shadow:0 0 0 5px #5578af,inset 0 0 0 3px #577399}
.hero .circuit-port{position:absolute;bottom:13px;left:25px;width:24px;height:9px;border:2px solid #b9cbea;border-radius:2px;background:repeating-linear-gradient(90deg,#24446f 0 2px,#a5bbe0 2px 3px)}
.hero .port-b{left:auto;right:25px;width:18px}
.hero .engine-core{--size:93px;--thickness:12px;--lift:-126px;--side-left:#9e304c;--side-right:#6c2041;z-index:3}
.hero .engine-core .iso-surface{background:linear-gradient(135deg,#ef9da7,#cd526d 48%,#ac3455);border-color:#f4b1c0;box-shadow:inset 0 0 0 4px #fffaf81f}
.hero .core-pins{position:absolute;inset:16px -5px;background:none;z-index:-1}
.hero .core-pins:before,.hero .core-pins:after{content:'';position:absolute;top:0;bottom:0;width:5px;background:repeating-linear-gradient(0deg,#cfbbbd 0 3px,transparent 3px 7px)}
.hero .core-pins:before{left:0}.hero .core-pins:after{right:0}
.hero .core-glyph{position:absolute;inset:20px;display:grid;place-items:center;color:#fff5ed;font:400 36px Space,Inter,sans-serif}
.hero .core-orbit{position:absolute;inset:13px;border:1px solid #fff1ec80;border-radius:50%}
.hero .core-orbit>i{position:absolute;left:50%;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff3d8;box-shadow:0 0 5px #fff3d870}
.hero .core-orbit>i:nth-child(2){left:-2px;top:50%}.hero .core-orbit>i:nth-child(3){left:auto;right:5px;top:auto;bottom:10px}
.hero .engine-core small{position:absolute;bottom:5px;left:0;right:0;text-align:center;color:#ffe6e6;font:500 4px Inter,Arial,sans-serif;letter-spacing:.1em}
.hero .engine-cover{--size:142px;--thickness:4px;--lift:-190px;--side-left:#ddf1f5a8;--side-right:#b4d7e9b0;z-index:4}
.hero .engine-cover .iso-surface{background:linear-gradient(135deg,#e7f8ffcf,#f7f4f08a 40%,#d7ecffa8);border-color:#f3faff;box-shadow:inset 0 0 0 3px #eefaff66}
.hero .engine-cover .iso-print{font-size:6px;top:18px;left:17px;color:#466283}
.hero .cover-window{position:absolute;inset:38px 32px 30px;border:1px solid #597ca780;border-radius:50%;background:#e2f3ff26}
.hero .cover-window:before,.hero .cover-window:after{content:'';position:absolute;top:50%;left:50%;width:28px;height:1px;background:#5673979c;transform:translate(-50%,-50%) rotate(45deg)}
.hero .cover-window:after{transform:translate(-50%,-50%) rotate(-45deg)}
.hero .cover-window>i{position:absolute;width:5px;height:5px;background:#f8fcff;border:1px solid #849bbd;border-radius:50%;top:12px;left:12px}
.hero .cover-window>i:nth-child(2){left:auto;right:12px}.hero .cover-window>i:nth-child(3){left:calc(50% - 2px);top:auto;bottom:10px}
.hero .cover-mark{position:absolute;bottom:13px;right:15px;color:#597598;font:400 17px Space,Inter,sans-serif}
.hero .cover-drawing{position:absolute;inset:0;opacity:1;transition:opacity .4s}
.hero .engine-product-ui{position:absolute;inset:0;overflow:hidden;border-radius:4px;background:#21112e;opacity:0;transform:scale(.92);transition:opacity .5s .15s,transform .8s var(--scene-ease);display:flex;flex-direction:column;color:#fff8f6}
.hero .product-topbar{height:17px;flex:none;padding:0 8px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ac90be35;font:400 4px Inter,Arial,sans-serif}
.hero .product-topbar>b{font-size:5px;letter-spacing:.14em;font-weight:500}.hero .product-topbar>span:first-child{font-size:3px;letter-spacing:1px;color:#ac92c4}
.hero .product-world{position:relative;height:76px;flex:none;overflow:hidden;background:linear-gradient(150deg,#8473b8,#ca879b 63%,#e3aa9c)}
.hero .product-sun{position:absolute;width:32px;height:32px;border-radius:50%;right:22px;top:10px;background:linear-gradient(#fff2c7,#f2bba1);box-shadow:0 0 18px #ffe8bd44}
.hero .product-arch{position:absolute;left:18px;top:10px;width:43px;height:61px;border:8px solid #423058;border-bottom:0;border-radius:35px 35px 0 0;box-shadow:inset 2px 0 0 #ecb6bc,3px 2px 0 #765076;transform:rotate(-14deg)}
.hero .product-horizon{position:absolute;bottom:-34px;left:-10%;width:120%;height:52px;border-radius:50%;background:#815168;transform:rotate(-7deg)}
.hero .product-world>strong{position:absolute;left:9px;bottom:8px;font:500 8px/1.05 Space,Inter,sans-serif;letter-spacing:-.1px;text-shadow:0 1px 5px #2d113840}
.hero .product-play{position:absolute;left:calc(50% - 8px);top:28px;border:1px solid #fff9;border-radius:50%;width:16px;height:16px;display:grid;place-items:center;font:400 9px Space,Inter,sans-serif;background:#ffffff14}
.hero .product-choices{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px 8px 5px}
.hero .product-choices>small{grid-column:1/-1;font:400 4px Inter,Arial,sans-serif;letter-spacing:.08em;color:#c4b4d3;margin-bottom:1px}
.hero .product-choices>span{font:400 4px Inter,Arial,sans-serif;display:flex;justify-content:space-between;padding:4px;border:1px solid #73507d;border-radius:2px}
.hero .product-choices>span:first-of-type{background:#713d73;border-color:#c477a6}.hero .product-choices b{font-weight:400}
.hero .product-timeline{padding:0 8px;display:flex;gap:5px;align-items:center;color:#ac96bc;font:400 3px Inter,Arial,sans-serif;letter-spacing:.02em}
.hero .product-timeline>i{height:2px;flex:1;border-radius:2px;background:linear-gradient(90deg,#d887b0 35%,#695274 35%)}
.hero .invention-board:not([data-stage=prototype]) .engine-circuit,.hero .invention-board[data-engine=assembled] .engine-circuit{--lift:-13px}
.hero .invention-board:not([data-stage=prototype]) .engine-core,.hero .invention-board[data-engine=assembled] .engine-core{--lift:-33px}
.hero .invention-board:not([data-stage=prototype]) .engine-cover,.hero .invention-board[data-engine=assembled] .engine-cover{--lift:-55px}
.hero .invention-board[data-engine=assembled] .engine-guides{opacity:0}
.hero .invention-board[data-engine=assembled] .engine-shadow{transform:scale(1.1);opacity:1}
.hero .invention-board[data-stage=prototype][data-engine=assembled] .narrative-engine{transform:translate(-50%,-66%) scale(var(--engine-scale))}
.hero .invention-board[data-stage=product] .engine-base{transform:translate(-50%,-50%) translateY(0px) scale(1.1)}
.hero .invention-board[data-stage=product] .engine-circuit{transform:translate(-50%,-50%) translateY(-16px) scale(1.15)}
.hero .invention-board[data-stage=product] .engine-core{transform:translate(-50%,-50%) translateY(-34px) scale(1)}
.hero .invention-board[data-stage=product] .engine-cover{transform:translate(-50%,-50%) translateY(-52px) scale(1.5);--side-left:#604468;--side-right:#301b40}
.hero .invention-board[data-stage=product] .engine-cover .iso-surface{border-color:#b59bbf;background:#281832;box-shadow:inset 0 0 0 3px #ead2f133}
.hero .invention-board[data-stage=product] .cover-drawing{opacity:0}
.hero .invention-board[data-stage=product] .engine-product-ui{opacity:1;transform:scale(1)}
.hero .invention-board[data-stage=product] .engine-guides{opacity:0}
.hero .invention-board[data-stage=product] .engine-shadow{transform:scale(1.15);opacity:1}
.hero .invention-board[data-stage=product] .tag-output{bottom:12%;right:6%;font-size:6px}
.hero .invention-board[data-stage=prototype] .tag-output{bottom:12%;right:6%;font-size:6px}
@media(min-width:1500px){.hero .narrative-engine{--engine-scale:.96}}
@media(max-width:1100px) and (min-width:801px){.hero .narrative-engine{--engine-scale:.76}.hero .engine-toggle{font-size:9px;gap:7px}}
@media(max-width:800px){.hero .narrative-engine{--engine-scale:.86}}
@media(max-width:520px){.hero .narrative-engine{--engine-scale:.74;top:48%}.hero .engine-toggle{padding-inline:8px;font-size:9px;gap:6px}.hero .invention-board[data-stage=prototype] .tag-output{bottom:11%;font-size:5px}}
@media(max-width:359px){.hero .narrative-engine{--engine-scale:.66}.hero .engine-toggle{font-size:8px}}
/* Manual, interruptible transitions only; no looping motion for the new model. */
.motion-off .hero *,.motion-off .hero *:before,.motion-off .hero *:after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.hero *,.hero *:before,.hero *:after{animation:none!important;transition:none!important}}