:root{color-scheme:dark;font-family:"Leelawadee UI",Tahoma,system-ui,sans-serif;color:#e8f0fa;background:#080f1c;--cyan:#43dfed;--gold:#ffd074;--green:#66ecb7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 0,#142944 0,transparent 45%),#080f1c}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}header{height:78px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;padding:0 4%;gap:16px}.brand{color:white;text-decoration:none;font-size:23px;font-weight:800;letter-spacing:2px}.brand span{font-size:12px;color:var(--cyan)}.demo{font-size:12px;color:var(--gold);background:#ffd0740b;border:1px solid #ffd07433;padding:8px 12px;border-radius:20px}.demo i{display:inline-block;width:7px;height:7px;background:var(--gold);border-radius:50%;margin-right:7px}time{font-size:13px;color:#8fa6bd;font-variant-numeric:tabular-nums}main{max-width:1500px;margin:auto;padding:30px 4%}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{letter-spacing:3px;color:var(--cyan);font-size:11px}h1{font-size:clamp(26px,3vw,42px);line-height:1.4;margin:10px 0}h1 span{color:#91a9bf}.intro p:last-child{color:#91a9bf;font-size:14px}.orb{width:130px;height:130px;border:1px solid #43dfed55;border-radius:50%;box-shadow:0 0 45px #43dfed16,inset 0 0 30px #43dfed12;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.orb:after{content:"";position:absolute;inset:-12px;border:1px dashed #43dfed66;border-radius:50%;animation:rotate 30s linear infinite}.orb span{font-size:25px;font-weight:800}.orb small{font-size:8px;letter-spacing:2px;color:var(--cyan)}.toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:24px}.toolbar [role=tablist]{padding:5px;background:#142135;border-radius:12px;display:flex;gap:5px}.toolbar button,.scenes button{border:1px solid #ffffff15;background:transparent;color:#9eb1c8;padding:10px 18px;border-radius:8px}.toolbar button[aria-selected=true]{background:#43dfed;color:#06202c;font-weight:700}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.metric,.panel,.device{border:1px solid #ffffff0f;background:linear-gradient(130deg,#142135,#101a2b);border-radius:16px}.metric{padding:20px}.metric small{color:#92a8be}.metric strong{display:block;font-size:30px;margin:6px 0;font-variant-numeric:tabular-nums}.metric em{font-size:11px;color:var(--green);font-style:normal}.workspace{display:grid;grid-template-columns:1.45fr 1fr;gap:20px}.panel{padding:24px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-head small{font-size:10px;letter-spacing:2px;color:#7894af}.panel-head h2{margin:5px 0;font-size:20px}.panel-head>span{font-size:10px;color:#88a3bd}.pill{padding:6px 10px;border:1px solid #43dfed33;border-radius:20px;color:var(--cyan)!important}.visual svg{width:100%;display:block;min-height:300px}.legend{display:flex;gap:25px;font-size:11px;color:#9eb1c8;margin:10px 0 20px}.legend span:before{content:"";display:inline-block;width:17px;height:3px;margin-right:7px;vertical-align:middle;background:var(--gold)}.legend .zigbee:before{background:#b494ff}.legend .wifi:before{background:var(--cyan)}.scenes{display:flex;flex-wrap:wrap;gap:8px}.scenes button{font-size:12px;padding:9px 12px}.scenes button:hover{color:var(--cyan);border-color:var(--cyan)}.power{display:flex;align-items:baseline;gap:15px;margin:24px 0 5px}.power strong{font-size:52px;letter-spacing:-2px}.power span{color:#7894af;font-size:12px}.meter-row{display:flex;justify-content:space-between;gap:12px;color:#7894af;font-size:11px;border-top:1px solid #ffffff10;padding-top:15px}.meter-row b{color:#d3e5f5}h3{font-size:13px;margin:22px 0 12px}.events{font-size:11px;color:#9bb2c8;max-height:145px;overflow:auto}.events div{padding:7px 0;border-bottom:1px solid #ffffff08}.events time{font-size:10px;color:var(--cyan);margin-right:10px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:30px 0 15px;gap:15px}.section-head h2{font-size:20px}.section-head span{font-size:11px;color:#7894af}.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.device{padding:18px;position:relative;transition:transform .2s,border-color .2s}.device:hover{transform:translateY(-3px);border-color:#43dfed55}.device-top{display:flex;justify-content:space-between;align-items:center}.icon{font-size:25px;color:var(--cyan);width:40px;height:40px;border-radius:10px;background:#43dfed0c;display:grid;place-items:center}.protocol{font-size:9px;color:#93acc5;border:1px solid #ffffff15;padding:3px 6px;border-radius:5px}.device h3{margin:13px 0 4px;font-size:13px}.model{font-size:10px;color:#7894af;min-height:16px}.reading{font-size:23px;font-weight:700;margin:13px 0;color:#eaf4ff}.device-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.status{font-size:10px;color:var(--green)}.toggle{width:36px;height:21px;border:0;background:#43dfed;border-radius:15px;padding:3px;display:flex;justify-content:flex-end}.toggle:before{content:"";width:15px;height:15px;border-radius:50%;background:#fff}.toggle[aria-pressed=false]{background:#344256;justify-content:flex-start}.details{background:none;border:none;color:#89a1b9;font-size:10px;padding:4px}.ports{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}.port{padding:9px 0;text-align:center;border:1px solid #ffffff15;border-radius:4px;color:#52647a;font-size:11px;background:#0a1423}.port.active{color:var(--green);border-color:#66ecb755;box-shadow:inset 0 -3px #66ecb755}.note{font-size:11px;color:#7894af}footer{font-size:11px;color:#7894af;margin:35px 0 10px;display:flex;justify-content:space-between;gap:20px}footer a{color:var(--cyan)}dialog{width:min(520px,90vw);border:1px solid #43dfed44;border-radius:20px;background:#142135;color:#e8f0fa;padding:32px}dialog::backdrop{background:#030812bb;backdrop-filter:blur(5px)}dialog h2{font-size:23px}dialog p{color:#a9bfd2;font-size:14px;line-height:1.8}#close-detail{float:right;background:none;border:0;font-size:28px;color:white}.flow{stroke-dasharray:7 12;animation:flow 1.5s linear infinite}.paused .flow,.paused .orb:after{animation-play-state:paused}.node{fill:#152940;stroke:#43dfed66;stroke-width:1.5}.svg-label{fill:#c1d9eb;font-size:11px;font-family:Tahoma,sans-serif}.svg-small{fill:#7197b3;font-size:9px;font-family:Tahoma,sans-serif}.lamp-on{fill:#ffd074;filter:drop-shadow(0 0 8px #ffd074)}[hidden]{display:none!important}@keyframes flow{to{stroke-dashoffset:-38}}@keyframes rotate{to{transform:rotate(360deg)}}@media(max-width:1000px){.devices{grid-template-columns:repeat(3,1fr)}.workspace{grid-template-columns:1fr}}@media(max-width:650px){header{height:auto;min-height:75px;flex-wrap:wrap;padding:15px 5%}header time{display:none}.brand{font-size:18px}.demo{font-size:10px}.orb{display:none}.metrics{grid-template-columns:repeat(2,1fr);gap:10px}.metric{padding:14px}.metric strong{font-size:25px}.devices{grid-template-columns:repeat(2,1fr);gap:9px}.device{padding:13px}.toolbar{flex-wrap:wrap}.panel{padding:16px}.section-head{align-items:flex-start;flex-direction:column;gap:0}.section-head h2{margin-bottom:5px}.visual svg{min-height:240px}.toolbar button{padding:9px 12px}footer{flex-direction:column}.reading{font-size:20px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.breaker-readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px;padding:13px 0;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12}.breaker-readings strong{display:block;font-size:20px;font-variant-numeric:tabular-nums;color:var(--gold)}.breaker-readings span{display:block;font-size:9px;color:#93acc5;margin-top:4px}.breaker-readings div+div{border-left:1px solid #ffffff10;padding-left:8px}@media(max-width:650px){.breaker-readings{gap:4px}.breaker-readings strong{font-size:17px}.breaker-readings span{font-size:8px}.breaker-readings div+div{padding-left:4px}}
.sidebar{position:fixed;inset:0 auto 0 0;width:215px;background:#10121f;border-right:1px solid #ffffff09;padding:30px 18px;z-index:5;display:flex;flex-direction:column;gap:12px}.side-logo{display:flex;gap:12px;align-items:center;color:#a890ff;text-decoration:none;font-size:33px;padding:0 10px 38px}.side-logo span{color:#edf0ff;font-size:19px;font-weight:700}.side-logo small{display:block;font-size:10px;font-weight:400;color:#6f7791;margin-top:4px}.side-caption{font-size:9px;color:#5f6881;letter-spacing:2px;padding:0 13px 9px}.side-link{display:flex;align-items:center;gap:12px;padding:13px;border:0;border-radius:9px;color:#9da6be;text-decoration:none;background:transparent;font-size:17px;text-align:left}.side-link span{font-size:12px}.side-link:hover,.side-link[aria-selected=true]{background:#8171ee1c;color:#bcaaff}.side-bottom{margin-top:auto;display:flex;gap:9px;padding:15px 9px;font-size:11px;color:#b9c5dc}.side-bottom small{display:block;color:#65708a;font-size:9px;margin-top:5px}.side-bottom i{width:7px;height:7px;border-radius:50%;background:#77e1b4;margin-top:5px}body{background:radial-gradient(ellipse at 65% 0,#202039 0,transparent 60%),#10121e}header{margin-left:215px;height:65px;padding:0 32px;background:#10121a66}header .brand{font-size:13px;color:#7e89a4;letter-spacing:1px}header .brand span{color:#aaa0e7}.demo{color:#c8b8ff;background:#a28aff0a;border-color:#a28aff20}main{margin-left:215px;max-width:1700px;padding:25px 32px}.intro{margin-bottom:20px}.intro h1{font-size:28px;line-height:1.2}.intro p:last-child{font-size:12px;margin-bottom:0;color:#77839d}.eyebrow{color:#868aa8;font-size:9px;letter-spacing:2px}.welcome-dot{color:#b39aff;margin-left:12px}.studio-status{display:flex;flex-direction:column;gap:7px;text-align:right;font-size:11px;color:#70dcb1}.studio-status small{color:#66738b;font-size:10px}.toolbar{margin-bottom:18px}.toolbar [role=tablist]{background:#1a1d2e;border:1px solid #ffffff08;padding:4px}.toolbar button{font-size:11px;padding:9px 16px}.toolbar button[aria-selected=true]{background:#8972f1;color:white;box-shadow:0 3px 15px #8972f122}.metric,.panel,.device{background:linear-gradient(140deg,#1e2236,#171b2b);border-color:#ffffff09;border-radius:15px;box-shadow:0 8px 25px #0000000c}.metrics{gap:12px;margin-bottom:16px}.metric{padding:15px 18px;position:relative;overflow:hidden}.metric:after{content:"";position:absolute;width:75px;height:75px;border:8px solid #a38dff0a;border-radius:50%;right:-20px;bottom:-20px}.metric small{font-size:11px;color:#9da7bf}.metric strong{font-size:26px;margin:5px 0}.metric em{font-size:9px;color:#72d5b0}.workspace{gap:16px;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}.panel{padding:20px}.panel-head small{font-size:8px;color:#7d86a3}.panel-head h2{font-size:17px}.pill{color:#b2a0fb!important;border-color:#b2a0fb22;font-size:8px!important}.power{margin:15px 0 0}.power strong{font-size:40px}.power span{font-size:10px}.power+svg{height:125px;width:100%}.events{max-height:82px}.visual{background:radial-gradient(ellipse at center,#34394e55,transparent 70%),linear-gradient(140deg,#1e2236,#171b2b)}#house{position:relative;height:360px;margin-top:8px;background:radial-gradient(ellipse at 50% 70%,#8572ed15,transparent 70%);border-radius:12px;overflow:hidden}#house .house-render{width:100%;height:100%;object-fit:contain;filter:brightness(.85) saturate(.75);position:absolute;inset:0}#house svg{position:absolute;inset:0;width:100%;height:100%;min-height:0}.room-pin{fill:#191d30;stroke:#ab91ff;stroke-width:1.5;filter:drop-shadow(0 0 8px #a48aff55)}.room-name{fill:white;font:10px Tahoma,sans-serif}.room-value{fill:#cfbcff;font:12px Tahoma,sans-serif}.climate-widget{display:flex;align-items:center;gap:14px;margin:12px 0 16px;padding-bottom:16px;border-bottom:1px solid #ffffff09}.climate-dial{width:100px;height:100px;flex-shrink:0;background:conic-gradient(from 220deg,#79dbd0 0deg,#a38bff 210deg,#ffffff08 210deg,#ffffff08 280deg,transparent 280deg);border-radius:50%;display:grid;place-items:center;position:relative}.climate-dial:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#1b2032}.climate-dial span{position:relative;font-size:23px;font-weight:600}.climate-copy small{font-size:9px;color:#818ba4;letter-spacing:1px}.climate-copy strong{display:block;font-size:13px;margin:7px 0}.climate-copy p{font-size:10px;color:#7bd4b6;margin:0}.legend{margin:5px 0 12px;font-size:10px;gap:20px}.scenes{gap:6px}.scenes button{background:#ffffff04;border-color:#ffffff08;font-size:10px}.scenes button:hover{color:#c2acff;border-color:#a58aff55}.section-head{margin:22px 0 12px}.section-head h2{font-size:17px}.devices{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.device{padding:16px}.device .icon{background:#a28aff10;color:#ad9df0;font-size:22px;width:34px;height:34px}.device:nth-child(4n+2) .icon{color:#71cee5;background:#71cee510}.device:nth-child(4n+3) .icon{color:#e5ad78;background:#e5ad7810}.device:nth-child(4n) .icon{color:#7bdbb2;background:#7bdbb210}.device h3{font-size:12px;margin-top:12px}.reading{font-size:20px}.model{font-size:9px;line-height:1.6}.protocol{font-size:8px}.status{font-size:8px}.details{font-size:9px}.toggle{background:#a58af5;width:31px;height:18px;padding:3px}.toggle:before{width:12px;height:12px}.breaker-readings strong{color:#c1adff;font-size:19px}.breaker-readings span{font-size:8px}.breaker-readings{gap:5px}.ports .active{border-color:#9a86f455;color:#bdacff;box-shadow:inset 0 -3px #9a86f455}.flow{filter:drop-shadow(0 0 3px currentColor)}@media(min-width:1500px){#house{height:415px}}@media(max-width:1200px){.devices{grid-template-columns:repeat(3,minmax(0,1fr))}.sidebar{width:175px}.side-link{padding:11px 8px}main,header{margin-left:175px}.workspace{grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr)}}@media(max-width:1000px){.sidebar{width:72px;padding:24px 10px}.side-logo{padding:0 5px 30px;font-size:30px}.side-logo span,.side-link span,.side-caption,.side-bottom{display:none}.side-link{justify-content:center;font-size:23px}main,header{margin-left:72px}.workspace{grid-template-columns:1fr}.studio-status{display:none}}@media(max-width:650px){.sidebar{display:none}main,header{margin-left:0}main{padding:20px 16px}header{padding:12px 16px}.intro h1{font-size:23px}.devices{grid-template-columns:repeat(2,minmax(0,1fr))}.device{padding:12px}#house{height:290px}.metric strong{font-size:23px}.panel{padding:15px}.section-head span{font-size:10px}.breaker-readings strong{font-size:16px}.breaker-readings span{font-size:7px}}