/* HOMESTAT — the Inspinia 10 SQ and 8 SQ screen, rebuilt in code (14 Oct 2026). See inspinia-wide.js.
   The device: black glass between two brushed metal bars, each 7.2 % of the device's width (as our 3D model,
   product3d.js inspSQ). The screen is drawn at 1280 x 800 design pixels, measured off Inspinia's own pictures,
   then scaled into the glass. Every rule inside the screen starts with .iw-ui, so the page's own styles stay out. */

/* ---- on the page: as wide as the content, never taller than the window on a laptop ---- */
.hsx-inspinia-wide{max-width:min(1040px,calc((100vh - 120px) * 1.578));max-width:min(1040px,calc((100dvh - 120px) * 1.578));margin:8px auto 44px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif;color:#fff}
.hsx-inspinia-wide[data-variant="8"]{max-width:min(900px,calc((100vh - 150px) * 1.631));max-width:min(900px,calc((100dvh - 150px) * 1.631))}
/* the first finish of each product, until the page picks one (screen.css gives the others) */
.hsx-inspinia-wide:not([data-finish]){--fin-hi:#9C8A67;--fin:#756548;--fin-lo:#4C412E}
.hsx-inspinia-wide[data-variant="8"]:not([data-finish]){--fin-hi:#3A3A3A;--fin:#1E1E1E;--fin-lo:#0E0E0E}

.iw-device{position:relative;display:flex;width:100%;aspect-ratio:3070/1946;border-radius:3px;box-shadow:0 34px 60px -30px rgba(0,0,0,.75),0 14px 26px -18px rgba(0,0,0,.55)}
.hsx-inspinia-wide[data-variant="8"] .iw-device{aspect-ratio:2430/1490}
/* the bars: metal brushed along their length (fine vertical lines), lit a little brighter in the middle */
.iw-bar{position:relative;flex:0 0 7.2%;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px,rgba(0,0,0,0) 4px,rgba(0,0,0,0) 7px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 5px,rgba(255,255,255,0) 5px,rgba(255,255,255,0) 13px),
  linear-gradient(90deg,var(--fin-lo,#4C412E) 0,var(--fin,#756548) 12%,var(--fin-hi,#9C8A67) 48%,var(--fin,#756548) 86%,var(--fin-lo,#4C412E) 100%)}
.iw-bar::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 16%,rgba(0,0,0,0) 78%,rgba(0,0,0,.2) 100%);pointer-events:none}
.iw-bl{border-radius:3px 0 0 3px;box-shadow:inset 1px 0 0 rgba(255,255,255,.18)}
.iw-br{border-radius:0 3px 3px 0;box-shadow:inset -1px 0 0 rgba(255,255,255,.18)}
.iw-glass{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;background:linear-gradient(160deg,#0D0D0E 0,#050505 50%,#0A0A0B 100%);box-shadow:inset 1px 0 0 rgba(0,0,0,.6),inset -1px 0 0 rgba(0,0,0,.6)}
.iw-glass::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(115deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.015) 32%,rgba(255,255,255,0) 46%);pointer-events:none;z-index:2}
/* the screen: 90 % of the glass's width and 86 % of its height; the 1280 x 800 design sits centred in it */
.iw-screen{position:absolute;left:5%;top:7%;width:90%;height:86%}
/* the full size view (phones): the screen alone, as large as the window allows */
.hsx-inspinia-wide.full .iw-device,.hsx-inspinia-wide.full[data-variant="8"] .iw-device{aspect-ratio:1280/800;width:min(100%,calc((100vh - 24px) * 1.6));width:min(100%,calc((100dvh - 24px) * 1.6));box-shadow:none}
.hsx-inspinia-wide.full .iw-bar{display:none}
.hsx-inspinia-wide.full .iw-glass{border-radius:4px}
.hsx-inspinia-wide.full .iw-screen{left:0;top:0;width:100%;height:100%}

/* ---- the screen ---- */
.iw-ui{width:1280px;height:800px;background:#1B2027;color:#fff;font-size:20px;line-height:1.2;font-weight:400;letter-spacing:0;text-align:left;-webkit-text-size-adjust:none;text-size-adjust:none}
.iw-ui .iw-i{display:block;width:24px;height:24px;flex:none;max-width:none}
.iw-ui .iw-art{position:absolute;display:block;max-width:none}
.iw-ui .iw-defs{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden}
.iw-ui button:focus-visible,.iw-ui [tabindex]:focus-visible{outline:4px solid #FF8A1F;outline-offset:2px}
.iw-ui .iw-page:focus,.iw-ui .iw-page:focus-visible{outline:none}
.iw-ui p,.iw-ui ul,.iw-ui dl{max-width:none}
.iw-ui .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.iw-ui .iw-bg{position:absolute;left:0;top:0;width:1280px;height:800px;z-index:0;pointer-events:none}
.iw-ui .iw-scene{display:block;width:1280px;height:800px;max-width:none}
.iw-ui .iw-page{position:absolute;left:0;top:0;width:1280px;height:800px;z-index:2}

/* the menu on the left: the villa's name, then eight cells that scroll, and the small arrow at the bottom */
.iw-ui .iw-side{position:absolute;left:0;top:0;width:150px;height:800px;z-index:4}
.iw-ui .iw-brand{position:absolute;left:0;top:0;width:150px;height:100px;display:flex;align-items:center;justify-content:center;background:rgba(108,114,120,.55);font-size:12.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.92);padding-left:.26em}
.iw-ui .iw-navwrap{position:absolute;left:0;top:106px;width:150px;height:686px;overflow:hidden}
.iw-ui .iw-nav{height:686px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.iw-ui .iw-nav::-webkit-scrollbar{display:none}
.iw-ui .iw-navb{position:relative;display:flex;align-items:center;justify-content:center;width:150px;height:100px;background:rgba(92,97,102,.55);border-bottom:1px solid rgba(255,255,255,.17);color:#fff;transition:background .2s}
.iw-ui .iw-navb .iw-i{width:58px;height:58px;stroke-width:1.25}
.iw-ui .iw-navb.on{background:rgba(128,134,140,.62)}
.iw-ui .iw-navb.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#26AAE1}
.iw-ui .iw-navb:focus-visible{outline-offset:-5px}
.iw-ui .iw-more{position:absolute;left:0;top:792px;width:150px;height:8px;background:#C6C7C6}
.iw-ui .iw-more::before{content:"";position:absolute;left:0;right:0;bottom:0;height:26px}
.iw-ui .iw-more i{position:absolute;left:69px;top:0;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:5px solid #4A4E52;transition:transform .2s}
.iw-ui.iw-navend .iw-more i{transform:translateY(1px) rotate(180deg)}

/* the header: the page's title in the blue box, then the clock, the weather and the notifications */
.iw-ui .iw-title{position:absolute;left:157px;top:0;width:360px;height:120px;z-index:4;background:#0096D6;transition:background .3s}
.iw-ui .iw-title[data-armed="true"]{background:#3DB383}
.iw-ui .iw-t1{position:absolute;left:37px;top:19px;font-size:31px;line-height:38px;white-space:nowrap}
.iw-ui .iw-t2{position:absolute;left:37px;top:62px;max-width:300px;font-size:22px;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iw-ui .iw-back{position:absolute;left:0;top:0;width:360px;height:120px}
.iw-ui .iw-strip{position:absolute;left:523px;top:0;width:757px;height:107px;z-index:4;background:rgba(108,114,120,.42)}
.iw-ui .iw-time,.iw-ui .iw-otemp{position:absolute;top:11px;font-size:52px;line-height:58px;font-weight:300;letter-spacing:.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.iw-ui .iw-time{left:18px}
.iw-ui .iw-otemp{left:429px}
.iw-ui .iw-date,.iw-ui .iw-ocond{position:absolute;top:70px;font-size:20px;line-height:26px;font-weight:300;white-space:nowrap}
.iw-ui .iw-date{left:20px}
.iw-ui .iw-ocond{left:429px}
.iw-ui .iw-hsun{left:262px;top:-3px;width:114px;height:114px}
.iw-ui .iw-vl{position:absolute;left:626px;top:14px;width:1px;height:80px;background:rgba(255,255,255,.3)}
.iw-ui .iw-cloud{position:absolute;left:640px;top:0;width:117px;height:107px;display:flex;align-items:center;justify-content:center;color:#fff}
.iw-ui .iw-cloudi{display:block;width:68px;height:76px;max-width:none}
.iw-ui .iw-cnt{position:absolute;left:25px;top:20px;width:68px;text-align:center;font-size:16px;line-height:20px;font-weight:700;font-variant-numeric:tabular-nums}
.iw-ui .iw-cloud:focus-visible{outline-offset:-6px}

/* tiles: a grid of 260 x 194 cells, 10 px apart */
.iw-ui .iw-grid{position:absolute;left:181px;width:1070px;display:grid;grid-template-columns:repeat(4,260px);grid-auto-rows:194px;gap:10px}
.iw-ui .iw-grid.t181{top:181px}
.iw-ui .iw-grid.t194{top:194px}
.iw-ui .iw-tile,.iw-ui .iw-card{position:relative;display:block;border-radius:5px;background:rgba(112,116,120,.28);color:#fff;text-align:left;transition:background .3s}
.iw-ui .w2{grid-column:span 2}
.iw-ui .iw-tile .iw-art{left:15px;top:15px;width:64px;height:64px}
.iw-ui .iw-name{position:absolute;left:16px;top:112px;font-size:26px;line-height:32px;white-space:nowrap}
.iw-ui button.iw-tile:active{background:rgba(140,145,150,.38)}
.iw-ui .iw-pdots{position:absolute;left:1243px;top:139px}
.iw-ui .iw-pdots i{display:block;width:12px;height:12px;border-radius:50%;background:#fff}
.iw-ui .iw-ctitle{position:absolute;left:15px;top:6px;font-size:25px;line-height:34px;white-space:nowrap}
.iw-ui .iw-ctitle::before{content:"";position:absolute;left:-15px;top:5px;width:3px;height:25px;background:#26AAE1}

/* the scenarios: a picture, the name and a play sign */
.iw-ui .iw-playi{position:absolute;right:15px;top:18px;width:30px;height:30px;stroke-width:1.3}
.iw-ui .iw-sc[aria-pressed="true"]{background:rgba(120,126,132,.42);box-shadow:inset 0 -3px 0 #26AAE1}
.iw-ui .iw-sc[aria-pressed="true"] .iw-playi path{fill:#fff}
.iw-ui .iw-new .iw-newi{position:absolute;left:20px;top:20px;width:56px;height:56px;padding:12px;border:2px solid #1BAB6F;border-radius:50%;color:#1BAB6F;stroke-width:1.6}

/* the dashboard: the weather of two cities, a clock, the majlis sensor, four scenarios */
.iw-ui .iw-wx .iw-day{position:absolute;top:0;bottom:0;width:176px}
.iw-ui .iw-wx .iw-day:nth-of-type(1){left:0}
.iw-ui .iw-wx .iw-day:nth-of-type(2){left:177px}
.iw-ui .iw-wx .iw-day:nth-of-type(3){left:354px}
.iw-ui .iw-day + .iw-day::before{content:"";position:absolute;left:0;top:142px;width:1px;height:44px;background:rgba(255,255,255,.22)}
.iw-ui .iw-wxi{position:absolute;left:41px;top:40px;width:94px;height:94px}
.iw-ui .iw-wxi .iw-art{left:0;top:0;width:94px;height:94px}
.iw-ui .iw-dn,.iw-ui .iw-dc{position:absolute;left:13px;font-size:17px;line-height:20px;font-weight:300;white-space:nowrap}
.iw-ui .iw-dn{top:142px}
.iw-ui .iw-dc{top:162px}
.iw-ui .iw-dt{position:absolute;left:88px;top:149px;font-size:24px;line-height:28px;font-weight:300}
.iw-ui .iw-clk .iw-big{position:absolute;left:0;right:0;top:50px;text-align:center;font-size:100px;line-height:108px;font-weight:200;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.iw-ui .iw-cbar{position:absolute;left:0;right:0;top:0;height:13px;border-radius:5px 5px 0 0;background:linear-gradient(90deg,#01BAFE 0,#01C1AB 25%,#07C87B 40%,#52D562 52%,#C5DF53 68%,#FFBE3C 82%,#FF6028 100%)}
.iw-ui .iw-notch{position:absolute;top:13px;width:0;height:0;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:7px solid #10C978}
.iw-ui .iw-sens .iw-art{left:22px;top:31px;width:66px;height:66px}
.iw-ui .iw-sv{position:absolute;right:17px;top:31px;font-size:39px;line-height:46px;font-weight:300;white-space:nowrap}
.iw-ui .iw-sens .iw-name{left:26px;top:113px}

/* Smart Home: the rooms */
.iw-ui .iw-chev{position:absolute;right:16px;top:15px;width:65px;height:49px;border-radius:4px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.iw-ui .iw-chev .iw-i{width:24px;height:24px;stroke-width:1.1}

/* a room: the filters, then the device tiles */
.iw-ui .iw-filters{position:absolute;right:31px;top:128px;display:flex}
.iw-ui .iw-fb{display:flex;align-items:center;justify-content:center;width:44px;height:45px;margin-left:10px;border-radius:5px;background:rgba(112,116,120,.3);border:2px solid transparent}
.iw-ui .iw-fb .iw-i{width:30px;height:30px;stroke-width:1.25}
.iw-ui .iw-fb[aria-pressed="true"]{background:rgba(150,156,162,.42);border-color:rgba(255,255,255,.7)}
.iw-ui .iw-empty{position:absolute;left:181px;top:226px;margin:0;font-size:24px;font-weight:300;color:rgba(255,255,255,.82)}
.iw-ui .iw-lamp[data-on="true"],.iw-ui .iw-dim1[data-on="true"]{background:rgba(160,124,44,.9)}
.iw-ui .iw-ac[data-on="true"]{background:rgba(59,111,182,.86)}
.iw-ui .iw-led[data-on="true"]{background:rgba(140,62,124,.88)}
.iw-ui .iw-big2{position:absolute;font-size:40px;line-height:46px;font-weight:300;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Inspinia's switch: an outline pill with a dot */
.iw-ui .iw-sw{position:absolute;right:4px;top:6px;width:66px;height:46px}
.iw-ui .iw-sw::before,.iw-ui .iw-pill::before{content:"";position:absolute;left:8px;top:10px;width:50px;height:26px;border:2px solid #fff;border-radius:13px}
.iw-ui .iw-sw::after,.iw-ui .iw-pill::after{content:"";position:absolute;left:15px;top:17px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}
.iw-ui .iw-sw[aria-checked="true"]::after,.iw-ui [aria-checked="true"] .iw-pill::after{transform:translateX(24px)}
.iw-ui .iw-pill{position:absolute;right:4px;top:6px;width:66px;height:46px}
.iw-ui .iw-sw:focus-visible{outline-offset:-2px}
/* a thin slider with a round knob */
.iw-ui .iw-sl{position:absolute;height:40px;touch-action:none;cursor:pointer}
.iw-ui .iw-sl::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;border-radius:1px;background:#fff}
.iw-ui .iw-knob{position:absolute;left:calc(var(--v,0) * 1%);top:8px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.iw-ui .iw-sl:focus-visible{outline-offset:4px}
.iw-ui .iw-sq{position:absolute;display:flex;align-items:center;justify-content:center;width:65px;height:65px;border-radius:4px;background:rgba(255,255,255,.13)}
.iw-ui .iw-sq .iw-i{width:38px;height:38px;stroke-width:1.3}
.iw-ui .iw-sq:active,.iw-ui .iw-tall:active{background:rgba(255,255,255,.26)}
.iw-ui .iw-sq[aria-pressed="true"]{background:rgba(255,255,255,.3);color:#9BE1FF}
.iw-ui .iw-mk{display:none}
.iw-ui [data-mode="cool"] [data-m="cool"],.iw-ui [data-mode="heat"] [data-m="heat"],.iw-ui [data-mode="fan"] [data-m="fan"],.iw-ui [data-mode="dry"] [data-m="dry"],.iw-ui [data-mode="auto"] [data-m="auto"],.iw-ui [data-mode="play"] [data-m="play"],.iw-ui [data-mode="pause"] [data-m="pause"]{display:block}
/* the light that only switches: the whole tile is the switch */
.iw-ui .iw-lamp .iw-pill{right:4px;top:6px}
/* the dimmer */
.iw-ui .iw-dim1 .iw-big2{left:90px;top:22px}
.iw-ui .iw-sl1{left:20px;width:224px;top:70px}
/* the air conditioning */
.iw-ui .iw-ac .iw-art{left:24px;top:22px;width:66px;height:62px}
.iw-ui .iw-ac .iw-rt{left:104px;top:19px;font-size:38px;letter-spacing:-.3px}
.iw-ui .iw-ac .iw-cur{position:absolute;left:105px;top:66px;font-size:17px;line-height:22px;font-weight:300;color:rgba(255,255,255,.92);white-space:nowrap}
.iw-ui .iw-ac .iw-sw{left:212px;right:auto;top:10px}
.iw-ui .iw-minus{left:285px;top:15px}
.iw-ui .iw-plus{left:460px;top:15px}
.iw-ui .iw-set{position:absolute;left:350px;width:110px;top:25px;text-align:center;font-size:36px;letter-spacing:-.3px;line-height:46px;font-weight:300;white-space:nowrap;font-variant-numeric:tabular-nums}
.iw-ui .iw-m1{left:290px;top:111px}
.iw-ui .iw-m2{left:372px;top:111px}
.iw-ui .iw-m3{left:454px;top:111px}
.iw-ui .iw-m2 .iw-i{width:32px;height:32px;margin-bottom:12px}
.iw-ui .iw-fs{position:absolute;left:0;right:0;bottom:5px;font-size:13px;line-height:16px;text-align:center;color:rgba(255,255,255,.9)}
.iw-ui .iw-ac .iw-name{left:27px;top:125px}
/* the LED strip */
.iw-ui .iw-led .iw-art{left:15px;top:15px;width:64px;height:62px}
.iw-ui .iw-led .iw-sw{left:205px;right:auto;top:8px}
.iw-ui .iw-sl2{left:9px;width:231px;top:71px}
.iw-ui .iw-led .iw-name{left:17px;top:113px}
.iw-ui .iw-ledc{position:absolute;left:295px;top:15px;width:224px;height:72px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .3s}
.iw-ui .iw-led[data-on="false"] .iw-ledc{opacity:.55}
.iw-ui .iw-ledc .iw-i{width:52px;height:52px;stroke-width:1.1;filter:drop-shadow(0 0 1px rgba(0,0,0,.45))}
.iw-ui .iw-sws{position:absolute;left:293px;top:99px;display:grid;grid-template-columns:repeat(4,51px);grid-auto-rows:36px;gap:9px 8px}
.iw-ui .iw-swt{border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.28)}
.iw-ui .iw-swt[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 2px 4px rgba(0,0,0,.28)}
/* the music */
.iw-ui .iw-media .iw-art{left:18px;top:18px;width:60px;height:60px}
.iw-ui .iw-media .iw-sw{left:200px;right:auto;top:2px}
.iw-ui .iw-media .iw-sl2{left:20px;width:223px;top:72px}
.iw-ui .iw-media .iw-name{left:20px;top:114px}
.iw-ui .iw-track{position:absolute;left:21px;top:152px;max-width:250px;font-size:16px;line-height:20px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iw-ui .iw-b1{left:292px;top:12px}
.iw-ui .iw-b2{left:376px;top:12px}
.iw-ui .iw-b3{left:460px;top:12px}
.iw-ui .iw-b4{left:292px;top:118px}
.iw-ui .iw-b5{left:376px;top:118px}
.iw-ui .iw-b6{left:460px;top:118px}
.iw-ui .iw-b4 .iw-i,.iw-ui .iw-b5 .iw-i,.iw-ui .iw-b6 .iw-i{width:32px;height:32px;stroke-width:1.5}
/* the curtains */
.iw-ui .iw-cur .iw-art{left:16px;top:18px;width:64px;height:60px}
.iw-ui .iw-cur .iw-big2{left:96px;top:14px}
.iw-ui .iw-cur2{position:absolute;left:96px;top:61px;font-size:18px;line-height:22px;font-weight:300;white-space:nowrap}
.iw-ui .iw-cur .iw-name{left:16px;top:112px}
.iw-ui .iw-tall{position:absolute;top:12px;width:64px;height:170px;border-radius:4px;background:rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center}
.iw-ui .iw-c1{left:289px}
.iw-ui .iw-c2{left:372px}
.iw-ui .iw-c3{left:455px}
.iw-ui .iw-tall .iw-i{width:40px;height:40px;margin-top:50px;stroke-width:1.2}
.iw-ui .iw-tall span{position:absolute;left:0;right:0;top:128px;text-align:center;font-size:15px;line-height:18px;letter-spacing:.4px}
.iw-ui .iw-tall i{position:absolute;left:10px;right:10px;bottom:12px;height:2px;background:rgba(0,0,0,.4)}
.iw-ui .iw-tall[data-active="true"] i{background:#26AAE1}
/* the room's sensor: two halves, each with its colour bar */
.iw-ui .iw-pair{background:rgba(112,116,120,.28)}
.iw-ui .iw-half{position:absolute;top:0;bottom:0;width:265px;background:none;border-radius:0}
.iw-ui .iw-half:first-child{left:0}
.iw-ui .iw-half + .iw-half{left:265px}
.iw-ui .iw-half .iw-cbar{right:1px;border-radius:5px 0 0 0}
.iw-ui .iw-half + .iw-half .iw-cbar{left:1px;right:0;border-radius:0 5px 0 0}
.iw-ui .iw-half + .iw-half::before{content:"";position:absolute;left:0;top:40px;bottom:30px;width:1px;background:rgba(255,255,255,.14)}

/* Security: the modes, the log, the valve, the sensors and the code keypad */
.iw-ui .iw-sec2{width:530px;grid-template-columns:repeat(2,260px)}
.iw-ui .iw-st .iw-sti{position:absolute;left:98px;top:30px;width:64px;height:64px;stroke-width:1.2}
.iw-ui .iw-st .iw-sto{display:none}
.iw-ui .iw-st[data-armed="true"] .iw-stl{display:none}
.iw-ui .iw-st[data-armed="true"] .iw-sto{display:block}
.iw-ui .iw-stn{position:absolute;left:0;right:0;top:136px;text-align:center;font-size:25px;line-height:32px;font-weight:300;white-space:nowrap}
.iw-ui .iw-st[data-sel="true"]{background:rgba(61,179,131,.86)}
.iw-ui .iw-st[aria-disabled="true"]{opacity:.45}
.iw-ui .iw-stat{position:absolute;left:220px;top:618px;width:440px;display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none}
.iw-ui .iw-stat li{width:64px;height:64px;margin:0 23px 22px;color:rgba(255,255,255,.42)}
.iw-ui .iw-stat .iw-i{width:64px;height:64px;stroke-width:1}
.iw-ui .iw-pad{position:absolute;left:800px;top:180px;width:400px;height:600px}
.iw-ui .iw-code{position:absolute;left:115px;top:12px;width:171px;height:48px;border-bottom:3px solid #fff;text-align:center;font-size:40px;line-height:58px;letter-spacing:6px;white-space:nowrap;overflow:hidden}
.iw-ui .iw-code[data-empty="true"]{font-size:20px;line-height:62px;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.iw-ui .iw-del{position:absolute;left:290px;top:14px;width:52px;height:46px;display:flex;align-items:center;justify-content:center}
.iw-ui .iw-del svg{display:block;width:31px;height:21px;max-width:none}
.iw-ui .iw-key{position:absolute;width:110px;height:92px;border-radius:46px;font-size:48px;line-height:92px;font-weight:200;text-align:center;font-variant-numeric:tabular-nums}
.iw-ui .iw-key:active{background:rgba(255,255,255,.14)}
.iw-ui .iw-k1{left:5px;top:80px} .iw-ui .iw-k2{left:145px;top:80px} .iw-ui .iw-k3{left:285px;top:80px}
.iw-ui .iw-k4{left:5px;top:185px} .iw-ui .iw-k5{left:145px;top:185px} .iw-ui .iw-k6{left:285px;top:185px}
.iw-ui .iw-k7{left:5px;top:290px} .iw-ui .iw-k8{left:145px;top:290px} .iw-ui .iw-k9{left:285px;top:290px}
.iw-ui .iw-k0{left:145px;top:395px}
.iw-ui .iw-ok{position:absolute;left:40px;top:506px;width:320px;height:70px;border-radius:35px;background:#0096D6;display:flex;align-items:center;justify-content:center}
.iw-ui .iw-ok .iw-i{width:46px;height:46px;stroke-width:1.3}
.iw-ui .iw-ok:active{background:#0A84BC}
/* in a list that scrolls, the focus ring stays inside the row, so the list does not cut it off */
.iw-ui .iw-crow:focus-visible,.iw-ui .iw-trk:focus-visible,.iw-ui .iw-icb:focus-visible,.iw-ui .iw-camb:focus-visible{outline-offset:-5px}

/* Intercom: the list on the left, what it holds on the right */
.iw-ui .iw-iclist{position:absolute;left:171px;top:193px;width:540px}
.iw-ui .iw-icb{position:relative;display:flex;align-items:center;width:540px;height:92px;margin-bottom:10px;padding-left:20px;border-radius:5px;background:rgba(112,116,120,.28);border:2px solid transparent}
.iw-ui .iw-icb .iw-i{width:54px;height:54px;stroke-width:1.15}
.iw-ui .iw-icb span{margin-left:27px;font-size:26px;line-height:32px;font-weight:300;white-space:nowrap}
.iw-ui .iw-icb[aria-pressed="true"]{border-color:#26AAE1}
.iw-ui .iw-icp,.iw-ui .iw-camlist{position:absolute;border-radius:5px 0 0 5px;background:rgba(112,116,120,.28)}
.iw-ui .iw-icp{left:721px;top:193px;width:559px;height:602px}
.iw-ui .iw-ptitle{position:absolute;left:17px;top:10px;font-size:32px;line-height:44px;font-weight:300;white-space:nowrap}
.iw-ui .iw-ptitle::before{content:"";position:absolute;left:-17px;top:7px;width:3px;height:32px;background:#26AAE1}
.iw-ui .iw-icrows{position:absolute;left:16px;right:16px;top:72px;bottom:12px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.iw-ui .iw-icrows::-webkit-scrollbar{display:none}
.iw-ui .iw-crow{position:relative;display:block;width:100%;height:84px;margin-bottom:10px;border-radius:5px;background:rgba(255,255,255,.1);text-align:left}
.iw-ui .iw-crow > .iw-i:first-child{position:absolute;left:20px;top:19px;width:46px;height:46px;stroke-width:1.2}
.iw-ui .iw-cn{position:absolute;left:84px;top:13px;font-size:24px;line-height:30px;white-space:nowrap}
.iw-ui .iw-cs{position:absolute;left:84px;top:47px;font-size:16px;line-height:20px;color:rgba(255,255,255,.72);white-space:nowrap}
.iw-ui .iw-cph{position:absolute;right:18px;top:20px;width:44px;height:44px;padding:9px;border-radius:50%;background:#3DB383;color:#fff;stroke-width:1.6}
.iw-ui .iw-emptyc{position:absolute;left:0;right:0;top:182px;display:flex;flex-direction:column;align-items:center}
.iw-ui .iw-emptyc .iw-i{width:58px;height:58px;stroke-width:1.15}
.iw-ui .iw-emptyc span{margin-top:12px;font-size:19px;font-weight:300}

/* Camera: the picture on the left, the cameras on the right */
.iw-ui .iw-video{position:absolute;left:181px;top:154px;width:789px;height:636px;background:#000}
.iw-ui .iw-vpic{position:absolute;left:0;top:0;width:789px;height:455px;overflow:hidden;background:#0E141C}
.iw-ui .iw-osd{position:absolute;right:16px;bottom:12px;font-size:18px;line-height:22px;color:#F4F4F4;text-shadow:0 1px 2px #000;white-space:pre;font-variant-numeric:tabular-nums}
.iw-ui .iw-vbar{position:absolute;left:0;right:0;top:455px;bottom:0;display:flex;align-items:center;padding:0 30px}
.iw-ui .iw-live{width:12px;height:12px;margin-right:14px;border-radius:50%;background:#E8401C;flex:none}
.iw-ui .iw-vname{font-size:24px;font-weight:300;white-space:nowrap}
.iw-ui .iw-pill2{display:flex;align-items:center;margin-left:auto;height:70px;padding:0 34px 0 28px;border-radius:35px;background:#0096D6;font-size:22px;white-space:nowrap}
.iw-ui .iw-pill2 .iw-i{width:34px;height:34px;margin-right:12px;stroke-width:1.3}
.iw-ui .iw-pill2:active{background:#0A84BC}
.iw-ui .iw-camlist{left:980px;top:154px;width:300px;height:636px}
.iw-ui .iw-camlist .iw-ptitle{left:12px;top:14px;font-size:24px;line-height:36px}
.iw-ui .iw-camlist .iw-ptitle::before{left:-12px;top:5px;height:26px}
.iw-ui .iw-camb{display:block;width:280px;height:92px;margin:0 0 10px 10px;padding-left:33px;border-radius:5px;background:rgba(255,255,255,.1);border:2px solid transparent;font-size:25px;font-weight:300;text-align:left;white-space:nowrap}
.iw-ui .iw-camb:first-of-type{margin-top:75px}
.iw-ui .iw-camb[aria-pressed="true"]{border-color:#26AAE1}

/* Settings */
.iw-ui .iw-tabs{position:absolute;left:181px;top:146px;display:flex}
.iw-ui .iw-tab{display:flex;align-items:center;height:58px;margin-right:12px;padding:0 24px 0 18px;border-radius:5px;background:rgba(112,116,120,.22);border:2px solid transparent;font-size:22px;font-weight:300;white-space:nowrap}
.iw-ui .iw-tab .iw-i{width:30px;height:30px;margin-right:12px;stroke-width:1.3}
.iw-ui .iw-tab[aria-pressed="true"]{border-color:rgba(255,255,255,.72);background:rgba(120,126,132,.36)}
.iw-ui .iw-setp{position:absolute;left:181px;top:224px;width:1070px;height:548px;padding:34px 44px;border-radius:5px;background:rgba(112,116,120,.28)}
.iw-ui .iw-dl{display:grid;grid-template-columns:230px 1fr;gap:16px 18px;margin:0;font-size:24px;line-height:30px;font-weight:300}
.iw-ui .iw-dl dt{text-align:right;color:rgba(255,255,255,.82)}
.iw-ui .iw-dl dd{margin:0}
.iw-ui .iw-note{margin:30px 0 0;font-size:18px;line-height:24px;color:rgba(255,255,255,.62)}
.iw-ui .iw-srow{position:relative;display:flex;align-items:center;width:100%;height:96px;border-bottom:1px solid rgba(255,255,255,.14);font-size:24px;font-weight:300;text-align:left}
.iw-ui .iw-srow .iw-sw{position:relative;right:auto;top:auto;margin-left:auto}
.iw-ui .iw-sl3{position:relative;margin-left:auto;width:520px}
.iw-ui .iw-srow b{width:96px;text-align:right;font-weight:300;font-variant-numeric:tabular-nums}
.iw-ui .iw-about .iw-i{margin-left:auto;width:30px;height:30px;stroke-width:1.3}

/* sheets: a panel over the screen, with a Close button; Escape closes it */
.iw-ui .iw-scrim{position:absolute;left:0;top:0;width:1280px;height:800px;z-index:8;background:rgba(0,0,0,.58);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.iw-ui .iw-scrim.on{opacity:1;visibility:visible;transition:opacity .2s}
.iw-ui .iw-sheet{position:absolute;left:715px;top:404px;width:660px;max-height:720px;z-index:9;padding:30px 36px 34px;border-radius:6px;background:rgba(42,46,50,.97);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -20px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translate(-50%,-47%);transition:opacity .2s,transform .2s,visibility 0s .2s}
.iw-ui .iw-sheet.on{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .2s,transform .2s}
.iw-ui .iw-sheet h3{position:relative;margin:0 64px 14px 0;padding-left:16px;font-family:inherit;font-size:30px;line-height:38px;font-weight:300;color:#fff}
.iw-ui .iw-sheet h3::before{content:"";position:absolute;left:0;top:6px;width:3px;height:27px;background:#26AAE1}
.iw-ui .iw-x{position:absolute;right:16px;top:16px;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.iw-ui .iw-x .iw-i{width:28px;height:28px}
.iw-ui .iw-sp{margin:0 0 8px;font-size:22px;line-height:31px;font-weight:300;color:rgba(255,255,255,.9)}
.iw-ui .iw-sp b{font-weight:500}
.iw-ui .iw-timer{margin-left:8px;font-weight:400;font-variant-numeric:tabular-nums;color:#9BE1FF}
.iw-ui .iw-btns{display:flex;margin-top:24px}
.iw-ui .iw-btn{flex:1 1 0;display:flex;align-items:center;justify-content:center;height:70px;margin-left:14px;border-radius:35px;background:rgba(255,255,255,.13);font-size:22px;white-space:nowrap}
.iw-ui .iw-btn:first-child{margin-left:0}
.iw-ui .iw-btn .iw-i{width:34px;height:34px;margin-right:10px}
.iw-ui .iw-btn[aria-pressed="true"],.iw-ui .iw-go2{background:#0096D6}
.iw-ui .iw-red{background:#E5483B}
.iw-ui .iw-btn:active{filter:brightness(1.15)}
.iw-ui .iw-log,.iw-ui .iw-plist{max-height:430px;margin:4px 0 0;padding:0;list-style:none;overflow-y:auto}
.iw-ui .iw-log li{display:flex;margin:0;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:21px;line-height:27px;font-weight:300}
.iw-ui .iw-log b{flex:none;width:76px;font-weight:400;color:#9BE1FF;font-variant-numeric:tabular-nums}
.iw-ui .iw-plist li{margin:0 0 10px}
.iw-ui .iw-trk{display:block;width:100%;height:76px;padding:0 22px;border-radius:5px;background:rgba(255,255,255,.08);border:2px solid transparent;text-align:left}
.iw-ui .iw-trk b{display:block;font-size:22px;line-height:28px;font-weight:400}
.iw-ui .iw-trk span{display:block;font-size:16px;line-height:20px;color:rgba(255,255,255,.7)}
.iw-ui .iw-trk[aria-pressed="true"]{border-color:#26AAE1}
.iw-ui .iw-cview{position:relative;margin-top:14px;height:337px;border-radius:5px;overflow:hidden;background:#0E141C}
.iw-ui .iw-avatar{display:flex;align-items:center;justify-content:center;width:150px;height:150px;margin:22px auto 6px;border-radius:50%;background:rgba(255,255,255,.08)}
.iw-ui .iw-avatar .iw-i{width:74px;height:74px;stroke-width:1.1}

/* a toast for every change, at the bottom; and the screen's own brightness */
.iw-ui .iw-toast{position:absolute;left:715px;bottom:16px;z-index:12;width:max-content;max-width:880px;padding:15px 26px;border-radius:6px;background:rgba(24,27,30,.95);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:21px;line-height:29px;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,16px);transition:opacity .25s,transform .25s;box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
.iw-ui .iw-toast.on{opacity:1;transform:translate(-50%,0)}
.iw-ui .iw-dim{position:absolute;left:0;top:0;width:1280px;height:800px;z-index:20;background:#000;opacity:0;pointer-events:none}