/* Reference layout: image and device table on the left; monitoring stack on the right. */
:root{--cyan:#9e85ff;--gold:#a390ff}body{background:radial-gradient(ellipse at 65% 0,#303747,transparent 65%),#050e1e;color:#e9eef7}header{height:45px;margin-left:190px;border:0;background:#061020}main{margin-left:190px;padding:0 22px 20px;max-width:1800px}.sidebar{width:190px;background:#060e1c;padding:30px 14px;border-right:1px solid #ffffff06}.side-logo{padding-bottom:35px}.side-link{margin:3px 0;font-size:19px;padding:14px 12px}.side-link span{font-size:12px}.intro,.metrics{display:none}.toolbar{position:relative;margin:0;padding:8px 0 14px}.toolbar button{padding:7px 12px;font-size:10px}.workspace{display:contents}.reference-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}.reference-left{min-width:0}.reference-right{display:flex;flex-direction:column;gap:10px}.panel,.device{background:#0e182a;border:0;box-shadow:none;border-radius:10px}.visual{position:relative;padding:0;height:470px;overflow:hidden;background:radial-gradient(ellipse at center,#26384a,#091424 75%)}.visual>.panel-head,.visual>.legend,.visual>.scenes{display:none}#house{height:100%;margin:0;overflow:hidden}#house .house-render{height:100%;width:100%;object-fit:contain;filter:brightness(.73) saturate(.7);opacity:.95}#house svg{opacity:.45;pointer-events:none}.hero-greeting{position:absolute;z-index:2;top:25px;left:27px}.hero-greeting p{font-size:13px;margin:0 0 8px}.hero-greeting h1{font-size:29px;margin:0;font-weight:500}.hero-greeting small{display:block;color:#8390a7;font-size:10px;margin-top:10px}.hero-secure{position:absolute;top:25px;right:24px;font-size:11px;color:#70d8aa;z-index:2}.hero-secure small{display:block;color:#8997aa;font-size:9px;margin-top:5px}.hero-room{position:absolute;z-index:2;bottom:20px;left:27px}.hero-room h2{font-size:29px;font-weight:400;margin:0 0 12px}.hero-badges{display:flex;gap:8px;flex-wrap:wrap}.hero-badges span{padding:7px 10px;background:#111d2ddd;border-radius:5px;font-size:10px}.visual:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#061120);pointer-events:none}.hero-room{z-index:3}.reference-right .panel{padding:15px}.reference-right h2{font-size:12px;margin:0 0 5px;font-weight:500}.reference-right .panel-head small{display:none}.reference-right .panel-head>span{font-size:9px}.climate-widget{display:flex;flex-direction:column;margin:0;padding:0;border:0;gap:4px}.climate-dial{width:155px;height:155px;margin:8px auto 0;background:conic-gradient(from 225deg,#70ceae 0deg,#9575ff 220deg,#ffffff12 220deg,#ffffff12 270deg,transparent 270deg)}.climate-dial:before{inset:9px;background:#0e182a}.climate-dial span{font-size:35px;font-weight:400}.climate-copy{display:none}.climate-caption{text-align:center;color:#90a0b5;font-size:10px;margin-top:-28px;position:relative}.climate-controls{display:flex;justify-content:center;gap:20px}.climate-controls button{background:none;border:0;color:#b4bed0;font-size:20px;padding:3px 10px}.climate-modes{display:flex;gap:8px;margin-top:10px}.climate-modes span{background:#142034;border-radius:5px;font-size:9px;flex:1;padding:9px;color:#c1cbdc}.energy-card .power{margin:8px 0 0;gap:7px}.energy-card .power strong{font-size:31px;font-weight:400}.energy-card .power span{font-size:9px}.energy-card svg{width:100%;height:60px}.energy-card .meter-row{font-size:9px;padding-top:8px}.energy-card h3,.energy-card .events{display:none}.mini-chart-layout{display:grid;grid-template-columns:1fr 120px;gap:6px;align-items:center}.water-value{font-size:30px;font-weight:400}.water-value small{font-size:9px;color:#a6b0c4}.trend-note{font-size:8px;color:#7bccae;display:block;margin-top:5px}.water-card p{margin:0;color:#75849a;font-size:8px}.security-items{display:flex;justify-content:space-between;gap:8px;margin-top:13px}.security-items span{font-size:9px;color:#b6c3d5}.security-items b{display:block;font-weight:400;color:#70d8aa;margin-top:4px;font-size:8px}.lights-controls{display:flex;gap:7px;margin-top:10px}.lights-controls button{flex:1;border:0;background:#172238;color:#d6dff0;border-radius:6px;font-size:9px;padding:10px 4px}.lights-controls button:first-child{background:#624ad4}.lights-head{display:flex;justify-content:space-between;align-items:center}.section-head{margin:0;padding:17px 20px;background:#0e182a;border-radius:9px 9px 0 0}.section-head h2{font-size:12px;margin:0}.section-head span{font-size:9px}.devices{display:block;padding:0 12px 10px;background:#0e182a;border-radius:0 0 9px 9px;max-height:435px;overflow:auto}.device{display:grid;grid-template-columns:2fr 1.1fr 1.55fr .8fr .8fr .7fr;align-items:center;gap:8px;padding:10px;border-radius:0;border-bottom:1px solid #ffffff05;min-height:60px;background:transparent}.device:nth-child(even){background:#ffffff02}.device:hover{transform:none;background:#ffffff04}.device .device-top{grid-column:1;grid-row:1;justify-content:flex-start;pointer-events:none}.device .icon{width:28px;height:28px;font-size:17px;border-radius:6px}.device .protocol{display:none}.device h3{grid-column:1;grid-row:1;margin:0 0 13px 38px;font-size:10px;font-weight:500}.device .model{grid-column:1;grid-row:1;margin:19px 0 0 38px;font-size:8px;color:#687991}.device .reading{grid-column:2;grid-row:1;font-size:10px;font-weight:400;color:#72d0ac;margin:0}.device .breaker-readings{grid-column:3;grid-row:1;border:0;padding:0;margin:0;gap:5px}.breaker-readings strong{font-size:12px}.breaker-readings span{font-size:7px}.device-bottom{grid-column:6;grid-row:1;justify-content:flex-end}.device-bottom .status,.device-bottom .details{display:none}.runtime-cell{grid-column:4;grid-row:1;font-size:9px;color:#b7c1d2}.usage-cell{grid-column:5;grid-row:1;font-size:9px;color:#b7c1d2}.power-cell{grid-column:3;grid-row:1;font-size:10px;color:#bac7d9}.table-head{display:grid;grid-template-columns:2fr 1.1fr 1.55fr .8fr .8fr .7fr;gap:8px;padding:10px 22px;background:#0e182a;color:#687a94;font-size:8px}.ref-scenes{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.ref-scenes button{background:#172238;border:0;color:#b2bfd4;border-radius:5px;padding:8px;font-size:9px}.security-lock{margin:0 0 8px;display:flex;justify-content:flex-end;gap:8px}.security-lock button{background:#624ad4;border:0;border-radius:20px;color:white;padding:9px 20px}.note-strip{color:#667990;font-size:8px;margin-top:10px}.reference-right .ports{grid-template-columns:repeat(8,1fr);gap:4px}.reference-right .port{font-size:9px;padding:6px 0}#network .reference-right .panel{margin:0}footer{font-size:9px;margin-top:15px}.sidebar .side-bottom{font-size:10px}.device-name-button{position:absolute;inset:0;opacity:0;pointer-events:none}@media(min-width:1550px){.reference-grid{grid-template-columns:minmax(0,1fr) 330px}.visual{height:540px}}@media(max-width:1150px){.sidebar{width:150px}.sidebar .side-link span{font-size:10px}header,main{margin-left:150px}.reference-grid{grid-template-columns:minmax(0,1fr) 260px}.visual{height:450px}.hero-greeting h1{font-size:23px}.hero-secure{display:none}.device{grid-template-columns:1.8fr 1fr 1.6fr .7fr}.runtime-cell,.usage-cell{display:none}.device-bottom{grid-column:4}.table-head{grid-template-columns:1.8fr 1fr 1.6fr .7fr}.table-head span:nth-child(4),.table-head span:nth-child(5){display:none}}@media(max-width:900px){.sidebar{width:65px}.side-logo span,.side-link span,.side-caption,.side-bottom{display:none}header,main{margin-left:65px}main{padding:0 12px 15px}.reference-grid{grid-template-columns:1fr}.reference-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.reference-right .climate-card{grid-row:span 2}.visual{height:430px}.devices{max-height:480px}}@media(max-width:550px){.sidebar{display:none}header,main{margin-left:0}.reference-right{grid-template-columns:1fr 1fr;gap:8px}.reference-right .panel{padding:12px}.mini-chart-layout{grid-template-columns:1fr}.visual{height:350px}.hero-greeting{left:18px;top:18px}.hero-room{left:18px}.hero-greeting h1{font-size:22px}.hero-room h2{font-size:24px}.device{gap:5px;padding:10px 4px;grid-template-columns:1.6fr 1fr 1.6fr .4fr}.device h3{font-size:9px;margin-left:32px}.device .model{font-size:7px;margin-left:32px}.device .reading{font-size:9px}.device .icon{width:24px}.breaker-readings strong{font-size:10px}.breaker-readings span{font-size:6px}.table-head{padding:10px 16px;font-size:7px;grid-template-columns:1.6fr 1fr 1.6fr .4fr}.climate-dial{width:125px;height:125px}.climate-dial span{font-size:28px}.security-items{flex-wrap:wrap}.section-head{padding:15px}.section-head span{display:none}}
/* Wireless overlays are independent of the original house image. */
#house svg[aria-label]{opacity:1}.wireless-link{fill:none;stroke-width:2;stroke-dasharray:5 9;animation:flow 2.4s linear infinite;opacity:.8;filter:drop-shadow(0 0 2px currentColor)}.wifi-link{stroke:#43dff5;color:#43dff5}.zigbee-link{stroke:#ffd15c;color:#ffd15c}.wireless-node{fill:#101b2de8;stroke-width:1}.wifi-node{stroke:#43dff5}.zigbee-node{stroke:#ffd15c}.wireless-name{fill:#e8f0fa;font:15px Tahoma,sans-serif}.paused .wireless-link{animation-play-state:paused}
/* Fit the full network diagram inside its panel at every aspect ratio. */
#network .visual{display:flex;align-items:center;justify-content:center;padding:20px}
#topology{width:100%;height:100%;min-width:0;min-height:0}
#topology svg{display:block;width:100%;height:100%;min-height:0;max-height:100%;overflow:visible}
#network .visual:has(.network-board-stage){height:650px;padding:12px;background:#0a1525}
.network-board-stage{position:relative;height:100%;width:100%;max-width:100%;aspect-ratio:1312/1917;margin:auto}
.network-board-stage img,.network-board-stage svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#topology .network-board-stage svg{min-height:0;pointer-events:none}
.board-packet{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:5 95;animation:networkPackets 3s linear infinite;filter:drop-shadow(0 0 4px #fff)}
.paused .board-packet{animation-play-state:paused}@keyframes networkPackets{to{stroke-dashoffset:-200}}
@media(max-width:550px){#network .visual:has(.network-board-stage){height:570px}}
#network .visual:after{display:none}
.network-route-glow{fill:none;stroke-width:13;opacity:.55;filter:blur(5px)}
.network-flow-rail{stroke-width:5;stroke-dasharray:18 32;opacity:1;filter:drop-shadow(0 0 8px currentColor);animation:networkPackets 1.2s linear infinite}
.network-travel-packet{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px currentColor)}
@media(prefers-reduced-motion:reduce){.network-travel-packet{display:none}}
#network .visual:has(.network-board-stage){height:650px;padding:0}
.network-board-stage img,.network-board-stage svg{transform:translateY(-14px) scale(1.16);transform-origin:center;object-fit:contain}
@media(max-width:550px){#network .visual:has(.network-board-stage){height:570px}}
.radio-ring{fill:none;stroke:currentColor;stroke-width:3;filter:drop-shadow(0 0 6px currentColor);animation:radioSpread 3s ease-out infinite;transform-box:view-box}
.radio-label{fill:currentColor;font:600 18px Tahoma,sans-serif;paint-order:stroke;stroke:#091424;stroke-width:5;stroke-linejoin:round}
.cellular-beam{fill:none;stroke:#7fffb7;stroke-width:5;opacity:.3;filter:drop-shadow(0 0 8px #7fffb7)}
.cellular-packets{fill:none;stroke:#b6ffd1;stroke-width:6;stroke-dasharray:12 20;animation:networkPackets 1.4s linear infinite;filter:drop-shadow(0 0 6px #7fffb7)}
@keyframes radioSpread{0%{transform:scale(.35);opacity:.95}100%{transform:scale(2);opacity:0}}
.paused .radio-ring,.paused .cellular-packets{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.radio-ring{animation:none;opacity:.3}.cellular-packets{animation:none}}