/* One continuous black / midnight-blue surface, with a quiet control rail. */
body:has(.live-demo){background:#03060b;color:#d7e2f2}.site-header:has(+main .live-demo){background:#03060b;border-bottom-color:#9abce20a}.site-header .brand b{color:#8fb9ed}.site-header .brand-mark{color:#8fb9ed}
.live-demo.wrap{background:radial-gradient(ellipse at 63% 48%,#0b1b303b,transparent 68%),#03060b}.demo-controls{background:linear-gradient(90deg,#050a1200,#0812219c 24%,#091424a6);border:0;scrollbar-color:#263c56 transparent}.demo-panel-navigation{background:linear-gradient(#07101bf5 80%,#07101b00);box-shadow:none;padding-bottom:5px}.demo-control-heading>span{color:#8ea8c7;border-color:#98bce52b}.demo-panel-footer>a{color:#9fbcdc}.demo-view-top{flex-wrap:wrap;gap:10px 18px}.demo-view-top>div:first-child>span{display:none}.demo-view-top .demo-view-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.demo-launch{border:0;background:none;padding:10px 0;color:#8497b2;font-size:10px}.demo-launch[aria-pressed=true]{background:none;color:#c0dcff;border:0}.demo-launch[aria-pressed=true]::before{content:'';height:4px;width:4px;border-radius:50%;background:#9bc7ff;box-shadow:0 0 8px #629eeb80}.demo-floors{margin:0;padding-left:12px;border:0;border-left:1px solid #b0cff522;gap:3px}.demo-floors button{padding:8px 10px;border:1px solid transparent;border-radius:7px;font-size:10px;flex:none;color:#7d94b3}.demo-floors button[aria-pressed=true]{background:#4078b71c;border-color:#6f9fd935;color:#c7def9}.demo-view-top:has(.demo-back:not([hidden])) .demo-launch{display:flex}.demo-back{background:#18365533;border-color:#5c87b73b;color:#aac5e5;margin:0}.demo-caption{color:#8b9fb9}.demo-caption i{background:#8fbafa;box-shadow:0 0 10px #7caaf255}
.demo-scenario{border-color:#9cbee012;background:#adcfff03;color:#8299b7}.demo-scenario:hover{border-color:#7aabed45;background:#80baff09;color:#d4e7ff}.demo-scenario[aria-pressed=true]{background:linear-gradient(145deg,#3268a72b,#3268a706);border-color:#6d9bd45c;color:#d2e4fa}.demo-scenario[aria-pressed=true]>i{color:#9ac7ff}.demo-transport input,.remote-range input{accent-color:#82b6ee}.quick-modes button{background:#94bfff04;border-color:#9abbdf14;border-radius:12px;color:#8b9fbb}.quick-modes button:hover{border-color:#72a1d94c;background:#5d8fbd0d}.quick-modes button[aria-pressed=true]{background:radial-gradient(ellipse at 50% 0%,#5086cb25,transparent);border-color:#73a5df66;color:#c7e1ff;box-shadow:inset 0 -1px #81b5ef40,0 0 26px #315a8c0a}.quick-modes button[aria-pressed=true] b{color:#aecff5}.quick-modes button[aria-pressed=true] i{filter:drop-shadow(0 0 7px #8dbfff55)}.quick-modes button[aria-pressed=true]::after{background:radial-gradient(circle at 50% 30%,#a3cbff33,transparent 65%)}.inventory-counters button:hover,.inventory-counters button[aria-expanded=true]{border-color:#85b3e95b;background:#7caae711}.inventory-counters svg{color:#a6bfde}.master-dimmer{border-color:#7ba8d731;background:#6d94c106}.demo-controls .device-card,.demo-controls .climate-card,.demo-controls .remote-card,.demo-controls .shutter-control{background:#8fb7e504;border-color:#b0ccf012;border-radius:12px}.demo-controls .device-card{min-height:68px}.demo-mini-heading button{color:#a6bfdc}.demo-controls .climate-card{padding:11px 10px}.demo-controls .climate-card output{font-size:14px}.demo-controls .demo-readings{margin:9px 0 0;gap:14px}.demo-controls .demo-readings>span{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;font-size:8px}.demo-controls .demo-readings small{font-size:10px;white-space:nowrap;color:#acc0d9}.demo-humidity-label{font-size:7px;margin-top:4px}
/* Compact fan control: fixture on the left, illuminated power key on the right. */
.fan-control{border:0;border-bottom:1px solid #a8c8ee14;border-radius:0;background:none;padding:9px 0;gap:8px}.fan-power{gap:9px}.fan-power>i{background:none!important;width:25px;height:28px;color:#97aac1!important;box-shadow:none!important}.fan-power>i svg{width:20px;height:20px}.fan-power span{font-size:10px;flex:1}.fan-power small{font-size:8px;margin-top:2px}.fan-power .fan-switch{display:grid;place-items:center;width:25px;height:25px;flex:none;border:1px solid #7ea5ce2f;border-radius:50%;background:#7998bd07;color:#69809d;transition:color .35s,background .35s,box-shadow .35s}.fan-power .fan-switch svg{width:12px;height:12px;animation:none!important}.fan-power[aria-pressed=true] .fan-switch{color:#c6e4ff;background:#508ed52e;border-color:#8abbf78a;box-shadow:0 0 12px #6caaf93b}.fan-speeds button{width:22px;height:25px;border-radius:5px;font-size:9px}.home-fan-hit{width:30px;height:30px;transform:var(--scene-inverse) translate(-50%,-50%);transform-origin:0 0;display:grid;place-items:center}.home-fan-hit>span{width:13px;height:13px;border-radius:50%;display:grid;place-items:center;background:#091625bc;color:#8b9cb0;border:1px solid #c4d7ec55;transition:background .4s,box-shadow .4s}.home-fan-hit svg{width:8px;height:8px;stroke:currentColor;fill:none;stroke-width:1.7}.home-fan-hit[aria-pressed=true]>span{color:#d9edff;background:#326ba6;box-shadow:0 0 8px #85baff94;border-color:#b1d8ffb3}
/* Small telemetry chips. Detailed controls and units remain in the rail. */
.map-readings .map-reading,.demo-embed .map-readings .map-reading{font-size:8px;line-height:1.2;padding:3px 5px;gap:3px;border:0;border-radius:4px;background:#07101bc9;color:#bccce0;box-shadow:0 1px 3px #0002;transform:var(--scene-inverse) translate(-50%,-100%);transform-origin:0 0;white-space:nowrap}.map-readings .map-reading svg{width:6px;height:8px;opacity:.75}.map-readings .map-reading i{font-size:8px;color:#839cb9}.map-readings .map-reading .sensor-status{width:3px;height:3px;border-radius:50%;background:#627288;padding:0;display:block}.map-readings .map-reading.cooling .sensor-status{background:#a3d8ff;box-shadow:0 0 5px #7ac5ff8a}.map-reading.humidity{color:#9eb0c9}.map-reading.temperature.cooling{background:#0b1d2dd9;border:0}
.connected-home:not(.demo-embed){background:#03060b}.connected-home .home-control-rail{background:linear-gradient(90deg,#050c15,#0a1524);border-color:#a2c2ef0d}.connected-home .workspace,.connected-home .viewport{background:#03060b}.connected-home .home-dashboard-heading{background:#03060b;border-color:#a2c2ef0d}
@media(min-width:761px) and (max-width:1100px){.demo-view-top>div:first-child{flex-basis:100%}.demo-view-top .demo-view-actions{margin-left:0;width:100%;justify-content:space-between}.demo-view-top{padding-top:17px;gap:7px}.demo-floors button{padding-inline:8px}}
@media(max-width:760px){.demo-view-top{padding:18px 20px 6px}.demo-view-top>div:first-child{flex-basis:100%}.demo-view-top .demo-view-actions{width:100%;margin:0;justify-content:space-between;gap:8px}.demo-floors{gap:0;padding-left:8px}.demo-floors button{min-height:40px;padding:8px;font-size:10px}.demo-launch{min-height:40px}.demo-controls{background:linear-gradient(#07111b55,#0a152499)}.demo-panel-navigation{background:none}.fan-speeds button{width:28px;height:36px}.fan-power .fan-switch{width:30px;height:30px}.security-response header button{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.fan-switch,.home-fan-hit>span{transition:none}}

.demo-panel-navigation{position:static;background:none;padding-top:0;margin-top:0;box-shadow:none}.demo-view-top .demo-view-actions{flex-wrap:wrap}.action-feedback{background:linear-gradient(125deg,#122136f5,#080f1bfa);border-color:#94bce638}.action-feedback>i{background:#7caee819;color:#a8cfff}.action-feedback>button:focus-visible{outline-color:#9ec7f7}

/* Comfort values belong in the rail. The scene contains only physical effects. */
.climate-card{display:grid;grid-template-columns:28px minmax(0,1fr) 34px;gap:7px 10px;padding:11px 12px;border-radius:12px}
.climate-card .climate-symbol{grid-column:1;grid-row:1;width:27px;height:28px;background:none}
.climate-card .climate-copy{grid-column:2;grid-row:1}
.climate-card .climate-copy small{margin-top:4px;font-variant-numeric:tabular-nums}
.climate-card .climate-power{grid-column:3;grid-row:1;width:32px;height:32px;margin:0;border:1px solid #9ebde322}
.climate-setpoint{grid-column:2 / 4;display:flex;align-items:center;gap:8px;margin-top:2px;padding-top:5px;border-top:1px solid #9ebde313}
.climate-setpoint>span{font-size:9px;color:#7f91aa;flex:1}.climate-setpoint>output{font-size:12px;min-width:44px;text-align:center}
.climate-setpoint>button,.climate-setpoint>button:last-child{width:27px;height:26px;margin:0;background:#7ea3cc09;border-radius:6px;color:#a9bdd4}
.demo-readings{gap:16px;margin-top:11px}.demo-readings>span{font-size:9px;line-height:1.5;grid-template-columns:1fr;gap:4px}.demo-readings small{grid-column:1;font-variant-numeric:tabular-nums;color:#b4c7dc}
/* On phones the horizontal plot stays above an independently scrollable rail. */
@media(max-width:767px){
 .live-demo.wrap{height:calc(100svh - 62px);min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .demo-view{height:auto;min-height:0;max-height:none}
 .demo-view-top{padding:12px 14px 8px;min-height:44px;gap:6px}.demo-view-top h1{font-size:16px}
 .demo-view-top .demo-floors{gap:2px}.demo-view-top .demo-floors button{padding:8px;font-size:9px}
 .demo-screen{flex:none;height:auto;aspect-ratio:1.65;min-height:0}
 .demo-caption{min-height:29px;padding:6px 14px 8px;font-size:9px}
 .demo-controls{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:16px 14px 26px;border-top:1px solid #a5c8ef20;border-radius:18px 18px 0 0;background:linear-gradient(180deg,#0a1524,#040a12)}
 .demo-control-heading h2{font-size:16px}.demo-controls .quick-modes{margin-top:12px}.demo-scenario{min-height:78px}.demo-transport{padding-block:10px}
 .climate-card{padding:10px 12px;gap:7px 10px}.climate-copy strong{font-size:11px}.climate-copy small{font-size:9px}
 .climate-setpoint>button,.climate-setpoint>button:last-child{width:32px;height:32px}
 .demo-after.wrap{padding:14px}.demo-view-top>div>span{display:none}
}
@media(min-width:768px) and (max-width:1100px){.live-demo.wrap{grid-template-columns:minmax(0,1fr) 310px}.demo-controls{padding-inline:16px}.demo-view-top{padding-inline:18px}.demo-view-top h1{font-size:18px}}
@media(hover:none) and (max-height:500px) and (max-width:950px){.live-demo.wrap{height:auto;grid-template-columns:1fr}.demo-view{height:auto}.demo-screen{height:auto;aspect-ratio:1.65}.demo-controls{max-height:65svh;overflow-y:auto}}