.demo-body{isolation:isolate;min-height:100vh}.demo-body>.scene{position:fixed}.demo-body .topbar{min-height:60px;padding:5px 4%;gap:25px}.demo-body .wordmark{height:48px;width:265px}.tagline{font-size:24px;font-weight:750;margin-right:auto}.demo-main{display:flex;justify-content:flex-end;padding:8px 1.5% 24px;min-height:calc(100vh - 60px)}.cfd-device{width:560px;padding:23px 24px;align-self:start}.cfd-device h1{font-size:29px;letter-spacing:-.032em;line-height:1.15}.pills{display:flex;gap:9px;margin:7px 0 14px}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.modes button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:16px 4px 10px;border:1px solid var(--line);border-radius:14px;background:var(--tile);font-size:13px;font-weight:650;min-height:94px}.modes .ico{width:36px;height:36px}.modes [aria-pressed=true]{background:color-mix(in srgb,var(--accent) 18%,var(--tile));border-color:var(--accent);color:var(--ink)}[data-theme=dark] .modes [aria-pressed=true]{color:var(--accent)}.status{margin:12px 0}.status h2{font-size:21px;line-height:1.3}.status p{font-size:17px;line-height:1.35;margin-top:2px}.cfd-device .reading{padding:8px 16px;gap:22px;border:1px solid var(--line)}.cfd-device .readings{gap:7px;margin-bottom:8px}.cfd-device .reading .ico{width:27px;height:27px}.cfd-device .reading small{font-size:13px}.cfd-device .reading strong{font-size:20px}.label{font-size:17px;margin:8px 0 5px;letter-spacing:0}.outputs{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--tile)}.output{display:grid;grid-template-columns:25px 96px 42px 75px 1fr;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:13px}.output small{font-size:11px}.output strong{font-weight:400}.output .ico{width:23px;height:23px}.switch{width:40px;height:24px;padding:3px;border:1px solid var(--line);border-radius:20px;background:#939b9e55;flex:none}.switch:after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true]:after{margin-left:15px}.outputs .info-row{font-size:11px;margin:0;padding:6px 10px;color:var(--muted)}.outputs .ico{width:20px;height:20px}.cfd-device>.info-row{padding:10px 12px;font-size:14px;min-height:45px;border:1px solid var(--line)}.cfd-device>.info-row:first-of-type{margin-top:10px}.cfd-device>.info-row .ico{color:var(--accent)}.cfd-device .info-row .local{float:right}.alert-buttons{display:flex;gap:9px;margin-left:35px}.alert-buttons .button{font-size:11px;min-height:36px;padding:8px 12px;font-weight:500}.alerts{margin-top:12px}.alerts .label .ico{margin-right:9px}.notifications{margin-top:14px;padding-top:8px;border-top:1px solid var(--line)}.channels{display:flex;justify-content:space-between;gap:12px}.channels label{display:flex;align-items:center;gap:7px;font-size:12px}.notifications .note{margin:8px 0}.notifications>.button{font-size:12px;min-height:34px;padding:7px 14px}.caption{position:fixed;bottom:22px;left:2%;padding:18px 25px;width:min(650px,44%);font-size:14px}.caption h2{font-size:22px;margin-bottom:8px}.caption small{font-size:11px;color:var(--muted)}
@media(min-width:1450px){.cfd-device{width:560px}.demo-main{padding-top:8px}.caption{width:660px}}
@media(max-width:1150px){.tagline{font-size:18px}.demo-body .wordmark{width:200px}.caption{width:36%;font-size:12px;padding:18px}.caption h2{font-size:20px}}
@media(max-width:850px){.tagline{display:none}.cfd-device{width:530px}.caption{position:static;width:auto;margin:0 20px 20px}.demo-main{min-height:0}.demo-body>.scene img{object-position:35% center}}
@media(max-width:600px){.demo-body>.scene{position:absolute;top:72px;height:240px;z-index:-1}.demo-body>.scene img{object-position:center 63%}.demo-body .topbar{min-height:72px;padding:8px 16px}.demo-body .wordmark{width:125px;height:45px}.demo-main{display:block;padding:230px 0 0}.cfd-device{width:100%;padding:22px 16px;border-radius:22px 22px 0 0;box-shadow:none}.cfd-device h1{font-size:25px}.modes{gap:6px}.modes button{font-size:12px;min-height:86px}.cfd-device .reading{gap:10px;padding:10px}.cfd-device .reading strong{font-size:18px}.cfd-device .reading small{font-size:11px}.output{grid-template-columns:22px 83px 40px 1fr;gap:8px;font-size:12px;padding:8px}.output small{grid-column:2/-1;margin-top:-5px}.alert-buttons{margin-left:0;gap:6px;flex-wrap:wrap}.alert-buttons .button{padding:8px 10px}.channels{display:grid;grid-template-columns:1fr 1fr}.channels label{justify-content:space-between}.caption{margin:0;border-radius:0;padding:20px 16px;border-top:0}.caption h2{font-size:20px}.cfd-device>.info-row{font-size:12px}.cfd-device .info-row .button{font-size:12px;padding:9px 12px}}