.demo header{height:76px;padding:0 28px}.demo .brand{font-size:17px;letter-spacing:2px}.demo .brand small{font-size:8px;letter-spacing:1.5px}.siren{width:44px;height:44px;object-fit:contain}.demo main{height:calc(100dvh - 76px)}.demo aside{width:310px;padding:24px;background:#fff}.demo section{margin:0 0 21px;padding-bottom:21px}.demo .section-head h2{font-size:13px;font-weight:650}.demo .section-head{margin-bottom:14px}.demo .live-tag{color:#00754a;font-size:9px;letter-spacing:1.4px}.live-tag:before{content:'';display:inline-block;width:5px;height:5px;background:#00754a;border-radius:50%;margin-right:5px}.now-time{display:flex;align-items:center;gap:10px}.now-time>span:first-child{font-size:25px;color:#00754a}.now-time strong{font-size:30px;font-weight:550;letter-spacing:-1px;font-variant-numeric:tabular-nums}.now-time #nowDate{font-size:10px;color:#86928a;margin-left:auto}.now-weather{display:flex;gap:12px;align-items:center;margin-top:18px}.now-weather>span{font-size:27px}.now-weather strong{font-size:13px;font-weight:550}.now-weather small,.now-location small{display:block;margin-top:5px;color:#879489;font-size:10px}.now-location{display:flex;gap:13px;align-items:center;font-size:12px;margin:16px 0 12px}.now-location>span:first-child{font-size:25px;color:#00754a}.quiet{font-size:10px;color:#839087;line-height:1.6}.restore{border:1px solid #d9e5dc;background:#f4f8f4;border-radius:7px;width:100%;padding:10px;color:#226248;font-size:11px}.manual-time{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:12px}.manual-time strong{font-size:16px;font-variant-numeric:tabular-nums}.manual-weather{display:flex;align-items:center;gap:16px;font-size:12px}.manual-weather label{white-space:nowrap}.manual-weather select{flex:1;background:white}.demo summary{font-size:11px}.demo .layer-fold{margin:0}.layer-fold>summary{color:#233d35;font-size:13px;font-weight:600}.layer-fold summary span{font-size:9px;font-weight:400;letter-spacing:1px}.power-toggle{width:37px;height:22px;background:#d7ded8;border:0;border-radius:16px;position:relative;font-size:0!important;padding:0!important;color:transparent!important;flex-shrink:0}.power-toggle:before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:white;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .2s}.power-toggle[aria-checked=true]{background:#00754a}.power-toggle[aria-checked=true]:before{transform:translateX(15px)}.blind-presets{display:flex;gap:7px;margin:9px 0 14px}.blind-presets button{flex:1;border:1px solid #e1e7df;background:white;border-radius:5px;padding:7px;color:#708074;font-size:10px}.blind-presets button[aria-pressed=true]{background:#e9f3ec;border-color:#96b6a0;color:#176441}.demo #blinds label{grid-template-columns:75px 1fr 30px;gap:5px}.demo #blinds output{font-size:9px;text-align:right}.temperature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.temperature-grid label{padding:12px 9px;background:#f5f7f3;border-radius:7px;font-size:10px;color:#7b897f}.temperature-grid label>span{display:flex;align-items:baseline;gap:2px;margin-top:10px;color:#284d3b;font-size:13px}.temperature-grid input{width:70px;min-width:0;font-size:23px;color:#284d3b;background:transparent;border:0;border-bottom:1px solid #cdd9ce;padding:0 0 3px}.ac-state{font-size:11px;color:#3c7555;margin:13px 0 5px}.demo-credit{font-size:9px;color:#95a095}.demo-credit a{color:inherit}.demo .view-controls{bottom:66px;padding:5px;border-radius:30px}.demo .view-controls button{padding:9px 13px}.mouse-guide{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:22px;color:#788879;font-size:10px;pointer-events:none}.demo #weatherBadge{bottom:128px}.demo #solarBadge{bottom:96px}.demo #selection{top:24px}.demo #stage.night .mouse-guide{color:#b1c3b8}.demo #loading{max-width:90%;text-align:center}.demo input:focus-visible,.demo button:focus-visible,.demo select:focus-visible{outline:2px solid #00754a;outline-offset:3px}@media(max-width:900px){.demo aside{width:275px;padding:20px}.mouse-guide{gap:12px;font-size:9px}.demo .view-controls span{display:inline}}@media(max-width:620px){.demo header{height:68px;padding:0 18px}.demo main{height:auto}.demo aside{width:100%}.demo #stage{height:65dvh;min-height:420px}.mouse-guide{gap:10px;font-size:8px}.demo .view-controls{bottom:58px}.demo #weatherBadge{left:15px;bottom:120px}.demo #solarBadge{left:15px;bottom:88px}.demo .brand{font-size:14px}.demo .brand small{font-size:7px}}
@media(min-width:621px){html:has(body.demo),body.demo{height:100%;overflow:clip}}
/* Compact exterior environment and mutually exclusive HVAC mode switches. */
.demo .current-environment{border:0;margin:0;padding:0}.current-environment .section-head{margin:0 0 8px}.current-environment .section-head h2{font-size:10px;color:#87948a;font-weight:500}.current-environment .now-time strong{font-size:22px}.current-environment .now-time>span:first-child{font-size:19px}.current-environment .now-weather{margin-top:9px;gap:8px}.current-environment .now-weather>span{font-size:22px}.current-environment .now-weather>div{display:flex;align-items:center;gap:9px}.current-environment .now-weather strong{font-size:11px}.current-environment .now-weather small{margin:0;font-size:9px}.current-environment .now-location{margin:9px 0 6px;gap:9px;font-size:10px}.current-environment .now-location>span:first-child{font-size:19px}.current-environment .now-location>span:last-child{display:flex;gap:9px;align-items:center}.current-environment .now-location small{margin:0;font-size:9px}.current-environment #nowStatus{margin:6px 0;font-size:9px}.current-environment .restore{padding:7px;font-size:10px}.manual-fold{border-top:1px solid #e9ede6;padding-top:12px;margin-top:13px}.manual-fold>summary{color:#304e3d;font-weight:550}.manual-fold>summary span{font-size:9px;font-weight:400}.demo .manual-fold section{margin:14px 0 0;padding:0;border:0}.ac-modes{display:flex;gap:4px;margin-bottom:12px;padding:3px;border-radius:7px;background:#f0f3ee}.ac-modes button{flex:1;padding:7px 0;border:0;border-radius:5px;font-size:10px;color:#829083;background:transparent}.ac-modes button[aria-pressed=true]{background:#fff;color:#006b43;box-shadow:0 1px 4px #173d231a}.temperature-grid .disabled{opacity:.45}.temperature-grid input:disabled{cursor:not-allowed}.individual-ac{margin-bottom:13px}.ac-device{padding:14px 0;border-bottom:1px solid #e9ede6}.ac-device .section-head{margin-bottom:10px}.ac-device strong{font-size:11px;font-weight:550}.device-target{display:flex;justify-content:space-between;font-size:10px;align-items:center;color:#7b897f}.device-target input{width:60px;padding:5px;border:1px solid #dce4d9;border-radius:5px;color:#315740;background:white}.device-target input:disabled{background:#f4f5f2;color:#a8afa8}.device-status{display:block;font-size:9px;color:#7c8b7e;margin-top:8px}.environment-badge{position:absolute;left:24px;bottom:24px;background:#fffffff0;border:1px solid #dce3d8;border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;gap:7px;pointer-events:none}.demo .environment-badge #weatherBadge,.demo .environment-badge #solarBadge{position:static;border:0;padding:0;background:none}.demo .environment-badge #solarBadge{padding-left:27px;font-size:9px;color:#7d8e7e}.demo .view-controls{left:auto;right:24px;bottom:23px;transform:none;border-radius:9px}.demo .mouse-guide{left:auto;right:26px;bottom:83px;gap:12px;font-size:9px;justify-content:flex-end}.demo #stage.night .environment-badge{background:#ffffffeb}@media(max-width:900px){.demo .view-controls button{padding:8px}.demo .view-controls span{font-size:9px}.demo .mouse-guide{gap:7px;font-size:8px}.environment-badge{left:15px;bottom:22px;padding:9px}.demo .view-controls{right:15px}.demo .mouse-guide{right:16px}}@media(max-width:620px){.demo .view-controls{right:12px;bottom:18px}.demo .view-controls span{display:none}.demo .mouse-guide{right:12px;bottom:75px;font-size:7px;gap:6px}.environment-badge{left:12px;bottom:18px;padding:8px}.demo .environment-badge #weatherBadge{font-size:9px}.demo .environment-badge .weather-icon{font-size:17px}}

.demo section.environment-card{background:#f3f7f3;border:1px solid #dce7de;border-radius:14px;padding:17px 15px;margin:0 -5px 23px;box-shadow:0 3px 12px #193e2506}.environment-card .restore{background:#fff;border-color:#d2e0d5}.environment-card .manual-fold{border-color:#dce7de}.environment-card .section-head h2{color:#20583f}

.environment-current-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;align-items:center}.current-environment .now-time{display:block}.current-environment .now-time>div{display:flex;align-items:center;gap:7px}.current-environment .now-time>div>span{font-size:18px;color:#00754a}.current-environment .now-time #nowDate{display:block;margin:5px 0 0;font-size:10px}.current-environment .now-weather{margin:0;gap:7px;align-items:center}.current-environment .now-weather>div{display:block}.current-environment .now-weather small{display:block;margin-top:5px}.environment-card .current-environment #nowStatus{margin:13px 0 9px;font-size:9px;white-space:nowrap}

.building-orientation{border-top:1px solid #dce7de;margin-top:14px;padding-top:13px}.building-orientation>label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px}.bearing-presets{display:flex;gap:5px;margin-top:6px}.bearing-presets button{flex:1;border:1px solid #dce5da;background:white;padding:6px 0;border-radius:5px;color:#788878;font-size:10px}.bearing-presets button[aria-pressed=true]{background:#e2eee4;color:#226141;border-color:#9ab9a1}.building-orientation .quiet{font-size:9px;margin-bottom:0}.layer-menu{position:absolute;top:24px;right:24px;z-index:4;margin:0}.layer-menu>summary{list-style:none;padding:11px 14px;border:1px solid #dce4d9;border-radius:8px;background:#fffffff2;color:#34503f;font-size:11px;box-shadow:0 3px 14px #1c35200a;display:flex;align-items:center;gap:18px}.layer-menu>summary::-webkit-details-marker{display:none}.layer-menu .layer-chevron{float:none;color:#667d67}.layer-menu[open] .layer-chevron{transform:rotate(180deg)}.layer-menu-panel{position:absolute;right:0;top:46px;width:255px;max-height:calc(100dvh - 235px);overflow:auto;padding:6px 16px;background:#fffffff7;border:1px solid #dce4d9;border-radius:10px;box-shadow:0 10px 30px #173c211c}.layer-menu-panel .row{font-size:11px;margin:15px 0}.layer-menu-panel .row input{flex-shrink:0}@media(max-width:620px){.layer-menu{top:15px;right:12px}.layer-menu-panel{width:235px;max-height:calc(65dvh - 110px)}}

.fan-label{font-size:10px;color:#7b897f;margin:0 0 5px}.ac-fans button{font-size:9px}

.blind-auto-label{font-size:10px;color:#617969;margin-left:10px}#blindAuto{flex-shrink:0}#blindValue{margin-left:auto}

.blind-auto-row{display:flex;align-items:center;gap:8px;margin:2px 0 15px;font-size:11px;color:#48634f}.blind-auto-row #blindAuto{margin-left:0}.info-button{width:19px;height:19px;border:1px solid #aab8ab;border-radius:50%;background:transparent;color:#617969;font:italic 12px Georgia;padding:0}#blindInfoDialog{max-width:390px;width:calc(100% - 48px);border:1px solid #dce4d9;border-radius:14px;padding:24px;color:#31513e;box-shadow:0 15px 60px #173d2333}#blindInfoDialog::backdrop{background:#13291f66}#blindInfoDialog h3{margin:0 0 16px;font-size:17px}#blindInfoDialog p{font-size:13px;line-height:1.7}#blindInfoDialog form{text-align:right}#blindInfoDialog button{border:1px solid #dce4d9;border-radius:6px;padding:8px 18px;background:#f0f4ef;color:#31513e}.blind-presets button:disabled,#blindAll:disabled,#blinds input:disabled{opacity:.38;cursor:not-allowed}