/* HOMESTAT — what every screen rebuilt in code shares on the product page (14 Oct 2026): the box the screen sits in,
   the guided steps beside it, and the full size view on a phone. Each screen brings its own styles too
   (inspinia-wide.css, akubela-elite.css and the others). The HyPanel Ultra keeps its own copy in hypanel.css. */
.hsx{position:relative;width:100%;margin:0 auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hsx *,.hsx *::before,.hsx *::after{box-sizing:border-box}
:where(.hsx) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
:where(.hsx) [role="slider"],:where(.hsx) [data-knob]{cursor:pointer;touch-action:none}
.hsx button:focus-visible,.hsx [tabindex]:focus-visible{outline:2px solid #FF8A1F;outline-offset:2px}
/* the screen inside its device: drawn at its own design size, then scaled (see screen-core.js) */
.hsx-ui{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.hsx-ui [hidden]{display:none!important}

/* beside the screen: the guided steps */
.hpx-tour{list-style:none;margin:0;padding:0;counter-reset:hpstep;max-width:none}
.hpx-tour li{position:relative;padding:11px 0 11px 40px;border-bottom:1px solid var(--line,#E2E2E2);margin:0;font-size:14px;line-height:1.5}
.hpx-tour li::before{counter-increment:hpstep;content:counter(hpstep);position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:50%;border:1px solid #BDBDBD;display:grid;place-items:center;font-size:12px;color:#5F5F5F;transition:all .25s}
.hpx-tour li.done::before{content:"✓";background:#0A0A0A;border-color:#0A0A0A;color:#fff}
.hpx-tour li.done{color:#5F5F5F}
.hpx-progress{font-size:13px;color:#5F5F5F;margin:12px 0 0}

/* small screens: a wide screen can open full screen, sideways */
.hpx-full-btn{display:none}
@media (max-width:700px){.hpx-full-btn{display:inline-flex}}
.hsx.full{position:fixed;inset:0;z-index:1000;max-width:none!important;margin:0;background:#111;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.hpx-close{display:none;position:fixed;right:14px;top:12px;z-index:1001;height:36px;padding:0 14px;border-radius:18px;background:#fff;color:#111;font-family:var(--mono,monospace);font-size:12px}
.hsx.full .hpx-close{display:block}
.hpx-turn{display:none;position:fixed;left:0;right:0;bottom:16px;text-align:center;color:#DADADA;font-size:13px;z-index:1001;margin:0;max-width:none}
@media (orientation:portrait){.hsx.full .hpx-turn{display:block}}
@media (prefers-reduced-motion:reduce){.hsx *{transition:none!important;animation:none!important}}

/* the drawn camera views (screen-core.js camScene) */
.hs-cam{display:block;width:100%;height:100%}
.hs-gatebars{transition:transform 2.4s ease}
.hs-cam.open .hs-gatebars{transform:translateX(300px)}

/* the device follows the finish picked at the top of the page (screen-core.js sets data-finish on the screen):
   --fin-hi, --fin and --fin-lo are a light, a middle and a dark tone of the finish, for the frame's gradients */
.hsx[data-finish="insp-black"]{--fin-hi:#3A3A3A;--fin:#1E1E1E;--fin-lo:#0E0E0E}
.hsx[data-finish="insp-silver"]{--fin-hi:#E4E4E4;--fin:#BCBCBC;--fin-lo:#8C8C8C}
.hsx[data-finish="insp-gold"]{--fin-hi:#EEDCC6;--fin:#D8BCA0;--fin-lo:#A88C70}
.hsx[data-finish="insp-red"]{--fin-hi:#CC3A22;--fin:#A71300;--fin-lo:#6E0C00}
.hsx[data-finish="insp-pink"]{--fin-hi:#F6D4D4;--fin:#E8B1B1;--fin-lo:#B98585}
.hsx[data-finish="insp-bronze"]{--fin-hi:#9C8A67;--fin:#756548;--fin-lo:#4C412E}
.hsx[data-finish="insp-copper"]{--fin-hi:#BA845E;--fin:#95603E;--fin-lo:#643F27}
.hsx[data-finish="akb-dark-grey"]{--fin-hi:#66686C;--fin:#4A4C4F;--fin-lo:#2E2F31}
.hsx[data-finish="akb-black"]{--fin-hi:#2C2C2C;--fin:#161616;--fin-lo:#080808}
.hsx[data-finish="akb-white"]{--fin-hi:#FFFFFF;--fin:#F2F2F0;--fin-lo:#D2D2CF}
.hsx[data-finish="akb-silver"]{--fin-hi:#EEEEEE;--fin:#C9C9C9;--fin-lo:#8F8F8F}
.hsx[data-finish="akb-gold"]{--fin-hi:#EBD5A2;--fin:#C8A96A;--fin-lo:#8E733E}
.hsx[data-finish="akb-green"]{--fin-hi:#5C7D69;--fin:#3F5A4A;--fin-lo:#26382D}
.hsx[data-finish="akb-crystal"]{--fin-hi:#FFFFFF;--fin:#E6EEF2;--fin-lo:#B8C4CA}
.hsx[data-finish="silver-alu"]{--fin-hi:#C8C8C8;--fin:#9C9C9C;--fin-lo:#6E6E6E}
.hsx[data-finish="graphite-alu"]{--fin-hi:#9E9E9E;--fin:#7A7A7A;--fin-lo:#4E4E4E}