/* HOMESTAT — the Akubela HyPanel Lux screens (Piano, Ring and Vase), rebuilt in code for the product pages (14 Oct 2026).
   The device is drawn in CSS and SVG around the round screen: the faceted metal ring that turns, the polished rim, the
   light ring and the bezel; per product the panel of four glass buttons (Piano), the wall (Ring) or the cut-crystal
   base on a table (Vase). The screen is drawn at 480 x 480 design pixels and scaled (see akubela-lux.js).
   Proportions from Akubela's product pictures and from product3d.js (luxHead, luxPiano, luxRing, luxVase). */

/* ---- the size on the page: about 430 to 480 px on a laptop, never taller than the window; the full width on a phone ---- */
.hsx-akubela-lux{max-width:440px;margin:8px auto 44px;color:#F2F2F2;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif;
  /* the metal (silver, the first finish), from light to dark */
  --m1:#FFFFFF;--m2:#E2E5E9;--m3:#B9BEC5;--m4:#7A7F86;--m5:#3A3E43;
  --lr:#8BEFFF;--lr-glow:rgba(139,239,255,.5);--panel:#3B3D40;--seam:#111213;--dot:#9C9C9C;--dot-on:#F2FEFF;--dot-glow:rgba(139,239,255,.95)}
.hsx-akubela-lux[data-variant="piano"]{max-width:min(440px,calc((100vh - 120px) * 70 / 127));max-width:min(440px,calc((100dvh - 120px) * 70 / 127))}
.hsx-akubela-lux[data-variant="ring"]{max-width:min(440px,calc(100vh - 150px));max-width:min(440px,calc(100dvh - 150px))}
.hsx-akubela-lux[data-variant="vase"]{max-width:min(480px,calc((100vh - 120px) * 920 / 1190));max-width:min(480px,calc((100dvh - 120px) * 920 / 1190))}

/* ---- the finishes (data-finish, from the picker at the top of the page) ---- */
.hsx-akubela-lux[data-finish="akb-gold"]{--m1:#FFF7DE;--m2:#F1DCA6;--m3:#D0AF6B;--m4:#8D6D34;--m5:#4A3716}
.hsx-akubela-lux[data-finish="akb-black"]{--m1:#74747A;--m2:#3C3C40;--m3:#252528;--m4:#151517;--m5:#070708;--hi:.62;--lo:.8}
.hsx-akubela-lux[data-variant="ring"][data-finish="akb-green"]{--m1:#A6D2BA;--m2:#5A9077;--m3:#2E5B47;--m4:#183427;--m5:#0A1911;--hi:.85}
/* the Piano: the panel colour, and a light ring only on the silver and the green (the green keeps a silver knob) */
.hsx-akubela-lux[data-variant="piano"][data-finish="akb-green"]{--panel:#435850;--seam:#C3CAC6;--lr:#7CF5D9;--lr-glow:rgba(124,245,217,.5);--dot-glow:rgba(124,245,217,.95)}
.hsx-akubela-lux[data-variant="piano"][data-finish="akb-gold"]{--panel:#C9C6C3;--seam:#2A2927;--lr:none;--dot:#8A8A86;--dot-on:#FFFFFF;--dot-glow:rgba(255,236,190,.95)}
.hsx-akubela-lux[data-variant="piano"][data-finish="akb-black"]{--panel:#252523;--seam:#0A0A0A;--lr:none;--dot-on:#FFFFFF;--dot-glow:rgba(255,255,255,.85)}

.alx-dev{position:relative;width:100%;-webkit-user-select:none;user-select:none}
.alx-dev[data-v="piano"]{aspect-ratio:70/127}
.alx-dev[data-v="ring"]{aspect-ratio:1/1}
.alx-dev[data-v="vase"]{aspect-ratio:920/1190}

/* ---- the head: the faceted knob, the polished rim, the light ring, the bezel and the glass, each on the one before ---- */
.alx-head{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}
/* only the round parts take a touch: the corners of the head's box leave the glass buttons free */
.alx-knob,.alx-glass{pointer-events:auto}
.alx-dev[data-v="piano"] .alx-head{left:2%;top:23.545%;width:96%;height:52.91%}
.alx-dev[data-v="vase"] .alx-head{left:9.783%;top:.8403%;width:80.435%;height:62.185%}
.alx-dev .alx-knob{position:absolute;inset:0;border-radius:50%;cursor:grab;outline-offset:4px;
  /* the room in the metal: it stays where it is while the facets turn through it */
  background:conic-gradient(from -112deg,var(--m2),var(--m1) 6%,var(--m3) 15%,var(--m4) 26%,var(--m3) 36%,var(--m2) 44%,var(--m1) 50%,var(--m3) 58%,var(--m5) 69%,var(--m4) 79%,var(--m3) 89%,var(--m2))}
.alx-dev[data-v="piano"] .alx-knob{box-shadow:0 16px 28px -8px rgba(0,0,0,.72),0 3px 8px rgba(0,0,0,.5)}
.alx-dev[data-v="ring"] .alx-knob{box-shadow:0 30px 46px -14px rgba(0,0,0,.95),0 0 110px 34px rgba(255,255,255,.035)}
.alx-dev[data-v="vase"] .alx-knob{box-shadow:0 10px 22px -6px rgba(0,0,0,.6)}
/* a touch can start the turn just outside the ring, where nothing else is */
.alx-dev:not([data-v="piano"]) .alx-knob::before{content:"";position:absolute;inset:-4%;border-radius:50%}
.alx-turning .alx-knob{cursor:grabbing}
/* the ring shows the focus ring for the keyboard only: a turn with the mouse or a finger focuses it too */
.alx-dev .alx-head .alx-knob:focus-visible{border-radius:50%}
.alx-dev .alx-knob.alx-ptr:focus-visible{outline:none}
.alx-facets{position:absolute;left:0;top:0;width:100%;height:100%;transform:rotate(var(--knob,0deg));transition:transform .22s cubic-bezier(.2,.7,.3,1);will-change:transform;pointer-events:none}
.alx-turning .alx-facets{transition:none}
.alx-facets .fw{opacity:var(--hi,1)}
.alx-facets .fk{opacity:var(--lo,1)}
.alx-kshade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,0) 86%,rgba(0,0,0,.24) 96%,rgba(0,0,0,.55) 100%),linear-gradient(140deg,rgba(255,255,255,.24),rgba(255,255,255,0) 36%,rgba(0,0,0,0) 62%,rgba(0,0,0,.34))}
.alx-rim,.alx-lr,.alx-bez{position:absolute;border-radius:50%;pointer-events:none}
.alx-glass{position:absolute;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 1.5px #060606;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(#000,#000)}
.alx-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  background:linear-gradient(122deg,rgba(255,255,255,.075) 6%,rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 46%),radial-gradient(closest-side,rgba(0,0,0,0) 91%,rgba(0,0,0,.55) 100%)}
/* the Piano: the screen is about 84% of the knob (product3d.js: .293 of .350) */
.alx-dev[data-v="piano"] .alx-rim{inset:4.2%}
.alx-dev[data-v="piano"] .alx-lr{inset:6.4%}
.alx-dev[data-v="piano"] .alx-bez{inset:7%}
.alx-dev[data-v="piano"] .alx-glass{inset:7.9%}
/* the Ring and the Vase: the screen is about 80% of the ring (.277 of .351) */
.alx-dev[data-v="ring"] .alx-rim,.alx-dev[data-v="vase"] .alx-rim{inset:6.4%}
.alx-dev[data-v="ring"] .alx-lr,.alx-dev[data-v="vase"] .alx-lr{inset:9%}
.alx-dev[data-v="ring"] .alx-bez,.alx-dev[data-v="vase"] .alx-bez{inset:9.7%}
.alx-dev[data-v="ring"] .alx-glass,.alx-dev[data-v="vase"] .alx-glass{inset:10.2%}
/* the polished rim: a round bead that catches two highlights */
.alx-rim{background:radial-gradient(closest-side,rgba(0,0,0,.65) 93.6%,rgba(0,0,0,0) 95.2%,rgba(255,255,255,.35) 96.4%,rgba(255,255,255,.85) 97.3%,rgba(255,255,255,.2) 98.4%,rgba(0,0,0,.18) 99.3%,rgba(0,0,0,.55) 100%),
  conic-gradient(from -118deg,var(--m1),var(--m2) 9%,var(--m3) 18%,var(--m4) 26%,var(--m2) 38%,var(--m1) 47%,var(--m2) 56%,var(--m4) 68%,var(--m3) 80%,var(--m2) 91%,var(--m1));
  box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.alx-bez{background:radial-gradient(closest-side,#000 97%,rgba(0,0,0,0) 98.1%,rgba(255,255,255,.4) 98.9%,rgba(0,0,0,.55) 100%),
  conic-gradient(from -100deg,var(--m1),var(--m3) 14%,var(--m4) 26%,var(--m2) 40%,var(--m1) 50%,var(--m3) 64%,var(--m5) 76%,var(--m3) 88%,var(--m1))}
/* the light ring: a thin steady glow on the Piano (silver and green), dark on the gold and the black */
.alx-lr{background:#0B0B0C}
.alx-dev[data-v="piano"] .alx-lr{background:var(--lr);box-shadow:0 0 3px var(--lr-glow),0 0 9px 1px var(--lr-glow)}
.hsx-akubela-lux[data-finish="akb-gold"] .alx-dev[data-v="piano"] .alx-lr,.hsx-akubela-lux[data-finish="akb-black"] .alx-dev[data-v="piano"] .alx-lr{background:#101011;box-shadow:none}
/* the Ring: a multi-colour light ring that glows brighter for a moment at every change */
.alx-dev[data-v="ring"] .alx-lr{background:conic-gradient(from 20deg,#43E2FF,#5C7DFF,#B46CFF,#FF6EB6,#FFB15A,#FFE873,#6CF0A6,#43E2FF);opacity:.32;transition:opacity 1s ease}
.alx-dev[data-v="ring"] .alx-lr::after{content:"";position:absolute;inset:-1.6%;border-radius:50%;background:inherit;filter:blur(6px);opacity:0;transition:opacity 1s ease}
.alx-flash[data-v="ring"] .alx-lr,.alx-flash[data-v="ring"] .alx-lr::after{opacity:1;transition-duration:.12s}
.alx-ringing[data-v="ring"] .alx-lr,.alx-ringing[data-v="ring"] .alx-lr::after{animation:alx-pulse 1.2s ease-in-out infinite}
/* the Vase: the light ring and the crystal under it light up for a moment at every change */
.alx-dev[data-v="vase"] .alx-lr{background:#FFF0D2;opacity:.1;transition:opacity 1.2s ease,box-shadow 1.2s ease}
.alx-flash[data-v="vase"] .alx-lr{opacity:.95;box-shadow:0 0 8px 2px rgba(255,234,196,.55);transition-duration:.15s}
.alx-ringing[data-v="vase"] .alx-lr{animation:alx-pulse 1.2s ease-in-out infinite}
@keyframes alx-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---- the Piano: a tall panel of four glass buttons, fine seams between them, three dots in each outer corner ---- */
.alx-plate{position:absolute;inset:0;border-radius:2.6%/1.43%;background:var(--panel);z-index:0;
  box-shadow:0 36px 64px -28px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1.5px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14)}
.alx-plate::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(164deg,rgba(255,255,255,.11),rgba(255,255,255,0) 28%,rgba(0,0,0,0) 66%,rgba(0,0,0,.2))}
.alx-seam{position:absolute;left:49.55%;width:.9%;top:0;bottom:0;background:var(--seam);box-shadow:inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(0,0,0,.3)}
.alx-seam-h{left:0;right:0;width:auto;top:49.75%;bottom:auto;height:.5%}
.hsx-akubela-lux[data-finish="akb-green"] .alx-seam{background:linear-gradient(90deg,#8E9692,#EEF2F0 45%,#B5BCB8)}
.alx-keys{position:absolute;inset:0;z-index:1}
.alx-dev .alx-key{position:absolute;width:50%;height:50%;background:none;transition:background .2s}
.alx-dev .alx-k1{left:0;top:0;border-radius:5.2% 0 0 0/2.86% 0 0 0}
.alx-dev .alx-k2{right:0;top:0;border-radius:0 5.2% 0 0/0 2.86% 0 0}
.alx-dev .alx-k3{left:0;bottom:0;border-radius:0 0 0 5.2%/0 0 0 2.86%}
.alx-dev .alx-k4{right:0;bottom:0;border-radius:0 0 5.2% 0/0 0 2.86% 0}
.alx-dev .alx-key:focus-visible{outline:3px solid #FF8A1F;outline-offset:-7px}
.alx-dev .alx-k1:focus-visible{border-radius:5.2% 0 0 0/2.86% 0 0 0}
.alx-dev .alx-k2:focus-visible{border-radius:0 5.2% 0 0/0 2.86% 0 0}
.alx-dev .alx-k3:focus-visible{border-radius:0 0 0 5.2%/0 0 0 2.86%}
.alx-dev .alx-k4:focus-visible{border-radius:0 0 5.2% 0/0 0 2.86% 0}
@media (hover:hover){.alx-dev .alx-key:hover{background:rgba(255,255,255,.035)}}
.alx-dev .alx-key:active{background:rgba(0,0,0,.1)}
.alx-d3{position:absolute;width:13.6%;display:flex;justify-content:space-between;pointer-events:none}
.alx-k1 .alx-d3,.alx-k3 .alx-d3{left:17.5%}
.alx-k2 .alx-d3,.alx-k4 .alx-d3{right:17.5%}
.alx-k1 .alx-d3,.alx-k2 .alx-d3{top:12.5%}
.alx-k3 .alx-d3,.alx-k4 .alx-d3{bottom:12.5%}
.alx-d3 i{display:block;width:19%;aspect-ratio:1/1;border-radius:50%;background:var(--dot);transition:background .5s ease,box-shadow .5s ease}
.alx-key.lit .alx-d3 i{background:var(--dot-on);box-shadow:0 0 4px 1px var(--dot-glow),0 0 10px 2px var(--dot-glow);transition-duration:.08s}

/* ---- the Vase: the cut-crystal base on its metal foot, on a table; the head sits in the lip ---- */
.alx-vase{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.alx-vase-front{z-index:3}
.alx-vglow{opacity:.16;transition:opacity 1.2s ease}
.alx-flash .alx-vglow{opacity:.9;transition-duration:.15s}
.alx-ringing .alx-vglow{animation:alx-pulse 1.2s ease-in-out infinite}

/* ---- the round screen: 480 x 480 design pixels ---- */
.alx-ui{width:480px;height:480px;border-radius:50%;background:#000;color:#F2F2F2;font-size:18px;line-height:1.25;letter-spacing:.1px;font-feature-settings:normal}
.alx-ui p{margin:0;max-width:none}
.alx-ui .alx-i{display:block;width:24px;height:24px;flex:none}
.alx-pg{position:absolute;inset:0;cursor:default}
.alx-pg.alx-in-r{animation:alx-in-r .34s cubic-bezier(.2,.75,.25,1) both}
.alx-pg.alx-in-l{animation:alx-in-l .34s cubic-bezier(.2,.75,.25,1) both}
@keyframes alx-in-r{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes alx-in-l{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
.alx-ui button:focus-visible{outline:3px solid #FF8A1F;outline-offset:3px}
.alx-cap{position:absolute;left:0;right:0;top:48px;text-align:center;font-size:17px;color:#8E8E93;letter-spacing:.3px}
.alx-ttl{position:absolute;left:0;right:0;top:72px;text-align:center;font-size:22px;color:#EDEDED}
.alx-ui .alx-big{position:absolute;left:96px;top:124px;width:288px;height:220px;border-radius:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.alx-num{display:flex;align-items:flex-start;font-size:104px;font-weight:200;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:#F6F6F6;white-space:nowrap}
.alx-num b{font-weight:inherit}
.alx-num small{font-size:34px;font-weight:300;line-height:1;margin:12px 0 0 4px;color:#BDBDC2;letter-spacing:0}
.alx-sub{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:18px;color:#A3A3A8;white-space:nowrap}
.alx-ui .alx-sub .alx-i{width:22px;height:22px}
.alx-arc{position:absolute;left:0;top:0;width:480px;height:480px;pointer-events:none}
.alx-arc circle{fill:none;stroke-width:10;stroke-linecap:round}
.alx-arc .trk{stroke:#1F1F22}
.alx-arc .val{transition:stroke-dasharray .25s ease,opacity .25s}
.alx-arc .dot{fill:#FFFFFF;stroke:#000;stroke-width:3;transform-box:view-box;transform-origin:240px 240px;transition:transform .25s ease}

/* home: the clock over the art, as on Akubela's home screen */
.alx-art{position:absolute;left:0;top:0;width:480px;height:480px;pointer-events:none}
.alx-clock{position:absolute;left:112px;top:104px;font-size:86px;font-weight:200;line-height:82px;letter-spacing:.5px;font-variant-numeric:tabular-nums;color:#F4F4F4;pointer-events:none}
.alx-clock span,.alx-date span{display:block}
.alx-date{position:absolute;left:115px;top:282px;font-size:18px;line-height:30px;color:#C4C4C9;pointer-events:none}
.alx-ui .alx-hit{position:absolute;inset:0;border-radius:50%}
.alx-ui .alx-hit:focus-visible{outline-offset:-12px}

/* light: the majlis dimmer */
.alx-halo{position:absolute;left:50px;top:56px;width:380px;height:380px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,176,70,.3),rgba(255,176,70,.1) 55%,rgba(255,176,70,0));transition:opacity .3s}
.alx-pg[data-page="light"] .alx-sub .alx-i{color:#FFB547}
.alx-pg[data-page="light"][data-on="false"] .alx-sub .alx-i{color:#6E6E73}
.alx-pg[data-page="light"][data-on="false"] .alx-num{color:#8A8A8F}

/* climate: the set point on a tick arc, the room's temperature, the mode */
.alx-ticks{position:absolute;left:0;top:0;width:480px;height:480px;pointer-events:none}
.alx-ticks path{fill:none;stroke-linecap:round}
.alx-ticks .off{stroke:#38383C;stroke-width:3}
.alx-ticks .on{stroke:var(--mc);stroke-width:3}
.alx-ticks .set{stroke:#FFFFFF;stroke-width:5}
.alx-pg[data-page="climate"]{--mc:#5CC8FF}
.alx-pg[data-mode="heat"]{--mc:#FF8A3D}
.alx-pg[data-mode="auto"]{--mc:#49D3A0}
.alx-pg[data-mode="fan"]{--mc:#C9CDD2}
.alx-pg[data-mode="dry"]{--mc:#F2C14E}
.alx-pg[data-page="climate"][data-on="false"]{--mc:#8E8E93}
.alx-pg[data-page="climate"][data-on="false"] .alx-ticks .set{stroke:#6A6A6F}
.alx-pg[data-page="climate"][data-on="false"] .alx-num,.alx-pg[data-page="climate"][data-mode="fan"] .alx-num,.alx-pg[data-page="climate"][data-mode="dry"] .alx-num{color:#7E7E83}
.alx-ui .alx-chip{position:absolute;left:50%;top:76px;transform:translateX(-50%);height:44px;padding:0 18px 0 14px;border-radius:22px;background:rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;font-size:18px;color:#E6E6EA;white-space:nowrap}
.alx-ui .alx-chip .alx-i{width:20px;height:20px;color:var(--mc)}
.alx-pg[data-page="climate"] .alx-big{top:134px;height:216px}
.alx-pg[data-page="climate"] .alx-num small{margin-left:2px}

/* curtain: a window with the curtain drawn across it */
.alx-pg[data-page="curtain"] .alx-big{top:104px;height:276px;justify-content:flex-start;padding-top:8px}
.alx-win{position:relative;display:block;width:212px;height:118px;border-radius:14px;overflow:hidden;background:#17181B;box-shadow:inset 0 0 0 3px #2B2C30;margin-bottom:12px;flex:none}
.alx-sky{position:absolute;left:7px;right:7px;top:9px;bottom:6px;border-radius:7px;background:linear-gradient(180deg,#1E2C4A 0,#5B4570 52%,#D9824F 100%)}
.alx-sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:radial-gradient(120% 90% at 20% 100%,#6A2F4F 0 55%,rgba(106,47,79,0) 56%),radial-gradient(110% 80% at 85% 100%,#3D1C3A 0 60%,rgba(61,28,58,0) 61%)}
.alx-rail{position:absolute;left:5px;right:5px;top:5px;height:4px;border-radius:2px;background:#8E8E93;z-index:2}
.alx-cl,.alx-cr{position:absolute;top:8px;bottom:5px;width:calc((1 - var(--open,1)) * 48% + 10px);background:repeating-linear-gradient(90deg,#EFE6D6 0 7px,#D3C5AD 7px 13px);transition:width .6s ease;z-index:1}
.alx-cl{left:5px;box-shadow:3px 0 8px rgba(0,0,0,.45)}
.alx-cr{right:5px;box-shadow:-3px 0 8px rgba(0,0,0,.45)}
.alx-pg[data-page="curtain"] .alx-num{font-size:80px}
.alx-pg[data-page="curtain"] .alx-num small{font-size:28px;margin-top:9px}
.alx-pg[data-page="curtain"] .alx-sub{margin-top:8px;font-size:17px}

/* scenes: turn to choose, tap to run */
.alx-ttl-top{top:50px}
.alx-hint{position:absolute;left:0;right:0;top:82px;text-align:center;font-size:16px;color:#8E8E93}
.alx-sgrid{position:absolute;left:114px;top:116px;display:grid;grid-template-columns:116px 116px;column-gap:20px;row-gap:4px}
.alx-ui .alx-sc{display:flex;flex-direction:column;align-items:center;gap:8px;height:134px;padding-top:6px;border-radius:24px}
.alx-scc{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#D9D9DE;transition:background .25s,color .25s,box-shadow .25s}
.alx-ui .alx-scc .alx-i{width:36px;height:36px}
.alx-scn{font-size:18px;color:#CFCFD4;white-space:nowrap}
.alx-sc.sel .alx-scc{box-shadow:0 0 0 3px #000,0 0 0 6px #FFB547}
.alx-sc[aria-pressed="true"] .alx-scc{background:linear-gradient(160deg,#FFD891,#FF9F2E);color:#2B1600}
.alx-sc[aria-pressed="true"] .alx-scn{color:#FFFFFF}
@media (hover:hover){.alx-ui .alx-sc:hover .alx-scc{background:#26262A}.alx-ui .alx-sc[aria-pressed="true"]:hover .alx-scc{background:linear-gradient(160deg,#FFDDA0,#FFA83E)}}

/* music: the track, play and pause, the volume on the arc */
.alx-disc{position:absolute;left:190px;top:70px;width:100px;height:100px;border-radius:50%;box-shadow:0 10px 26px rgba(0,0,0,.7)}
.alx-disc svg{display:block;width:100px;height:100px}
.alx-pg[data-playing="true"] .alx-disc svg{animation:alx-spin 9s linear infinite}
@keyframes alx-spin{to{transform:rotate(360deg)}}
.alx-track{position:absolute;left:64px;right:64px;top:186px;text-align:center;font-size:23px;color:#F2F2F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alx-artist{position:absolute;left:64px;right:64px;top:218px;text-align:center;font-size:17px;color:#98989E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alx-ctl{position:absolute;left:0;right:0;top:252px;display:flex;align-items:center;justify-content:center;gap:20px}
.alx-ui .alx-skip{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#E6E6EA}
.alx-ui .alx-skip .alx-i{width:28px;height:28px}
.alx-ui .alx-play{width:74px;height:74px;border-radius:50%;background:#F2F2F2;color:#111;display:flex;align-items:center;justify-content:center}
.alx-ui .alx-play .alx-i{width:34px;height:34px}
@media (hover:hover){.alx-ui .alx-skip:hover{background:rgba(255,255,255,.07)}}
.alx-vol{position:absolute;left:0;right:0;top:344px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:17px;color:#A3A3A8;font-variant-numeric:tabular-nums}
.alx-ui .alx-vol .alx-i{width:20px;height:20px}

/* the page dots along the bottom edge */
.alx-dots{position:absolute;left:108px;top:404px;display:flex;z-index:8}
.alx-ui .alx-dots button{width:44px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px}
.alx-dots i{display:block;width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.3);transition:width .25s ease,background .25s ease}
.alx-dots [aria-current="page"] i{width:20px;background:#F2F2F2}
.alx-incall .alx-dots{display:none}

/* the toast: a short sentence after each change. It comes down over the page's title, the part of the page that
   tells the least just after a change, and stays clear of the value that changed */
.alx-toast{position:absolute;left:50%;top:52px;z-index:40;width:max-content;max-width:282px;padding:9px 18px;border-radius:19px;background:rgba(246,246,248,.97);color:#111;font-size:17px;line-height:1.3;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-10px);transition:opacity .25s,transform .25s;box-shadow:0 10px 26px -8px rgba(0,0,0,.7)}
.alx-toast.on{opacity:1;transform:translate(-50%,0)}
.alx-toast.long{max-width:300px;font-size:15px;padding:9px 16px}
.alx-incall .alx-toast{top:196px}

/* the intercom: the gate camera fills the round screen */
.alx-call{position:absolute;inset:0;z-index:30;background:#000;border-radius:50%;overflow:hidden}
.alx-call{background:linear-gradient(180deg,#0E1621 0,#0E1621 14%,#1A1F26 86%)}
/* the camera picture keeps its shape (520 x 300), so both lit pillars of the gate show */
.alx-cam{position:absolute;left:-72px;width:624px;top:60px;height:360px}
.alx-cfade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.74) 0,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 54%,rgba(0,0,0,.8) 100%)}
.alx-chead{position:absolute;left:0;right:0;top:60px;text-align:center;pointer-events:none}
.alx-cname{font-size:27px;color:#FFFFFF;font-weight:500}
.alx-cst{font-size:18px;color:#D9D9DD;margin-top:4px;font-variant-numeric:tabular-nums}
.alx-cbtns{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center}
.alx-cring{top:306px;gap:74px}
.alx-ctalk{top:262px;flex-direction:column;gap:18px}
.alx-crow{display:flex;align-items:center;gap:16px}
.alx-ui .alx-cb{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFFFFF;background:rgba(28,28,30,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.alx-ui .alx-cb .alx-i{width:26px;height:26px}
.alx-ui .alx-cb[aria-pressed="true"]{background:#F2F2F2;color:#111;box-shadow:none}
.alx-ui .alx-rb{width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFFFFF;box-shadow:0 8px 20px -6px rgba(0,0,0,.7)}
.alx-ui .alx-rb .alx-i{width:38px;height:38px}
.alx-ui .alx-red{background:#E8402F}
.alx-ui .alx-green{background:#2DBE5B}
.alx-ringing .alx-green{animation:alx-ringbtn 1.3s ease-in-out infinite}
@keyframes alx-ringbtn{0%,100%{box-shadow:0 0 0 0 rgba(45,190,91,.55)}60%{box-shadow:0 0 0 16px rgba(45,190,91,0)}}
.alx-ui .alx-pill{height:58px;min-width:154px;padding:0 26px;border-radius:29px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:19px;color:#FFFFFF;background:rgba(28,28,30,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.alx-ui .alx-pill .alx-i{width:24px;height:24px}
.alx-ui .alx-pill.alx-red{min-width:176px;background:#E8402F;box-shadow:none}
.alx-ui .alx-pill.alx-red .alx-i{width:34px;height:34px}
.alx-ui .alx-pill[aria-disabled="true"]{color:#9FF0B8;cursor:default}

/* the picture for the 3D model (?pic=1): the screen leaves the glass, so the glass must not mask it */
.hsx[data-pic] .alx-glass{-webkit-mask-image:none;mask-image:none}
.hsx[data-pic] .alx-vase-front{display:none}
.hsx[data-pic] .alx-ui{box-shadow:0 0 0 240px #000}