.demo-body{min-height:100vh}.demo-body>.scene{position:fixed;z-index:-2}.demo-body:before{content:"";position:fixed;inset:0;background:#18395612;z-index:-1}.demo-body .topbar{min-height:80px}.demo-name{font-size:23px;margin-right:auto}.demo-main{display:flex;justify-content:flex-end;padding:20px 2% 30px;min-height:calc(100vh - 110px)}.cfd-device{width:min(660px,100%);padding:24px}.cfd-device h1{font-size:27px;letter-spacing:-.025em;line-height:1.15}.badges{display:flex;gap:6px}.badges .pill{font-size:9px;padding:4px 9px}.simulation-time{position:absolute;top:96px;left:2.5%;font-size:14px}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.modes button{border:1px solid var(--line);background:var(--tile);border-radius:10px;padding:14px 5px;display:grid;justify-items:center;gap:6px;font-size:13px}.modes .ico{width:30px;height:30px}.modes [aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.label{font-size:16px;font-weight:600;letter-spacing:0;margin:16px 0 7px}.label small{font-size:13px;font-weight:400}.switch{border:0;border-radius:20px;padding:3px;width:45px;height:26px;background:#a1acb475}.switch span{display:block;background:#fff;width:20px;height:20px;border-radius:50%;transition:transform .15s}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true] span{transform:translateX(19px)}.output{grid-template-columns:26px 1fr 46px 1.8fr;padding:9px 0}.alerts{display:grid;grid-template-columns:.9fr 1.5fr 1.3fr .8fr;gap:8px}.alerts button,.example{background:var(--tile);border:1px solid var(--muted);border-radius:9px;padding:8px 6px;font-size:12px}.notifications{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.notifications button{border:1px solid var(--line);background:var(--tile);border-radius:9px;padding:8px;display:flex;justify-content:center;gap:8px;align-items:center;font-size:12px}.notifications .ico{width:20px}.check{height:10px;width:10px;border:1px solid var(--muted);border-radius:3px}.notifications [aria-checked=true]{border-color:var(--accent)}.notifications [aria-checked=true] .check{background:var(--accent);border-color:var(--accent)}.cfd-device .note{font-size:11px;margin-top:8px}.example{margin-top:8px}.ha-card{display:flex;align-items:center;gap:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 12%,var(--tile));border-radius:11px;padding:14px 18px;margin-top:15px;text-decoration:none;font-size:14px}.ha-card .ico{width:30px;height:30px;color:var(--accent)}.caption{position:fixed;bottom:24px;left:2%;max-width:43%;padding:12px 18px;font-size:12px}.caption p{font-size:11px;margin-top:3px}.caption strong{font-weight:600}#status{font-size:12px;color:var(--muted);margin-top:10px;min-height:38px}.cfd-device>.readings{margin-block:16px}.cfd-device .summary{padding:12px 16px;margin-top:12px}.demo-body dialog h2{font-size:25px}.demo-body .wordmark{width:225px}
@media(max-width:1150px){.cfd-device{width:610px}.demo-name{font-size:18px}.caption{max-width:32%}.panel-title{flex-wrap:wrap}.simulation-time{top:85px}.demo-body .wordmark{width:180px}}
@media(max-width:850px){.demo-main{padding:220px 18px 24px}.cfd-device{width:100%;max-width:660px;margin:auto}.demo-body>.scene{position:absolute;height:600px}.demo-name{display:none}.caption{position:static;max-width:none;margin:0 18px 20px}.simulation-time{left:20px}.demo-body .topbar{padding-inline:18px}}
@media(max-width:600px){.demo-body .wordmark{width:135px}.demo-main{padding:200px 0 0;min-height:0}.cfd-device{border-radius:20px 20px 0 0;border-inline:0;padding:22px 16px}.cfd-device h1{font-size:25px}.badges{margin-top:6px}.demo-body .topbar{min-height:74px;padding:8px 14px;gap:8px}.modes{gap:7px}.modes button{font-size:11px;padding:12px 4px}.readings>div{padding:10px 5px;display:block;text-align:center}.readings strong{font-size:21px}.readings span{font-size:10px}.readings .ico{height:23px;margin-bottom:4px}.output{grid-template-columns:23px 1fr 46px;gap:10px}.output small{grid-column:2/4;font-size:11px}.output strong{font-size:13px}.output .ico{grid-row:1/3}.alerts{grid-template-columns:1fr 1fr}.alerts button{min-height:42px}.notifications{grid-template-columns:1fr 1fr}.notifications button{min-height:42px}.caption{border-radius:0;margin:0;padding:20px 16px;border-inline:0}.ha-card{font-size:12px}.simulation-time{top:89px}.summary{font-size:12px}}