/* Real HMI screenshots, shown intact; the Matrix layer exists only during a slide change. */
.hmi-gallery{--hmi-line:#45636e;--hmi-ink:#dcebed;--hmi-accent:#acebed;--hmi-bg:#0c1a21;margin:0;min-width:0;border:1px solid var(--hmi-line);background:var(--hmi-bg);color:var(--hmi-ink);box-shadow:0 18px 40px #0002}
.hmi-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:var(--hmi-aspect,16/9);background:#071016;direction:ltr}
.hmi-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;max-width:100%;margin:0}
.hmi-matrix{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hmi-gallery [data-hmi-expand]{position:absolute;z-index:3;inset-block-start:12px;inset-inline-end:12px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 12px;border:1px solid #7997a2;background:#0c2029ec;color:#def5f6;cursor:pointer;backdrop-filter:blur(8px);font-size:13px;line-height:1.4}
.hmi-gallery [data-hmi-expand] svg{display:block;width:20px;height:20px;flex:none}
.hmi-gallery [data-hmi-expand]:hover{border-color:#fa7940;background:#17333e}
.hmi-gallery>figcaption{padding:16px 18px 17px;border-top:1px solid var(--hmi-line)}
.hmi-gallery [data-hmi-title]{display:block;color:var(--hmi-ink);font-size:15px;font-weight:600;line-height:1.55;min-width:0;margin:0 0 13px;overflow-wrap:anywhere}
.hmi-controls{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;min-width:0}
.hmi-controls button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 11px;border:1px solid #526e79;background:#10242e;color:#c5e5eb;font:inherit;font-size:13px;line-height:1.4;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.hmi-controls button:hover:not(:disabled){background:#1f3d48;border-color:#87c8d0}
.hmi-controls button:disabled{opacity:.48;cursor:default}
.hmi-controls :is([data-hmi-prev],[data-hmi-next]){font-size:25px;line-height:1;font-family:Arial,sans-serif}
.hmi-controls [data-hmi-play]{margin-inline-start:auto;font-size:16px}
.hmi-options{display:flex;flex:0 1 auto;flex-wrap:wrap;gap:6px;min-width:0}
.hmi-options button{font-size:12px;letter-spacing:.025em;padding-inline:10px}
.hmi-options button[aria-pressed=true]{background:#acebed;color:#10282f;border-color:#acebed;font-weight:700}
.hmi-gallery :is(button,a):focus-visible,.hmi-dialog button:focus-visible{outline:2px solid #fa7940;outline-offset:3px}
.hmi-status{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;clip:rect(0,0,0,0)!important;overflow:hidden!important;white-space:nowrap!important}
.hmi-dialog{width:min(860px,calc(100vw - 48px));max-width:860px;max-height:86vh;max-height:86dvh;padding:18px;border:1px solid #65828e;background:#0b1b23;color:#e0f0f2;box-shadow:0 24px 100px #0009;overflow:auto}
.hmi-dialog::backdrop{background:#02090dc9;backdrop-filter:blur(6px)}
.hmi-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;min-width:0}
.hmi-dialog-header h2{flex:1 1 0;min-width:0;margin:0;font-size:18px!important;line-height:1.5!important;font-weight:600;letter-spacing:0!important;overflow-wrap:anywhere}
.hmi-dialog-close{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;max-width:100%;padding:9px 12px;border:1px solid #65828e;background:#142d38;color:#def3f5;font:inherit;font-size:14px;line-height:1.4;white-space:nowrap;cursor:pointer}
.hmi-dialog-close>span{flex:none}.hmi-dialog-close .hmi-close-symbol{font-size:24px;font-weight:400;line-height:1}
.hmi-dialog>img{display:block;width:100%;height:auto;max-height:calc(86vh - 110px);max-height:calc(86dvh - 110px);object-fit:contain;object-position:center;margin:0;background:#071016}
[dir=rtl] .hmi-controls :is([data-hmi-prev],[data-hmi-next]){transform:rotate(180deg)}
[dir=rtl] .hmi-options button{letter-spacing:0}
@media(max-width:760px){.hmi-gallery>figcaption{padding:15px}.hmi-controls{gap:7px}.hmi-options{flex:1;justify-content:center}.hmi-options button{min-width:40px;padding-inline:8px}.hmi-controls [data-hmi-play]{margin-inline-start:0}.hmi-dialog{width:calc(100vw - 32px);padding:14px}.hmi-dialog-header{gap:12px}.hmi-dialog-header h2{font-size:16px!important}.hmi-dialog-close{font-size:13px;padding:9px 10px}}
@media(max-width:480px){.hmi-gallery [data-hmi-expand]{inset-block-start:8px;inset-inline-end:8px;padding:9px;gap:6px}.hmi-gallery [data-hmi-expand]>span{font-size:12px}.hmi-gallery>figcaption{padding:14px}.hmi-gallery [data-hmi-title]{font-size:14px;margin-bottom:12px}.hmi-controls{justify-content:center;gap:8px}.hmi-options{flex:1 1 100%;order:-1;gap:6px;justify-content:stretch}.hmi-options button{flex:1;min-width:40px;font-size:12px;padding:9px 7px;min-height:44px}.hmi-controls [data-hmi-play]{margin-inline-start:auto}.hmi-dialog{width:calc(100vw - 28px);padding:12px;max-height:84dvh}.hmi-dialog-header{gap:10px}.hmi-dialog-header h2{font-size:15px!important;line-height:1.5!important}.hmi-dialog-close{gap:7px;padding:8px 10px}.hmi-dialog>img{max-height:calc(84dvh - 110px)}}
@media(prefers-reduced-motion:reduce){.hmi-controls button{transition:none}.hmi-matrix{display:none!important}}
.motion-off .hmi-matrix{display:none!important}

/* Native screenshot proportions and a deliberately compact product preview. */
.hmi-gallery[data-hmi-gallery="spz500"]{--hmi-aspect:3/2;max-width:480px;margin-inline:auto}
.hmi-caption-note{display:block;font-size:14px;line-height:1.6;color:#a9bec6;margin-bottom:14px}
.hmi-product-preview{max-width:480px;margin:36px auto;min-width:0}
.hmi-product-preview>h3{font-size:25px;line-height:1.3;margin-bottom:18px}
.hmi-product-preview>.note{font-size:14px;line-height:1.65;margin-top:14px}
.hmi-dialog[data-hmi-kind="spz500"]{width:min(650px,calc(100vw - 48px));max-width:650px}
@media(max-width:560px){.hmi-product-preview{margin-block:28px}.hmi-product-preview>h3{font-size:23px}.hmi-caption-note{font-size:13px}.hmi-dialog[data-hmi-kind="spz500"]{width:calc(100vw - 28px)}}

/* Keep the approved screen completely visible; enlargement lives in the caption. */
.hmi-gallery>figcaption{position:relative}.hmi-caption{padding-inline-end:56px}