/* HOMESTAT — the Akubela Aura touch screen controller, rebuilt in code (14 Oct 2026); see akubela-aura.js.
   The device: an 86 x 86 mm plate of brushed aluminium (the finish picked on the page: --fin-hi, --fin, --fin-lo)
   around one black glass face of 64.6 x 66.8 mm. The face (the screen and the light strip) is drawn at 480 x 496
   design pixels, laid out from Akubela's photo, and scaled into the frame. */
.hsx-akubela-aura{--fin-hi:#C8C8C8;--fin:#9C9C9C;--fin-lo:#6E6E6E;max-width:440px;margin:8px auto 44px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif}
/* on a laptop the device never grows taller than the window */
.pv-ink .hsx-akubela-aura:not(.full){max-width:min(440px,calc(100vh - 140px));max-width:min(440px,calc(100dvh - 140px))}
.hsx-akubela-aura.full .aau-device{width:min(100%,calc(100vh - 40px));width:min(100%,calc(100dvh - 40px))}

/* the frame: brushed aluminium. Fine horizontal lines, some of them a fraction of a degree off the horizontal so that
   they cross and break into streaks of different lengths, over the finish's light-to-dark fall */
.aau-device{position:relative;width:100%;aspect-ratio:1/1;border-radius:1.5%;
  background:
    repeating-linear-gradient(179.4deg,rgba(255,255,255,.07) 0,rgba(255,255,255,.07) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 3px),
    repeating-linear-gradient(180.55deg,rgba(0,0,0,.07) 0,rgba(0,0,0,.07) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 5px),
    repeating-linear-gradient(179.8deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 2px),
    repeating-linear-gradient(180.25deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 7px),
    repeating-linear-gradient(179.1deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 2px,rgba(255,255,255,0) 2px,rgba(255,255,255,0) 13px),
    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) 23px),
    linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 44%,rgba(0,0,0,.05) 66%,rgba(255,255,255,.05) 86%,rgba(255,255,255,0) 100%),
    linear-gradient(155deg,var(--fin-hi) -80%,var(--fin) 40%,var(--fin-lo) 140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 1px 0 0 rgba(255,255,255,.16),inset -1px 0 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.34),0 0 0 1px rgba(0,0,0,.35),0 26px 50px -24px rgba(0,0,0,.9)}
/* the glass face sits a little under the frame: a dark hairline and the frame's inner edge round it */
.aau-face{position:absolute;left:12%;top:10.75%;width:76%;height:78.5%;background:#000;overflow:hidden;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.9),0 -1px 0 1px rgba(0,0,0,.25),1px 2px 0 1.5px rgba(30,30,30,.55),0 1px 0 2.5px rgba(255,255,255,.14)}
.aau-sheen{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;pointer-events:none;background:linear-gradient(128deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.014) 32%,rgba(255,255,255,0) 46%)}

/* the face, 480 x 496 design pixels */
.aau-ui{width:480px;height:496px;background:#000;color:#EDEDED;font-size:18px;line-height:1.2;font-weight:400}
.aau-ui p{margin:0;max-width:none}
.aau-ui button{position:absolute;display:block;color:#EDEDED;transition:background-color .15s,opacity .3s}
.aau-ui button:focus-visible,.aau-ui [tabindex]:focus-visible{outline:3px solid #FF8A1F;outline-offset:3px}
.aau-ui svg{display:block}

.aau-scr{position:absolute;left:0;top:0;width:299px;height:496px}
.aau-title{position:absolute;left:51px;top:119px;font-size:27px;line-height:1;letter-spacing:-.2px;white-space:nowrap}
.aau-pow{left:175px;top:107px;width:86px;height:51px;border-radius:10px;background:#1B1B1B}
.aau-pow svg{position:absolute;left:29.5px;top:12px;width:27px;height:27px;stroke-width:1.65}
.aau-pow:active{background:#2B2B2B}

/* the set point: a pill with a cyan rim and a soft blue glow along its lower edge */
.aau-pill{position:absolute;left:51px;top:175px;width:210px;height:90px}
.aau-rim{position:absolute;left:0;top:0;width:210px;height:90px}
.aau-rim rect,.aau-rim path{transition:opacity .3s}
.aau-dn{left:0;top:0;width:56px;height:90px;border-radius:45px 14px 14px 45px}
.aau-up{left:155px;top:0;width:55px;height:90px;border-radius:14px 45px 45px 14px}
.aau-sg{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;stroke-width:2.5}
.aau-dn .aau-sg{margin-left:-9px}
.aau-up .aau-sg{margin-left:-16.5px}
/* their focus ring follows the inside of the pill's ends (a transparent outline still shows in forced colours) */
.aau-dn::after,.aau-up::after{content:"";position:absolute;top:7px;bottom:7px;box-shadow:0 0 0 3px #FF8A1F;opacity:0;pointer-events:none}
.aau-dn::after{left:7px;right:3px;border-radius:38px 11px 11px 38px}
.aau-up::after{left:3px;right:5px;border-radius:11px 38px 38px 11px}
.aau-ui .aau-dn:focus-visible,.aau-ui .aau-up:focus-visible{outline:3px solid transparent}
.aau-dn:focus-visible::after,.aau-up:focus-visible::after{opacity:1}
.aau-set{position:absolute;left:0;right:0;top:25.5px;text-align:center;font-size:39px;line-height:1;font-weight:300;letter-spacing:-.8px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.aau-dec{font-size:22px;letter-spacing:0}
.aau-unit{font-size:23.5px;letter-spacing:0;margin-left:1px}
.aau-cur{position:absolute;left:51px;top:275px;width:210px;text-align:center;font-size:19px;line-height:1;white-space:nowrap}

/* mode, fan speed and swing, with thin separators */
.aau-modes{position:absolute;left:27px;top:314px;width:258px;height:82px}
.aau-m{left:0;top:0;width:86px;height:82px;border-radius:12px}
.aau-m2{left:86px}
.aau-m3{left:172px}
.aau-ic{position:absolute;left:23px;top:7px;width:40px;height:40px}
.aau-ic svg{width:40px;height:40px}
.aau-lb{position:absolute;left:0;right:0;top:56px;text-align:center;font-size:18.5px;line-height:1;white-space:nowrap}
.aau-sep{position:absolute;left:85.5px;top:13px;width:1px;height:56px;background:rgba(255,255,255,.11)}
.aau-sep2{left:171.5px}
.aau-mi{position:absolute;left:0;top:0;opacity:0}
.aau-m[data-mode="cool"] .aau-mi-cool,.aau-m[data-mode="heat"] .aau-mi-heat,.aau-m[data-mode="fan"] .aau-mi-fan,.aau-m[data-mode="dry"] .aau-mi-dry,.aau-m[data-mode="auto"] .aau-mi-auto{opacity:1}
.aau-bars rect{fill:none;stroke:currentColor;stroke-width:1.5;transition:fill .2s}
.aau-bars .aau-a{opacity:0}
.aau-m[data-fan="auto"] .aau-a{opacity:1}
.aau-m[data-fan="low"] .b1,.aau-m[data-fan="mid"] .b1,.aau-m[data-fan="mid"] .b2,.aau-m[data-fan="high"] rect{fill:currentColor}
.aau-sw .aau-arc{stroke-dasharray:0 2.5}
.aau-sw .aau-heads{opacity:0}
.aau-m3[aria-pressed="true"] .aau-ic{color:#3DD0E4}
.aau-m3[aria-pressed="true"] .aau-arc{stroke-dasharray:none}
.aau-m3[aria-pressed="true"] .aau-heads{opacity:1}
.aau-dn:active,.aau-up:active,.aau-m:active{background-color:rgba(255,255,255,.07)}

/* while the air conditioning is off, the screen dims and only the power key works */
.aau-dim{transition:opacity .3s}
.aau-ui[data-on="false"] .aau-dim{opacity:.3}
.aau-ui[data-on="false"] .aau-ring{stroke:#5A5A5A}
.aau-ui[data-on="false"] .aau-glow,.aau-ui[data-on="false"] .aau-low{opacity:0}
.aau-ui [aria-disabled="true"]:active{background-color:transparent}

/* the seam, then the light strip: + at the top, the line, − at the foot */
.aau-seam{position:absolute;left:299px;top:0;width:18px;height:496px;background:linear-gradient(90deg,#050505 0,#1C1C1C 3px,#151515 6px,#121212 11px,#1A1A1A 14px,#161616 16px,#040404 18px)}
.aau-strip{position:absolute;left:320px;top:0;width:160px;height:496px;background:#070707}
.aau-lp{left:10px;top:64px;width:140px;height:62px;border-radius:12px}
.aau-lm{left:10px;top:375px;width:140px;height:58px;border-radius:12px}
.aau-ss{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;stroke-width:2.2}
.aau-lp:active,.aau-lm:active{background-color:rgba(255,255,255,.05)}
.aau-track{position:absolute;left:10px;top:129px;width:140px;height:243px;border-radius:12px;cursor:ns-resize}
.aau-line,.aau-lit{position:absolute;left:67.5px;width:3px;border-radius:2px}
.aau-line{top:0;bottom:0;background:rgba(255,255,255,.24)}
.aau-lit{bottom:0;height:calc(var(--lv,0) * 1%);background:#F7F7F7;box-shadow:0 0 5px rgba(255,255,255,.75),0 0 14px rgba(255,255,255,.32);transition:height .18s ease}
.aau-track.drag .aau-lit{transition:none}
.aau-lvl{position:absolute;right:85px;top:calc((100 - var(--lv,0)) * 1%);transform:translateY(-50%);padding:5px 9px;border-radius:9px;background:#202020;color:#F2F2F2;font-size:18px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s;pointer-events:none}
.aau-lvl.on{opacity:1}
.aau-track.drag .aau-lvl{transition:none}

/* what each touch did, for a moment, under the controls */
.aau-toast{position:absolute;left:12px;width:275px;bottom:12px;z-index:6;padding:8px 12px;border-radius:14px;background:rgba(34,34,36,.97);border:1px solid rgba(255,255,255,.08);color:#F2F2F2;font-size:17.5px;line-height:1.25;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;pointer-events:none}
.aau-toast.on{opacity:1;transform:none}