:root{--buncss-light:initial;--buncss-dark: ;color-scheme:light;--font-sans:"Anuphan","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;--bg:#f5f5f5;--bg-glow-a:#2563eb1a;--bg-glow-b:#0ea5e91a;--surface:#fff;--surface-muted:#fafafa;--surface-glass:#ffffffe0;--border:#e5e5e5;--border-strong:#d4d4d4;--text:#0a0a0a;--text-muted:#525252;--brand:#2563eb;--brand-strong:#1d4ed8;--brand-ink:#fff;--brand-soft:#dbeafe;--brand-line:#2563eb47;--hero-from:#2563eb;--hero-to:#1e3a8a;--hero-ink:#f8fafc;--hero-ink-soft:#dbeafed6;--hero-eyebrow:#bfdbfe;--success:#047857;--success-soft:#d1fae5;--danger:#dc2626;--danger-soft:#fee2e2;--warn:#b45309;--warn-soft:#fef3c7;--shadow-sm:0 1px 2px #0a0a0a0d,0 2px 6px #0a0a0a0d;--shadow-md:0 8px 24px #0a0a0a17;--shadow-lg:0 18px 44px #0a0a0a29;--r-sm:.625rem;--r-md:.875rem;--r-lg:1.125rem;--r-xl:1.5rem;--r-full:999px;--tap:2.875rem;--gutter:1rem;--tabbar-h:4rem}:root[data-theme=dark]{--buncss-light: ;--buncss-dark:initial;color-scheme:dark;--bg:#0a0a0a;--bg-glow-a:transparent;--bg-glow-b:transparent;--surface:#171717;--surface-muted:#1f1f1f;--surface-glass:#0a0a0adb;--border:#262626;--border-strong:#404040;--text:#fafafa;--text-muted:#a3a3a3;--brand:#60a5fa;--brand-strong:#93c5fd;--brand-ink:#0a0a0a;--brand-soft:#60a5fa24;--brand-line:#60a5fa57;--hero-from:#1e40af;--hero-to:#0a0a0a;--hero-ink:#fafafa;--hero-ink-soft:#dbeafec7;--hero-eyebrow:#93c5fd;--success:#34d399;--success-soft:#34d39924;--danger:#f87171;--danger-soft:#f8717124;--warn:#fbbf24;--warn-soft:#fbbf2424;--shadow-sm:0 1px 2px #0006;--shadow-md:0 8px 24px #00000075;--shadow-lg:0 18px 44px #0009}*,*:before,*:after{box-sizing:border-box}html{background:var(--bg);-webkit-text-size-adjust:100%;min-width:320px}body{color:var(--text);background:radial-gradient(60rem 28rem at 8% -8%,var(--bg-glow-a),transparent 70%),radial-gradient(50rem 26rem at 108% 2%,var(--bg-glow-b),transparent 70%),var(--bg);font-family:var(--font-sans);overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;background-attachment:fixed;min-height:100dvh;margin:0;font-size:1rem;line-height:1.55}h1,h2,h3,p{margin:0}button,input,textarea,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.app{display:flex;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .5rem);flex-direction:column;min-height:100dvh}.topbar{position:sticky;z-index:20;top:0}.appbar{display:flex;padding:calc(.7rem + env(safe-area-inset-top))var(--gutter).7rem;background:var(--surface-glass);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);align-items: center;gap:.75rem}.appbar__mark{display:grid;color:var(--brand-ink);background:linear-gradient(145deg,var(--brand),var(--brand-strong));box-shadow:var(--shadow-sm);border-radius:.75rem;flex:none;place-items: center;width:2.375rem;height:2.375rem}.appbar__text{display:grid;min-width:0}.appbar__title{letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9375rem;font-weight:700;line-height:1.25}.appbar__sub{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1.3}.appbar__end{display:flex;align-items: center;gap:.5rem;margin-left:auto}.tabbar{position:fixed;z-index:20;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:.375rem .5rem calc(.375rem + env(safe-area-inset-bottom));background:var(--surface-glass);border-top:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);gap:.25rem;inset:auto 0 0}.tabbar__item{display:grid;border-radius:var(--r-md);color:var(--text-muted);cursor:pointer;background:0 0;border:0;align-content: center;justify-items:center;gap:.125rem;min-height:3.25rem;padding:.35rem .2rem;transition:color .14s,background-color .14s;font-size:.75rem;font-weight:600}.tabbar__item[aria-current=page]{color:var(--brand);background:var(--brand-soft)}.tabbar__icon{position:relative;display:grid;place-items: center}.tabbar__badge{position:absolute;border-radius:var(--r-full);background:var(--brand);color:var(--brand-ink);text-align:center;min-width:1.05rem;height:1.05rem;padding:0 .2rem;font-size:.65rem;font-weight:700;line-height:1.05rem;top:-.1rem;right:-.35rem}.main{display:grid;padding:.875rem var(--gutter)1.25rem;flex:1;align-content: start;gap:.875rem}.screen{display:grid;animation:.2s ease-out screen-in;align-content: start;gap:.875rem}@keyframes screen-in{0%{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}.screen__head{display:grid;gap:.25rem;padding:0 .15rem}.screen__title{letter-spacing:-.02em;font-size:1.375rem;font-weight:700}.screen__lede{color:var(--text-muted);font-size:.875rem;line-height:1.55}.hero{display:grid;border-radius:var(--r-xl);color:var(--hero-ink);background:linear-gradient(155deg,var(--hero-from),var(--hero-to)78%);box-shadow:var(--shadow-md);gap:.875rem;padding:1.25rem}.hero__eyebrow{display:inline-flex;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-eyebrow);align-items: center;gap:.4rem;font-size:.7rem;font-weight:700}.hero__title{letter-spacing:-.02em;font-size:1.5rem;font-weight:700;line-height:1.25}.hero__text{color:var(--hero-ink-soft);font-size:.875rem;line-height:1.6}.card{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-sm);padding:1.125rem}.card__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items: flex-start;gap:.75rem;margin-bottom:1rem}.card__head>:first-child{flex:12rem}.card__head>.pill{flex:none}.card__head>.btn{flex:100%;min-height:2.75rem}.card__title{letter-spacing:-.01em;font-size:1.0625rem;font-weight:700}.card__sub{color:var(--text-muted);margin-top:.2rem;font-size:.8125rem;line-height:1.5}.stack{display:grid;gap:.75rem}.row{display:flex;flex-wrap:wrap;align-items: center;gap:.5rem}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.tile{display:grid;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-muted);gap:.3rem;padding:.7rem .75rem}.tile__label{letter-spacing:.04em;color:var(--text-muted);text-transform:uppercase;font-size:.7rem;font-weight:700}.tile__value{display:flex;align-items: center;gap:.4rem;font-size:.9375rem;font-weight:700}.dot{background:var(--text-muted);border-radius:50%;flex:none;width:.5rem;height:.5rem}.dot--on{background:var(--success);box-shadow:0 0 0 3px var(--success-soft)}.dot--off{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}.dot--idle{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}.btn{display:inline-flex;min-height:var(--tap);border-radius:var(--r-md);background:var(--brand);color:var(--brand-ink);text-align:center;cursor:pointer;border:1px solid #0000;justify-content:center;align-items: center;gap:.5rem;padding:.7rem 1.1rem;transition:filter .14s,transform .14s,background-color .14s;font-size:1rem;font-weight:700;line-height:1.2}.btn:hover:not(:disabled){filter:brightness(1.06)}.btn:active:not(:disabled){transform:scale(.985)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--block{width:100%}.btn--soft{background:var(--surface-muted);color:var(--text);border-color:var(--border)}.btn--ghost{color:var(--text);border-color:var(--border-strong);background:0 0}.btn--danger{color:var(--danger);border-color:var(--danger-soft);background:0 0}.btn--danger:hover:not(:disabled){background:var(--danger-soft)}.btn--sm{border-radius:var(--r-sm);min-height:2.25rem;padding:.35rem .75rem;font-size:.8125rem}.btn--icon{border-radius:var(--r-sm);color:var(--text-muted);background:0 0;border-color:#0000;width:2.25rem;min-height:2.25rem;padding:0}.btn--icon:hover:not(:disabled){background:var(--surface-muted);color:var(--text)}.field{display:grid;gap:.375rem}.field__top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}.field__label{font-size:.875rem;font-weight:700}.field__count{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.75rem}.field__hint{color:var(--text-muted);font-size:.75rem;line-height:1.5}.input,.textarea,.select{min-height:var(--tap);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);outline:none;width:100%;padding:.7rem .875rem;transition:border-color .14s,box-shadow .14s;font-size:1rem}.input::placeholder,.textarea::placeholder{color:var(--text-muted);opacity:.75}.input:focus,.textarea:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.textarea{resize:vertical;min-height:7.5rem;line-height:1.6}.select{appearance:none;padding-right:2.75rem}.control{position:relative}.control__end{position:absolute;color:var(--text-muted);top:50%;right:.4rem;transform:translateY(-50%)}.control__end--static{pointer-events:none;display:grid;place-items: center;right:.85rem}.input--with-end{padding-right:3rem}.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{display:inline-flex;border:1px solid var(--brand-line);border-radius:var(--r-full);background:var(--brand-soft);color:var(--brand);align-items: center;gap:.35rem;max-width:100%;padding:.3rem .35rem .3rem .8rem;font-size:.875rem;font-weight:700}.chip__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip__close{display:grid;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;place-items: center;width:1.75rem;height:1.75rem}.chip__close:hover:not(:disabled){background:#7f7f7f2e}.chip__close:disabled{opacity:.4;cursor:not-allowed}.pill{display:inline-flex;border-radius:var(--r-full);background:var(--surface-muted);color:var(--text-muted);white-space:nowrap;flex:none;align-items: center;gap:.35rem;padding:.25rem .6rem;font-size:.75rem;font-weight:700}.pill--success{background:var(--success-soft);color:var(--success)}.pill--danger{background:var(--danger-soft);color:var(--danger)}.preset-list{display:grid;gap:.5rem}.preset{display:flex;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:inherit;text-align:left;cursor:pointer;align-items: center;gap:.75rem;width:100%;padding:.75rem;transition:border-color .14s,transform .14s,background-color .14s}.preset:hover:not(:disabled){border-color:var(--brand-line);background:var(--surface-muted)}.preset:active:not(:disabled){transform:scale(.99)}.preset:disabled{opacity:.5;cursor:not-allowed}.preset__icon{display:grid;border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand);flex:none;place-items: center;width:2.5rem;height:2.5rem}.preset__body{display:grid;min-width:0}.preset__label{font-size:.9375rem;font-weight:700}.preset__title{color:var(--text-muted);overflow-wrap:anywhere;margin-top:.1rem;font-size:.8125rem;line-height:1.45}.preset__end{color:var(--text-muted);flex:none;margin-left:auto}.room-list{display:grid;gap:.5rem}.room{display:flex;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:inherit;text-align:left;cursor:pointer;align-items: center;gap:.75rem;width:100%;padding:.75rem;transition:border-color .14s,transform .14s,background-color .14s}.room:hover{border-color:var(--brand-line);background:var(--surface-muted)}.room:active{transform:scale(.99)}.room__icon{display:grid;border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand);flex:none;place-items: center;width:2.5rem;height:2.5rem}.room__body{display:grid;min-width:0}.room__name{overflow-wrap:anywhere;font-size:.9375rem;font-weight:700}.room__meta{color:var(--text-muted);margin-top:.1rem;font-size:.8125rem}.room__end{color:var(--text-muted);flex:none;margin-left:auto}.device-list{display:grid;list-style:none;gap:.5rem;margin:0;padding:0}.device{display:flex;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-muted);align-items: center;gap:.75rem;padding:.7rem .75rem}.device__icon{display:grid;border-radius:var(--r-md);background:var(--surface);color:var(--text-muted);flex:none;place-items: center;width:2.25rem;height:2.25rem}.device__body{display:grid;min-width:0}.device__name{overflow-wrap:anywhere;font-size:.9375rem;font-weight:700}.device__meta{color:var(--text-muted);margin-top:.1rem;font-size:.8125rem}.device>.pill,.device__remove{flex:none;margin-left:auto}.roomhead{display:flex;align-items: center;gap:.6rem;padding:0 .15rem}.roomhead__text{display:grid;min-width:0}.roomhead__name{letter-spacing:-.02em;overflow-wrap:anywhere;font-size:1.25rem;font-weight:700}.roomhead__meta{color:var(--text-muted);margin-top:.1rem;font-size:.8125rem}.roomhead>.btn--danger{flex:none;margin-left:auto}.banner{display:flex;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-muted);color:var(--text-muted);align-items: flex-start;gap:.625rem;padding:.75rem .875rem;font-size:.8125rem;line-height:1.55}.banner__icon{color:var(--text-muted);flex:none;margin-top:.05rem}.banner--warn{background:var(--warn-soft);color:var(--warn);border-color:#0000}.banner--warn .banner__icon{color:var(--warn)}.banner--danger{background:var(--danger-soft);color:var(--danger);border-color:#0000}.banner--danger .banner__icon{color:var(--danger)}.banner__link{font:inherit;color:var(--brand);text-decoration:underline;cursor:pointer;background:0 0;border:0;padding:0}.banner code{background:#7f7f7f29;border-radius:.35rem;padding:.05rem .3rem;font-size:.95em}.empty{display:grid;text-align:center;color:var(--text-muted);justify-items:center;gap:.6rem;padding:1.75rem 1rem;font-size:.875rem;line-height:1.55}.empty__icon{display:grid;border-radius:var(--r-lg);background:var(--surface-muted);color:var(--brand);place-items: center;width:3.25rem;height:3.25rem}.empty__title{color:var(--text);font-size:1rem;font-weight:700}.toast{position:fixed;left:.75rem;right:.75rem;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .75rem);z-index:40;display:flex;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-lg);animation:.22s ease-out toast-in;align-items: flex-start;gap:.625rem;padding:.8rem .9rem;font-size:.875rem;line-height:1.5}.toast__icon{flex:none;margin-top:.1rem}.toast__text{overflow-wrap:anywhere;min-width:0}.toast__close{flex:none;margin-left:auto}.toast--success{border-color:var(--success)}.toast--success .toast__icon{color:var(--success)}.toast--error{border-color:var(--danger)}.toast--error .toast__icon{color:var(--danger)}.toast--info .toast__icon{color:var(--brand)}@keyframes toast-in{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}.footnote{color:var(--text-muted);text-align:center;padding:0 .15rem;font-size:.75rem;line-height:1.55}.visually-hidden{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0}@media (min-width:30rem){:root{--gutter:1.25rem}.card__head>.btn{flex:none;min-height:2.25rem}.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.hero__title{font-size:1.75rem}}@media (min-width:52rem){:root{--gutter:1.5rem}.app{padding-bottom:2rem}.appbar{padding-top:calc(.85rem + env(safe-area-inset-top));padding-bottom:.85rem}.appbar__title{font-size:1rem}.tabbar{position:static;display:flex;padding:.5rem var(--gutter);border-top:0;border-bottom:1px solid var(--border);justify-content:center;gap:.375rem}.tabbar__item{display:flex;border-radius:var(--r-full);align-items: center;gap:.45rem;min-height:2.5rem;padding:.4rem 1rem;font-size:.9375rem}.main{padding:1.5rem var(--gutter)2.5rem;gap:1rem;width:min(48rem,100%);margin:0 auto}.screen__title{font-size:1.625rem}.hero{padding:1.75rem}.hero__title{font-size:2rem}.card{padding:1.375rem}.toast{width:min(24rem,100vw - 2.5rem);bottom:1.25rem;left:auto;right:1.25rem}}@media (min-width:72rem){.main{width:min(56rem,100%)}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}}.theme-toggle{display:grid;border:1px solid var(--border);border-radius:var(--r-full);color:var(--text-muted);background:var(--surface);cursor:pointer;flex:none;place-items: center;width:2.375rem;height:2.375rem;padding:0;transition:color .15s,border-color .15s,background .15s}.theme-toggle:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}.guide{border:1px solid var(--border);border-radius:var(--r-xl);color:var(--text);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden;width:min(26rem,100vw - 2rem);max-height:min(42rem,100dvh - 2rem);padding:0}.guide::backdrop{backdrop-filter:blur(2px);background:#0a0a0a8c}.guide__head{display:flex;padding:1.125rem var(--gutter).75rem;align-items: flex-start;gap:.75rem}.guide__head>div{flex:1;min-width:0}.guide__title{font-size:1.125rem;font-weight:700}.guide__sub{color:var(--text-muted);margin-top:.2rem;font-size:.8125rem}.guide__tabs{display:flex;padding:0 var(--gutter).875rem;gap:.375rem}.guide__tab{border:1px solid var(--border);border-radius:var(--r-full);font:inherit;color:var(--text-muted);background:var(--surface-muted);cursor:pointer;flex:1;min-height:2.25rem;padding:.35rem .5rem;font-size:.8125rem}.guide__tab[aria-selected=true]{color:var(--brand-strong);border-color:var(--brand-line);background:var(--brand-soft);font-weight:600}.guide__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.guide__track::-webkit-scrollbar{display:none}.guide__slide{scroll-snap-align:start;padding:0 var(--gutter)1rem;flex:0 0 100%}.guide__figure{display:grid;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-muted);place-items: center;padding:.75rem}.guide__svg{width:100%;max-height:13rem}.guide__marker{animation:1.8s ease-in-out infinite guide-pulse;transform-origin:center}@keyframes guide-pulse{0%,to{opacity:.35}50%{opacity:1}}.guide__step{display:flex;gap:.6rem;margin-top:.875rem;font-size:.9375rem;line-height:1.55}.guide__badge{display:grid;border-radius:var(--r-full);color:var(--brand-ink);background:var(--brand);flex:none;place-items: center;width:1.5rem;height:1.5rem;font-size:.8125rem;font-weight:700}.guide__nav{display:flex;padding:.75rem var(--gutter)calc(.75rem + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface-muted);justify-content:space-between;align-items: center;gap:.75rem}.guide__dots{display:flex;gap:.45rem}.guide__dot{border-radius:var(--r-full);background:var(--border-strong);cursor:pointer;border:0;width:.5rem;height:.5rem;padding:0}.guide__dot[aria-current=step]{background:var(--brand);width:1.25rem}@media (prefers-reduced-motion:reduce){.guide__marker{animation:none;opacity:1}}