/* Animara interactive tablet demo (generated into site/demo/demo.css by tools/build_demo.py) */
.ad{--off:#24344f;--on:#34496c;--btn:#3d5f8f;--acc:#4fa8ff;--acc2:#8fd0ff;--tx:#fff;--sub:rgba(255,255,255,.70);
  --slot:60px;--th:64px;--gap:10px;--pad:10px;--r:22px;--txl:calc(var(--pad) + var(--slot) + 10px);
  position:relative;margin:0 auto;max-width:1180px;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
.ad *,.ad *::before,.ad *::after{box-sizing:border-box}
:where(.ad) :where(button){font:inherit;color:inherit;margin:0;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.ad-stage{position:relative;width:100%}

/* ---------------------------------------------------------------- tablet frame (generic, no brand) */
.ad-tablet{position:relative;width:100%;max-width:1180px;margin:0 auto;height:800px;padding:18px;border-radius:46px;transform-origin:0 0;
  background:linear-gradient(145deg,#4a4f57 0%,#2a2e34 18%,#1b1e22 55%,#30343a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 1px 0 1px rgba(255,255,255,.10) inset,0 40px 80px -30px rgba(10,20,40,.55),0 18px 40px -18px rgba(0,0,0,.45)}
.ad-tablet::before{content:"";position:absolute;inset:7px;border-radius:40px;background:#07090c;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.ad-cam{position:absolute;left:50%;top:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4656,#0b0f14 70%);z-index:2}
.ad-screen{position:relative;z-index:1;width:100%;height:100%;border-radius:28px;overflow:hidden;color:var(--tx);isolation:isolate;
  background:radial-gradient(70% 45% at 85% 6%,rgba(110,190,255,.42),transparent 70%),radial-gradient(90% 60% at 50% 55%,rgba(40,90,160,.26),transparent 75%),
  radial-gradient(80% 55% at 70% 95%,rgba(30,60,110,.7),transparent 70%),linear-gradient(180deg,#1c2c44,#0b1220)}
.ad--port .ad-tablet{width:100%;height:auto;padding:12px;border-radius:36px}
.ad--port .ad-tablet::before{inset:5px;border-radius:32px}
.ad--port .ad-cam{top:3px}
.ad--port .ad-screen{border-radius:24px;height:var(--ph,680px)}

/* ---------------------------------------------------------------- top bar */
.ad-top{position:relative;display:flex;align-items:center;justify-content:center;height:64px;padding:0 20px;background:rgba(10,18,32,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.06);z-index:3}
.ad-tabs{display:flex;gap:2px;height:100%}
.ad-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:100%;padding:0 11px;color:rgba(255,255,255,.62);font-size:13px;font-weight:600;transition:color .2s}
.ad-tab svg{width:24px;height:24px;flex:none}
.ad-tab::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#fff;transform:scaleX(0);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ad-tab[aria-selected=true]{color:#fff}
.ad-tab[aria-selected=true]::after{transform:scaleX(1)}
.ad-tab:hover{color:#fff}
.ad-sim{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);
  padding:5px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ad-brand{position:absolute;left:22px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;color:rgba(255,255,255,.75);letter-spacing:.01em}
.ad--port .ad-top{height:56px;padding:0 6px;justify-content:space-between}
.ad--port .ad-tabs{gap:0;width:100%;justify-content:space-between}
.ad--port .ad-tab{min-width:0;flex:1;padding:0}
.ad--port .ad-tab span{display:none}
.ad--port .ad-tab::after{left:22%;right:22%}
.ad--port .ad-sim,.ad--port .ad-brand{display:none}

/* ---------------------------------------------------------------- views */
.ad-views{position:absolute;left:0;right:0;top:64px;bottom:0}
.ad--port .ad-views{top:56px}
.ad-view{position:absolute;inset:0;overflow:auto;overscroll-behavior:auto;padding:20px 24px 24px;scrollbar-width:none;transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1)}
.ad-view::-webkit-scrollbar{display:none}
.ad-view.is-enter{opacity:0;transform:translateX(18px)}
.ad-view.is-enter.back{transform:translateX(-18px)}
.ad-view.is-leave{opacity:0;transform:translateX(-18px);pointer-events:none}
.ad-view.is-leave.back{transform:translateX(18px)}
.ad--port .ad-view{padding:14px 12px 22px}

.ad-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:start}
.ad--port .ad-cols{grid-template-columns:minmax(0,1fr)}
.ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.ad-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ad-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ad--port .ad-grid.c3,.ad--port .ad-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ad--port .ad-grid.one{grid-template-columns:minmax(0,1fr)}
.ad-h{display:flex;align-items:center;gap:14px;margin:22px 2px 12px;font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:28px;color:#fff}
.ad-h::after{content:"";flex:1;height:1px;margin-top:2px;background:linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,0))}
.ad-col>.ad-h:first-child{margin-top:0}
.ad--port .ad-h{font-size:18px;margin:18px 2px 10px}
.ad--port .ad-col+.ad-col>.ad-h:first-child{margin-top:18px}

/* ---------------------------------------------------------------- glass tiles */
.ad-t{position:relative;display:block;width:100%;height:var(--th);border-radius:var(--r);background:var(--off);text-align:left;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 8px 18px -10px rgba(0,0,0,.45);
  transition:background-color .11s linear,transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.ad-t::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.ad-t.on{background:var(--on);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 22px -10px rgba(0,0,0,.5)}
.ad-t:active,.ad-t.press{transform:scale(.965)}
.ad-t:focus-visible,.ad-btn:focus-visible,.ad-tab:focus-visible,.ad-seg button:focus-visible,.ad-round:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.ad-slot{position:absolute;left:var(--pad);top:50%;width:var(--slot);height:var(--slot);margin-top:calc(var(--slot) / -2);z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.ad-slot.live,.ad-slot.alpha{-webkit-mask-image:none;mask-image:none}
.ad-l{position:absolute;inset:0;opacity:0;transition:opacity .11s linear}
.ad-l.in{opacity:1}
.ad-l>img,.ad-l>video,.ad-l>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.ad-l>video{opacity:0}
.ad-l>video.go{opacity:1}
.ad-slot animara-card{display:block;position:absolute;left:50%;top:50%;width:180px;height:180px;margin:-90px 0 0 -90px;transform-origin:50% 50%}
.ad-tx{position:absolute;left:var(--txl);right:12px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:3px;pointer-events:none}
.ad-n{font-size:15px;font-weight:600;line-height:18px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ad-s{font-size:13px;line-height:16px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ad-t.on .ad-s{color:rgba(255,255,255,.88)}   /* his engine: active state text .88, off .70 */
/* state glow: an overlay above the icon (screen blend), so the recorded clip and the tile never show a seam */
.ad-t::before{content:"";position:absolute;left:calc(var(--pad) + var(--slot) / 2 - 70px);top:50%;width:140px;height:140px;margin-top:-70px;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow,rgba(255,196,110,.30)),transparent);mix-blend-mode:screen;opacity:0;transition:opacity .35s}
.ad-t::before{display:none!important}   /* owner: no glow or halo behind any icon; the icon's own animation shows the state */
.ad-t[data-g=light]{--glow:rgba(255,190,100,.34)}
.ad-t[data-g=climate]{--glow:rgba(127,214,255,.26)}
.ad-t[data-g=media]{--glow:rgba(190,140,255,.28)}
.ad-t[data-g=kitchen]{--glow:rgba(255,160,90,.26)}
.ad-t[data-g=cover]{--glow:rgba(255,232,170,.22)}
.ad-t[data-g=other],.ad-t[data-g=security]{--glow:rgba(120,230,160,.20)}
.ad-line{position:absolute;z-index:4;left:24px;bottom:0;height:2.2px;width:calc((100% - 48px) * var(--bri,0));border-radius:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,214,130,0),rgba(255,214,130,.85) 15%,rgba(255,224,160,.95) 72%,rgba(255,224,160,0));box-shadow:0 0 5px rgba(255,207,110,.45),0 -1px 10px rgba(255,207,110,.25);filter:blur(.3px)}
.ad-t.dim.on .ad-line{opacity:1}   /* his dashboard's dimmer indicator: brightness as a thin warm line */
.ad--port{--slot:50px;--th:66px;--gap:10px;--pad:9px;--r:20px;--txl:calc(var(--pad) + var(--slot) + 8px)}
.ad--port .ad-n{font-size:13px;line-height:16px;letter-spacing:-.005em}
.ad--port .ad-tx{right:6px}
.ad-btn .sm{display:none}
.ad--port .ad-btn .sm{display:inline}
.ad--port .ad-btn .lg{display:none}
.ad--port .ad-s{font-size:12.5px}

/* summary tiles (navigation) */
.ad-t.sum .ad-n{font-size:16px;line-height:20px}
.ad--port .ad-t.sum .ad-n{font-size:15px;line-height:19px}
.ad-t .ad-go{position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-right:2px solid rgba(255,255,255,.35);border-top:2px solid rgba(255,255,255,.35);transform:rotate(45deg);z-index:4}

/* ---------------------------------------------------------------- header card */
.ad-hello{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--th);padding:0 8px 0 22px;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,rgba(80,160,255,.55),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px -14px rgba(0,0,0,.5)}
.ad-hello h3{margin:0;font-size:21px;font-weight:500;line-height:26px;color:#fff}
.ad-hello p{margin:5px 0 0;font-size:15px;line-height:20px;color:var(--sub);letter-spacing:.02em}
.ad-rounds{display:flex;gap:12px;flex:none}
.ad-round{position:relative;width:58px;height:58px;border-radius:50%;background:var(--btn);overflow:hidden;isolation:isolate;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 6px 14px -6px rgba(0,0,0,.5);transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.ad-round::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:3;background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%);pointer-events:none}
.ad-round:active,.ad-round.press{transform:scale(.93)}
.ad-round .ad-slot{--slot:58px;left:0;top:0;margin:0;width:58px;height:58px}
.ad-round svg.gl{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:4}
.ad--port .ad-hello{padding:0 8px 0 14px}
.ad--port .ad-hello h3{font-size:18px}
.ad--port .ad-hello p{font-size:13.5px}
.ad--port .ad-round{width:50px;height:50px}
.ad--port .ad-round .ad-slot{width:50px;height:50px}
.ad--port .ad-rounds{gap:8px}

/* section header card (Rooms, Climate, ...) */
.ad-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:104px;padding:20px 24px 20px 28px;border-radius:26px;margin-bottom:16px;overflow:hidden;
  background:radial-gradient(110% 160% at 95% 0%,rgba(70,150,255,.45),transparent 62%),linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),0 10px 24px -14px rgba(0,0,0,.5)}
.ad-card h3{margin:0;font-size:16px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:22px}
.ad-card p{margin:6px 0 0;font-size:15px;line-height:20px;color:var(--sub);letter-spacing:.03em}
.ad-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:14px;background:rgba(120,170,240,.32);font-size:14px;font-weight:600;color:#fff;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 14px -8px rgba(0,0,0,.5);transition:transform .16s,background-color .2s}
.ad-btn:hover{background:rgba(120,170,240,.42)}
.ad-btn:active{transform:scale(.96)}
.ad-btn svg{width:16px;height:16px;flex:none}
.ad-btn.warn{background:linear-gradient(145deg,#ff8a5c,#e5484d)}
.ad-btn[disabled]{opacity:.45;cursor:default}
.ad--port .ad-card{min-height:86px;padding:14px 14px 14px 18px;border-radius:22px;margin-bottom:12px}
.ad--port .ad-card h3{font-size:14px;letter-spacing:.16em}
.ad--port .ad-card p{font-size:13.5px}
.ad--port .ad-btn{height:44px;padding:0 12px;font-size:13px}

/* scenes */
.ad-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ad-scene{position:relative;display:flex;align-items:center;gap:12px;height:var(--th);padding:0 16px;border-radius:var(--r);background:var(--off);font-size:14.5px;font-weight:600;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 8px 18px -10px rgba(0,0,0,.45);transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .3s}
.ad-scene::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(165deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 46%,rgba(0,0,0,.06))}
.ad-scene:active,.ad-scene.press{transform:scale(.96)}
.ad-scene.run{background:var(--on)}
.ad-scene i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;background:var(--g);box-shadow:var(--gs)}
.ad-scene i svg{width:18px;height:18px}
.ad-scene[data-s=morning]{--g:linear-gradient(145deg,#ffda6e,#ff9a1f);--gs:0 4px 10px rgba(255,154,31,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.ad-scene[data-s=movie]{--g:linear-gradient(145deg,#d29bff,#7a3ce0);--gs:0 4px 10px rgba(122,60,224,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.ad-scene[data-s=night]{--g:linear-gradient(145deg,#7fd6ff,#1c7fe0);--gs:0 4px 10px rgba(28,127,224,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.ad--port .ad-scene{flex-direction:column;justify-content:center;gap:5px;padding:0 6px;font-size:12px}
.ad--port .ad-scene i{width:30px;height:30px}

/* ---------------------------------------------------------------- coffee tile (the owner's flowing coffee design) */
.ad-t.coffee{grid-column:1/-1}
.ad-liq{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;transition:opacity .6s}
.ad-liq svg{position:absolute;bottom:0;left:0;width:200%;height:100%;transform-origin:50% 100%;transform:scaleY(0);transition:transform 2.4s cubic-bezier(.3,.8,.3,1)}
.ad-t.coffee.on .ad-liq svg{transform:scaleY(1)}
.ad-t.coffee .ad-liq{opacity:0}
.ad-t.coffee.on .ad-liq{opacity:1}
.ad-w1{animation:ad-drift 7s linear infinite}
.ad-w2{animation:ad-drift 11s linear infinite reverse}
.ad-w3{animation:ad-drift 5s linear infinite}
.ad-t.coffee:not(.on) :is(.ad-w1,.ad-w2,.ad-w3){animation-play-state:paused}
@keyframes ad-drift{to{transform:translateX(-50%)}}
.ad-bub{position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:rgba(255,230,190,.55);opacity:0;animation:ad-rise 4.2s ease-in infinite;animation-play-state:paused;visibility:hidden}
.ad-t.coffee.on .ad-bub{animation-play-state:running;visibility:visible}
.ad-t.coffee.brew .ad-bub{animation-duration:2.6s}
@keyframes ad-rise{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:.7}100%{transform:translateY(-44px) scale(1.1);opacity:0}}
.ad-t.coffee .ad-tx{right:auto;max-width:34%;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.ad-t.coffee::before{display:none}
.ad-stats{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:4;display:grid;grid-template-columns:repeat(4,58px);gap:4px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ad-stat{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:14px;font-weight:600;line-height:17px;font-variant-numeric:tabular-nums;color:#fff}
.ad-stat svg{width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.ad--port .ad-stats{right:8px;grid-template-columns:repeat(4,40px);gap:0}
.ad--port .ad-stat{font-size:12px;gap:4px}
.ad--port .ad-stat svg{width:18px;height:18px}
.ad--port .ad-t.coffee .ad-tx{max-width:30%}

/* ---------------------------------------------------------------- rooms */
.ad-room{position:relative;display:block;width:100%;height:236px;padding:20px 24px;border-radius:26px;background:var(--off);text-align:left;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 8px 18px -10px rgba(0,0,0,.45);transition:background-color .11s linear,transform .16s cubic-bezier(.2,.8,.2,1)}
.ad-room::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.ad-room.on{background:var(--on)}
.ad-room:active,.ad-room.press{transform:scale(.97)}
.ad-room:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.ad-room b{position:relative;z-index:4;display:block;font-size:16px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:22px}
.ad-room em{position:relative;z-index:4;display:block;margin-top:6px;font-style:normal;font-size:15px;line-height:20px;color:var(--sub);letter-spacing:.03em}
.ad-room.on em{color:var(--acc)}
.ad-minis{position:absolute;left:16px;bottom:18px;display:flex;gap:6px;z-index:1}
.ad-mini{position:relative;width:56px;height:56px}
.ad-mini .ad-slot{--slot:56px;left:0;top:0;margin:0;width:56px;height:56px}
.ad--port .ad-room{height:148px;padding:13px 16px;border-radius:22px}
.ad--port .ad-room b{font-size:13px;letter-spacing:.14em}
.ad--port .ad-room em{font-size:13px}
.ad--port .ad-minis{left:8px;bottom:8px;gap:0}
.ad--port .ad-mini{width:40px;height:40px}
.ad--port .ad-mini .ad-slot{width:40px;height:40px}

/* ---------------------------------------------------------------- climate + media cards */
.ad-big{position:relative;border-radius:26px;background:var(--off);overflow:hidden;isolation:isolate;padding:0 18px 18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 8px 18px -10px rgba(0,0,0,.45);transition:background-color .11s linear}
.ad-big.on{background:var(--on)}
.ad-big::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.ad-big .ad-t{--slot:92px;--th:112px;--pad:4px;--txl:calc(var(--pad) + var(--slot) + 12px);background:transparent!important;box-shadow:none!important;margin:0 -14px}
.ad-big .ad-t::after{display:none}
.ad-big .ad-t:active{transform:none}
.ad-big .ad-n{font-size:17px;line-height:21px}
.ad-big .ad-s{font-size:14px;line-height:18px}
.ad-ctl{position:relative;z-index:4;display:flex;align-items:center;gap:10px}
.ad-ctl+.ad-ctl{margin-top:12px}
.ad-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex:1;padding:4px;border-radius:14px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ad-seg button{height:44px;border-radius:10px;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);transition:background-color .2s,color .2s,box-shadow .2s}
.ad-seg button[aria-pressed=true]{color:#fff;background:linear-gradient(145deg,#5ab0ff,#2e86ff);box-shadow:0 4px 10px rgba(28,127,224,.42),inset 0 1px 0 rgba(255,255,255,.4)}
.ad-seg button[data-m=heating][aria-pressed=true]{background:linear-gradient(145deg,#ffb37a,#f0631f);box-shadow:0 4px 10px rgba(240,99,31,.42),inset 0 1px 0 rgba(255,255,255,.4)}
.ad-seg button[data-m=off][aria-pressed=true]{background:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ad-ib{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .14s,background-color .2s}
.ad-ib svg{width:18px;height:18px}
.ad-ib:active{transform:scale(.9)}
.ad-ib:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.ad-ib[disabled]{opacity:.4;cursor:default}
.ad-ib.pri{background:linear-gradient(145deg,#d29bff,#7a3ce0);box-shadow:0 4px 10px rgba(122,60,224,.42),inset 0 1px 0 rgba(255,255,255,.45)}
.ad-ib.pwr[aria-pressed=true]{background:linear-gradient(145deg,#7be495,#1fa855);box-shadow:0 4px 10px rgba(31,168,85,.42),inset 0 1px 0 rgba(255,255,255,.45)}
.ad-temp{flex:1;text-align:center;font-size:30px;font-weight:300;line-height:42px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ad-temp small{font-size:15px;font-weight:500;color:var(--sub);margin-left:2px;vertical-align:top}
.ad-big:not(.on) .ad-temp{color:rgba(255,255,255,.5)}
.ad-vol{position:relative;flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.14);overflow:hidden}
.ad-vol i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,#b98cff,#7a3ce0);transition:width .2s}
.ad-big:not(.on) .ad-vol i{background:rgba(255,255,255,.3)}
.ad-vn{width:30px;text-align:right;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--sub)}
.ad-big .ad-top-r{position:absolute;right:16px;top:35px;z-index:5}
.ad--port .ad-big{border-radius:22px;padding:0 12px 14px}
.ad--port .ad-big .ad-t{--slot:76px;--th:96px;margin:0 -10px}
.ad--port .ad-big .ad-top-r{top:27px;right:10px}

/* ---------------------------------------------------------------- empty state + toast */
.ad-empty[hidden]{display:none}
.ad-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 16px;text-align:center;color:var(--sub);font-size:15px}
.ad-toast{position:absolute;left:50%;top:74px;z-index:20;max-width:calc(100% - 32px);height:34px;padding:0 16px;border-radius:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(12,20,34,.92);color:#fff;font-size:13.5px;font-weight:500;line-height:34px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 30px -10px rgba(0,0,0,.6);transform:translate(-50%,-12px);opacity:0;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none;text-align:center}
.ad-toast.show{opacity:1;transform:translate(-50%,0)}
.ad--port .ad-toast{top:61px;font-size:12.5px}
/* toast slot: a free strip right under the tab bar. Home (landscape) already has it above the heading row
   (20px padding + the empty top of the Overview/Favorites row); the other views and portrait get top padding;
   portrait views start below the strip, so scrolled tiles never pass under a toast */
.ad--land .ad-view:not(.v-home){padding-top:56px}
.ad--port .ad-views{top:100px}
.ad--port .ad-toast{top:61px}

/* ---------------------------------------------------------------- caption + hint */
.ad-label{margin:18px auto 0;max-width:760px;text-align:center;font-size:14px;line-height:20px;color:var(--mut,#5c6573);font-weight:500}
.ad-hint{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto 18px;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;font-size:13px;font-weight:600;
  color:var(--ink,#101418);background:var(--surface,#fff);box-shadow:0 0 0 1px var(--line,#e2e5ea),0 6px 16px -8px rgba(0,0,0,.25);white-space:nowrap}
.ad-hint i{width:8px;height:8px;border-radius:50%;background:#1fa855;box-shadow:0 0 0 0 rgba(31,168,85,.5);animation:ad-ping 1.8s infinite}
@keyframes ad-ping{to{box-shadow:0 0 0 8px rgba(31,168,85,0)}}
.ad-skel{position:absolute;inset:64px 0 0;display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:14px}
@media (prefers-reduced-motion:reduce){.ad-w1,.ad-w2,.ad-w3,.ad-bub,.ad-hint i{animation:none!important}.ad-view,.ad-liq svg{transition:none}}

/* ---------------------------------------------------------------- home: one strict grid (rows of --th, gaps of --gap) */
.ad-home{display:grid;gap:var(--gap)}
.ad-home>.ad-h{margin:0;align-self:end;line-height:28px}
.ad-home>.ad-hello,.ad-home>.ad-scenes,.ad-home>.ad-t{margin:0;min-width:0}
.ad--land .ad-home{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 4px minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(9,var(--th));
  grid-template-areas:"h1 h1 . h2 h2" "gr gr . es es" "s1 s2 . f1 f2" "s3 s4 . f3 f4" "h3 h3 . f5 f6" "c1 c2 . f7 f8" "c3 c4 . f9 f10" "h4 h4 . f11 f12" "sc sc . f13 f14"}
.ad--port .ad-home{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:var(--th) var(--th) var(--th) 34px var(--th) var(--th) 34px var(--th) 34px var(--th) repeat(7,var(--th));
  grid-template-areas:"gr gr" "s1 s2" "s3 s4" "h3 h3" "c1 c2" "c3 c4" "h4 h4" "sc sc" "h2 h2" "es es" "f1 f2" "f3 f4" "f5 f6" "f7 f8" "f9 f10" "f11 f12" "f13 f14"}
.ad--port .ad-home>.ad-h-ov{display:none}
.ad-round{width:48px;height:48px}
.ad-round .ad-slot{width:48px;height:48px}
.ad--port .ad-round,.ad--port .ad-round .ad-slot{width:46px;height:46px}
.ad-round svg.gl{width:22px;height:22px;margin:-11px 0 0 -11px}
.ad-hello h3{font-size:19px;line-height:24px}
.ad-hello p{margin-top:3px;font-size:14px;line-height:18px}

/* ---------------------------------------------------------------- touch: instant taps, no callout/selection, finger friendly */
.ad{touch-action:manipulation}
.ad button,.ad-t,.ad-room,.ad-scene,.ad-tab{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ad-screen{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ad-view{touch-action:pan-y;-webkit-overflow-scrolling:touch}
/* live sampler card inside a slot: no card chrome (the site's ha-card shim draws a background and border) */
.ad-slot animara-card{--ha-card-background:transparent;--card-background-color:transparent;--ha-card-border-color:transparent;--ha-card-border-width:0;
  --divider-color:transparent;--ha-card-box-shadow:none;--ha-card-border-radius:0;background:transparent}
/* live value drawn over a recorded display (energy monitor), same seven segment rules as the card */
.ad-val{position:absolute;z-index:2;overflow:visible;pointer-events:none}

/* ---------------------------------------------------------------- shades + energy */
.ad-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ad-kpis{margin-bottom:6px}
.ad-kpi{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;height:112px;padding:0 22px;border-radius:var(--r);background:var(--off);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 8px 18px -10px rgba(0,0,0,.45)}
.ad-kpi::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(165deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 46%,rgba(0,0,0,.06))}
.ad-kpi .k{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}
.ad-kpi b{font-size:32px;font-weight:300;line-height:38px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ad-kpi b small{font-size:15px;font-weight:500;margin-left:4px;color:var(--sub)}
.ad-kpi .s{font-size:13px;color:var(--sub)}
.ad-t[data-g=energy]{--glow:rgba(120,230,160,.24)}
.ad--port .ad-kpis{grid-template-columns:minmax(0,1fr)!important}
.ad--port .ad-kpi{height:84px;padding:0 16px}
.ad--port .ad-kpi b{font-size:26px;line-height:30px}

/* ---------------------------------------------------------------- dimmer popup */
.ad-pop{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(4,9,18,.72);opacity:0;transition:opacity .18s}
.ad-pop.show{opacity:1}
.ad-pop.arming,.ad-pop.arming *{pointer-events:none}
.ad-popc{position:relative;isolation:isolate;width:min(360px,100%);padding:22px 22px 18px;border-radius:28px;background:var(--off);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -20px rgba(0,0,0,.7);
  transform:translateY(10px) scale(.98);transition:transform .22s cubic-bezier(.2,.8,.2,1),background-color .11s linear}
.ad-popc.on{background:var(--on)}
.ad-popc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.ad-popc>*{position:relative;z-index:4}
.ad-popc>.ad-popi{z-index:1}
.ad-pop.show .ad-popc{transform:none}
.ad-popi{position:relative;width:112px;height:112px;margin:0 auto 6px}
.ad-popi .ad-slot{--slot:112px;left:0;top:0;margin:0;width:112px;height:112px}
.ad-poph{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 2px 14px}
.ad-popn{font-size:17px;font-weight:600}
.ad-popv{font-size:22px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--sub)}
.ad-range{position:relative;height:64px;border-radius:20px;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.ad-range i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(255,200,110,.55),rgba(255,214,140,.9));transition:width .08s linear}
.ad-range:not(.on) i{background:rgba(255,255,255,.18)}
.ad-range input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
.ad-range:focus-within{outline:2px solid var(--acc2);outline-offset:2px}
.ad-poprow{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.ad-poprow .ad-btn{flex:1;justify-content:center}

/* ---------------------------------------------------------------- phone (generic modern phone, 20:9, centred punch hole) */
.ad-phone{position:relative;width:min(100%,400px);margin:0 auto;padding:9px;border-radius:52px;
  background:linear-gradient(145deg,#4a4f57 0%,#2a2e34 20%,#17191d 60%,#30343a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 1px 0 1px rgba(255,255,255,.10) inset,0 40px 80px -30px rgba(10,20,40,.55),0 18px 40px -18px rgba(0,0,0,.45)}
.ad-phone::before{content:"";position:absolute;inset:4px;border-radius:48px;background:#06080b}
.ad-phone .ad-screen{border-radius:44px;height:auto;aspect-ratio:9/20}
.ad-punch{position:absolute;left:50%;top:21px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;z-index:6;background:radial-gradient(circle at 38% 35%,#2b3442,#05070a 68%);box-shadow:0 0 0 1.5px #000}
.ad-side{position:absolute;right:-3px;top:150px;width:3px;height:70px;border-radius:0 3px 3px 0;background:#2a2e34}
.ad-side.v{top:240px;height:44px}
.ad-status{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0;font-size:13px;font-weight:600;color:#fff;z-index:4}
.ad-sbi{display:flex;gap:6px;align-items:center}
.ad-sbi i{display:block;background:#fff;opacity:.9}
.ad-sbi .sig{width:14px;height:11px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ad-sbi .wifi{width:14px;height:11px;clip-path:polygon(50% 100%,0 30%,10% 18%,50% 0,90% 18%,100% 30%);border-radius:2px}
.ad-sbi .bat{width:20px;height:10px;border-radius:2.5px;box-shadow:inset 0 0 0 1.5px #fff;background:linear-gradient(90deg,#fff 70%,transparent 70%) 2px 2px/16px 6px no-repeat;opacity:1}
.ad--phone .ad-top{margin-top:34px}
.ad--phone .ad-views{top:134px}
.ad--phone .ad-toast{top:95px}
.ad--phone .ad-skel{inset:90px 0 0}

.ad--narrow .ad-brand,.ad--narrow .ad-sim{display:none}
.ad--narrow .ad-tab{padding:0 9px}

/* ---------------------------------------------------------------- compact climate rows (portrait) */
.ad-acrow{padding:0 10px 8px}
.ad--port .ad-acrow .ad-t,.ad-acrow .ad-t{--slot:48px;--th:52px;--pad:4px;--txl:calc(var(--pad) + var(--slot) + 10px);margin:0 -6px}
.ad--port .ad-acrow{padding:0 10px 6px}
.ad-acrow .ad-n{font-size:15px}
.ad-acrow .ad-ctl{gap:6px}
.ad-sp{flex:1}
.ad-chip{height:44px;min-width:72px;padding:0 14px;border-radius:14px;font-size:13.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .2s,transform .14s}
.ad-chip:active{transform:scale(.95)}
.ad-chip:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.ad-chip[data-m=cooling],.ad-chip[data-m=dry],.ad-chip[data-m=fan]{background:linear-gradient(145deg,#5ab0ff,#2e86ff)}
.ad-chip[data-m=heating]{background:linear-gradient(145deg,#ffb37a,#f0631f)}
.ad-chip[aria-pressed=true]{background:rgba(255,170,80,.24);color:#ffb36b;box-shadow:inset 0 0 0 1px rgba(255,170,80,.45)}
.ad-ib.sm{background:rgba(255,255,255,.10)}
.ad-temp.sm{flex:none;width:58px;font-size:24px;line-height:44px}
.ad-temp.sm small{font-size:16px;vertical-align:baseline}

/* ---------------------------------------------------------------- media (owner style) */
.ad-np{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:14px 18px 14px 14px;border-radius:var(--r);background:var(--off);margin-bottom:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.10),0 8px 18px -10px rgba(0,0,0,.45);transition:background-color .2s}
.ad-np.on{background:var(--on)}
.ad-art{position:relative;width:132px;height:132px;border-radius:14px;overflow:hidden;flex:none;background:#1b2436;box-shadow:0 10px 22px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);transition:width .25s}
.ad-art.wide{width:235px}
.ad-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ad-art.dimmed svg{filter:saturate(.45) brightness(.55)}
.ad-prog{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.ad-prog[hidden]{display:none}
.ad-pl{position:relative;height:3px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.ad-pl i{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.85);border-radius:inherit}
.ad-npt{min-width:0}
.ad-npd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ad-npdev{font-size:14px;font-weight:600;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-pill{flex:none;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:600;background:rgba(255,255,255,.10);color:var(--sub)}
.ad-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ad-pill[data-s=playing],.ad-pill[data-s=on]{background:rgba(190,150,255,.18);color:#d7c2ff}
.ad-npti{margin-top:6px;font-size:22px;font-weight:700;line-height:27px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-npar{font-size:14px;line-height:19px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-npc{display:flex;align-items:center;gap:6px;margin-top:8px}
.ad-npc .ad-ib[hidden]{display:none}
.ad-vol2{display:flex;align-items:center;gap:10px;flex:1;min-width:110px;margin-left:8px;color:var(--sub)}
.ad-volg{width:18px;height:18px;flex:none}
.ad-vt{position:relative;flex:1;height:44px;--v:30%}
.ad-vt i{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(255,255,255,.18)}
.ad-vt i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:inherit;background:#fff}
.ad-vt b{position:absolute;top:50%;left:var(--v);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.ad-vt:not(.on) i::after,.ad-vt:not(.on) b{opacity:.55}
.ad-vt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;touch-action:none}
.ad-vt:focus-within b{outline:2px solid var(--acc2);outline-offset:2px}
.ad-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-radius:var(--r);background:var(--off);transition:background-color .11s linear;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.10),0 8px 18px -10px rgba(0,0,0,.45)}
.ad-row.on{background:var(--on)}
.ad-row>.ad-t{background:transparent!important;box-shadow:none!important}
.ad-row>.ad-t::after{display:none}
.ad-rowc{display:flex;align-items:center;gap:12px;padding-right:12px}
.ad-rowc .ad-chip{min-width:52px;height:44px;padding:0 12px;background:rgba(255,255,255,.08)}
.ad-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ad--port .ad-np{grid-template-columns:minmax(0,1fr);padding:12px}
.ad--port .ad-art.wide{width:100%;height:150px}
.ad--port .ad-art:not(.wide){width:150px;height:150px}
.ad--port .ad-npti{font-size:19px;line-height:24px}
.ad--port .ad-vol2{min-width:90px}
.ad--port .ad-rowc{gap:12px;padding-right:10px}
.ad--port .ad-rowc .ad-chip{min-width:72px;padding:0 8px;font-size:12px}

/* ---------------------------------------------------------------- energy summary strip */
.ad-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:var(--th);border-radius:var(--r);background:var(--off);margin-bottom:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.10),0 8px 18px -10px rgba(0,0,0,.45)}
.ad-kv{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 18px;min-width:0}
.ad-kv+.ad-kv{box-shadow:inset 1px 0 0 rgba(255,255,255,.08)}
.ad-kv .k{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);white-space:nowrap}
.ad-kv b{font-size:20px;font-weight:500;line-height:24px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ad-kv b small{font-size:12.5px;font-weight:500;margin-left:3px;color:var(--sub)}
.ad--port .ad-kv{padding:0 10px}
.ad--port .ad-kv .k{font-size:10px;letter-spacing:.08em}
.ad--port .ad-kv b{font-size:16px}

/* ---------------------------------------------------------------- TV remote (approved design) */
.ad-rm{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,9,18,.72)}
.ad-rmc{position:relative;width:min(380px,100%);max-height:100%;overflow:auto;padding:18px 22px 22px;border-radius:30px;background:linear-gradient(180deg,#2d3f5f,#1d2b45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -20px rgba(0,0,0,.75);scrollbar-width:none}
.ad-rmh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.ad-rmh b{font-size:16px;font-weight:600}
.ad-rmh span{display:block;margin-top:2px;font-size:12.5px;color:var(--sub)}
.ad-rmx{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ad-rmx svg{width:14px;height:14px}
.ad-k{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22),0 4px 10px -4px rgba(0,0,0,.55);
  transition:transform .1s,background-color .15s}
.ad-k:active,.ad-k.press{transform:scale(.92);background:rgba(255,255,255,.22)}
.ad-k svg{width:20px;height:20px}
.ad-k.pw{background:linear-gradient(145deg,#ff7a6b,#d93a3a);box-shadow:0 4px 12px -2px rgba(217,58,58,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.ad-rmrow{display:flex;justify-content:space-between;align-items:center}
.ad-dpad{position:relative;width:196px;height:196px;margin:18px auto;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.14),rgba(255,255,255,.05) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -10px rgba(0,0,0,.6)}
.ad-dpad button{position:absolute;display:grid;place-items:center;width:48px;height:48px;color:rgba(255,255,255,.85)}
.ad-dpad button svg{width:18px;height:18px}
.ad-dpad .u{left:74px;top:6px}.ad-dpad .d{left:74px;bottom:6px}.ad-dpad .l{left:6px;top:74px}.ad-dpad .r{right:6px;top:74px}
.ad-dpad .ok{left:58px;top:58px;width:80px;height:80px;border-radius:50%;font-size:16px;font-weight:700;letter-spacing:.06em;color:#fff;
  background:linear-gradient(180deg,#4b6fa6,#30507f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -6px rgba(0,0,0,.6)}
.ad-mid{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:14px;align-items:center;margin-top:18px}
.ad-rocker{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:56px;height:238px;padding:4px 0;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.2)}
.ad-rocker button{display:grid;place-items:center;width:52px;height:64px;color:#fff;font-size:22px;font-weight:300;border-radius:26px}
.ad-rocker span{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--sub)}
.ad-pad{display:grid;grid-template-columns:repeat(3,52px);gap:10px;justify-content:center}
.ad-pad .z{grid-column:2}
.ad-media{display:flex;justify-content:center;gap:16px;margin-top:18px}
.ad-chan{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:600;background:rgba(190,150,255,.18);color:#d7c2ff}
.ad-chan{font-style:normal}
.ad--port .ad-rm{padding:12px 10px}
.ad--phone .ad-rm{padding-top:40px}
.ad--port .ad-rmc{padding:16px 16px 18px}
.ad--port .ad-mid{grid-template-columns:48px minmax(0,1fr) 48px;gap:10px}
.ad--port .ad-rocker{width:48px;height:208px}
.ad--port .ad-rocker button{width:46px}
.ad--port .ad-pad{grid-template-columns:repeat(3,46px);gap:8px}
.ad--port .ad-pad .ad-k{width:46px;height:46px}
.ad--port .ad-dpad{width:176px;height:176px;margin:14px auto}
.ad--port .ad-dpad .u{left:64px;top:2px}.ad--port .ad-dpad .d{left:64px;bottom:2px}.ad--port .ad-dpad .l{left:2px;top:64px}.ad--port .ad-dpad .r{right:2px;top:64px}
.ad--port .ad-dpad .ok{left:52px;top:52px;width:72px;height:72px}

.ad-rm{opacity:0;transition:opacity .18s}
.ad-rm.show{opacity:1}
.ad-rmc{transform:translateY(12px) scale(.98);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.ad-rm.show .ad-rmc{transform:none}
.ad-rmt{font-style:normal}
.ad-chan[hidden]{display:none}
.ad-k:focus-visible,.ad-rmx:focus-visible,.ad-dpad button:focus-visible,.ad-rocker button:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.ad-k.pw[aria-pressed=false]{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));box-shadow:inset 0 0 0 1px rgba(255,120,110,.55),0 4px 10px -4px rgba(0,0,0,.55)}
.ad-k[data-k=mute][aria-pressed=true]{background:rgba(255,170,80,.28);box-shadow:inset 0 0 0 1px rgba(255,170,80,.6)}
.ad-dpad button:active,.ad-dpad button.press,.ad-rocker button:active,.ad-rocker button.press{background:rgba(255,255,255,.14)}
.ad-dpad button{border-radius:50%}
.ad-dpad .ok:active,.ad-dpad .ok.press{transform:scale(.94)}
.ad-rm{touch-action:manipulation}
/* landscape tablet: two columns so the whole remote fits the screen (D-pad + nav left, numbers + rockers right, playback under them) */
.ad--land .ad-rmc{width:660px;max-height:none;overflow:visible;padding:20px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:16px;
  grid-template-rows:auto 52px 196px 52px;grid-template-areas:"h h" "r1 mid" "dp mid" "r2 md"}
.ad--land .ad-rmc>:nth-child(1){grid-area:h;margin:0}
.ad--land .ad-rmc>:nth-child(2){grid-area:r1}
.ad--land .ad-rmc>:nth-child(3){grid-area:dp;margin:0 auto}
.ad--land .ad-rmc>:nth-child(4){grid-area:r2}
.ad--land .ad-rmc>:nth-child(5){grid-area:mid;margin:0;align-self:center}
.ad--land .ad-rmc>:nth-child(6){grid-area:md;margin:0;align-self:center}
.ad-rmh{align-items:flex-start}   /* close key starts at the panel padding, so top and bottom insets match */
.ad--port .ad-rmc{padding:18px 16px 18px}
.ad--land .ad-rmc{padding:24px}
.ad--port .ad-mid,.ad--port .ad-media{margin-top:14px}
.ad--land .ad-rmc{width:712px}
.ad--land .ad-mid{gap:12px}

/* ---------------------------------------------------------------- slide to dim */
.ad-t.dim{touch-action:pan-y}   /* horizontal finger moves dim the light, vertical ones still scroll */
.ad-t.sliding{transform:none!important}
.ad-sread{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:6;min-width:46px;height:28px;padding:0 9px;border-radius:14px;display:grid;place-items:center;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;background:rgba(10,18,32,.78);box-shadow:inset 0 0 0 1px rgba(255,214,140,.55);pointer-events:none}
.ad-t.sliding .ad-line{opacity:1;transition:none}
/* guide highlight: a ring around the tile, never a glow behind the icon */
.ad-hl{animation:ad-hl 1.6s ease-out}
@keyframes ad-hl{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 0 0 0 rgba(143,208,255,0)}20%,60%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 3px rgba(143,208,255,.95)}40%,80%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 3px rgba(143,208,255,.25)}}

/* ---------------------------------------------------------------- How to play: a quiet side note in the site's muted grey */
.ad-body{display:grid;gap:22px;align-items:start}
.ad-guide{--g:var(--mut,#5c6573);--g2:var(--ink2,#3b434d);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.6;color:var(--g)}
.ad-gd>summary{display:block;width:max-content;list-style:none;padding:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g);cursor:pointer}
.ad-gd>summary::-webkit-details-marker{display:none}
.ad-gd>summary:focus-visible{outline:2px solid var(--g2);outline-offset:3px;border-radius:3px}
/* each item: [number 2.2ch, right aligned, tabular][10px][text], one line; lists are real grids so rows line up across columns */
.ad-guide ol{list-style:none;margin:0;padding:0;display:grid;row-gap:8px;column-gap:40px;grid-template-columns:minmax(0,1fr)}
.ad-guide li{display:grid;grid-template-columns:2.2ch 10px minmax(0,1fr);align-items:baseline;min-width:0;padding:0}
.ad-gn{grid-column:1;text-align:right;font-variant-numeric:tabular-nums;color:var(--g)}
.ad-guide li button{grid-column:3;display:block;width:100%;min-width:0;padding:0;margin:0;border:0;background:none;font:inherit;line-height:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-guide li button:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ad-guide li button:focus-visible{outline:2px solid var(--g2);outline-offset:2px}
.ad-guide b{font-weight:500;color:var(--g2)}
.ad-gd>summary{margin:0 0 10px}
.ad-gkb{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--g)}
.ad-body.tab .ad-guide ol{grid-template-columns:repeat(3,max-content);grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:72px}
@media (max-width:999px){.ad-body.tab .ad-guide ol{grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(6,auto);column-gap:64px}}
@media (min-width:860px){.ad-body.ph{grid-template-columns:400px minmax(0,360px);gap:56px;align-items:center}}
@media (max-width:859px) and (min-width:720px){.ad-body.ph .ad-guide ol{grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:64px}}
@media (max-width:719px){
  .ad-body{gap:12px}
  .ad-body .ad-guide{order:-1}
  .ad-body.tab .ad-guide ol,.ad-body.ph .ad-guide ol{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .ad-guide li button{white-space:normal}
  .ad-gd>summary{display:flex;align-items:center;gap:8px;min-height:44px;margin:0}
  .ad-gd[open]>summary{margin-bottom:6px}
  .ad-gd>summary::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
  .ad-gd[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
}
.ad-hl{animation:ad-hl 1.4s ease-out}
@keyframes ad-hl{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 0 0 0 rgba(143,208,255,0)}30%,65%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 2px rgba(143,208,255,.7)}}
@media (prefers-reduced-motion:reduce){.ad-hl{animation:none;box-shadow:0 0 0 3px rgba(143,208,255,.95)}}
@media (min-width:860px){.ad-phonewrap .ad-hint{margin:0 0 18px;left:200px;transform:translateX(-50%)}}
/* readout sits over the icon while sliding, so the name and state stay readable */
.ad-sread{right:auto;top:auto;left:calc(var(--pad) + var(--slot) / 2);bottom:5px;transform:translateX(-50%);min-width:42px;height:22px;font-size:12px;border-radius:11px}

/* calm vertical rhythm: the same 32px from the device to the note and from the note to the caption */
.ad-body{gap:32px}
.ad-body+.ad-label{margin-top:32px}
@media (max-width:719px){.ad-body{gap:12px}.ad-body+.ad-label{margin-top:20px}}

/* caption sits right under the device, left aligned; keyboard hint aligns with the list text column */
.ad-dev{min-width:0}
.ad-dev>.ad-label{margin:12px 0 0;max-width:none;text-align:left;font-size:13px;line-height:1.5;font-weight:400;color:var(--mut,#5c6573)}
.ad-gkb{margin:8px 0 0;padding-left:calc(2.2ch + 10px);font-size:14px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-gkb span{font-size:13px}
@media (max-width:719px){.ad-gkb{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ad-dev>.ad-label{margin-top:10px}}



/* the two notes stacked under the device (tablet) or at the top of the guide column (phone beside): caption, then keyboard */
.ad-body{row-gap:12px}
.ad-notes{margin:0 0 24px}
.ad-note{margin:0;font-size:13px;line-height:1.5;color:var(--mut,#5c6573);white-space:nowrap}
.ad-note+.ad-note{margin-top:4px}
.ad-notes .ad-gkb{padding:0;overflow:visible}
.ad-label-sm{display:none}
@media (min-width:860px){.ad-body.ph{column-gap:56px}}
@media (max-width:719px){
  .ad-label-sm{display:block}
  .ad-notes{margin:0}
  .ad-notes .ad-note:first-child{display:none}
  .ad-notes .ad-gkb{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
}