/* HOMESTAT — the Akubela HyPanel Elite 10 and Elite 7 screen, rebuilt in code for the product pages (14 Oct 2026).
   The device follows our 3D model (product3d.js akbElite): one sheet of glass, the screen on the left, a speaker grille
   down the right side. The screen is drawn at 1280 x 800 design pixels (Elite 10) or 1024 x 600 (Elite 7: the same
   layout on a 1280 x 750 grid at 0.8) and scaled by screen-core.js. Spacing, type and colours measured off Akubela's
   picture of the Elite 10's home screen. */

/* ---- the box on the page: the full width, but never taller than the window ---- */
.hsx-akubela-elite{margin:8px auto 44px;aspect-ratio:2.55/1.56;max-width:min(1040px,calc((100vh - 120px) * 1.6346));max-width:min(1040px,calc((100dvh - 120px) * 1.6346))}
.hsx-akubela-elite[data-variant="7"]{aspect-ratio:2.13/1.165;max-width:min(1040px,calc((100vh - 120px) * 1.8283));max-width:min(1040px,calc((100dvh - 120px) * 1.8283))}
.hsx-akubela-elite.full,.hsx-akubela-elite[data-variant].full{aspect-ratio:auto}

/* ---- the device ---- */
.hsx-akubela-elite .ael-device{position:relative;width:100%;aspect-ratio:2.55/1.56;border-radius:.9%/1.47%;background:linear-gradient(135deg,var(--fin-hi,#2C2C2C) 0%,var(--fin,#161616) 46%,var(--fin-lo,#080808) 100%);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 34px 70px -30px rgba(0,0,0,.85)}
.hsx-akubela-elite .ael-device[data-v="7"]{aspect-ratio:2.13/1.165;border-radius:1.05%/1.92%}
.hsx-akubela-elite.full .ael-device{flex:none;width:min(100%,calc((100vh - 24px) * 1.6346));width:min(100%,calc((100dvh - 24px) * 1.6346))}
.hsx-akubela-elite.full .ael-device[data-v="7"]{width:min(100%,calc((100vh - 24px) * 1.8283));width:min(100%,calc((100dvh - 24px) * 1.8283))}
/* the glass face (from the left edge to the grille), the grille strip and the screen, in the 3D model's proportions */
.hsx-akubela-elite .ael-face{position:absolute;left:.3137%;top:.5128%;width:90.157%;height:98.974%;border-radius:.62%/1.02%;background:linear-gradient(118deg,#1D1D1F 0%,#0F0F10 30%,#070708 60%,#0B0B0C 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.hsx-akubela-elite .ael-strip{position:absolute;left:90.784%;top:.5128%;width:8.902%;height:98.974%;border-radius:0 .62% .62% 0/0 1.02% 1.02% 0;overflow:hidden}
.hsx-akubela-elite .ael-glass{position:absolute;left:3.0588%;top:6.5385%;width:85.098%;height:86.923%;background:#000;overflow:hidden}
.hsx-akubela-elite .ael-device[data-v="7"] .ael-face{left:.3756%;top:.6867%;width:91.455%;height:98.627%}
.hsx-akubela-elite .ael-device[data-v="7"] .ael-strip{left:92.207%;top:.6867%;width:7.418%;height:98.627%}
.hsx-akubela-elite .ael-device[data-v="7"] .ael-glass{left:7.512%;top:11.373%;width:72.394%;height:77.253%}
.hsx-akubela-elite .ael-grille{display:block;width:100%;height:100%}
.hsx-akubela-elite .ael-gr{fill:#19191B}
.hsx-akubela-elite .ael-gh{fill:#030303}
.hsx-akubela-elite .ael-sn{fill:#040405;stroke:#2B2B2E;stroke-width:2}
/* the Elite 7 in white: a white glass front, the grille light grey; the screen stays black */
.hsx-akubela-elite[data-finish="akb-white"] .ael-device{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 34px 70px -30px rgba(0,0,0,.6)}
.hsx-akubela-elite[data-finish="akb-white"] .ael-face{background:linear-gradient(118deg,#FFFFFF 0%,#F4F4F2 36%,#EAEAE7 70%,#E2E2DF 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.hsx-akubela-elite[data-finish="akb-white"] .ael-gr{fill:#DADAD7}
.hsx-akubela-elite[data-finish="akb-white"] .ael-gh{fill:#9C9C99}
.hsx-akubela-elite[data-finish="akb-white"] .ael-glass{box-shadow:0 0 0 1px rgba(0,0,0,.25)}

/* ---- the screen ---- */
.hsx-akubela-elite .ael-ui{width:1280px;height:800px;background:#000;color:#F2F2F2;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.25;letter-spacing:0;text-align:left;-webkit-font-smoothing:antialiased}
.hsx-akubela-elite.ael-v7 .ael-ui{width:1024px;height:600px}
.ael-ui .ael-in{position:absolute;left:0;top:0;width:1280px;height:800px}
.ael-v7 .ael-ui .ael-in{height:750px;transform:scale(.8);transform-origin:0 0}
.ael-ui p,.ael-ui ul,.ael-ui li,.ael-ui h3{margin:0;padding:0;max-width:none;list-style:none}
.ael-ui h3{font-family:inherit;font-weight:600;line-height:1.2;color:#fff}
.ael-ui .ael-i{display:block;flex:none;width:24px;height:24px}
.ael-ui .ael-cut{stroke:#000}
.ael-ui button{-webkit-user-select:none;user-select:none}
.ael-ui button:focus-visible,.ael-ui [tabindex]:focus-visible{outline:3px solid #FF8A1F;outline-offset:3px}
.ael-ui button:active{transform:scale(.97)}
.ael-ui [aria-disabled="true"]{cursor:default}
.ael-ui .ael-card:active,.ael-ui .ael-tile:active,.ael-ui .ael-dots button:active{transform:none}
.ael-ui button.ael-card:active,.ael-ui button.ael-tile:active{transform:scale(.985)}

/* the rail of pages: Home, then four pages at a time; the chevrons show the others */
.ael-ui .ael-rail{position:absolute;left:43px;top:56px;width:100px;z-index:3}
.ael-ui .ael-rb{display:flex;flex-direction:column;align-items:center;width:100px;color:#EEEEEE;border-radius:16px}
.ael-ui .ael-rb .ic{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;transition:background .25s,box-shadow .25s,color .25s}
.ael-ui .ael-rb .ic .ael-i{width:38px;height:38px}
.ael-ui .ael-rb .lb{font-size:17px;font-weight:500;line-height:20px;margin-top:6px;white-space:nowrap}
.ael-ui .ael-rb[aria-current="page"] .ic{background:linear-gradient(180deg,#16C0EC 0%,#0C92DA 50%,#0A62DB 100%);color:#F3EAE3;box-shadow:0 6px 16px -6px rgba(16,140,230,.75)}
.ael-ui .ael-rb[aria-current="page"] .ic .ael-i{width:31px;height:31px}
.ael-ui .ael-chev{display:grid;place-items:center;width:100px;height:44px;margin-top:11px;border-radius:14px;color:#F2F2F2}
.ael-ui .ael-chev .ael-i{width:26px;height:26px}
.ael-ui .ael-chev[aria-disabled="true"]{color:#5C5D61}
.ael-ui .ael-chev:last-child{margin-top:12px}
.ael-ui .ael-win{height:490px;margin-top:10px;overflow:hidden}
.ael-ui .ael-win ul{transition:transform .35s ease}
.ael-ui .ael-win li{display:flex;justify-content:center;height:122.5px;padding-top:13px;visibility:visible;transition:visibility 0s}
.ael-ui .ael-win li[data-off]{visibility:hidden;transition:visibility 0s linear .35s}

/* the top bar: the room selector, Notification and Contact */
.ael-ui .ael-pill{position:absolute;left:178px;top:54px;z-index:3;display:flex;align-items:center;width:338px;height:60px;padding:0 20px 0 15px;border-radius:30px;background:#252527;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);color:#F4F4F4;font-size:19px;font-weight:500}
.ael-ui .ael-pill .dr{width:30px;height:30px}
.ael-ui .ael-pill .nm{flex:1;min-width:0;margin-left:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-pill .ch{width:26px;height:26px;margin-left:10px}
.ael-ui .ael-head{position:absolute;left:162px;top:54px;height:60px;z-index:3;display:flex;align-items:center;gap:8px}
.ael-ui .ael-back{display:grid;place-items:center;width:56px;height:60px;border-radius:16px;color:#F2F2F2}
.ael-ui .ael-back .ael-i{width:30px;height:30px}
.ael-ui .ael-ttl{font-size:28px;font-weight:600;white-space:nowrap}
.ael-ui .ael-ttl small{font-size:16px;font-weight:400;color:#A9AAAF;margin-left:16px}
.ael-ui .ael-tb{position:absolute;top:54px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:104px;height:72px;border-radius:16px;color:#EDEDED}
.ael-ui .ael-note{left:1014px}
.ael-ui .ael-con{left:1120px}
.ael-ui .ael-tb .ic{position:relative;display:grid;place-items:center;width:40px;height:34px}
.ael-ui .ael-tb .ael-i{width:36px;height:36px}
.ael-ui .ael-tb .lb{font-size:14.5px;font-weight:500;line-height:18px;white-space:nowrap}
.ael-ui .ael-tb[aria-current="page"]{background:rgba(255,255,255,.1)}
.ael-ui .ael-badge{position:absolute;right:0;top:1px;width:12px;height:12px;border-radius:50%;background:#FF3B30;box-shadow:0 0 0 2px #000}
.ael-ui .ael-badge[hidden]{display:none}

/* ---- the home screen: six columns and three rows of cards ---- */
.ael-ui .ael-grid,.ael-ui .ael-pg{position:absolute;left:178px;top:137px;width:1032px;height:579px;display:grid;gap:17px}
.ael-ui .ael-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.ael-ui .ael-from-r{animation:ael-in-r .32s ease}
.ael-ui .ael-from-l{animation:ael-in-l .32s ease}
@keyframes ael-in-r{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes ael-in-l{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
.ael-ui .ael-card{position:relative;min-width:0;min-height:0;border-radius:14px;background:#222326;overflow:hidden;color:#F2F2F2;text-align:left}
.ael-ui .ael-clock{grid-column:1/span 2;grid-row:1}
.ael-ui .ael-room{grid-column:1/span 2;grid-row:2/span 2}
.ael-ui .ael-music{grid-column:3/span 2;grid-row:1/span 2}
.ael-ui .ael-scenes{grid-column:5/span 2;grid-row:1/span 2}
.ael-ui .ael-c3{grid-column:3;grid-row:3}
.ael-ui .ael-c4{grid-column:4;grid-row:3}
.ael-ui .ael-c5{grid-column:5;grid-row:3}
.ael-ui .ael-c6{grid-column:6;grid-row:3}
.ael-ui .ael-acc{grid-column:1/span 2;grid-row:1/span 3}
.ael-ui .ael-cuc{grid-column:3/span 2;grid-row:1/span 3}
.ael-ui .ael-gc{grid-column:5/span 2;grid-row:1/span 3}

/* the clock */
.ael-ui .ael-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:4px;background:linear-gradient(140deg,#3CAAE1 0%,#2A93D5 34%,#1E7AD8 64%,#1157DC 100%)}
.ael-ui .ael-clock::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(118deg,transparent 0,transparent 55%,rgba(255,255,255,.17) 55.3%,rgba(255,255,255,.04) 63%,transparent 63.3%),linear-gradient(118deg,transparent 0,transparent 66%,rgba(255,255,255,.11) 66.3%,rgba(255,255,255,0) 73%)}
.ael-ui .ael-clock .t{position:relative;font-size:66px;font-weight:700;line-height:1;letter-spacing:.5px;font-variant-numeric:tabular-nums;color:#F7F2EC;text-shadow:0 2px 10px rgba(0,40,120,.25)}
.ael-ui .ael-clock .t .c{position:relative;top:-5px;margin:0 1px;opacity:.55}
.ael-ui .ael-clock .d{position:relative;margin-top:22px;font-size:18px;font-weight:600;color:#F7F2EC;white-space:nowrap}

/* the room card: a drawn room behind, the room's name, and six buttons */
.ael-ui .ael-pic{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.ael-ui .ael-pic .ael-pd,.ael-ui .ael-pic .ael-pg,.ael-ui .ael-pic .ael-pl{transition:opacity .6s ease}
.ael-ui .ael-pic .ael-pc{transform-origin:333px 0;transition:transform .9s ease}
.ael-ui .ael-rh{position:absolute;left:19px;right:16px;top:28px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ael-ui .ael-rh b{display:block;font-size:20px;font-weight:600;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-rh span{display:block;margin-top:12px;font-size:15px;font-weight:600;line-height:20px;white-space:nowrap}
.ael-ui .ael-rh i{font-style:normal;margin:0 10px;opacity:.9}
.ael-ui .ael-devs{position:absolute;left:0;right:0;bottom:0;height:171px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));background:rgba(26,21,18,.42);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.ael-ui .ael-dev{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding-top:6px;color:#F6F2EE;border-radius:12px}
.ael-ui .ael-dev .ael-i{width:38px;height:38px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.ael-ui .ael-dev .dot{display:block;width:7px;height:7px;border-radius:50%;background:#F7C21A;opacity:0;transition:opacity .2s}
.ael-ui .ael-dev[aria-pressed="true"] .dot{opacity:1}
.ael-ui .ael-dev[aria-disabled="true"] .ael-i{opacity:.3}
.ael-ui .ael-dev::before{content:"";position:absolute;left:-1px;top:17%;bottom:17%;width:2px;background:rgba(255,255,255,.2)}
.ael-ui .ael-dev:nth-child(3n+1)::before{display:none}
.ael-ui .ael-dev::after{content:"";position:absolute;left:16%;right:16%;bottom:-1px;height:2px;background:rgba(255,255,255,.2)}
.ael-ui .ael-dev:nth-child(n+4)::after{display:none}

/* music */
.ael-ui .ael-music{background:linear-gradient(180deg,#1E1E1F 0%,#3B4041 11%,#5E6F73 27%,#6C8890 43%,#6B959D 57%,#5F9DA9 72%,#4CA1B0 88%,#3C9FB1 100%)}
.ael-ui .ael-mpill{position:absolute;left:50%;top:11px;width:190px;height:46px;margin-left:-95px;border-radius:23px;background:rgba(118,121,124,.5);border:1px solid rgba(255,255,255,.14);color:#F2F2F2;font-size:18px;font-weight:500;text-align:center}
.ael-ui .ael-mmore{position:absolute;right:8px;top:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:22px;color:#F4F4F4}
.ael-ui .ael-mmore .ael-i{width:26px;height:26px}
.ael-ui .ael-art{position:absolute;left:50%;top:64px;width:134px;height:134px;margin-left:-67px;border-radius:50%;overflow:hidden;background:#333;box-shadow:0 0 0 2px rgba(255,255,255,.14),0 10px 24px -10px rgba(0,0,0,.6)}
.ael-ui .ael-art svg{display:block;width:100%;height:100%}
.ael-ui .ael-art.spin svg{animation:ael-spin 24s linear infinite}
@keyframes ael-spin{to{transform:rotate(360deg)}}
.ael-ui .ael-prog{position:absolute;left:33px;right:33px;top:214px;height:4px;border-radius:2px;background:rgba(232,240,242,.55);overflow:hidden}
.ael-ui .ael-prog i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#35B8CB;transform-origin:0 0;transform:scaleX(.36);animation:ael-prog 210s linear -75s infinite paused}
.ael-ui .ael-prog.run i{animation-play-state:running}
@keyframes ael-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ael-ui .ael-trk{position:absolute;left:24px;right:24px;top:228px;font-size:15px;line-height:20px;color:rgba(255,255,255,.88);font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-mctl{position:absolute;left:0;right:0;top:262px;display:flex;align-items:center;justify-content:center;gap:28px}
.ael-ui .ael-mctl button{display:grid;place-items:center;width:66px;height:66px;border-radius:33px;color:#EEF4F5}
.ael-ui .ael-mctl button .ael-i{width:30px;height:30px}
.ael-ui .ael-mctl .ael-play{background:#E2088F;box-shadow:0 8px 18px -8px rgba(226,8,143,.85)}
.ael-ui .ael-play .pa,.ael-ui .ael-play[aria-pressed="true"] .pl{display:none}
.ael-ui .ael-play[aria-pressed="true"] .pa{display:block}
.ael-ui .ael-mroom{position:absolute;left:24px;right:24px;top:348px;font-size:15px;font-weight:500;line-height:20px;color:rgba(255,255,255,.68);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* scenes for all rooms */
.ael-ui .ael-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.ael-ui .ael-scenes::after{content:"";position:absolute;left:19px;right:19px;top:50%;height:2px;margin-top:-1px;background:#35383C;pointer-events:none}
.ael-ui .ael-scn{position:relative;display:flex;flex-direction:column;align-items:center;margin:6px;padding-top:23px;border-radius:14px;color:#F2F2F2;text-align:center;transition:background .25s}
.ael-ui .ael-scn:nth-child(2n)::before{content:"";position:absolute;left:-7px;top:12px;bottom:8px;width:2px;background:#35383C}
.ael-ui .ael-scn:nth-child(4)::before{top:8px;bottom:12px}
.ael-ui .ael-scn .ic{display:grid;place-items:center;width:51px;height:51px;border-radius:50%;color:#F7F0F8;box-shadow:0 0 0 2px rgba(0,0,0,.3);transition:box-shadow .25s}
.ael-ui .ael-scn .ic .ael-i{width:28px;height:28px}
.ael-ui .ael-scn b{margin-top:30px;font-size:18px;font-weight:600;line-height:22px;white-space:nowrap}
.ael-ui .ael-scn small{margin-top:9px;font-size:14px;line-height:18px;color:#A9AAAE}
.ael-ui .ael-scn[aria-pressed="true"]{background:rgba(255,255,255,.07)}
.ael-ui .ael-scn[aria-pressed="true"] .ic{box-shadow:0 0 0 3px #2B2C2F,0 0 0 5px #F2F2F2}
.ael-ui .pu{background:radial-gradient(circle at 35% 30%,#C566F4 0,#A11FE2 72%)}
.ael-ui .pk{background:radial-gradient(circle at 35% 30%,#FF72AB 0,#E8256F 72%)}

/* the two switches and the two scene cards */
.ael-ui .ael-sw{padding:20px 11px 0 16px}
.ael-ui .ael-sw b{display:block;font-size:16.5px;font-weight:600;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-sw > span{display:block;margin-top:10px;font-size:13.5px;line-height:18px;color:#B9BABE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-swb{position:absolute;left:12px;right:12px;bottom:11px;height:87px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:11px;background:#38393E;color:#BFC0C5;font-size:18px;font-weight:600;letter-spacing:.3px;transition:background .25s,color .25s,box-shadow .25s}
.ael-ui .ael-swb[aria-pressed="true"]{background:linear-gradient(165deg,#2F8DEC 0%,#0C76DC 60%,#0A70D8 100%);color:#F7F0E8;box-shadow:inset 0 -2px 0 rgba(48,150,255,.9),0 6px 16px -8px rgba(12,117,220,.85)}
.ael-ui .ael-swb .ael-i{width:32px;height:32px}
.ael-ui .ael-sc{display:flex;flex-direction:column;align-items:center;padding-top:41px;text-align:center;transition:background .25s,box-shadow .25s}
.ael-ui .ael-sc .ic{display:grid;place-items:center;width:51px;height:51px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFC425 0,#E9A200 72%);box-shadow:0 0 0 2px rgba(30,18,0,.7);color:#F2EFEA}
.ael-ui .ael-sc .ic .ael-i{width:28px;height:28px}
.ael-ui .ael-sc b{margin-top:36px;font-size:18px;font-weight:600;line-height:22px;white-space:nowrap}
.ael-ui .ael-sc[aria-pressed="true"]{background:#2C2920;box-shadow:inset 0 0 0 2px #E9A200}

/* the page dots: a yellow pill marks the page */
.ael-ui .ael-dots{position:absolute;left:0;right:0;top:720px;display:flex;justify-content:center}
.ael-ui .ael-dots button{display:grid;place-items:center;width:46px;height:40px;border-radius:14px}
.ael-ui .ael-dots i{display:block;width:9px;height:9px;border-radius:5px;background:#77787C;transition:width .25s,background .25s}
.ael-ui .ael-dots [aria-current="true"] i{width:30px;background:#F2C200}

/* home page 2: air conditioning, curtain, gate camera */
.ael-ui .hd b{display:block;font-size:20px;font-weight:600;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .hd span{display:block;margin-top:6px;font-size:15px;line-height:19px;color:#A9AAAF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-acc,.ael-ui .ael-cuc{padding:24px 22px}
.ael-ui .ael-acc .hd,.ael-ui .ael-cuc .hd{padding-right:84px}
.ael-ui .ael-none{margin-top:28px;font-size:16px;line-height:1.45;color:#A9AAAF}
.ael-ui .ael-tg{position:absolute;right:20px;top:24px;width:62px;height:36px;border-radius:18px;background:#4A4B50;transition:background .25s}
.ael-ui .ael-tg::after{content:"";position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .25s}
.ael-ui .ael-tg[aria-checked="true"]{background:#1E7FE0}
.ael-ui .ael-tg[aria-checked="true"]::after{transform:translateX(26px)}
.ael-ui .ael-dial{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:220px;height:220px;margin:24px auto 0}
.ael-ui .ael-dial svg{position:absolute;left:0;top:0;width:100%;height:100%}
.ael-ui .ael-dial .arc{stroke:#1E7FE0;transition:stroke-dasharray .3s,stroke .3s}
.ael-ui .ael-dial .arc.m-heat{stroke:#FF8A1F}
.ael-ui .ael-dial .arc.m-fan{stroke:#3FC6B0}
.ael-ui .ael-dial .arc.m-dry{stroke:#8F7BFF}
.ael-ui .ael-dial .arc.m-auto{stroke:#2EC4F0}
.ael-ui .ael-dial .arc.m-off{stroke:#5A5B60}
.ael-ui .ael-dial b{position:relative;font-size:60px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.ael-ui .ael-dial span{position:relative;margin-top:10px;font-size:15px;color:#A9AAAF}
.ael-ui .ael-acb{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.ael-ui .ael-acb .st{font-size:15px;color:#D7D8DC;text-align:center}
.ael-ui .ael-rd{display:grid;place-items:center;width:64px;height:64px;border-radius:32px;background:rgba(255,255,255,.1);font-size:30px;line-height:1;color:#F2F2F2}
.ael-ui .ael-modes{position:absolute;left:14px;right:14px;bottom:16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ael-ui .ael-modes button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:72px;border-radius:14px;background:rgba(255,255,255,.06);color:#C9CACF;font-size:13px}
.ael-ui .ael-modes [aria-pressed="true"]{background:#1E7FE0;color:#fff}
.ael-ui .ael-cuc .pct{position:absolute;right:22px;top:27px;font-size:19px;font-weight:600;color:#8FC8FF;white-space:nowrap}
.ael-ui .ael-wv{position:relative;height:250px;margin-top:22px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#5C8CB8 0%,#9DC1D9 56%,#E8D3A9 100%);box-shadow:inset 0 0 0 6px #3A3B40}
.ael-ui .ael-wv::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:#55565B;z-index:2}
.ael-ui .ael-wv::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:#3A3B40}
.ael-ui .ael-wv i{position:absolute;top:0;bottom:0;z-index:1;width:calc(var(--c,0) * 50%);background:repeating-linear-gradient(90deg,#EFE5D3 0,#EFE5D3 9px,#D9CBB2 9px,#D9CBB2 18px);box-shadow:0 0 16px rgba(0,0,0,.35);transition:width .6s ease}
.ael-ui .ael-wv .l{left:0}
.ael-ui .ael-wv .r{right:0}
.ael-ui .ael-sl{position:relative;height:60px;margin-top:20px;border-radius:16px;background:rgba(255,255,255,.08);overflow:hidden;touch-action:none;cursor:ew-resize}
.ael-ui .ael-sl .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 1%);background:linear-gradient(90deg,rgba(255,180,74,.55),#FFB44A)}
.ael-ui .ael-sl.cur .fill{background:linear-gradient(90deg,rgba(46,140,236,.5),#2E8CEC)}
.ael-ui .ael-sl.vol .fill{background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.7))}
.ael-ui .ael-sl .tx{position:absolute;left:18px;top:0;font-size:16px;line-height:60px;color:#fff;pointer-events:none;white-space:nowrap}
.ael-ui .ael-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.ael-ui .ael-two button{height:60px;border-radius:16px;background:rgba(255,255,255,.1);font-size:17px;font-weight:600;text-align:center}
.ael-ui .ael-gc{display:flex;flex-direction:column}
.ael-ui .ael-gview{position:relative;flex:none;height:300px;background:#0E141C;cursor:pointer}
.ael-ui .ael-gview .live{position:absolute;right:14px;top:14px;padding:4px 10px;border-radius:10px;background:rgba(232,52,28,.92);font-size:13px;font-weight:600;letter-spacing:.4px}
.ael-ui .ael-gc .hd{padding:18px 22px 0}
.ael-ui .ael-callb{display:flex;align-items:center;justify-content:center;gap:12px;height:64px;margin:16px 22px 0;border-radius:16px;background:#2DBE60;color:#fff;font-size:18px;font-weight:600}
.ael-ui .ael-callb.sec{margin-top:12px;background:rgba(255,255,255,.1)}
.ael-ui .ael-callb .ael-i{width:26px;height:26px}

/* ---- the other pages ---- */
.ael-ui .ael-tile{position:relative;min-width:0;min-height:0;padding:22px 20px;border-radius:14px;background:#222326;overflow:hidden;color:#F2F2F2;text-align:left}
.ael-ui .ael-tile b{display:block;font-size:19px;font-weight:600;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-tile .sub{display:block;margin-top:6px;font-size:14.5px;line-height:18px;color:#A9AAAF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-pg-scene,.ael-ui .ael-pg-lights,.ael-ui .ael-pg-climate{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.ael-ui .ael-pg-electrics{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.ael-ui .ael-pg-curtains,.ael-ui .ael-pg-contact{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.ael-ui .ael-pg-safety,.ael-ui .ael-pg-media{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
/* scenes */
.ael-ui .ael-st{display:flex;flex-direction:column;align-items:flex-start;padding:24px 22px;transition:background .25s,box-shadow .25s}
.ael-ui .ael-st .ic{display:grid;place-items:center;width:60px;height:60px;margin-bottom:20px;border-radius:50%;color:#fff}
.ael-ui .ael-st .ic .ael-i{width:32px;height:32px}
.ael-ui .ael-st b{max-width:100%}
.ael-ui .ael-st p{margin-top:10px;font-size:14.5px;line-height:1.45;color:#B4B5BA;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ael-ui .ael-st[aria-pressed="true"]{background:linear-gradient(160deg,#3A2D5C 0,#2A2440 100%);box-shadow:inset 0 0 0 2px #A64FF0}
/* lights */
.ael-ui .ael-lt .ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:50%;background:rgba(255,255,255,.08);color:#C9CACF;transition:background .25s,color .25s}
.ael-ui .ael-lt .ic .ael-i{width:30px;height:30px}
.ael-ui .ael-lt.on .ic{background:#FFB44A;color:#2A1B05}
.ael-ui .ael-lt .ael-tg{top:30px;right:18px}
.ael-ui .ael-lt .ael-sl{position:absolute;left:16px;right:16px;bottom:16px;height:64px;margin:0}
.ael-ui .ael-lt .ael-sl .tx{line-height:64px}
/* electrics */
.ael-ui .ael-et .ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:rgba(255,255,255,.08);color:#D5D6DA}
.ael-ui .ael-et .ic .ael-i{width:26px;height:26px}
.ael-ui .ael-et b,.ael-ui .ael-et .sub{max-width:152px}
.ael-ui .ael-et .ael-swb{left:auto;right:14px;top:14px;bottom:14px;width:136px;height:auto}
.ael-ui .ael-led{display:inline-block;width:12px;height:12px;margin-left:8px;border-radius:50%;vertical-align:1px;box-shadow:0 0 0 2px rgba(255,255,255,.16)}
/* safety */
.ael-ui .ael-alarm{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 32px;text-align:center}
.ael-ui .ael-alarm .sh{display:grid;place-items:center;width:124px;height:124px;margin-bottom:22px;border-radius:50%;background:rgba(255,255,255,.06);color:#8E8F94;transition:color .3s,background .3s}
.ael-ui .ael-alarm .sh .ael-i{width:70px;height:70px}
.ael-ui .ael-in[data-alarm="home"] .ael-alarm .sh,.ael-ui .ael-in[data-alarm="night"] .ael-alarm .sh,.ael-ui .ael-in[data-alarm="away"] .ael-alarm .sh{background:rgba(255,155,31,.14);color:#FF9B1F}
.ael-ui .ael-alarm b{font-size:28px;line-height:34px}
.ael-ui .ael-alarm .sub{margin-top:8px;font-size:16px;line-height:1.4;white-space:normal}
.ael-ui .ael-arm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;margin-top:30px}
.ael-ui .ael-arm button{height:64px;border-radius:16px;background:rgba(255,255,255,.08);font-size:18px;font-weight:600;text-align:center;transition:background .25s,color .25s}
.ael-ui .ael-arm [aria-pressed="true"]{background:#FF9B1F;color:#151515}
.ael-ui .ael-alarm .last{margin-top:24px;font-size:14.5px;line-height:1.4;color:#8E8F94}
.ael-ui .ael-zones{padding:24px 26px}
.ael-ui .ael-zones ul{margin-top:12px}
.ael-ui .ael-zones li{display:flex;align-items:center;gap:14px;height:64px;border-bottom:1px solid rgba(255,255,255,.08);font-size:17px}
.ael-ui .ael-zones li .ael-i{width:26px;height:26px;color:#A9AAAF}
.ael-ui .ael-zones li .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-zones li .st{font-size:15px;color:#7FD99A;white-space:nowrap}
.ael-ui .ael-zones .note{margin-top:18px;font-size:14.5px;line-height:1.45;color:#8E8F94}
/* climate */
.ael-ui .ael-act .row{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.ael-ui .ael-act .ael-rd{width:56px;height:56px;border-radius:28px;font-size:28px}
.ael-ui .ael-act .big{font-size:44px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.ael-ui .ael-act .now{display:block;margin-top:8px;font-size:14px;color:#8E8F94;text-align:center}
.ael-ui .ael-act .ft{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;justify-content:space-between}
.ael-ui .ael-act .ael-tg{position:relative;right:auto;top:auto}
.ael-ui .ael-chip{height:44px;padding:0 18px;border-radius:22px;background:rgba(255,255,255,.1);font-size:15px;color:#F2F2F2;white-space:nowrap}
.ael-ui .ael-out .big{display:block;margin:34px 0 10px;font-size:52px;font-weight:300;line-height:1}
/* curtains */
.ael-ui .ael-ctl b,.ael-ui .ael-ctl .sub{max-width:180px}
.ael-ui .ael-wv.sm{position:absolute;right:20px;top:20px;width:92px;height:70px;margin:0;border-radius:10px;box-shadow:inset 0 0 0 4px #3A3B40}
.ael-ui .ael-wv.sm::before{height:7px}
.ael-ui .ael-wv.sm::after{width:4px;margin-left:-2px}
.ael-ui .ael-wv.sm i{background:repeating-linear-gradient(90deg,#EFE5D3 0,#EFE5D3 5px,#D9CBB2 5px,#D9CBB2 10px)}
.ael-ui .ael-ctl .ael-sl{margin-top:38px}
.ael-ui .ael-ctl .ael-two{margin-top:14px}
/* media */
.ael-ui .ael-now{display:flex;flex-direction:column;align-items:center;padding:34px 30px;text-align:center;background:linear-gradient(180deg,#1E1E1F 0%,#3B4041 14%,#64777C 40%,#6B959D 66%,#3C9FB1 100%)}
.ael-ui .ael-now .ael-art{position:relative;left:auto;top:auto;flex:none;width:220px;height:220px;margin:0 0 24px}
.ael-ui .ael-now b{max-width:100%;font-size:26px;line-height:32px}
.ael-ui .ael-now .sub{max-width:100%;font-size:17px;line-height:22px;color:rgba(255,255,255,.75)}
.ael-ui .ael-now .ael-prog{position:relative;left:auto;right:auto;top:auto;flex:none;width:100%;margin-top:22px}
.ael-ui .ael-now .ael-mctl{position:relative;top:auto;margin-top:22px;gap:40px}
.ael-ui .ael-now .ael-mctl button{width:76px;height:76px;border-radius:38px}
.ael-ui .ael-lib{padding:24px 26px}
.ael-ui .ael-lib > b{margin-bottom:8px;font-size:17px;color:#A9AAAF}
.ael-ui .ael-lib ul{margin-bottom:16px}
.ael-ui .ael-lib li button{display:flex;align-items:center;gap:16px;width:100%;height:64px;padding:0 14px;border-radius:14px;text-align:left}
.ael-ui .ael-lib li button[aria-pressed="true"]{background:rgba(255,255,255,.08)}
.ael-ui .ael-lib .n{width:22px;color:#8E8F94;font-variant-numeric:tabular-nums}
.ael-ui .ael-lib .tt{flex:1;min-width:0;font-size:17px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-lib .tt small{display:block;margin-top:2px;font-size:14px;line-height:18px;color:#A9AAAF}
.ael-ui .ael-lib .eq{width:22px;height:22px;color:#3FB7C6;opacity:0}
.ael-ui .ael-lib [aria-pressed="true"] .eq{opacity:1}
.ael-ui .ael-spk{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 16px}
.ael-ui .ael-spk button{height:48px;padding:0 18px;border-radius:24px;background:rgba(255,255,255,.08);font-size:15.5px;white-space:nowrap}
.ael-ui .ael-spk [aria-pressed="true"]{background:#F2F2F4;color:#111}
.ael-ui .ael-sl.vol{margin-top:0}
/* contact */
.ael-ui .ael-call{display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px}
.ael-ui .ael-call .cv{position:absolute;left:0;right:0;top:0;height:156px;background:#0E141C}
.ael-ui .ael-call .cv .hs-cam > circle:last-of-type,.ael-ui .ael-call .cv .hs-cam > text,.ael-ui .ael-gview .hs-cam > circle:last-of-type,.ael-ui .ael-gview .hs-cam > text{display:none}
.ael-ui .ael-call .pi{position:absolute;left:22px;top:24px;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.07);color:#D5D6DA}
.ael-ui .ael-call .pi .ael-i{width:48px;height:48px}
.ael-ui .ael-call .ph{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:60px;height:60px;border-radius:30px;background:#2DBE60;color:#fff}
.ael-ui .ael-call .ph .ael-i{width:28px;height:28px}
.ael-ui .ael-call b,.ael-ui .ael-call .sub{padding-right:76px}

/* ---- sheets over the page ---- */
.ael-ui .ael-scrim{position:absolute;left:0;top:0;right:0;bottom:0;z-index:20;background:rgba(0,0,0,.62);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
.ael-ui .ael-scrim.on{opacity:1;visibility:visible;transition:opacity .2s}
.ael-ui .ael-sheet{position:absolute;left:50%;top:50%;z-index:21;width:640px;max-height:720px;overflow:auto;padding:30px 32px 32px;border-radius:24px;background:#2B2C30;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px -20px rgba(0,0,0,.9);opacity:0;visibility:hidden;transform:translate(-50%,-46%);transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.ael-ui .ael-sheet.on{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .2s,transform .2s}
.ael-ui .ael-sheet h3{margin:4px 64px 6px 0;font-size:24px}
.ael-ui .ael-sheet .sub{margin:0 0 18px;font-size:15px;line-height:1.4;color:#B4B5BA}
.ael-ui .ael-sheet .ael-cut{stroke:#2B2C30}
.ael-ui .ael-x{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:46px;height:46px;border-radius:23px;background:rgba(255,255,255,.1);color:#F2F2F2}
.ael-ui .ael-x .ael-i{width:22px;height:22px}
.ael-ui .ael-sh-rooms{width:740px}
.ael-ui .ael-rlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ael-ui .ael-rlist button{display:flex;align-items:center;gap:14px;height:68px;padding:0 18px;border-radius:16px;background:rgba(255,255,255,.07);color:#F2F2F2;font-size:18px;text-align:left;transition:background .2s}
.ael-ui .ael-rlist .ael-i{width:28px;height:28px;color:#C9CACF}
.ael-ui .ael-rlist .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ael-ui .ael-rlist .tp{font-size:15px;color:#A9AAAF;white-space:nowrap}
.ael-ui .ael-rlist [aria-pressed="true"]{background:linear-gradient(165deg,#2F8DEC 0%,#0C76DC 100%);color:#fff}
.ael-ui .ael-rlist [aria-pressed="true"] .ael-i,.ael-ui .ael-rlist [aria-pressed="true"] .tp{color:#fff}
.ael-ui .ael-notes > b{display:block;margin:14px 0 6px;font-size:15px;font-weight:600;color:#B4B5BA}
.ael-ui .ael-notes li{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px}
.ael-ui .ael-notes time{min-width:48px;color:#8FC8FF;font-variant-numeric:tabular-nums}
.ael-ui .ael-notes li span{margin-left:auto;font-size:14px;color:#A9AAAF}
.ael-ui .ael-notes .empty{margin:4px 0 8px;font-size:16px;color:#8E8F94}
.ael-ui .ael-sh-pin{width:460px}
.ael-ui .ael-code{display:flex;justify-content:center;gap:16px;margin:4px 0 22px}
.ael-ui .ael-code i{width:16px;height:16px;border-radius:50%;border:2px solid #CFCFD4;transition:background .15s}
.ael-ui .ael-code i.f{background:#fff;border-color:#fff}
.ael-ui .ael-code.err{animation:ael-shake .4s ease}
@keyframes ael-shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.ael-ui .ael-pin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ael-ui .ael-pin button{display:grid;place-items:center;height:64px;border-radius:16px;background:rgba(255,255,255,.08);font-size:24px}
.ael-ui .ael-pin .ael-i{width:26px;height:26px}
.ael-ui .ael-sh-call{width:440px}
.ael-ui .ael-calling{display:flex;flex-direction:column;align-items:center;padding-top:8px;text-align:center}
.ael-ui .ael-calling .av{display:grid;place-items:center;width:112px;height:112px;margin-bottom:18px;border-radius:50%;background:rgba(255,255,255,.08);color:#E4E5E8;animation:ael-ring 1.6s ease-out infinite}
.ael-ui .ael-calling .av .ael-i{width:54px;height:54px}
.ael-ui .ael-calling h3{margin:0 0 6px}
.ael-ui .ael-calling .sub{margin:0}
.ael-ui .ael-calling .tm{margin:10px 0 24px;font-size:34px;font-weight:300;font-variant-numeric:tabular-nums}
.ael-ui .ael-hang{display:grid;place-items:center;width:78px;height:78px;border-radius:39px;background:#E8341C;color:#fff;box-shadow:0 10px 22px -8px rgba(232,52,28,.85)}
.ael-ui .ael-hang .ael-i{width:36px;height:36px}
@keyframes ael-ring{0%{box-shadow:0 0 0 0 rgba(52,167,245,.5)}100%{box-shadow:0 0 0 28px rgba(52,167,245,0)}}
.ael-ui .ael-sh-video{width:680px}
.ael-ui .ael-camv{position:relative;aspect-ratio:520/300;margin-bottom:20px;border-radius:16px;overflow:hidden;background:#0E141C}
.ael-ui .ael-btns{display:flex;gap:14px}
.ael-ui .ael-btns button{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;height:64px;border-radius:16px;font-size:18px;font-weight:600}
.ael-ui .ael-btns .ael-i{width:26px;height:26px}
.ael-ui .ael-btns .go{background:#FF9B1F;color:#161616}
.ael-ui .ael-btns .go[aria-disabled="true"]{background:#33463A;color:#9FE3A8}
.ael-ui .ael-btns .red{background:#E8341C;color:#fff}
.ael-ui .ael-toastw{position:absolute;left:0;right:0;bottom:18px;z-index:30;text-align:center;pointer-events:none}
.ael-ui .ael-toast{display:inline-block;max-width:960px;padding:14px 24px;border-radius:16px;background:rgba(248,248,250,.97);color:#111;font-size:17px;line-height:1.4;opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s;box-shadow:0 14px 34px -12px rgba(0,0,0,.75)}
.ael-ui .ael-toast.on{opacity:1;transform:none}

/* ---- the Elite 7: the same layout, a little closer to the top and the bottom ---- */
.ael-v7 .ael-ui .ael-rail{top:34px}
.ael-v7 .ael-ui .ael-win{height:480px}
.ael-v7 .ael-ui .ael-win li{height:120px}
.ael-v7 .ael-ui .ael-pill,.ael-v7 .ael-ui .ael-head,.ael-v7 .ael-ui .ael-tb{top:34px}
.ael-v7 .ael-ui .ael-grid,.ael-v7 .ael-ui .ael-pg{top:117px}
.ael-v7 .ael-ui .ael-dots{top:700px}
.ael-v7 .ael-ui .ael-toastw{bottom:10px}
.ael-v7 .ael-ui .ael-sheet{max-height:700px}
.ael-ui .ael-rh,.ael-ui .ael-pic,.ael-ui .ael-prog,.ael-ui .ael-art,.ael-ui .ael-trk,.ael-ui .ael-mroom{pointer-events:none}