.demo-body{min-height:100vh;isolation:isolate}.demo-body>.scene{position:fixed}.demo-body:before{content:"";position:fixed;inset:0;background:#0000000a;z-index:-1}.demo-body .topbar{max-width:none;margin:0;border-radius:0;min-height:70px;padding:8px 3%;background:var(--surface)}.demo-main{padding:20px 2% 35px;display:flex;justify-content:flex-end;min-height:calc(100vh - 70px);align-items:flex-start}.cfd-device{width:650px;padding:24px;border-radius:20px}.cfd-device h1{font-size:31px;letter-spacing:-.032em;line-height:1.2}.pills{display:flex;gap:7px}.pills .pill{border-radius:12px;padding:9px 12px;font-size:11px}.active{background:var(--accent);color:var(--on-accent);font-weight:700}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 10px}.modes button{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:100px;justify-content:center;background:var(--tile);border:1px solid var(--line);border-radius:13px}.modes button .ico{width:34px;height:34px}.modes [aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}.rule-summary{display:flex;justify-content:space-between;font-size:13px;gap:12px}.cfd-device .readings{grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.cfd-device .readings>div{padding:12px 10px;gap:0;min-height:90px}.cfd-device .readings .ico{display:none}.cfd-device .readings strong{font-size:24px}.cfd-device .readings small{font-size:12px}.cfd-device .readings small:last-child:not(:first-child){font-size:10px}.output{grid-template-columns:25px 1.03fr 48px .9fr 1.65fr;gap:12px;margin:6px 0;padding:10px 12px;font-size:13px;min-height:49px}.output>.ico{grid-row:auto;width:24px;height:24px}.output-name{font-size:13px}.output>small{grid-column:auto;font-size:12px}.command{font-size:12px;white-space:nowrap}.limits{border-bottom:1px solid var(--line);padding:10px 0 16px;margin:10px 0;font-size:12px}.limits p+p{margin-top:9px}.limits .ico{width:23px;height:23px;margin-right:9px;color:var(--accent)}.limits .fine{text-align:center}.alerts h2,.notifications h2{font-size:16px;letter-spacing:0;margin-bottom:9px}.alert-buttons{display:flex;gap:9px}.alert-buttons button,.example,dialog button{border:1px solid var(--line);border-radius:9px;background:var(--tile);padding:8px 12px;font-size:12px}.alert-buttons button{flex:1;white-space:nowrap}.alerts .fine{margin-top:7px}#status{font-size:12px;color:var(--accent);min-height:36px;margin:8px 0}.notifications{display:flex;gap:15px;align-items:center;border-top:1px solid var(--line);padding-top:15px;flex-wrap:wrap}.notifications h2{margin:0 10px 0 0}.notifications label{display:flex;align-items:center;gap:6px;font-size:12px}.notifications .switch{width:35px;height:22px;padding:2px}.notifications .switch span{width:16px;height:16px;margin-left:13px}.notifications .switch[aria-checked=false] span{margin-left:0}.example{margin-top:8px}.caption{position:fixed;bottom:22px;left:2.5%;width:calc(100% - 730px);max-width:790px;padding:15px 22px;border-radius:14px}.caption strong{font-size:19px}.caption p{font-size:13px;margin-top:5px}dialog{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:30px;max-width:min(460px,90vw)}dialog h2{font-size:25px;margin-bottom:16px}dialog button{margin-top:20px}dialog::backdrop{background:#0008}
@media(min-width:1450px){.cfd-device{width:40vw;max-width:740px}.demo-main{padding-top:20px}.cfd-device h1{font-size:34px}.output{padding-block:12px}.caption{width:48%}}@media(max-width:1100px){.cfd-device{width:620px}.caption{position:static;margin:0 25px 25px;width:calc(100% - 50px)}.demo-main{min-height:0}}@media(max-width:700px){.demo-body>.scene{position:absolute;top:70px;height:270px;bottom:auto}.demo-main{display:block;padding:265px 0 0}.cfd-device{width:100%;padding:24px 18px;border-radius:24px 24px 0 0;background:var(--surface)}.cfd-device .panel-title{display:block}.cfd-device h1{font-size:30px}.pills{margin-top:13px}.pills .pill{padding:5px 10px;font-size:10px}.modes{gap:8px;margin:18px 0 12px}.modes button{min-height:85px;font-size:12px;gap:7px}.modes button .ico{width:29px;height:29px}.rule-summary{display:block;font-size:12px}.rule-summary span{display:block}.cfd-device .readings{grid-template-columns:1fr 1fr}.cfd-device .readings>div{min-height:75px;padding:12px 14px}.cfd-device .readings strong{font-size:25px}.output{grid-template-columns:24px 1fr 45px 86px;gap:5px 9px;padding:12px 9px}.output>small{grid-column:2/5}.output>.ico{grid-row:1/3}.output-name{font-size:13px}.command{font-size:11px}.switch{width:43px;height:25px;padding:2px}.switch span{width:19px;height:19px;margin-left:18px}.alert-buttons{display:grid;grid-template-columns:1fr 1fr}.alert-buttons button{white-space:normal;min-height:42px}.notifications{gap:14px 18px}.notifications h2{width:100%}.caption{position:static;margin:0;border-radius:0;width:100%;padding:22px 18px;border-top:1px solid var(--line);box-shadow:none}.caption strong{font-size:17px}.caption p{font-size:12px}.demo-body .topbar .wordmark{width:132px}.demo-body .topbar{padding:9px 15px}.limits .fine{text-align:left}}