/* HOMESTAT — the Inspinia 4 SQ room controller's screen, rebuilt in code for the product page (14 Oct 2026).
   The device: a square of black glass in a thin brushed metal frame (the frame and its step 3.7 % of the width, the
   lit screen 84 % of the glass, as in Inspinia's picture and our 3D model). The screen is drawn at 480 x 480 design
   pixels and scaled (see inspinia-square.js). Sizes and colours measured off Inspinia's picture I_4sq_touch1. */
.hsx-inspinia-square{--fin-hi:#3A3A3A;--fin:#1E1E1E;--fin-lo:#0E0E0E;max-width:520px;max-width:min(520px,calc(100vh - 140px));max-width:min(520px,calc(100dvh - 140px));font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif}
.pv-ink .hsx-inspinia-square{margin:8px auto 44px}

/* the frame: brushed metal, fine horizontal lines over the finish's light, middle and dark tones */
.isq-device{position:relative;width:100%;aspect-ratio:1/1;border-radius:.6%;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 2px),
    repeating-linear-gradient(180deg,rgba(0,0,0,.045) 0,rgba(0,0,0,.045) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 3px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 7px),
    repeating-linear-gradient(180deg,rgba(0,0,0,.04) 0,rgba(0,0,0,.04) 2px,rgba(0,0,0,0) 2px,rgba(0,0,0,0) 11px),
    linear-gradient(90deg,rgba(255,255,255,.035) 0%,rgba(0,0,0,.03) 28%,rgba(255,255,255,.045) 57%,rgba(0,0,0,.035) 82%,rgba(255,255,255,.02) 100%),
    linear-gradient(172deg,var(--fin-hi) 0%,var(--fin) 46%,var(--fin-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.45),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(0,0,0,.3),0 24px 46px -22px rgba(0,0,0,.95)}
/* the step where the glass sits: a thin chamfer, lit from the top left */
.isq-bezel{position:absolute;left:3.1%;top:3.1%;right:3.1%;bottom:3.1%;border-radius:3.7%/3.7%;background:linear-gradient(135deg,var(--fin-hi) 0%,var(--fin) 45%,var(--fin-lo) 100%);box-shadow:0 0 0 1px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.06)}
.isq-glass{position:absolute;left:.6%;top:.6%;right:.6%;bottom:.6%;border-radius:3.2%/3.2%;overflow:hidden;background:linear-gradient(160deg,#0A0A0B 0%,#050506 40%,#020203 100%);box-shadow:0 0 0 1px rgba(0,0,0,.75)}
.isq-glass::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 24%,rgba(255,255,255,0) 24.2%);pointer-events:none;z-index:2}
.isq-screen{position:absolute;left:8%;top:8%;right:8%;bottom:8%;overflow:hidden;background:#000}

/* the screen, 480 x 480 design pixels */
.isq-ui{width:480px;height:480px;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.25;-webkit-text-size-adjust:none;text-size-adjust:none}
.isq-ui svg{max-width:none}
.isq-ui .isq-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.isq-defs{position:absolute;width:0;height:0;overflow:hidden}
.isq-ui .isq-room{position:absolute;left:-14px;top:-14px;width:508px;height:508px;filter:blur(2.4px);pointer-events:none}
.isq-app{position:absolute;left:0;top:0;width:480px;height:480px}
.isq-ui button{touch-action:manipulation}
.isq-ui button:focus-visible,.isq-ui [tabindex]:focus-visible{outline:2px solid #FF8A1F;outline-offset:2px}

/* header: the room's name and six buttons that choose what the tiles show */
.isq-ui .isq-head{position:absolute;left:0;top:0;width:480px;height:60px;background:#000;z-index:3}
.isq-ui .isq-title{position:absolute;left:21px;top:21px;max-width:156px;font-size:23.6px;font-weight:500;line-height:30px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isq-ui .isq-filters{position:absolute;right:6px;top:16px;display:flex;gap:8px}
.isq-ui .isq-f{position:relative;width:41px;height:40px;border-radius:6px;background:#6B6B6B;color:#fff;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s}
.isq-ui .isq-f::before{content:"";position:absolute;left:-4px;right:-4px;top:-10px;bottom:-4px}
.isq-ui .isq-f svg{width:28px;height:28px;stroke-width:1.75}
.isq-ui .isq-f[aria-pressed="true"]{background:#FFFFFF;color:#BDBDBD}
.isq-ui .isq-f:focus-visible{border-radius:6px}

/* the tiles: 3 x 2, 151 x 146, 7.5 px apart across and 12 px down */
.isq-ui .isq-pages{position:absolute;left:0;top:60px;width:960px;height:352px;transition:transform .36s cubic-bezier(.3,.7,.25,1)}
.isq-ui .isq-pages[data-page="1"]{transform:translateX(-480px)}
.isq-ui .isq-pg{position:absolute;left:0;top:0;width:480px;height:352px;visibility:visible;transition:visibility 0s}
.isq-ui .isq-pg+.isq-pg{left:480px}
.isq-ui .isq-pg[aria-hidden="true"]{visibility:hidden;transition:visibility 0s linear .36s}
.isq-ui .isq-pages.isq-dragging{transition:none}
.isq-ui .isq-dragging .isq-pg[aria-hidden="true"]{visibility:visible;transition:none}
.isq-ui .isq-grid{position:absolute;left:6px;top:8px;display:grid;grid-template-columns:repeat(3,151px);grid-auto-rows:146px;column-gap:7.5px;row-gap:12px}
.isq-ui .isq-tile{position:relative;width:151px;height:146px;border-radius:6px;background:rgba(158,158,158,.46);transition:background-color .25s}
.isq-ui .isq-tile[data-on="true"].isq-c-y{background:#F7BB30}
.isq-ui .isq-tile[data-on="true"].isq-c-b{background:#438CE6}
.isq-ui .isq-tile[data-on="true"].isq-c-p{background:rgba(150,112,234,.92)}
.isq-ui .isq-tile[data-on="true"].isq-c-m{background:#EC6A8C}
.isq-ui .isq-open{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:6px;text-align:left;color:#fff}
.isq-ui .isq-open:focus-visible{border-radius:6px;outline-offset:3px}
.isq-ui .isq-tile .isq-art{position:absolute;left:14px;top:9px;width:60px;height:60px;pointer-events:none}
.isq-ui .isq-tile .isq-ledc .isq-art{left:14px;top:9px}
.isq-ui .isq-name{position:absolute;left:17px;top:90px;right:12px;font-size:18px;font-weight:500;line-height:24px;letter-spacing:.1px;text-shadow:0 1px 2px rgba(0,0,0,.2);pointer-events:none}
.isq-ui .isq-chev{position:absolute;right:16px;top:64px;width:10px;height:18px;color:#fff;pointer-events:none}
.isq-ui .isq-run{position:absolute;right:16px;top:20px;width:20px;height:22px;color:#fff;pointer-events:none}
.isq-ui .isq-sc .isq-open[aria-pressed="true"]{background:#438CE6}
/* a light that is off shows no glow on its icon */
.isq-ui [data-on="false"] .isq-glo{opacity:0}
.isq-ui [data-ledc][data-on="false"] .isq-ledglow{opacity:.1}

/* the switch on a tile: an outline pill with a ring, the ring on the right when on */
.isq-ui .isq-sw{position:absolute;right:0;top:0;width:68px;height:60px;border-radius:6px;z-index:1}
.isq-ui .isq-pill{position:absolute;right:14px;top:24px;width:38px;height:18px;border:2px solid #fff;border-radius:9px;pointer-events:none}
.isq-ui .isq-pill::after{content:"";position:absolute;left:2.6px;top:2px;width:10px;height:10px;border:2.2px solid #fff;border-radius:50%;transition:transform .2s ease}
.isq-ui [aria-checked="true"] .isq-pill::after{transform:translateX(18.8px)}
.isq-ui .isq-sw:focus-visible{outline:none}
.isq-ui .isq-sw:focus-visible .isq-pill{box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 0 5px #FF8A1F}

/* page dots and the bar at the foot */
.isq-ui .isq-dots{position:absolute;left:0;top:372px;width:480px;height:40px;z-index:2}
.isq-ui .isq-dot{position:absolute;top:0;width:57px;height:40px}
.isq-ui .isq-dot[data-v="0"]{left:182px}
.isq-ui .isq-dot[data-v="1"]{left:240px}
.isq-ui .isq-dot i{position:absolute;top:20px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.46);transition:background-color .25s}
.isq-ui .isq-dot[data-v="0"] i{left:43px}
.isq-ui .isq-dot[data-v="1"] i{left:4px}
.isq-ui .isq-dot[aria-current="page"] i{background:#fff}
.isq-ui .isq-dot:focus-visible{outline:none}
.isq-ui .isq-dot:focus-visible i{outline:2px solid #FF8A1F;outline-offset:3px}
.isq-ui .isq-bar{position:absolute;left:0;top:412px;width:480px;height:68px;background:rgba(120,117,113,.24);z-index:2}
.isq-ui .isq-back{position:absolute;left:0;top:0;width:101px;height:68px;border-radius:0;background:rgba(255,255,255,.16);color:#fff}
.isq-ui .isq-back svg{position:absolute;left:44px;top:24px;width:10px;height:18px}
.isq-ui .isq-back[aria-disabled="true"]{cursor:default}
.isq-ui .isq-back[aria-disabled="true"] svg{opacity:.6}
.isq-ui .isq-back:focus-visible{outline-offset:-4px}

/* a device's page */
.isq-ui .isq-det{position:absolute;left:6px;top:68px;width:468px;height:336px;border-radius:6px;background:rgba(34,34,36,.78)}
.isq-ui .isq-dh{position:absolute;left:0;top:0;width:468px;height:64px;border-bottom:1px solid rgba(255,255,255,.1)}
.isq-ui .isq-dico{position:absolute;left:14px;top:9px;width:46px;height:46px}
.isq-ui .isq-dico .isq-art{width:46px;height:46px}
.isq-ui .isq-dt{position:absolute;left:70px;top:0;right:92px;font-size:21px;font-weight:500;line-height:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isq-ui .isq-dt:focus{outline:none}
.isq-ui .isq-dsw{width:80px;height:64px}
.isq-ui .isq-dsw .isq-pill{right:18px;top:23px}
.isq-ui .isq-lbl{font-size:14px;line-height:18px;color:#C4C4C4;letter-spacing:.2px}
.isq-ui .isq-big{position:absolute;left:22px;top:90px;font-size:84px;font-weight:300;line-height:84px;letter-spacing:-1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.isq-ui .isq-big-s{font-size:66px;line-height:66px;top:84px}
.isq-ui .isq-l-big{position:absolute;left:26px;top:182px}
.isq-ui .isq-l-big2{position:absolute;left:26px;top:156px}

/* sliders: a thin line and a round knob, as on Inspinia's screens */
.isq-ui .isq-slider{position:absolute;height:44px;touch-action:none;cursor:pointer;border-radius:22px}
.isq-ui .isq-s-main{left:28px;top:262px;width:412px}
.isq-ui .isq-track{position:absolute;left:0;right:0;top:20px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);pointer-events:none}
.isq-ui .isq-track i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 1%);border-radius:2px;background:#fff}
.isq-ui .isq-thumb{position:absolute;top:9px;left:calc(var(--v,0) * 1% - 13px);width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45);pointer-events:none}
.isq-ui .isq-slider:focus-visible{outline:none}
.isq-ui .isq-slider:focus-visible .isq-thumb{box-shadow:0 0 0 3px #1A1A1A,0 0 0 5px #FF8A1F}

/* the chandelier */
.isq-ui .isq-glowart{position:absolute;right:30px;top:84px;width:150px;height:150px;pointer-events:none}
.isq-ui .isq-glowart .isq-art{position:absolute;left:11px;top:6px;width:128px;height:128px}
.isq-ui .isq-halo{position:absolute;left:-26px;top:-28px;right:-26px;bottom:-20px;background:radial-gradient(closest-side,rgba(255,214,120,.6) 0,rgba(255,196,90,.26) 45%,rgba(255,190,80,0) 100%);transition:opacity .2s}

/* the LED strip */
.isq-ui .isq-det-led .isq-ledc .isq-art{width:46px;height:46px}
.isq-ui .isq-cw{position:absolute;left:236px;top:84px;width:208px;height:56px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .25s}
.isq-ui .isq-cw svg{width:28px;height:28px}
.isq-ui .isq-cw[data-light="true"]{color:#1C1C1C}
.isq-ui .isq-pal{position:absolute;left:236px;top:150px;width:208px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.isq-ui .isq-swatch{height:42px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.isq-ui .isq-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px #1E1E1E,0 0 0 4px #fff}
.isq-ui .isq-swatch:focus-visible{border-radius:4px}
.isq-ui .isq-strip{position:absolute;left:28px;top:208px;width:176px;height:10px;border-radius:5px;background:currentColor;box-shadow:0 0 18px 3px currentColor;transition:opacity .2s}
.isq-ui .isq-strip[data-on="false"]{box-shadow:none}

/* air conditioning */
.isq-ui .isq-now{position:absolute;left:24px;top:80px}
.isq-ui .isq-now b{display:block;margin-top:6px;font-size:32px;font-weight:300;line-height:36px;font-variant-numeric:tabular-nums}
.isq-ui .isq-sq{position:absolute;width:60px;height:60px;border-radius:6px;background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .2s}
.isq-ui .isq-sq svg{width:30px;height:30px}
.isq-ui .isq-sq:active{background:rgba(255,255,255,.24)}
.isq-ui .isq-sq[aria-disabled="true"]{opacity:.38;cursor:default}
.isq-ui .isq-minus{left:172px;top:80px}
.isq-ui .isq-plus{left:384px;top:80px}
.isq-ui .isq-set{position:absolute;left:232px;top:74px;width:152px;text-align:center}
.isq-ui .isq-set b{display:block;font-size:46px;font-weight:300;line-height:50px;font-variant-numeric:tabular-nums;white-space:nowrap}
.isq-ui .isq-det-ac[data-on="false"] .isq-set b{color:#9A9A9A}
.isq-ui .isq-l-mode{position:absolute;left:24px;top:156px}
.isq-ui .isq-l-fan{position:absolute;left:24px;top:232px}
.isq-ui .isq-l-swing{position:absolute;left:336px;top:232px}
.isq-ui .isq-chips{position:absolute;display:grid;gap:6px}
.isq-ui .isq-modes{left:24px;top:176px;width:420px;grid-template-columns:repeat(5,1fr)}
.isq-ui .isq-fans{left:24px;top:252px;width:300px;grid-template-columns:repeat(4,1fr)}
.isq-ui .isq-chip{height:44px;border-radius:6px;background:rgba(255,255,255,.13);font-size:15px;color:#F2F2F2;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background-color .2s}
.isq-ui .isq-chip[aria-pressed="true"],.isq-ui .isq-swing[aria-checked="true"]{background:#438CE6;color:#fff}
.isq-ui .isq-swing{position:absolute;left:336px;top:252px;width:108px}
.isq-ui .isq-swing svg{width:22px;height:22px}

/* music */
.isq-ui .isq-cover{position:absolute;left:24px;top:80px;width:104px;height:104px;border-radius:6px;overflow:hidden;box-shadow:0 6px 18px -8px rgba(0,0,0,.7)}
.isq-ui .isq-cover svg{display:block;width:104px;height:104px}
.isq-ui .isq-track-t{position:absolute;left:148px;top:88px;right:20px;font-size:22px;font-weight:500;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isq-ui .isq-artist{position:absolute;left:148px;top:118px;right:20px;font-size:15px;line-height:20px;color:#C4C4C4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isq-ui .isq-zone{position:absolute;left:148px;top:156px;right:20px;display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:#A8A8A8;white-space:nowrap}
.isq-ui .isq-zone svg{width:16px;height:16px;flex:none}
.isq-ui .isq-ctl{position:absolute;left:0;top:204px;width:468px;height:56px}
.isq-ui .isq-ctl .isq-sq{top:0;width:84px;height:56px}
.isq-ui .isq-ctl .isq-sq:nth-child(1){left:92px}
.isq-ui .isq-ctl .isq-sq:nth-child(2){left:188px;width:92px}
.isq-ui .isq-ctl .isq-sq:nth-child(3){left:292px}
.isq-ui .isq-play .isq-i-pause,.isq-ui .isq-play[data-playing="true"] .isq-i-play{display:none}
.isq-ui .isq-play[data-playing="true"] .isq-i-pause{display:block}
.isq-ui .isq-vol{position:absolute;left:24px;top:272px;width:420px;height:44px}
.isq-ui .isq-vol>svg{position:absolute;left:0;top:10px;width:24px;height:24px;color:#D8D8D8}
.isq-ui .isq-s-vol{left:44px;top:0;width:318px}
.isq-ui .isq-vol>span{position:absolute;right:0;top:0;width:44px;line-height:44px;text-align:right;font-size:15px;color:#D8D8D8;font-variant-numeric:tabular-nums}

/* curtains */
.isq-ui .isq-cdraw{position:absolute;left:22px;top:84px;width:150px;height:150px}
.isq-ui .isq-cdraw .isq-art{width:150px;height:150px}
.isq-ui .isq-cpos{position:absolute;left:194px;top:88px;right:20px;font-size:30px;font-weight:300;line-height:36px;white-space:nowrap;font-variant-numeric:tabular-nums}
.isq-ui .isq-cbtns{position:absolute;left:194px;top:136px;width:250px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.isq-ui .isq-tall{position:relative;height:98px;border-radius:6px;background:rgba(255,255,255,.13);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:#F2F2F2;transition:background-color .2s}
.isq-ui .isq-tall svg{width:30px;height:30px}
.isq-ui .isq-tall:active{background:rgba(255,255,255,.24)}
.isq-ui .isq-tall[aria-pressed="true"]::after{content:"";position:absolute;left:16px;right:16px;bottom:9px;height:2px;border-radius:1px;background:#4E9BF0}

/* the toast: a short sentence after each change */
.isq-ui .isq-toast{position:absolute;left:50%;bottom:12px;z-index:9;width:max-content;max-width:452px;padding:10px 16px;border-radius:6px;background:rgba(246,246,246,.97);color:#141414;font-size:14px;line-height:19px;text-align:center;opacity:0;transform:translate(-50%,10px);transition:opacity .25s,transform .25s;pointer-events:none;box-shadow:0 10px 26px -10px rgba(0,0,0,.7)}
.isq-ui .isq-toast.on{opacity:1;transform:translate(-50%,0)}