#air-lab { --ice:#e8f3ff; --navy:#133653; --sky:#a8d8ff; --line:color-mix(in srgb,var(--navy) 22%,transparent); color:var(--navy); background:var(--ice); font-family:Arial,Helvetica,sans-serif; padding:clamp(1.25rem,4vw,4rem); border-block:1px solid var(--line); }
#air-lab * { box-sizing:border-box; } #air-lab h2,#air-lab h3,#air-lab p { margin-top:0; } #air-lab h2 { max-width:12ch; margin-bottom:.55rem; font-size:clamp(2rem,5vw,4.8rem); line-height:.94; letter-spacing:-.06em; } #air-lab h3 { margin-bottom:.45rem; font-size:clamp(1.45rem,2vw,2.1rem); }
.air-lab__intro { max-width:60rem; margin-bottom:2rem; } .air-lab__intro > p:last-child { max-width:55rem; line-height:1.55; } .air-lab__eyebrow { margin-bottom:.55rem!important; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.air-lab__main-grid { display:grid; grid-template-columns:minmax(15rem,.65fr) minmax(18rem,1.35fr); border:1px solid var(--line); } .air-lab__controls { padding:clamp(1.1rem,3vw,2rem); border-right:1px solid var(--line); }
.air-lab__controls fieldset { margin:0 0 1.3rem; padding:0 0 1.3rem; border:0; border-bottom:1px solid var(--line); } .air-lab__controls legend { margin-bottom:1rem; font-weight:700; } .air-lab__controls label { display:flex; justify-content:space-between; gap:.5rem; margin:1rem 0 .35rem; font-size:.9rem; } .air-lab__controls output { font-weight:700; }
#air-lab input[type="range"] { width:100%; accent-color:var(--navy); } #air-lab select,#air-lab input[type="number"] { color:var(--navy); background:#ffffff; border:1px solid var(--line); border-radius:0; padding:.55rem; font:inherit; }
#air-lab button { appearance:none; color:var(--navy); background:var(--sky); border:1px solid var(--navy); border-radius:0; padding:.65rem .9rem; font:inherit; font-weight:700; cursor:pointer; } #air-lab button:hover { background:var(--navy); color:var(--ice); } #air-lab button:focus-visible,#air-lab input:focus-visible,#air-lab select:focus-visible,#air-lab summary:focus-visible { outline:3px solid var(--navy); outline-offset:3px; }
.air-lab__assumption { margin:.7rem 0 0; font-size:.78rem; line-height:1.45; } .air-lab__visual-wrap { min-width:0; padding:clamp(1rem,3vw,2rem); display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:start; } .air-lab__result { grid-column:1/-1; display:flex; align-items:baseline; gap:.45rem; } .air-lab__result span { font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; } .air-lab__result strong { font-size:clamp(3rem,8vw,6rem); line-height:.8; letter-spacing:-.07em; }
.air-lab__room { --room-width:49%; --room-height:48%; position:relative; min-height:250px; overflow:hidden; isolation:isolate; border:1px solid var(--navy); background:#d9edff; } .air-lab__wall { position:absolute; inset:0 0 26% 0; background:linear-gradient(130deg,#f9fdff,#cfe7ff); } .air-lab__floor { position:absolute; inset:auto 0 0; height:26%; background:repeating-linear-gradient(90deg,transparent 0 34px,var(--line) 35px 36px),#b8dcff; transform:perspective(150px) rotateX(9deg); transform-origin:bottom; } .air-lab__ceiling { position:absolute; width:155%; height:38%; top:-30%; left:-20%; border:1px solid var(--line); background:#ffffff; transform:rotate(-5deg); } .air-lab__dimension-frame { position:absolute; z-index:1; width:var(--room-width); height:var(--room-height); left:calc((100% - var(--room-width)) / 2); bottom:21%; border:2px solid var(--navy); background:color-mix(in srgb,var(--sky) 18%,transparent); pointer-events:none; transition:width .25s ease,height .25s ease,left .25s ease; } .air-lab__dimension-frame span { position:absolute; left:0; bottom:calc(100% + 5px); padding:.2rem .35rem; color:var(--navy); background:var(--ice); font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; } .air-lab__window { position:absolute; z-index:2; top:17%; left:9%; width:24%; aspect-ratio:1; border:6px solid var(--navy); background:linear-gradient(135deg,#a8d8ff 48%,#b4d9fc 49%); } .air-lab__unit { position:absolute; z-index:2; bottom:15%; right:12%; width:20%; min-width:76px; height:43%; border:1px solid var(--navy); background:#f8fcff; display:grid; align-content:center; gap:6px; padding:13px; } .air-lab__unit:after { content:""; position:absolute; inset:12px; border-block:1px solid var(--line); } .air-lab__unit i { position:relative; z-index:1; height:2px; background:var(--navy); }
.air-lab__flow { position:absolute; z-index:2; inset:0; width:100%; height:100%; fill:none; stroke:var(--navy); stroke-width:2.2; stroke-dasharray:.04 .035; animation:air-flow var(--flow-duration,3s) linear infinite; } .air-lab__room.is-paused .air-lab__flow { animation-play-state:paused; } @keyframes air-flow { to { stroke-dashoffset:-1; } } .air-lab__motion { align-self:end; } .air-lab__room-note,.air-lab__comparison { grid-column:1/-1; margin:0; font-size:.86rem; line-height:1.45; } .air-lab__comparison { padding-top:1rem; border-top:1px solid var(--line); } .air-lab__comparison strong { display:block; font-size:1.7rem; letter-spacing:-.04em; }
.air-lab__formula { padding:1rem 0; border-bottom:1px solid var(--line); font-size:.9rem; line-height:1.5; } .air-lab__formula summary { cursor:pointer; font-weight:700; } .air-lab__formula p { max-width:65rem; margin:.8rem 0 0; }
.air-lab__cost { display:grid; grid-template-columns:.8fr 1.4fr .7fr; gap:clamp(1rem,3vw,2rem); padding-top:2rem; align-items:start; } .air-lab__cost p { line-height:1.5; font-size:.88rem; } .air-lab__cost-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; } .air-lab__cost-form label { display:grid; gap:.35rem; font-size:.78rem; font-weight:700; } .air-lab__cost-form button { grid-column:span 2; justify-self:start; } .air-lab__cost-output { padding:1rem; border:1px solid var(--line); background:#ffffff; } .air-lab__cost-output strong,.air-lab__cost-output span,.air-lab__cost-output small { display:block; } .air-lab__cost-output strong { font-size:2.15rem; letter-spacing:-.06em; } .air-lab__cost-output span { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; } .air-lab__cost-output small { margin-top:.75rem; line-height:1.4; } .air-lab__cost-output p { margin:1rem 0 0; padding-top:.7rem; border-top:1px solid var(--line); font-weight:700; }
@media (max-width:760px) { .air-lab__main-grid,.air-lab__cost { grid-template-columns:1fr; } .air-lab__controls { border-right:0; border-bottom:1px solid var(--line); } .air-lab__cost-form { grid-template-columns:1fr; } .air-lab__cost-form button { grid-column:auto; } } #air-lab button:disabled { cursor:not-allowed; opacity:.6; } @media (prefers-reduced-motion:reduce) { .air-lab__flow,.air-lab__dimension-frame { animation:none; transition:none; } }

#air-lab{padding:30px;border:1px solid var(--line);border-radius:12px;background:#f3f9ff;font-family:var(--sans)}
#air-lab h2{font-size:29px;line-height:1.1;max-width:none;letter-spacing:-.04em;margin-bottom:12px}
.air-lab__intro{margin-bottom:26px;max-width:750px}.air-lab__intro>p:last-child{font-size:13px;color:var(--muted);max-width:70ch;margin-bottom:0}.air-lab__eyebrow{font:9px/1.6 var(--mono);color:var(--muted)}
.air-lab__main-grid{border-radius:7px;overflow:hidden;background:var(--paper);grid-template-columns:minmax(230px,.85fr) minmax(300px,1.4fr)}
.air-lab__controls{padding:25px}.air-lab__controls legend{font-size:13px;font-weight:600}.air-lab__controls label{font-size:12px}.air-lab__assumption{font-size:11px;color:var(--muted)}
#air-lab button{font-size:11px;padding:9px 14px;border-radius:4px;font-weight:500}#air-lab select,#air-lab input[type=number]{border-radius:4px;background:#fbfdff;min-width:0;max-width:100%;font-size:13px}
.air-lab__result{flex-wrap:wrap;align-items:baseline;gap:8px}.air-lab__result strong{font-size:70px;font-weight:500;letter-spacing:-.07em}.air-lab__result span{font:9px var(--mono)}
.air-lab__visual-wrap{padding:26px;grid-template-columns:1fr}.air-lab__room{width:100%;height:260px;border-color:#95bce3;border-radius:8px}.air-lab__window{border-width:2px;border-radius:50px 50px 0 0;width:18%;top:18%;left:8%}.air-lab__unit{border-radius:12px;box-shadow:5px 8px 0 #98bde280;width:16%;right:13%;height:39%}.air-lab__dimension-frame{border:1px dashed #467eaf;background:#82c8ff15}.air-lab__dimension-frame span{left:5px;top:5px;bottom:auto;font-size:7px;z-index:5;white-space:normal;max-width:100px}.air-lab__motion{justify-self:end;margin-top:-6px}.air-lab__room-note,.air-lab__comparison{font-size:12px;color:var(--muted)}.air-lab__comparison strong{color:var(--ink);font-size:27px;font-weight:500}
.air-lab__formula{font-size:12px}.air-lab__formula summary{font-weight:500}.air-lab__cost{grid-template-columns:1fr 1.25fr .9fr;gap:26px;padding-top:28px}#air-lab h3{font-size:26px;line-height:1.1;margin-bottom:14px}.air-lab__cost p{font-size:12px;color:var(--muted)}.air-lab__cost-form label{font-size:10px;font-weight:500}.air-lab__cost-output{border-radius:6px;background:var(--sky);padding:20px}.air-lab__cost-output strong{font-size:36px;font-weight:500}.air-lab__cost-output span{font:9px/1.5 var(--mono)}.air-lab__cost-output small{font-size:11px}.air-lab__cost-output p{font-weight:500;font-size:11px;color:var(--ink)}
@media(max-width:900px){.air-lab__cost{grid-template-columns:1fr 1fr}.air-lab__cost>div:first-child{grid-column:1/-1}.air-lab__cost>div:first-child p:last-child{max-width:500px}.air-lab__cost-form{grid-template-columns:1fr 1fr}.air-lab__cost-form button{grid-column:1/-1}}
@media(max-width:740px){#air-lab{padding:21px 16px}#air-lab h2{font-size:26px}.air-lab__main-grid,.air-lab__cost{grid-template-columns:1fr}.air-lab__controls,.air-lab__visual-wrap{padding:20px}.air-lab__room{height:220px;min-height:220px}.air-lab__cost-form{grid-template-columns:1fr 1fr}.air-lab__result strong{font-size:57px}.air-lab__result span{font-size:8px}.air-lab__intro>p:last-child{font-size:12px}.air-lab__cost-output{padding:22px}.air-lab__cost-output strong{font-size:42px}.air-lab__cost-output p{font-size:12px}.air-lab__cost-output small{font-size:12px}}