:root{--show-violet:#bd79ff;--show-pink:#ee4ea7;--show-blue:#6ba8ff;--stage-glow:189,121,255;--stage-bg:#0b0615;--stage-ink:#f4efff;--stage-muted:rgba(230,219,255,.58)}
[data-theme=light]{--stage-glow:91,142,255;--stage-bg:#edf4ff;--stage-ink:#13213a;--stage-muted:rgba(23,47,84,.63)}
html:has(.showroom-page){scroll-behavior:smooth}body.showroom-page{--bg:var(--stage-bg);background:var(--stage-bg);color:var(--stage-ink);overflow-x:hidden;font-family:Arial,"Microsoft Yahei",sans-serif}body.showroom-page .header{z-index:60}body.showroom-page .nav{border-color:rgba(var(--stage-glow),.24)}body.showroom-page .navlinks a{color:var(--stage-muted)}body.showroom-page .nav-icon{color:var(--stage-ink);border-color:rgba(var(--stage-glow),.25)}
.showroom{height:100svh;min-height:680px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 58% 46% at 50% 55%,rgba(var(--stage-glow),.13),transparent 78%),linear-gradient(135deg,#090510,#0c0716 51%,#05050a);transition:background .6s ease}.showroom:before,.detail-view:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(var(--stage-glow),.055) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--stage-glow),.055) 1px,transparent 1px);background-size:66px 66px;mask-image:radial-gradient(ellipse at center,black,transparent 74%)}[data-theme=light] .showroom{background:radial-gradient(ellipse 58% 46% at 50% 55%,rgba(var(--stage-glow),.19),transparent 78%),linear-gradient(135deg,#e8f0ff,#f3f7ff 52%,#e4edfc)}.showroom-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,rgba(var(--stage-glow),.17),transparent 60%);opacity:.65;transition:opacity .7s}.showroom-heading{position:absolute;z-index:4;top:clamp(104px,13vh,150px);left:50%;transform:translateX(-50%);width:min(700px,90vw);text-align:center;pointer-events:none}.showroom-heading .eyebrow,.detail-intro .eyebrow{font-size:9px;letter-spacing:.34em;color:rgba(var(--stage-glow),.95)}.showroom-heading h1{font-weight:400;letter-spacing:-.065em;font-size:clamp(24px,3vw,43px);margin:15px 0 10px}.showroom-heading p{margin:0;font-size:11px;color:var(--stage-muted);letter-spacing:.05em}
.stage-ring{position:absolute;z-index:1;left:50%;width:min(31vw,330px);height:53px;border:1px solid rgba(var(--stage-glow),.68);border-radius:50%;transform:translateX(-50%) rotateX(68deg);filter:drop-shadow(0 0 9px rgba(var(--stage-glow),.8)) drop-shadow(0 0 32px rgba(var(--stage-glow),.4));transition:opacity .85s ease,transform .85s ease,filter .85s ease}.stage-ring:before,.stage-ring:after,.stage-ring i{position:absolute;content:"";inset:7px 13px;border:1px solid rgba(var(--stage-glow),.29);border-radius:50%}.stage-ring:after{inset:-8px 28px;opacity:.48}.stage-ring i{inset:20px 0 -8px;filter:blur(11px);background:rgba(var(--stage-glow),.22);border:0}.stage-ring-top{top:25%}.stage-ring-bottom{bottom:18%;transform:translateX(-50%) rotateX(68deg) scale(.82)}.stage-ring-bottom:before{inset:-13px 20px}.detail-mode .stage-ring{opacity:0;transform:translate(-50%,20px) rotateX(68deg) scale(.7);filter:blur(6px)}.detail-mode .showroom-atmosphere{opacity:.25}
.product-stage{position:absolute;z-index:3;left:35%;top:48%;width:30%;height:33%;min-width:300px;min-height:205px;transform:translate(-50%,-50%);display:grid;place-items:center;outline:none;touch-action:pan-y}.product-stage:focus-visible{outline:1px solid rgba(var(--stage-glow),.55);outline-offset:10px;border-radius:22px}.product-position{width:100%;height:100%;position:relative;display:grid;place-items:center;animation:show-float 5.6s ease-in-out infinite}.keyboard-light-pool{position:absolute;width:115%;height:48%;left:50%;bottom:1%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(223,45,101,.17),rgba(var(--stage-glow),.16) 42%,transparent 73%);filter:blur(18px);animation:soft-breathe 4.8s ease-in-out infinite}.model-frame{position:relative;width:min(100%,680px);height:100%;display:grid;place-items:center;filter:drop-shadow(0 22px 48px rgba(0,0,0,.4));transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .5s}.keyboard-model{width:100%;height:100%;background:transparent;--poster-color:transparent;--progress-bar-color:rgba(var(--stage-glow),.85);--progress-mask:transparent}.model-hit-target{position:absolute;inset:8% 5%;z-index:4;background:transparent;border:0;border-radius:50%;cursor:grab}.model-hit-target:active{cursor:grabbing}.model-fallback{position:absolute;inset:0;display:grid;place-items:center}.model-fallback img{max-width:100%;max-height:100%;object-fit:contain}.model-fallback span{position:absolute;bottom:5px;color:var(--stage-muted);font-size:9px}.product-placeholder{position:absolute;width:min(72%,560px);height:62%;border:1px dashed rgba(var(--stage-glow),.6);border-radius:20px;background:linear-gradient(145deg,rgba(var(--stage-glow),.06),rgba(255,255,255,.015));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 0 58px rgba(var(--stage-glow),.08);color:var(--stage-ink)}.placeholder-mark{font-size:32px;line-height:1;color:rgba(var(--stage-glow),.88);font-weight:200}.product-placeholder b{font-size:13px;font-weight:500}.product-placeholder small{font-size:10px;color:var(--stage-muted)}.model-caption{position:absolute;bottom:-4px;left:50%;transform:translate(-50%,100%);display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap;color:var(--stage-ink);font-size:10px;letter-spacing:.12em}.model-caption-note{color:var(--stage-muted);font-size:9px;letter-spacing:.04em}.carousel-side{position:absolute;z-index:2;top:47%;width:clamp(150px,19vw,270px);height:clamp(100px,14vw,180px);border:1px solid rgba(var(--stage-glow),.13);border-radius:17px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(255,255,255,.035),rgba(var(--stage-glow),.025));opacity:.42;transform:translateY(-50%) perspective(900px) rotateY(19deg) scale(.83);transition:opacity .6s,transform .7s,border-color .5s}.carousel-left{left:-4.5%}.carousel-right{right:-4.5%;transform:translateY(-50%) perspective(900px) rotateY(-19deg) scale(.83)}.edge-slot{display:grid;gap:8px;text-align:center;color:var(--stage-muted);font-size:10px}.edge-slot b{font-weight:400;color:var(--stage-ink);letter-spacing:.1em}.detail-mode .carousel-side{opacity:0;transform:translateY(-50%) scale(.75)}.zone-marker{position:absolute;top:50%;width:24px;height:24px;border:1px solid rgba(var(--stage-glow),.4);border-radius:50%;opacity:.7}.zone-marker:before{content:"";position:absolute;inset:6px;border:1px solid rgba(var(--stage-glow),.5);border-radius:50%}.zone-marker-left{left:-38px}.zone-marker-right{right:-38px}.carousel-controls{position:absolute;z-index:8;left:50%;bottom:11.5%;transform:translateX(-50%);display:flex;align-items:center;gap:19px}.carousel-controls>button{width:32px;height:32px;border:1px solid rgba(var(--stage-glow),.25);border-radius:50%;color:var(--stage-ink);background:rgba(5,4,12,.28);font-size:15px;transition:background .2s,border .2s}.carousel-controls>button:hover{background:rgba(var(--stage-glow),.18);border-color:rgba(var(--stage-glow),.65)}.product-pips{display:flex;gap:10px}.product-pips button{width:6px;height:6px;border:0;border-radius:99px;padding:0;background:rgba(var(--stage-glow),.28);transition:width .35s,background .35s,box-shadow .35s}.product-pips button.active{width:25px;background:rgba(var(--stage-glow),.95);box-shadow:0 0 12px rgba(var(--stage-glow),.85)}.showroom-hint{position:absolute;bottom:4.6%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:var(--stage-muted);font-size:9px;letter-spacing:.06em;white-space:nowrap}.showroom-hint i{height:3px;width:3px;border-radius:50%;background:rgba(var(--stage-glow),.8)}@keyframes show-float{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}@keyframes soft-breathe{0%,100%{opacity:.62;transform:translateX(-50%) scale(.95)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
.detail-view{min-height:100svh;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:clamp(35px,8vw,135px);padding:112px clamp(34px,8vw,140px) 72px;background:radial-gradient(ellipse at 26% 48%,rgba(var(--stage-glow),.13),transparent 58%),var(--stage-bg);overflow:hidden}.detail-view[hidden]{display:none}.detail-backdrop{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 82% 50%,rgba(var(--stage-glow),.07),transparent 53%)}.detail-model-column{height:calc(100svh - 160px);min-height:580px;position:sticky;top:90px;display:flex;flex-direction:column;justify-content:center}.detail-close{position:absolute;top:0;left:0;z-index:4;border:0;background:transparent;color:var(--stage-ink);font-size:22px;display:flex;align-items:center;gap:8px}.detail-close span{font-size:10px;color:var(--stage-muted);letter-spacing:.08em}.detail-model-wrap{height:min(65vh,650px);min-height:390px;position:relative;display:grid;place-items:center;transition:transform .5s}.detail-model{position:absolute;inset:0;width:100%;height:100%;z-index:2}.detail-poster{position:absolute;width:88%;height:90%;object-fit:contain;z-index:1;opacity:.78;pointer-events:none;transition:opacity .5s}.detail-model-wrap.model-ready .detail-poster{opacity:0}.detail-light-pool{position:absolute;left:50%;top:50%;width:100%;height:48%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(var(--stage-glow),.2),transparent 72%);filter:blur(24px);animation:soft-breathe 5.4s ease-in-out infinite}.detail-placeholder{position:absolute;inset:18% 9%;z-index:3;border:1px dashed rgba(var(--stage-glow),.58);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(var(--stage-glow),.035);color:var(--stage-ink)}.detail-placeholder b{font-weight:400}.detail-placeholder small{font-size:10px;color:var(--stage-muted)}.detail-model-caption{display:flex;justify-content:space-between;gap:20px;padding:0 7%;font-size:9px;color:var(--stage-muted);letter-spacing:.1em}.exploded-placeholder{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:180px;display:grid;justify-items:center;gap:6px;color:var(--stage-muted);font-size:9px;transition:opacity .5s}.exploded-orbit{width:110px;height:19px;border:1px solid rgba(var(--stage-glow),.46);border-radius:50%;transform:rotateX(66deg);box-shadow:0 0 19px rgba(var(--stage-glow),.22)}.exploded-chip{position:absolute;top:-27px;padding:4px 9px;border:1px solid rgba(var(--stage-glow),.25);border-radius:99px;color:var(--stage-ink);font-size:8px;white-space:nowrap;background:var(--stage-bg)}.exploded-placeholder small{font-size:8px}.detail-information{height:calc(100svh - 140px);min-height:590px;align-self:center;overflow:auto;overscroll-behavior:contain;padding:8px 12px 12px 0;scrollbar-width:thin;scrollbar-color:rgba(var(--stage-glow),.42) transparent}.detail-intro{padding:0 0 23px}.detail-intro h2{font-size:clamp(34px,4.7vw,61px);line-height:.98;font-weight:400;letter-spacing:-.075em;margin:15px 0}.detail-intro p{font-size:10px;color:var(--stage-muted);margin:0}.component-list{display:grid}.component-row{position:relative;min-height:104px;padding:20px 18px 17px 3px;display:grid;grid-template-columns:38px 1fr 16px;gap:14px;align-items:start;border-top:1px solid rgba(var(--stage-glow),.13);opacity:.58;transition:opacity .6s ease,background .6s ease,padding .6s ease}.component-row:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:rgba(var(--stage-glow),.95);transform:scaleY(0);transform-origin:center;transition:transform .55s ease}.component-row.active{opacity:1;padding-left:13px;background:linear-gradient(90deg,rgba(var(--stage-glow),.13),rgba(var(--stage-glow),.035) 52%,transparent)}.component-row.active:before{transform:scaleY(1)}.component-index{font-size:9px;letter-spacing:.12em;color:rgba(var(--stage-glow),.93);padding-top:4px}.component-row h3{font-size:17px;font-weight:400;letter-spacing:.06em;margin:0 0 5px}.component-row p{font-size:10px;color:var(--stage-muted);min-height:15px;margin:0 0 7px}.component-row small{font-size:9px;color:var(--stage-muted);opacity:.75}.spotlight-dot{align-self:center;width:7px;height:7px;border-radius:50%;border:1px solid rgba(var(--stage-glow),.6);transition:background .5s,box-shadow .5s}.component-row.active .spotlight-dot{background:rgba(var(--stage-glow),.95);box-shadow:0 0 12px rgba(var(--stage-glow),.9)}.detail-endnote{padding:22px 0;color:var(--stage-muted);font-size:9px;letter-spacing:.06em}.detail-view.is-closing{animation:detail-out .68s ease both}@keyframes detail-out{to{opacity:0;transform:translateY(12px)}}
.prototype-notes{min-height:42vh;padding:78px 24px 95px;background:var(--stage-bg)}.notes-inner{width:min(1040px,100%);margin:auto}.notes-inner .eyebrow{font-size:9px;color:rgba(var(--stage-glow),.9);letter-spacing:.22em}.notes-inner h2{font-size:clamp(28px,4vw,46px);font-weight:400;letter-spacing:-.06em;margin:14px 0 27px}.placeholder-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(var(--stage-glow),.18)}.placeholder-grid>div{min-height:115px;padding:20px 16px 16px 0;border-bottom:1px solid rgba(var(--stage-glow),.14);display:grid;align-content:start;gap:9px}.placeholder-grid b{font-size:11px;font-weight:400;color:var(--stage-ink)}.placeholder-grid span{font-size:9px;line-height:1.65;color:var(--stage-muted)}
@media(max-width:900px){.showroom{min-height:650px}.showroom-heading{top:clamp(96px,14vh,138px)}.product-stage{left:50%;top:50%;width:45%;height:30%;min-width:310px}.stage-ring-top{top:26%}.stage-ring-bottom{bottom:21%}.carousel-left{left:-12%}.carousel-right{right:-12%}.detail-view{grid-template-columns:1fr .9fr;gap:25px;padding:102px 30px 55px}.detail-model-column{min-height:530px;height:calc(100svh - 140px)}.detail-information{min-height:560px;height:calc(100svh - 120px)}.component-row{min-height:94px}.component-row small{line-height:1.4}}
@media(max-width:650px){.showroom{height:100svh;min-height:660px}.showroom-heading{top:100px;width:92vw}.showroom-heading h1{font-size:clamp(23px,7vw,32px);margin:13px 0 8px}.showroom-heading p{font-size:9px}.stage-ring{width:58vw;height:35px}.stage-ring-top{top:25%}.stage-ring-bottom{bottom:21%}.product-stage{left:50%;top:50%;width:80vw;height:30vh;min-width:0;min-height:180px}.model-frame{width:100%}.keyboard-light-pool{width:125%;height:44%}.carousel-side{width:110px;height:88px;top:51%;opacity:.26}.carousel-left{left:-62px}.carousel-right{right:-62px}.zone-marker{display:none}.model-caption{font-size:8px;bottom:-10px}.carousel-controls{bottom:12%;gap:13px}.product-pips{gap:8px}.product-pips button{width:5px;height:5px}.product-pips button.active{width:20px}.showroom-hint{bottom:5%;font-size:8px;gap:7px}.detail-view{display:flex;flex-direction:column;gap:14px;min-height:100svh;padding:78px 20px 50px;overflow:visible}.detail-model-column{position:relative;top:auto;height:auto;min-height:0;padding-top:5px}.detail-close{top:0;left:0;font-size:20px}.detail-model-wrap{height:34svh;min-height:220px;margin-top:22px}.detail-poster{width:95%;height:100%}.detail-model-caption{padding:0 2%;font-size:8px}.exploded-placeholder{position:relative;left:auto;bottom:auto;transform:none;width:100%;height:27px;grid-template-columns:auto 1fr auto;justify-items:start;align-items:center;column-gap:8px;margin:9px 0 4px}.exploded-orbit{width:42px;height:11px;grid-column:1;grid-row:1}.exploded-chip{position:static;grid-column:2;grid-row:1}.exploded-placeholder small{grid-column:3;grid-row:1;white-space:nowrap;font-size:7px}.detail-information{width:100%;height:auto;min-height:0;max-height:none;overflow:visible;padding:0 2px}.detail-intro{padding:7px 0 15px}.detail-intro h2{font-size:35px;margin:9px 0}.detail-intro h2 br{display:none}.detail-intro p{font-size:9px}.component-row{min-height:94px;padding:15px 9px 12px 2px;grid-template-columns:28px 1fr 13px;gap:8px}.component-row.active{padding-left:9px}.component-row h3{font-size:15px}.component-row p,.component-row small{font-size:9px}.placeholder-grid{grid-template-columns:1fr 1fr}.placeholder-grid>div{min-height:94px;padding:16px 8px 14px 0}.prototype-notes{padding:58px 22px 72px}}
@media(prefers-reduced-motion:reduce){.product-position,.keyboard-light-pool,.detail-light-pool{animation:none!important}.stage-ring,.component-row,.model-frame{transition-duration:.01ms!important}}

/* Homepage hero title hierarchy: promote the eyebrow and reduce the main headline. */
.showroom-heading .eyebrow{font-size:clamp(24px,3vw,43px);letter-spacing:.015em;line-height:1.1}
.showroom-heading h1{font-size:clamp(20px,2.1vw,30px);margin:10px 0 8px}
@media(max-width:650px){.showroom-heading .eyebrow{font-size:clamp(20px,5.8vw,32px);letter-spacing:0}.showroom-heading h1{font-size:clamp(18px,4.5vw,24px);margin:10px 0 8px}}

.showroom-brand-particles{position:absolute;z-index:3;top:54%;left:50%;width:min(92vw,1000px);height:min(37vh,340px);min-height:180px;transform:translate(-50%,-50%);pointer-events:none}
.showroom-brand-particles canvas{display:block;width:100%;height:100%;overflow:visible;pointer-events:auto;touch-action:none;cursor:crosshair}
@media(max-width:650px){.showroom-brand-particles{top:53%;width:96vw;height:clamp(180px,34vh,280px);min-height:0}}

/* Prototype adjustments: keep the wheel zone centered and honor native hidden state. */
body.showroom-page [hidden]{display:none!important}.product-stage{left:50%}
.exploded-placeholder{width:min(390px,90%);gap:7px}.exploded-schematic{position:relative;width:100%;height:135px;perspective:650px;display:grid;place-items:center}.component-slab{position:absolute;left:20%;right:20%;height:17px;border:1px solid rgba(var(--stage-glow),.34);border-radius:4px;background:linear-gradient(90deg,rgba(var(--stage-glow),.12),rgba(255,255,255,.035),rgba(var(--stage-glow),.08));box-shadow:0 6px 12px rgba(0,0,0,.14);opacity:.58;transform:translateY(-50%) rotateX(56deg);transition:transform .55s ease,opacity .55s ease,background .55s ease,box-shadow .55s ease}.component-slab:nth-child(1){top:11%}.component-slab:nth-child(2){top:27%}.component-slab:nth-child(3){top:43%}.component-slab:nth-child(4){top:59%}.component-slab:nth-child(5){top:75%}.component-slab:nth-child(6){top:91%}.component-slab i{position:absolute;left:-23px;top:-2px;font-style:normal;font-size:7px;color:rgba(var(--stage-glow),.75)}.component-slab b{position:absolute;right:-47px;top:-2px;font-weight:400;font-size:7px;white-space:nowrap;color:var(--stage-muted)}.component-slab.active{opacity:1;background:linear-gradient(90deg,rgba(var(--stage-glow),.38),rgba(var(--stage-glow),.13),rgba(255,255,255,.12));border-color:rgba(var(--stage-glow),.9);box-shadow:0 0 20px rgba(var(--stage-glow),.36);transform:translate(7px,-50%) translateZ(10px) rotateX(56deg)}.exploded-caption{display:flex;align-items:center;gap:10px}.exploded-caption .exploded-chip{position:static;padding:4px 9px;border:1px solid rgba(var(--stage-glow),.25);border-radius:99px;color:var(--stage-ink);font-size:8px;white-space:nowrap;background:var(--stage-bg)}.exploded-caption small{font-size:8px}
@media(max-width:650px){.exploded-placeholder{position:relative;left:auto;bottom:auto;transform:none;width:min(380px,100%);height:105px;grid-template-columns:1fr;justify-items:center;row-gap:0;margin:8px auto 0}.exploded-schematic{height:75px}.component-slab{left:15%;right:15%;height:14px}.component-slab b{right:-40px}.exploded-caption{grid-row:2}}

/* Portrait hero framing; the full hero accepts wheel input and has room for the model to orbit. */
.product-stage{width:min(47vw,660px);height:min(68vh,740px);min-width:350px;min-height:470px}
.model-frame{width:100%;height:100%;overflow:visible}
.keyboard-model{overflow:visible}
/* Detail is a static exploded diagram: scrolling only changes the highlighted layer. */
.exploded-view-wrap{height:min(73vh,760px);min-height:500px;overflow:visible}
.exploded-schematic{width:100%;height:100%;perspective:1250px;transform-style:preserve-3d}
.component-slab{left:50%;right:auto;top:0;width:18%;min-width:112px;height:55%;border-radius:11px;transform:translateX(-50%) rotateY(-17deg) rotateX(2deg);opacity:.7;overflow:visible;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.component-slab:nth-child(1){top:0;background-color:rgba(24,13,34,.74);background-image:repeating-linear-gradient(90deg,transparent 0 17px,rgba(246,236,255,.34) 17px 19px),repeating-linear-gradient(0deg,transparent 0 21px,rgba(246,236,255,.25) 21px 23px),linear-gradient(135deg,rgba(189,121,255,.18),rgba(238,78,167,.1))}
.component-slab:nth-child(2){top:9%;background-image:radial-gradient(circle,rgba(255,255,255,.5) 0 2px,transparent 3px),linear-gradient(130deg,rgba(170,195,226,.28),rgba(55,67,90,.22));background-size:21px 23px,100% 100%}
.component-slab:nth-child(3){top:18%;background-image:repeating-linear-gradient(90deg,transparent 0 17px,rgba(var(--stage-glow),.24) 17px 19px),repeating-linear-gradient(0deg,transparent 0 21px,rgba(var(--stage-glow),.2) 21px 23px),linear-gradient(145deg,rgba(94,104,127,.36),rgba(16,18,29,.76))}
.component-slab:nth-child(4){top:27%;background-image:linear-gradient(145deg,rgba(71,52,90,.68),rgba(14,13,22,.76))}
.component-slab:nth-child(5){top:36%;background-image:repeating-linear-gradient(0deg,transparent 0 24px,rgba(92,233,211,.16) 24px 25px),repeating-linear-gradient(90deg,transparent 0 21px,rgba(92,233,211,.13) 21px 22px),linear-gradient(145deg,rgba(13,44,45,.67),rgba(9,17,27,.88))}
.component-slab:nth-child(6){top:45%;background-image:linear-gradient(145deg,rgba(120,139,168,.27),rgba(17,20,29,.87))}
.component-slab:before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.18);border-radius:7px;pointer-events:none}
.component-slab:after{content:"";position:absolute;left:16%;right:16%;top:14%;bottom:14%;border:1px solid rgba(255,255,255,.11);border-radius:5px;pointer-events:none}
.component-slab i{left:-31px;top:50%;transform:translateY(-50%);font-size:8px}
.component-slab b{right:-72px;top:50%;transform:translateY(-50%);font-size:8px;color:var(--stage-ink)}
.component-slab.active{opacity:1;z-index:3;border-color:rgba(var(--stage-glow),.96);box-shadow:0 0 30px rgba(var(--stage-glow),.45),0 18px 36px rgba(0,0,0,.27);transform:translateX(calc(-50% + 10px)) rotateY(-17deg) rotateX(2deg) translateZ(18px)}
.detail-model-caption{margin-top:10px}
@media(max-width:900px){.product-stage{width:54vw;height:66vh;min-width:340px;min-height:440px}.exploded-view-wrap{height:68vh}}
@media(max-width:650px){.product-stage{width:86vw;height:62vh;min-width:0;min-height:400px}.exploded-view-wrap{height:44svh;min-height:290px;margin-top:20px}.component-slab{width:22%;min-width:82px;height:55%;border-radius:8px}.component-slab i{left:-26px;font-size:7px}.component-slab b{right:-60px;font-size:7px}.detail-model-caption{margin-top:5px}}

/* Six accurately ordered, editable SVG layers replace the abstract CSS rectangles. */
.exploded-view-wrap{height:min(82vh,850px);min-height:560px;background:radial-gradient(ellipse at 52% 48%,rgba(var(--stage-glow),.1),transparent 67%)}
.exploded-svg{position:relative;z-index:2;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 30px rgba(0,0,0,.18))}
.exploded-svg .exploded-layer{opacity:.61;transition:opacity .6s ease,filter .6s ease}
.exploded-svg .exploded-layer.active{opacity:1;filter:drop-shadow(0 0 9px rgba(var(--stage-glow),.8)) drop-shadow(0 0 24px rgba(var(--stage-glow),.45))}
.detail-model-caption{margin-top:8px}.detail-model-caption span{color:var(--stage-ink);letter-spacing:.14em}
@media(max-width:900px){.exploded-view-wrap{height:min(72vh,740px);min-height:490px}}
@media(max-width:650px){.exploded-view-wrap{height:49svh;min-height:330px;margin-top:18px}.exploded-svg{width:100%;height:100%}.detail-model-column{padding-top:0}.detail-model-caption{padding-inline:2%;margin-top:3px}}

/* Detail opens as an overlay so neighboring products retreat while the chosen build enlarges. */
.detail-view{position:fixed;inset:0;z-index:50;width:100%;height:100svh;min-height:0;padding-top:112px;overflow:hidden}
.detail-view:not([hidden]){animation:detail-enter .78s cubic-bezier(.18,.74,.24,1) both}
.detail-mode .carousel-left{transform:translate(-42vw,-50%) perspective(900px) rotateY(28deg) scale(.72);opacity:0}
.detail-mode .carousel-right{transform:translate(42vw,-50%) perspective(900px) rotateY(-28deg) scale(.72);opacity:0}
.detail-mode .product-stage{transform:translate(-50%,-50%) scale(.78);opacity:0;transition:transform .65s ease,opacity .45s ease}
.detail-model-wrap{animation:detail-model-enter .72s cubic-bezier(.18,.74,.24,1) both}
@keyframes detail-enter{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(10px)}}
@keyframes detail-model-enter{from{opacity:.2;transform:translateX(15%) scale(.72);filter:blur(8px)}to{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
@media(max-width:650px){.detail-view{inset:0;padding-top:78px;padding-bottom:35px;overflow:hidden;overscroll-behavior:none}.detail-model-column{height:auto;flex:0 0 auto}.detail-model-wrap{animation-duration:.5s}}

/* Monochrome, feathered orbit field behind the floating keyboard. */
.binary-orbits--hero{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 67% 60% at 50% 53%,#000 42%,rgba(0,0,0,.88) 62%,transparent 100%);mask-image:radial-gradient(ellipse 67% 60% at 50% 53%,#000 42%,rgba(0,0,0,.88) 62%,transparent 100%)}

/* Keep the complete exploded display centered in the left column, 20% smaller, and midway between the earlier centered layout and the raised layout. */
.exploded-display{position:absolute;top:60px;left:50%;width:100%;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%) scale(.8);transform-origin:top center}
.exploded-display .exploded-view-wrap{width:100%;flex:none}
.exploded-display .detail-model-caption{width:100%;margin-top:8px}
.detail-information{overscroll-behavior:auto}
@media(max-width:900px) and (min-width:651px){.exploded-display{top:64px}}
@media(max-width:650px){.exploded-display{position:relative;top:auto;left:auto;width:100%;transform:scale(.8);transform-origin:top center;margin-bottom:-20%}.exploded-display .exploded-view-wrap{width:100%}.detail-view{overscroll-behavior:none}.detail-information{flex:0 1 auto;max-height:32svh;overflow-y:auto;overscroll-behavior:contain}}
.showroom-scroll-cue{position:absolute;z-index:5;bottom:clamp(18px,4vh,36px);left:50%;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateX(-50%);color:var(--stage-muted);font-size:11px;letter-spacing:.12em;white-space:nowrap;transition:color .2s ease}
.showroom-scroll-cue:hover,.showroom-scroll-cue:focus-visible{color:rgba(var(--stage-glow),1);outline:none}
.showroom-scroll-cue svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:showroom-scroll-bob 1.5s ease-in-out infinite}
@keyframes showroom-scroll-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.showroom-scroll-cue svg{animation:none}}.showroom-brand-particles canvas{cursor:url("ovokey-cursor-dark.png") 15 15,auto}
body[data-theme="dark"] .showroom-brand-particles canvas{cursor:url("ovokey-cursor-light.png") 15 15,auto}