:root{--bg:oklch(18% .018 62);--bg2:oklch(15.5% .016 62);--card:oklch(23.5% .02 62);--card2:oklch(28.5% .023 64);--line:oklch(38% .023 64/.5);--line-soft:oklch(36% .021 64/.3);--ink:oklch(97% .01 72);--mut:oklch(76% .02 66);--dim:oklch(62% .02 66);--amber:oklch(84% .15 74);--amber-ink:oklch(27% .08 60);--teal:oklch(82% .1 195);--rose:oklch(74% .15 20);--glow:oklch(88% .16 82);--sp:cubic-bezier(.34, 1.4, .5, 1);--sh:0 1px 0 oklch(100% 0 0/.05) inset, 0 16px 34px -18px oklch(0% 0 0/.55);--r:22px}html.light{--bg:oklch(97.5% .01 76);--bg2:oklch(95.5% .012 76);--card:oklch(100% 0 0);--card2:oklch(96.5% .01 76);--line:oklch(88% .014 76);--line-soft:oklch(92% .012 76);--ink:oklch(25% .02 60);--mut:oklch(47% .02 62);--dim:oklch(60% .018 62);--amber:oklch(70% .15 66);--amber-ink:oklch(99% .02 70);--glow:oklch(82% .16 80);--sh:0 1px 2px oklch(20% .02 60/.05), 0 18px 38px -22px oklch(30% .03 60/.24)}*{box-sizing:border-box;margin:0}html{color-scheme:dark}html.light{color-scheme:light}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100dvh;font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}.tnum{font-variant-numeric:tabular-nums}.wrap{max-width:1120px;margin:0 auto;padding:18px clamp(14px,3vw,28px) 96px}svg{display:block}.top{align-items:center;gap:13px;margin-bottom:18px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand .mk{width:42px;height:42px;color:var(--amber-ink);background:linear-gradient(140deg, var(--amber), oklch(78% .13 42));border-radius:13px;place-items:center;display:grid;box-shadow:0 8px 18px -7px oklch(84% .15 74/.65)}.brand .mk svg{width:22px;height:22px}.brand b{letter-spacing:-.02em;font-size:17px;font-weight:750;display:block}.brand span{color:var(--dim);font-size:12px}.top .sp{flex:1}.icon-btn{border:1px solid var(--line);background:var(--card);width:40px;height:40px;color:var(--mut);cursor:pointer;transition:all .25s var(--sp);border-radius:12px;place-items:center;font-size:16px;display:grid}.icon-btn:hover{color:var(--amber);border-color:color-mix(in oklch, var(--amber) 45%, var(--line));transform:translateY(-1px)}.hero{border:1px solid var(--line-soft);background:radial-gradient(120% 130% at 100% 0%, oklch(42% .09 55/.6), transparent 60%), linear-gradient(150deg, var(--card2), var(--card));box-shadow:var(--sh);border-radius:26px;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:26px 28px;display:grid;position:relative;overflow:hidden}.hero:after{content:"";background:radial-gradient(circle, var(--glow), transparent 62%);opacity:.3;pointer-events:none;border-radius:50%;width:130px;height:130px;position:absolute;top:-60px;right:180px}.greet{color:var(--dim);font-size:13px;font-weight:600}.hero h1{letter-spacing:-.03em;margin:4px 0 10px;font-size:clamp(26px,4.4vw,38px);font-weight:750}.status{color:var(--mut);font-size:13.5px}.status b{color:var(--ink)}.weather{border:1px solid var(--line);background:color-mix(in oklch, var(--card) 60%, transparent);border-radius:14px;align-items:center;gap:10px;margin-top:16px;padding:9px 14px;display:inline-flex}.weather svg{width:22px;height:22px;color:var(--amber)}.weather b{font-size:15px}.weather span{color:var(--dim);font-size:12px}.wfore{border-left:1px solid var(--line);gap:14px;margin-left:8px;padding-left:12px;display:flex}.wfore div{text-align:center;color:var(--dim);font-size:11px}.wfore b{color:var(--mut);font-size:12.5px;display:block}.climate{text-align:center}.dialwrap{cursor:grab;touch-action:none;user-select:none;width:200px;height:200px;position:relative}.dialwrap:active{cursor:grabbing}.dialwrap svg.gauge{width:100%;height:100%}.g-tr{fill:none;stroke:var(--card2);stroke-width:12px;stroke-linecap:round}.g-fl{fill:none;stroke:url(#tgrad);stroke-width:12px;stroke-linecap:round;transition:stroke-dasharray .3s var(--sp)}.g-hd{fill:#fff;stroke:var(--amber);stroke-width:3.5px;transition:cx .3s var(--sp), cy .3s var(--sp);filter:drop-shadow(0 2px 5px oklch(0% 0 0/.45))}.dial-c{text-align:center;pointer-events:none;place-content:center;display:grid;position:absolute;inset:0}.dial-c .tgt{letter-spacing:-.04em;font-size:46px;font-weight:750;line-height:1}.dial-c .tgt sup{font-size:19px;font-weight:600;top:-.8em}.dial-c .st{color:var(--dim);margin-top:7px;font-size:12px}.dial-c .st b{color:var(--amber)}.climbtns{justify-content:center;gap:12px;margin-top:12px;display:flex}.climbtns button{border:1px solid var(--line);background:var(--card);width:42px;height:42px;color:var(--ink);cursor:pointer;transition:all .2s var(--sp);border-radius:13px;font-size:21px}.climbtns button:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-1px)}@media (width<=720px){.hero{text-align:center;grid-template-columns:1fr;justify-items:center}.hero .hero-l{justify-self:stretch}.weather{flex-wrap:wrap}}.scenes{grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0;display:grid}@media (width<=640px){.scenes{grid-template-columns:repeat(2,1fr)}}.scene{border:1px solid var(--line-soft);background:var(--card);cursor:pointer;font:inherit;color:var(--ink);text-align:left;transition:all .28s var(--sp);box-shadow:var(--sh);border-radius:15px;align-items:center;gap:11px;padding:12px 14px;display:flex}.scene:hover{border-color:color-mix(in oklch, var(--amber) 45%, var(--line));transform:translateY(-2px)}.scene:active{transform:scale(.97)}.scene .si{background:var(--card2);border-radius:11px;flex:none;place-items:center;width:38px;height:38px;font-size:18px;display:grid}.scene b{font-size:13.5px;font-weight:650;display:block}.scene .d{color:var(--dim);font-size:11px}.tabs{scrollbar-width:none;gap:6px;margin-bottom:14px;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{border:1px solid var(--line);color:var(--mut);cursor:pointer;transition:all .24s var(--sp);background:0 0;border-radius:99px;flex:none;padding:8px 15px;font:600 13px inherit}.tab[aria-selected=true]{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}.room{display:none}.room.active{animation:fade .35s var(--sp);display:block}@keyframes fade{0%{opacity:0;transform:translateY(8px)}}.tiles{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:13px;display:grid}.tile{border:1px solid var(--line-soft);background:var(--card);border-radius:var(--r);box-shadow:var(--sh);transition:transform .26s var(--sp), border-color .2s;flex-direction:column;min-height:138px;padding:16px;display:flex;position:relative;overflow:hidden}.tile:hover{border-color:color-mix(in oklch, var(--amber) 24%, var(--line));transform:translateY(-2px)}.light,.plug{cursor:pointer}.hd{justify-content:space-between;align-items:center;display:flex}.ic{background:var(--card2);width:42px;height:42px;color:var(--mut);transition:all .3s var(--sp);border-radius:13px;place-items:center;display:grid}.ic svg{width:22px;height:22px}.nm{margin-top:auto;font-size:14px;font-weight:650}.sub{color:var(--dim);margin-top:2px;font-size:12px}.sw{background:var(--card2);cursor:pointer;width:48px;height:28px;transition:background .28s var(--sp);border:0;border-radius:99px;flex:none;position:relative}.sw i{width:22px;height:22px;transition:left .28s var(--sp);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 2px 5px oklch(0% 0 0/.35)}.sw[aria-checked=true]{background:var(--amber)}.sw[aria-checked=true] i{left:23px}.range{appearance:none;background:var(--card2);cursor:pointer;border-radius:99px;outline:none;width:100%;height:6px;margin-top:13px}.range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--amber);border-radius:50%;width:18px;height:18px;box-shadow:0 2px 6px oklch(0% 0 0/.35)}.range::-moz-range-thumb{background:var(--amber);border:0;border-radius:50%;width:18px;height:18px}.glow{pointer-events:none;opacity:0;background:radial-gradient(130% 90% at 78% 4%, var(--glow), transparent 60%);transition:opacity .4s;position:absolute;inset:0}.light[data-on=true] .glow{opacity:calc(var(--b,.7) * .55)}.light[data-on=true]{border-color:color-mix(in oklch, var(--glow) 40%, var(--line))}.light[data-on=true] .ic{background:color-mix(in oklch, var(--amber) 22%, var(--card2));color:var(--amber);box-shadow:0 0 18px -4px var(--glow)}.light[data-on=false] .bri{opacity:.4}.plug[data-on=true] .ic{background:color-mix(in oklch, var(--teal) 22%, var(--card2));color:var(--teal)}.blind .win{background:linear-gradient(oklch(62% .11 235),oklch(72% .1 208) 55%,oklch(82% .09 88));border-radius:13px;height:62px;margin-bottom:11px;position:relative;overflow:hidden}.blind .sun{background:oklch(96% .09 88);border-radius:50%;width:18px;height:18px;position:absolute;top:10px;right:14px;box-shadow:0 0 18px oklch(96% .11 86/.7)}.blind .shade{transition:height .45s var(--sp);background:repeating-linear-gradient(oklch(34% .02 64),oklch(34% .02 64) 5px,oklch(30% .02 64) 5px 6px);border-bottom:1px solid oklch(22% .02 64);position:absolute;inset:0 0 auto}.media .art{background:linear-gradient(140deg, var(--teal), oklch(60% .16 300));color:oklch(18% .03 200);border-radius:14px;place-items:center;width:52px;height:52px;display:grid;position:relative}.media .art svg{width:22px;height:22px}.media .eq{align-items:flex-end;gap:2px;height:12px;display:flex;position:absolute;bottom:7px;right:7px}.media .eq i{background:oklch(100% 0 0/.9);border-radius:2px;width:2.5px;height:40%}.media[data-playing=true] .eq i{animation:.9s ease-in-out infinite eq}.media[data-playing=true] .eq i:nth-child(2){animation-delay:.15s}.media[data-playing=true] .eq i:nth-child(3){animation-delay:.3s}.media[data-playing=true] .eq i:nth-child(4){animation-delay:.45s}@keyframes eq{0%,to{height:28%}50%{height:100%}}.media .track{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mctl{align-items:center;gap:6px;margin-top:11px;display:flex}.mctl button{border:1px solid var(--line);background:var(--card2);min-width:32px;height:32px;color:var(--ink);cursor:pointer;border-radius:9px;flex:none;padding:0 6px;font-size:12px;transition:all .2s}.mctl button:hover{border-color:var(--teal);color:var(--teal)}.mctl .play{background:var(--teal);border-color:var(--teal);color:oklch(20% .03 200);font-size:10px}.mctl .vol{height:5px;margin:0 0 0 4px}.sensor .readings{gap:18px;margin:8px 0 auto;display:flex}.sensor .readings b{letter-spacing:-.02em;font-size:25px;font-weight:750}.sensor .readings span{color:var(--dim);font-size:11px}.sensor .ic{color:var(--teal)}.cam .feed{background:linear-gradient(160deg,oklch(32% .04 250),oklch(22% .03 260));border-radius:13px;height:66px;margin:10px 0;position:relative;overflow:hidden}.cam .feed:after{content:"";background:repeating-linear-gradient(0deg,#0000 0 3px,oklch(100% 0 0/.03) 3px 4px);position:absolute;inset:0}.cam .feed:before{content:"";clip-path:polygon(0 100%,22% 52%,44% 76%,68% 28%,100% 68%,100% 100%);background:oklch(15% .02 260/.6);height:28px;position:absolute;inset:auto 0 0}.cam .rec{color:var(--rose);letter-spacing:.06em;font-size:9.5px;font-weight:700;position:absolute;top:7px;left:9px}.cam .cts{color:oklch(86% .02 260/.8);font:600 9.5px ui-monospace,monospace;position:absolute;bottom:5px;right:9px}.cam .nm{margin-top:0}.energy{border:1px solid var(--line-soft);background:var(--card);border-radius:var(--r);box-shadow:var(--sh);margin-top:18px;padding:18px}.energy-h{align-items:center;gap:10px;margin-bottom:8px;display:flex}.energy-h .eic{background:color-mix(in oklch, var(--amber) 18%, var(--card2));width:30px;height:30px;color:var(--amber);border-radius:9px;place-items:center;display:grid}.energy-h .eic svg{width:17px;height:17px}.energy-h .now{letter-spacing:-.02em;font-size:22px;font-weight:750}.energy-h .lbl{color:var(--dim);font-size:12px}.energy-h .rt{color:var(--dim);margin-left:auto;font-size:12.5px}.energy-h .rt b{color:var(--ink)}.echart{width:100%;height:auto}.e-grid{stroke:var(--line-soft);stroke-dasharray:1 6}.e-ax{fill:var(--dim);font:9.5px ui-sans-serif}.e-area{fill:url(#eFill)}.e-line{fill:none;stroke:var(--amber);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.toasts{z-index:65;gap:8px;display:grid;position:fixed;bottom:76px;left:50%;transform:translate(-50%)}.toast{background:var(--ink);color:var(--bg);animation:pop .42s var(--sp);border-radius:12px;padding:11px 17px;font-size:13px;font-weight:600;box-shadow:0 16px 40px -12px oklch(0% 0 0/.5)}@keyframes pop{0%{opacity:0;transform:translateY(10px)}}:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:10px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
