.demo-body{isolation:isolate;min-height:100svh}.demo-body>.scene{position:fixed;z-index:-2}.demo-body:before{content:"";position:fixed;inset:0;z-index:-1;background:var(--scrim)}.demo-body .topbar{background:transparent;border:0;padding-inline:25px}.demo-main{padding:12px 24px 40px;display:flex;justify-content:flex-end;min-height:calc(100svh - 84px)}.cfd-device{width:min(760px,64%);align-self:flex-start;padding:24px}.cfd-device h1{font-size:29px;letter-spacing:-.03em;line-height:1.15}.cfd-device h2{font-size:20px;margin:0;letter-spacing:-.02em}.cfd-device .panel-title{gap:10px;flex-wrap:wrap;margin-bottom:18px}.pills{display:flex;gap:7px}.pill.active{color:var(--accent);border-color:var(--accent)}.cues{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.cues button{border:1px solid var(--line);border-radius:10px;background:var(--tile);padding:14px 6px;min-height:88px;font:13px var(--label-font)}.cues .ico{display:block;margin:0 auto 9px;width:28px;height:28px}.cues [aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--scrim)}.status{margin-top:12px;min-height:80px}.status>.ico{width:38px;height:38px}.status strong{font:700 23px/1.25 var(--label-font)}.status small{display:block;color:var(--muted);margin-top:5px;line-height:1.4}.readings{display:grid;grid-template-columns:repeat(6,1fr);background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:12px 0;margin:12px 0}.readings>div{border-right:1px solid var(--line);padding:0 9px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0}.readings>div:last-child{border:0}.readings span{font:11px/1.35 var(--label-font)}.readings strong{font:700 20px/1.2 var(--label-font);white-space:nowrap}#internet,#leak{color:var(--good)}.rule-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px}.rule-cards .tile{align-items:flex-start;padding:12px;gap:10px}.rule-cards strong{font-size:14px}.rule-cards p{font:11px/1.6 var(--label-font);margin:3px 0}.rule-cards small{font-size:11px;color:var(--muted);display:block}.hub-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:17px 0 9px}.hub-heading small{font-size:10px;max-width:310px;text-align:right;color:var(--muted)}.outlets{display:grid;grid-template-columns:1fr 1fr;gap:9px}.outlet{display:flex;align-items:center;gap:9px;padding:9px;background:var(--tile);border:1px solid var(--line);border-radius:9px;font:12px var(--label-font);min-width:0}.outlet-number{font-size:10px;padding:4px 5px;background:var(--scrim);border-radius:3px;color:var(--muted)}.switch{margin-left:auto;flex:none;width:34px;height:22px;border:1px solid var(--line);background:var(--muted);padding:2px;border-radius:20px}.switch span{display:block;width:16px;height:16px;background:var(--on-accent);border-radius:50%;transition:transform .15s}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true] span{transform:translateX(11px)}.restart{display:flex;gap:6px;align-items:center;justify-content:center;background:var(--scrim);border:1px solid var(--line);border-radius:6px;padding:5px 8px;min-height:29px;font-size:10px;min-width:83px}.restart .ico{width:16px;height:16px}.subheading{margin-top:20px!important;margin-bottom:9px!important}.alert-buttons{display:flex;gap:8px}.alert-buttons button,.notification-buttons button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:7px;background:var(--tile);font:11px var(--label-font);padding:9px 10px;min-height:38px}.alert-buttons button{flex:1;white-space:nowrap}.alert-buttons .ico,.notification-buttons .ico{width:18px;height:18px;color:var(--accent)}.notification-buttons{display:flex;gap:10px}.notification-buttons button{flex:1}.notification-buttons [aria-checked=true]{border-color:var(--accent);color:var(--accent)}.notification-note{font-size:11px;color:var(--muted);margin:10px 0 17px}.text-button{border:0;background:none;color:var(--accent);font-size:12px;text-decoration:underline;min-height:28px}.device-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;padding-top:14px;border-top:1px solid var(--line);font-size:10px}.device-footer span{display:flex;align-items:center;gap:6px}.device-footer .ico{width:18px;height:18px}.caption{position:fixed;bottom:16px;left:16px;width:min(540px,32%);padding:12px 16px;border-radius:10px;font-size:11px}.caption strong{font-weight:650}.caption p{font-size:10px;line-height:1.5;margin-top:4px}
@media(min-width:1500px){.cfd-device{width:760px}.demo-main{padding-top:20px;padding-right:4%}}
@media(max-width:1100px){.cfd-device{width:74%;padding:18px}.cfd-device h1{font-size:25px}.caption{width:22%}.outlet{gap:6px;padding:8px 6px}.outlet-number{display:none}.alert-buttons{gap:5px}.alert-buttons button{font-size:10px;padding:8px 5px}.device-footer{flex-wrap:wrap}.readings strong{font-size:18px}}
@media(max-width:800px){.cfd-device{width:86%}.caption{position:static;width:calc(100% - 48px);margin:0 24px 24px}.demo-main{min-height:0}.outlet{font-size:11px}.rule-cards .ico{width:20px;height:20px}.restart{min-width:75px;padding:5px}.status strong{font-size:21px}}
@media(max-width:600px){.demo-body>.scene{position:absolute;height:420px}.demo-body>.scene img{object-position:65% center}.demo-body:before{position:absolute;height:420px}.demo-body .topbar{padding:8px 15px}.demo-main{padding:230px 10px 16px;display:block}.cfd-device{width:100%;padding:18px 12px;border-radius:20px}.cfd-device h1{font-size:26px;max-width:290px}.pills{margin-top:4px}.cues{gap:6px}.cues button{font-size:11px;min-height:84px}.readings{grid-template-columns:repeat(3,1fr);row-gap:15px;padding:14px 0}.readings>div:nth-child(3){border:0}.readings strong{font-size:21px}.readings span{font-size:10px}.rule-cards{grid-template-columns:1fr}.rule-cards .tile{padding:12px}.rule-cards .ico{width:27px;height:27px}.rule-cards p,.rule-cards small{font-size:11px}.hub-heading{gap:14px}.hub-heading small{font-size:9px;max-width:170px}.outlets{grid-template-columns:1fr;gap:8px}.outlet{font-size:13px;gap:12px;padding:10px;min-height:48px}.outlet-number{display:block}.restart{min-width:100px;font-size:11px}.alert-buttons{flex-wrap:wrap;gap:7px}.alert-buttons button{flex:1 1 29%;padding:10px 6px;font-size:11px}.notification-buttons{gap:7px}.notification-buttons button{padding:10px 7px}.notification-note{font-size:11px;line-height:1.5}.device-footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:10px}.caption{width:calc(100% - 20px);margin:0 10px 16px;padding:12px}.caption strong{font-size:11px}.caption p{font-size:10px}.status strong{font-size:20px}.status{padding:14px 10px;gap:10px}}
/* The same scene places the rack beside the control sheet. */
.demo-body>.scene img{transform:scaleX(-1)}
@media(max-width:600px){.demo-body>.scene img{transform:none}}
.cfd-device .panel-title h1,.cfd-device h2{font-family:var(--label-font)}

/* Keep the wordmark and buttons legible over either photo. */
.demo-body .topbar{background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}