.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:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-inline:28px}.tagline{margin-right:auto;font-size:15px;color:var(--muted)}.demo-main{padding:22px 24px 40px;display:flex;justify-content:flex-end;min-height:calc(100svh - 82px)}.cfd-device{width:min(760px,65%);align-self:flex-start;padding:24px}.cfd-device h1{font-size:30px;letter-spacing:-.03em;line-height:1.15}.cfd-device h2{font-size:14px;margin:0;letter-spacing:-.01em}.cfd-device .panel-title{flex-wrap:wrap;gap:10px}.pills{display:flex;gap:6px}.cues{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0 12px}.cues button{border:1px solid var(--line);border-radius:12px;background:var(--tile);padding:10px 5px;min-height:85px;font-size:12px}.cues button>span{display:block;font-size:30px;line-height:1.25;margin-bottom:5px}.cues [aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.vessels{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vessel{display:grid;grid-template-columns:44px 1fr;gap:12px;text-align:left;border:1px solid var(--line);border-radius:13px;background:var(--tile);padding:13px;min-height:112px}.vessel[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.vessel .vessel-icon{width:40px;height:65px;align-self:center}.vessel strong{display:block;font-size:15px}.vessel .temperature{font-size:28px;line-height:1.2;font-weight:750;letter-spacing:-.02em}.vessel .target{font-size:10px;color:var(--muted);float:right;padding-top:10px}.vessel .vessel-state{display:flex;justify-content:space-between;gap:7px;font-size:10px;margin-top:6px}.vessel-state .heating{color:var(--heat)}.vessel-state .cooling{color:var(--cool)}.gravity{display:block;font-size:9px;color:var(--muted);margin-top:5px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-grid .tile{padding:12px}.detail-grid .timeline{padding-top:26px;font-size:10px}.detail-grid p{font-size:11px;color:var(--muted);margin-top:16px}.text-button{border:0;background:none;color:var(--heat);font-size:11px;text-decoration:underline;min-height:32px;padding:4px}.hub{margin-top:10px}.outlets{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}.outlet{display:flex;align-items:center;gap:10px;background:var(--tile);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12px;min-height:41px}.outlet button{margin-left:auto}.switch,.switch-track{flex:none;width:36px;height:22px;border:1px solid var(--line);background:var(--muted);padding:2px;border-radius:20px}.switch span,.switch-track:after{content:"";display:block;width:16px;height:16px;background:var(--knob);border-radius:50%;transition:transform .15s}.switch[aria-checked=true],[aria-checked=true] .switch-track{background:var(--accent)}.switch[aria-checked=true] span,[aria-checked=true] .switch-track:after{transform:translateX(12px)}.hub .note{font-size:10px;min-height:16px;margin-top:8px}.alert-area{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:10px}.alert-card{margin:0}.alert-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.alert-buttons button{border:1px solid var(--line);background:var(--tile);border-radius:7px;min-height:36px;padding:6px 9px;font-size:10px;flex:1 1 40%}.alert-buttons [aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.notifications{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.notification-buttons{display:flex;gap:8px;flex:1}.notification-buttons button{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--tile);border-radius:8px;padding:8px;font-size:10px;flex:1;min-height:40px}.switch-track{display:block;width:30px;height:19px;padding:2px}.switch-track:after{width:13px;height:13px}[aria-checked=true] .switch-track:after{transform:translateX(10px)}.device-footer{font-size:11px;color:var(--muted);margin-top:12px}.caption{position:fixed;bottom:20px;left:24px;width:min(560px,31%);padding:14px 18px;border-radius:14px;font-size:13px}.caption p{font-size:10px;line-height:1.5;margin-top:4px}
@media(min-width:1600px){.demo-main{padding-right:3%}.cfd-device{width:780px}}
@media(max-width:1100px){.cfd-device{width:76%;padding:18px}.caption{width:21%;font-size:11px}.vessel{padding:10px;gap:7px}.vessel .target{float:none;display:block;padding:0}.vessel .vessel-state{flex-wrap:wrap}.tagline{font-size:12px}.notification-buttons{flex-basis:100%}}
@media(max-width:800px){.cfd-device{width:88%}.caption{position:static;width:calc(100% - 48px);margin:0 24px 24px}.demo-main{min-height:0}.tagline{display:none}}
@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:220px 0 16px;display:block}.cfd-device{width:100%;padding:20px 14px;border-radius:22px 22px 0 0}.cfd-device h1{font-size:27px}.cues{gap:6px}.cues button{font-size:11px;min-height:80px}.vessels{gap:8px}.vessel{grid-template-columns:28px 1fr;gap:8px;padding:12px 8px;min-height:140px}.vessel .vessel-icon{width:27px;height:53px}.vessel strong{font-size:13px}.vessel .temperature{font-size:27px}.vessel .target{font-size:10px}.vessel .vessel-state{display:grid;font-size:10px}.gravity{font-size:9px}.safety{font-size:10px;gap:8px;padding:14px 0}.detail-grid{grid-template-columns:1fr}.detail-grid .timeline{font-size:11px}.detail-grid p{margin-top:10px}.outlets{gap:6px}.outlet{font-size:11px;padding:9px 7px;gap:4px;min-height:46px}.alert-area{grid-template-columns:1fr}.alert-buttons button{font-size:11px;min-height:42px}.notification-buttons{display:grid;grid-template-columns:1fr 1fr}.notification-buttons button{font-size:12px;justify-content:space-between;padding:10px}.caption{width:calc(100% - 20px);margin:0 10px 16px;padding:12px}.caption strong{font-size:11px}.caption p{font-size:10px}}

.gi{width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.35em;flex:none}
/* The hero photo keeps its quiet side on the left for page text; the demo mirrors it so the fermenters sit beside the panel. */
@media(min-width:801px){.demo-body>.scene img{transform:scaleX(-1);object-position:35% center}}