:root{--teal:#008f95;--ink:#24292f;--muted:#6e797d;--bg:#f3f5f6;--border:#e3e7e9;--pale:#e1f2ef}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-size:13px;line-height:1.45}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #008f95;outline-offset:3px}button{touch-action:manipulation}button:disabled{opacity:.5;cursor:not-allowed}.ha-header{height:66px;background:white;display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 23px;gap:20px}.ha-brand{width:160px;height:54px;overflow:hidden;position:relative}.ha-brand img{width:170px;position:absolute;top:-13px;left:-5px}.property{font-size:12px;font-weight:700;border-left:1px solid var(--border);padding-left:20px}.property span{display:block;font-size:10px;color:var(--muted);font-weight:400}.demo-badge{margin-left:auto;font-size:8px;letter-spacing:.12em;color:var(--teal);border:1px solid #c0e0dc;border-radius:20px;padding:4px 8px}.ha-header>button{border:0;background:none;color:var(--muted);font-size:16px}.ha-header>button span{font-size:10px}.ha-content{padding:24px;max-width:1250px;margin:auto}.greeting{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.greeting small{font-size:8px;letter-spacing:.12em;color:var(--muted)}h1{font-weight:500;font-size:25px;letter-spacing:-.04em;margin:4px 0}.time{font-size:23px;text-align:right;line-height:1.3}.time small{display:block;letter-spacing:0;font-size:8px}.scene-row{display:flex;gap:8px;margin-bottom:22px}.scene-row button{border:1px solid var(--border);background:white;border-radius:22px;padding:9px 17px;font-size:11px}.scene-row button.selected{background:var(--pale);border-color:#b6dcd5;color:#00767b}.ha-grid{display:grid;grid-template-columns:1fr 1.06fr 1fr;gap:16px;align-items:start}.group{min-width:0}.group h2{font-size:13px;font-weight:600;margin:0 3px 12px}.group h2>span{float:right;color:#8d989b}.card{border:1px solid var(--border);background:white;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 1px 2px #152b2205}.card-title{font-size:11px;font-weight:600}.card-title>span{float:right;font-size:9px;color:var(--muted)}.power-flow{height:205px;position:relative;max-width:330px;margin:auto}.flow-node{position:absolute;border:1.5px solid #a6d9d1;background:white;border-radius:50%;width:74px;height:74px;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:2;line-height:1.15}.flow-node>span{color:var(--teal);font-size:15px}.flow-node b{font-size:15px;font-weight:600;margin-top:3px}.flow-node small{font-size:8px;color:var(--muted);margin-top:3px;white-space:nowrap}.solar{top:8px;left:calc(50% - 37px)}.grid{top:94px;left:0;border-color:#b6c6df}.demand{top:94px;right:0;border-color:#95cbc7}.battery{bottom:-5px;left:calc(50% - 37px);width:66px;height:66px;margin-left:4px;border-color:#c5bbd7}.battery small{font-size:6px}.line{position:absolute;background:#c8dfda;height:2px;z-index:1;transform-origin:left center}.solar-line{left:50%;top:79px;width:calc(50% - 35px);transform:rotate(34deg)}.grid-line{left:70px;right:70px;top:130px}.battery-line{left:50%;top:175px;width:calc(50% - 35px);transform:rotate(-31deg)}.energy-summary{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:17px;margin-top:20px;font-size:9px;color:var(--muted);gap:10px}.energy-summary b{display:block;font-size:13px;margin-top:4px;color:var(--ink)}.energy-chart{width:100%;height:48px;margin-top:8px;display:block}.chart-labels{display:flex;justify-content:space-between;font-size:7px;color:var(--muted);margin-bottom:10px}.subtle{border:0;border-radius:7px;background:#edf5f3;color:#16747a;font-size:9px;padding:7px 9px}.full{width:100%}.tile-row{display:flex;align-items:center;gap:10px}.tile-row>div{flex:1;min-width:0}.tile-row b,.leak b{display:block;font-size:11px;font-weight:600}.tile-row small,.leak small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.icon{width:34px;height:34px;flex-shrink:0;background:#e4f2ed;color:var(--teal);border-radius:50%;display:grid;place-items:center;font-size:20px}.icon.blue{background:#e7eff8;color:#5388b4}.switch{height:20px;width:34px;background:#d2d9dc;border:0;border-radius:15px;padding:0;position:relative;flex-shrink:0}.switch:after{content:'';height:14px;width:14px;position:absolute;left:3px;top:3px;background:white;border-radius:50%;transition:transform .15s}.switch.on{background:var(--teal)}.switch.on:after{transform:translateX(14px)}.appliance-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin:9px 0 8px 44px}.pump{border-top:1px solid var(--border);padding-top:13px;margin-top:13px}.boost{margin-left:44px}.camera{border:0;padding:0;position:relative;display:block;overflow:hidden;width:100%;height:195px;text-align:left}.camera img{width:100%;height:100%;object-fit:cover}.camera-name{position:absolute;left:11px;top:11px;font-size:10px;background:#1d302ab0;color:#fff;padding:5px 7px;border-radius:5px}.camera-tag{position:absolute;left:11px;bottom:10px;font-size:6px;color:white;background:#243630b0;padding:3px 5px;border-radius:3px;letter-spacing:.08em}.expand{position:absolute;right:10px;bottom:8px;color:white;font-size:20px}.status-dot,.event-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);display:block}.alarm-buttons{display:grid;grid-template-columns:repeat(3,1fr);background:#f3f5f6;border-radius:7px;margin-top:13px;padding:3px;gap:3px}.alarm-buttons button{border:0;font-size:9px;background:transparent;border-radius:5px;padding:7px 2px}.alarm-buttons button.active{background:#deeeea;color:var(--teal)}.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.access{display:flex;flex-direction:column;align-items:start;text-align:left;padding:13px}.access .icon{width:30px;height:30px;font-size:17px;margin-bottom:9px}.access b{font-size:10px}.access small{font-size:10px;color:var(--teal);margin-top:4px}.access em{font-style:normal;font-size:7px;color:var(--muted);margin-top:3px}.leak{display:flex;align-items:center;gap:8px}.leak .icon{font-size:17px;width:30px;height:30px}.leak>div{flex:1}.leak b{font-size:10px}.leak small{font-size:8px}.event-log{display:flex;gap:8px;align-items:flex-start;padding:4px}.event-dot{flex-shrink:0;margin-top:5px}.event-log p{font-size:9px;color:var(--muted);margin:0}.slider-label{display:block;font-size:8px;color:var(--muted);margin-top:13px}.slider-label output{float:right}.slider-label input{display:block;width:100%;accent-color:var(--teal);height:21px;margin:6px 0 0;cursor:pointer}.temperature{display:flex;align-items:center;justify-content:space-between;background:#f3f6f7;border-radius:9px;margin-top:13px;padding:9px}.temperature button{border:0;background:white;width:28px;height:28px;border-radius:50%;color:var(--teal);font-size:19px}.temperature strong{font-size:25px;font-weight:500}.temperature small{font-size:12px;color:var(--muted)}.rain-state{display:flex;justify-content:space-between;align-items:center;font-size:8px;margin-top:13px;color:var(--teal);gap:6px}.zone{border-top:1px solid var(--border);padding-top:10px;margin-top:10px}.zone-head{display:flex;align-items:center;justify-content:space-between;font-size:10px}.zone-head button{border:0;background:#e5f2ee;color:var(--teal);border-radius:6px;font-size:8px;padding:5px 9px}.zone .slider-label{margin-top:6px}.micro{font-size:8px;color:var(--muted);margin:12px 0 0}details{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}summary{font-size:9px;cursor:pointer;color:var(--teal)}.schedule label{display:flex;align-items:center;justify-content:space-between;font-size:9px;margin-top:10px;gap:8px}.schedule input,.schedule select{border:1px solid var(--border);background:#fff;max-width:135px;font-size:9px;padding:5px;border-radius:5px}.schedule button{margin-top:10px}.demo-footer{font-size:8px;color:var(--muted);text-align:center;margin:23px 0 0}dialog{border:0;border-radius:16px;max-width:700px;width:90%;padding:23px;color:var(--ink)}dialog::backdrop{background:#193332b8}dialog img{width:100%;border-radius:8px}dialog h2{font-size:20px}dialog p{font-size:11px;color:var(--muted)}.close{float:right;background:#f2f5f5;border:0;border-radius:50%;width:30px;height:30px;font-size:20px}@media(max-width:750px){.ha-grid{grid-template-columns:1fr 1fr}.controls-group{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.controls-group h2{grid-column:1/-1;margin-bottom:0}.controls-group .irrigation{grid-column:1/-1}.ha-content{padding:18px}}@media(max-width:470px){.ha-header{height:62px;padding:0 15px;gap:10px}.ha-brand{width:137px}.ha-brand img{width:148px;top:-10px}.property{font-size:9px;padding-left:10px}.property span{font-size:8px}.ha-header>button span{display:none}.demo-badge{font-size:6px;padding:4px 5px}.ha-content{padding:18px 15px}.greeting h1{font-size:24px}.greeting small{font-size:7px}.time{font-size:19px}.time small{font-size:7px}.scene-row{gap:6px;justify-content:space-between}.scene-row button{padding:9px 12px;font-size:10px}.ha-grid{display:flex;flex-direction:column;gap:14px}.group{width:100%}.camera-group{order:0}.power-group{order:1}.controls-group{order:2;display:block}.group h2{font-size:14px;margin-bottom:12px}.camera{height:185px}.tile-row b{font-size:13px}.tile-row small{font-size:11px}.card{padding:15px}.camera{padding:0}.access b{font-size:12px}.access small{font-size:12px}.access em{font-size:9px}.alarm-buttons button{font-size:11px;padding:9px}.flow-card{padding:20px}.power-flow{height:205px}.power-flow .flow-node{width:77px;height:77px}.energy-summary{font-size:10px}.energy-summary b{font-size:15px}.slider-label{font-size:11px}.slider-label input{height:27px}.zone-head{font-size:12px}.subtle,.zone-head button{font-size:10px}.rain-state{font-size:10px}.event-log p{font-size:11px}.micro,summary{font-size:10px}.schedule label,.schedule input,.schedule select{font-size:11px}.demo-footer{font-size:9px}.leak b{font-size:12px}.leak small{font-size:10px}}