/* One coherent assembly, separated along a diagonal as the page scrolls. */
.detail-hmi .hmi-explorer{position:relative;min-height:210svh;padding:70px 0 0;--progress:0}.hmi-explorer-sticky{position:sticky;top:20px;padding-bottom:18px}.hmi-explorer-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:20px}.detail-hmi .hmi-explorer h2{font-size:clamp(30px,3vw,42px);font-weight:600}.detail-hmi .hmi-explorer .hmi-eyebrow{margin-bottom:12px}.hmi-explorer-action{max-width:320px}.detail-hmi .hmi-explorer-action p{font-size:14px;color:var(--ink);line-height:1.7}.hmi-scroll-cue{display:block;margin-top:14px;font-size:12px;color:var(--blue)}.hmi-explorer [tabindex]:focus-visible,.hmi-explorer button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.hmi-explorer-figure{min-width:0}.hmi-scene-scroll{overflow-x:auto;overflow-y:hidden;background:#f4f2e9;overscroll-behavior-inline:contain}.hmi-explorer-stage{height:clamp(330px,50svh,480px);position:relative;min-width:680px;max-width:1050px;margin-inline:auto;isolation:isolate}.detail-hmi .hmi-assembled{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:43%;height:auto;max-width:none;mix-blend-mode:multiply;opacity:calc(1 - min(1,var(--progress) * 5));z-index:5;pointer-events:none}.hmi-sketch-layer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:min(1,var(--progress) * 5);pointer-events:none;will-change:transform}.hmi-sketch-enclosure{width:43%;transform:translate(calc(-50% - var(--progress) * 20%),calc(-50% + var(--progress) * 30%));z-index:1}.hmi-sketch-pcb{width:31.19%;transform:translate(calc(-50% + var(--progress) * 1%),calc(-50% - var(--progress) * 5%));z-index:2}.hmi-sketch-display{width:38.46%;transform:translate(calc(-50% + var(--progress) * 23%),calc(-50% - var(--progress) * 43%));z-index:3}.detail-hmi .hmi-sketch-layer img{display:block;width:100%;height:auto;max-width:100%;mix-blend-mode:multiply}.hmi-sketch-label{position:absolute;top:50%;left:calc(100% + 22px);white-space:nowrap;color:#056cc4;font:500 12px/1.4 Inter,Arial,sans-serif;opacity:0}.hmi-sketch-label:before{content:'';position:absolute;right:calc(100% + 6px);top:50%;width:35px;border-top:1px solid currentColor}.hmi-explorer-stage[data-settled=true][data-layer=enclosure] .hmi-sketch-enclosure .hmi-sketch-label,.hmi-explorer-stage[data-settled=true][data-layer=pcb] .hmi-sketch-pcb .hmi-sketch-label,.hmi-explorer-stage[data-settled=true][data-layer=display] .hmi-sketch-display .hmi-sketch-label{opacity:1}.detail-hmi .hmi-explorer figcaption{font-size:10px;color:var(--ink);margin-top:8px;line-height:1.5}.hmi-scroll-hint{display:none}.hmi-explorer-details[hidden]{display:block;visibility:hidden;pointer-events:none}.hmi-layer-tabs{display:flex;gap:30px;margin-top:14px;border-bottom:1px solid var(--line)}.hmi-layer-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:10px 0;min-height:44px;font:500 12px Inter,Arial,sans-serif;color:var(--ink);cursor:pointer}.hmi-layer-tabs button[aria-selected=true]{color:var(--blue);border-bottom-color:var(--blue)}.hmi-layer-tabs button:hover{color:var(--blue)}.detail-hmi .hmi-layer-copy{padding-top:16px;min-height:110px}.detail-hmi .hmi-layer-copy article{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.detail-hmi .hmi-layer-copy article[hidden]{display:none}.detail-hmi .hmi-layer-copy .hmi-part-number{font-size:10px;letter-spacing:1.2px;color:var(--blue);margin-bottom:8px}.detail-hmi .hmi-layer-copy h3{font-size:25px;font-weight:600}.detail-hmi .hmi-layer-copy article>p{font-size:14px;line-height:1.65;color:var(--ink);max-width:540px}.hmi-explorer-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:767px){.detail-hmi .hmi-explorer{padding-top:40px;min-height:210svh}.hmi-explorer-sticky{top:12px}.hmi-explorer-heading{gap:16px;align-items:center;margin-bottom:15px}.detail-hmi .hmi-explorer h2{font-size:27px}.hmi-explorer-action{max-width:125px}.detail-hmi .hmi-explorer-action p{display:none}.hmi-scroll-cue{font-size:11px}.detail-hmi .hmi-explorer .hmi-eyebrow{font-size:9px;margin-bottom:8px}.hmi-explorer-stage{height:300px}.hmi-scroll-hint{display:inline}.hmi-layer-tabs{gap:23px;margin-top:10px}.detail-hmi .hmi-layer-copy article{grid-template-columns:1fr;gap:10px}.detail-hmi .hmi-layer-copy h3{font-size:23px}.detail-hmi .hmi-layer-copy article>p{font-size:13px}.detail-hmi .hmi-layer-copy{min-height:145px;padding-top:12px}}
@media(prefers-reduced-motion:reduce){.detail-hmi .hmi-explorer{min-height:0;--progress:1!important}.hmi-explorer-sticky{position:relative;top:auto}.hmi-scroll-cue{display:none}.hmi-explorer *{transition:none!important;animation:none!important}}
/* One assembly frame. All translations follow the projected world-Z mounting axis. */
.hmi-scene-scroll{--scene-height:clamp(360px,54svh,540px);overflow:hidden}
.hmi-explorer-stage{height:var(--scene-height);width:100%;min-width:0;max-width:none}
.hmi-model{position:absolute;left:50%;top:50%;width:calc(var(--scene-height) * .53);aspect-ratio:161.0037 / 114.757;transform:translate(-50%,-50%) scale(var(--assembly-scale,1.45));isolation:isolate}
.detail-hmi .hmi-assembled{width:100%;opacity:var(--closed-opacity,1);mix-blend-mode:normal}
.hmi-sketch-layer{top:50%;left:50%;width:100%;opacity:var(--layers-opacity,0);transition:filter .2s}
.hmi-sketch-enclosure{transform:translate(calc(-50% - var(--axis-x,0px)),calc(-50% + var(--axis-y,0px)))}
.hmi-sketch-pcb{transform:translate(-50%,-50%)}
.hmi-sketch-display{transform:translate(calc(-50% + var(--axis-x,0px)),calc(-50% - var(--axis-y,0px)))}
.hmi-part-face{position:relative;aspect-ratio:161.0037 / 114.757}
.detail-hmi .hmi-part-face img{width:100%;height:100%;mix-blend-mode:normal}
.detail-hmi .hmi-part-face .hmi-part-active{position:absolute;inset:0;opacity:0;transition:opacity .22s}
.hmi-pcb-turn{position:relative;aspect-ratio:161.0037 / 114.757;perspective:900px}
.hmi-pcb-mounted,.hmi-pcb-components{position:absolute;inset:0;backface-visibility:hidden}
.hmi-pcb-mounted{transform:rotate3d(.965926,.258819,0,var(--board-turn,0deg))}
.hmi-pcb-components{transform:rotate3d(.965926,.258819,0,calc(var(--board-turn,0deg) - 180deg))}
.hmi-mount-axis{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:var(--axis-opacity,0);pointer-events:none}
.hmi-mount-axis path{fill:none;stroke:#7b91a3;stroke-width:.65;stroke-dasharray:2.5 4}
.hmi-sketch-label{top:50%;left:calc(100% + 18px);margin:0;opacity:0;color:#51687a;font-size:11px}
.hmi-sketch-label:before{display:block;width:24px}
.hmi-explorer-stage[data-settled=true] .hmi-sketch-label{opacity:1}
.hmi-explorer-stage[data-settled=true] .hmi-sketch-layer > .hmi-part-face,
.hmi-explorer-stage[data-settled=true] .hmi-sketch-layer > .hmi-pcb-turn{filter:opacity(.48)}
.hmi-explorer-stage[data-settled=true] .hmi-sketch-layer[data-selected=true] > .hmi-part-face,
.hmi-explorer-stage[data-settled=true] .hmi-sketch-layer[data-selected=true] > .hmi-pcb-turn{filter:opacity(1)}
.hmi-explorer-stage[data-settled=true] [data-selected=true] .hmi-part-active{opacity:1}
.hmi-explorer-stage[data-settled=true] [data-selected=true] .hmi-sketch-label{color:#0078df;font-weight:700}
@media(max-width:767px){
 .hmi-scene-scroll{--scene-height:360px}
 .hmi-sketch-label{left:calc(100% - 5px);font-size:9px}
 .hmi-sketch-label:before{width:12px}
 .hmi-scroll-hint{display:none}
}

/* Large illustration on the left, component story on the right. */
@media(min-width:901px){
 .hmi-explorer-sticky{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:6%;align-items:start}
 .hmi-explorer-figure{grid-column:1;grid-row:1 / 3;margin:0}
 .hmi-explorer-heading{grid-column:2;grid-row:1;display:block;align-self:end;margin:0 0 24px}
 .hmi-explorer-action{max-width:360px;margin-top:22px}
 .hmi-explorer-details{grid-column:2;grid-row:2;align-self:start;min-width:0}
 .hmi-layer-tabs{gap:24px;margin-top:0}
 .detail-hmi .hmi-layer-copy article{grid-template-columns:1fr;gap:16px}
 .detail-hmi .hmi-layer-copy{padding-top:24px;min-height:180px}
 .detail-hmi .hmi-layer-copy h3{font-size:clamp(25px,2.3vw,32px)}
 .hmi-scene-scroll{--scene-height:clamp(440px,calc(100svh - 100px),800px)}
 .hmi-model{left:44%;width:min(60%,calc(var(--scene-height) * .53))}
 .hmi-sketch-label{left:calc(100% + 10px);font-size:10px}
 .hmi-sketch-label:before{width:16px}
}
@media(min-width:768px) and (max-width:900px){
 .hmi-scene-scroll{--scene-height:440px}
}

/* Inspect the electronics without losing the surrounding assembly. */
.hmi-pcb-turn,.hmi-sketch-enclosure > .hmi-part-face,.hmi-sketch-display > .hmi-part-face{transform:scale(1);transform-origin:50% 50%;transition:transform .32s ease}
.hmi-explorer-stage[data-settled=true] [data-selected=true] > .hmi-pcb-turn,
.hmi-explorer-stage[data-settled=true] [data-selected=true] > .hmi-part-face{transform:scale(1.25)}
@media(max-width:767px){
 .hmi-explorer-stage[data-settled=true] [data-selected=true] > .hmi-pcb-turn,
 .hmi-explorer-stage[data-settled=true] [data-selected=true] > .hmi-part-face{transform:scale(1.18)}
}
@media(prefers-reduced-motion:reduce){.hmi-pcb-turn,.hmi-sketch-layer > .hmi-part-face{transition:none}}

/* The assembly descriptions remain readable when enhancement is unavailable. */
.detail-hmi .hmi-explorer:not(.hmi-explorer-ready){min-height:0}
.hmi-explorer:not(.hmi-explorer-ready) .hmi-explorer-sticky{position:static}
.hmi-explorer:not(.hmi-explorer-ready) .hmi-layer-tabs,
.hmi-explorer:not(.hmi-explorer-ready) .hmi-explorer-action{display:none}
.detail-hmi .hmi-explorer:not(.hmi-explorer-ready) .hmi-layer-copy article{display:grid;margin-bottom:20px}

/* Keep part names readable while only the unselected geometry fades. */
.hmi-sketch-label{font-size:14px;font-weight:600;line-height:1.4;color:#344765}
.hmi-explorer-stage[data-settled=true] [data-selected=true] .hmi-sketch-label{color:#045dab}
.detail-hmi .hmi-explorer figcaption{font-size:12px;line-height:1.6}
@media(min-width:768px) and (max-width:1100px){
 .hmi-sketch-label{font-size:12px;left:calc(100% - 20px)}
}
@media(max-width:767px){
 .hmi-sketch-label{font-size:12px;left:calc(100% - 40px);max-width:100px;white-space:normal;background:#f4f2e9;padding:2px 4px}
 .hmi-sketch-label:before{width:10px}
}