@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400&display=swap');
#pool-lab{--water-color:#00b9e5;--warm-color:#18d6bf;--dirt:0;--jet:1;--flow-seconds:1s;--sprite-pos:0%;max-width:1800px;margin:auto;padding:35px 3% 50px;color:#e6f5ff}
.lab-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:24px}.lab-heading h1{font-size:clamp(38px,4vw,64px)!important;line-height:1.05}.lab-heading h1 em{color:#91e4f5;font-style:normal}.lab-heading .eyebrow{margin-bottom:12px}.lab-heading>p{max-width:360px;color:#b5d0de;margin-bottom:0}.lab-tools{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0}.lab-tools>div,.lab-scenarios{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lab-scenarios>span{font-size:12px;letter-spacing:.1em;margin-right:5px;color:#89b4c4}
#pool-lab button{font:600 14px/1.3 'DM Sans',sans-serif;cursor:pointer;color:#dceefa;border:1px solid #3a6476;background:#112c3c;border-radius:5px;padding:10px 12px;min-height:40px}#pool-lab button:hover{background:#205067;border-color:#8fe2ef}#pool-lab button:focus-visible{outline:3px solid #ffb76d;outline-offset:3px}
.lab-workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.lab-visual{min-width:0}.lab-scene{position:relative;aspect-ratio:3/2;overflow:hidden;border:1px solid #547282;border-radius:8px;background:#ebdfd0;isolation:isolate}.room-art{display:block;width:100%;height:100%}.flow-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.pipe-tint{fill:none;stroke-width:14;opacity:.65;stroke-linejoin:round}.cold{stroke:var(--water-color)}.warm{stroke:var(--warm-color)}.flow-dashes,.boiler-dashes{fill:none;stroke:#e8ffff;stroke-width:5;stroke-dasharray:9 30;stroke-linecap:round;animation:pipe-flow var(--flow-seconds) linear infinite}.boiler-dashes{stroke-width:4;stroke-dasharray:13 50;animation-duration:2s}.water-tint{fill:var(--water-color);opacity:.15;transition:fill .3s}.jet-stream{stroke:#dbffff;stroke-width:4;stroke-dasharray:3 25;fill:none;animation:pipe-flow var(--flow-seconds) linear infinite}.pool-flow{transition:opacity .3s}#jet-plume{opacity:var(--jet);transform-origin:1450px 877px;transform:scaleX(var(--jet))}#dirt-particles{fill:#777043;opacity:var(--dirt)}
.lab-scene:after{content:'';position:absolute;left:0;right:0;bottom:0;height:24%;background:#727653;opacity:calc(var(--dirt)*.55);pointer-events:none;clip-path:polygon(0 14%,50% 0,100% 14%,100% 100%,0 100%)}
#pool-lab .equipment-hit{position:absolute;padding:0;background:transparent;border:2px solid transparent;border-radius:8px;min-height:0;z-index:4}#pool-lab .equipment-hit:hover,#pool-lab .equipment-hit.selected,#pool-lab .equipment-hit:focus-visible{background:#40cdff16;border-color:#0787aa;box-shadow:0 0 0 3px #c4fcff60}.equipment-hit span{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:max-content;max-width:190px;padding:6px 9px;background:#061b2d;color:white;border-radius:4px;opacity:0;pointer-events:none;font-size:13px}.equipment-hit:hover span,.equipment-hit:focus-visible span{opacity:1}
.screen-readout{position:absolute;background:#092e60;color:#efffff;text-align:center;font-family:monospace;line-height:1.2;display:flex;flex-direction:column;justify-content:center;pointer-events:none;font-size:clamp(6px,.84vw,15px);overflow:hidden}.temp-screen{left:24.95%;top:26.35%;width:6.1%;height:3.65%}.salt-screen{left:65.8%;top:21.65%;width:5.55%;height:3.55%;font-size:clamp(5px,.74vw,13px)}.ph-screen{left:81.1%;top:20.6%;width:5.9%;height:3.05%}.screen-readout small{font-size:.8em}.screen-readout b{font-weight:400}
.swimmer{position:absolute;width:12%;aspect-ratio:1/2;left:49%;bottom:11%;z-index:2;transform:translateX(-50%);transition:left .6s,bottom .6s;pointer-events:none}.swimmer-sprite{width:100%;height:100%;background:url('./assets/pool-swimmer-poses.png') var(--sprite-pos) 50%/600% 100% no-repeat;animation:bob 3s ease-in-out infinite}.swimmer-ripple{position:absolute;bottom:19%;left:0;width:100%;height:7%;border:2px solid #d3ffffa0;border-radius:50%;animation:ripple 2s ease-out infinite}.swimmer-bubble{position:absolute;left:56%;bottom:20%;max-width:28%;z-index:3;background:#fffdf4;color:#183347;font-size:clamp(11px,1vw,17px);line-height:1.4;padding:10px 14px;border:1px solid #498096;border-radius:12px 12px 12px 0;box-shadow:0 4px 15px #00152630;pointer-events:none}.swimmer-bubble:empty{display:none}[data-mood="1"] .swimmer-sprite{animation:shiver .14s linear infinite}[data-out="true"] .swimmer{left:58%;bottom:25%;width:10%}[data-out="true"] .swimmer-bubble{left:64%;bottom:35%}[data-out="true"] .swimmer-ripple{display:none}[data-out="true"] .swimmer-sprite{animation:none}
.scene-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#102c3a;border:1px solid #345b6a;border-top:0;padding:10px 14px;font-size:13px;border-radius:0 0 6px 6px}.lab-caption{font-size:13px;line-height:1.5;color:#a1bdcb;max-width:none!important}.lab-console{border:1px solid #3f6374;background:linear-gradient(145deg,#122d3d,#071824);border-radius:8px;overflow:hidden}.console-heading{padding:16px 18px;background:#16394a}.console-heading span{font-size:11px;letter-spacing:.1em;color:#9cc5d6;display:block}.console-heading strong{display:block;font-size:18px;color:#b0ecdf;margin-top:3px}.control-tabs{display:flex;padding:10px 10px 0;gap:5px}#pool-lab .control-tabs button{flex:1;font-size:13px;padding:10px 6px;border:1px solid transparent;background:transparent}#pool-lab .control-tabs [aria-selected="true"]{background:#d2f1f6;color:#072237}.controller-group{padding:5px 18px 15px}.controller-group[hidden]{display:none}.control-row{display:grid;grid-template-columns:1fr auto;gap:5px 8px;padding:15px 0 10px;border-bottom:1px solid #52718244}.control-row label{font-size:14px;font-weight:600}.control-row output{font:600 16px monospace;color:#a0e8fa}.control-row input{width:100%;grid-column:1/-1;accent-color:#6fdbef;cursor:pointer;margin:9px 0;height:24px}.control-row small{grid-column:1/-1;color:#9cb8c8;font-size:12px;line-height:1.4}.simulation-note{font-size:12px;color:#adc2cd;padding:0 18px;margin:0 0 15px;line-height:1.5}.automation-box{padding:16px 18px;border-top:1px solid #3f6374;background:#061c2a}.automation-box p{font-size:14px;line-height:1.5;margin:12px 0}.automation-box small{font-size:12px;color:#9bb6c5;line-height:1.4;display:block}#pool-lab #auto-toggle{width:100%;background:#b3e9e3;color:#072b31;border-color:#b3e9e3;display:flex;justify-content:space-between;gap:8px}#pool-lab #auto-toggle[aria-pressed="true"]{background:#49dac5}.maintenance-actions{display:flex;gap:7px;margin-top:10px}#pump-toggle,#salt-balance{margin-top:12px;width:100%}
.lab-explanation{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-top:32px;padding:30px;border-top:1px solid #365d6d;background:#0b2331;border-radius:6px}.lab-explanation .eyebrow{margin-bottom:14px}.lab-explanation h2{font-size:32px}.lab-explanation p{font-size:16px;color:#c1d5e0}.auto-explanation{border-left:3px solid #72d6c5;padding-left:17px;margin-top:20px}.auto-explanation strong{color:#9ae6d8}.auto-explanation p{margin:7px 0}.testing-note{font-size:14px!important;border-top:1px solid #395865;padding-top:15px}.lab-alerts .balanced-message{color:#a4ebda}#pool-alert-list{display:grid;gap:7px}#pool-lab #pool-alert-list button{display:flex;gap:10px;text-align:left;background:#213344;border-color:#617782}#pool-alert-list button span{color:#ffc38a}.lab-sources{margin-top:25px;font-size:14px;color:#a7c3d3}.lab-sources summary{cursor:pointer;color:#c7e4ee;padding:10px 0}.lab-sources p{max-width:100ch}.lab-sources li{margin:8px 0}.lab-sources a{color:#9de0ed}
[data-stopped="true"] .flow-dashes,[data-stopped="true"] .jet-stream{animation-play-state:paused;opacity:0}[data-heating="false"] .boiler-dashes{animation-play-state:paused;opacity:0}[data-paused="true"] .flow-dashes,[data-paused="true"] .boiler-dashes,[data-paused="true"] .jet-stream,[data-paused="true"] .swimmer-sprite,[data-paused="true"] .swimmer-ripple{animation-play-state:paused!important}
#pool-lab.room-expanded{position:fixed;inset:0;z-index:100;background:#06131e;overflow:auto;max-width:none;padding:16px 3%}.room-expanded .lab-heading,.room-expanded .lab-explanation,.room-expanded .lab-sources{display:none}.room-expanded .lab-workspace{grid-template-columns:minmax(0,1fr) 310px}.room-expanded .lab-scene{max-height:80vh;width:auto;aspect-ratio:3/2;margin:auto}.room-expanded .lab-visual{max-width:120vh}
@keyframes pipe-flow{to{stroke-dashoffset:-39}}@keyframes bob{50%{transform:translateY(3%)}}@keyframes shiver{50%{transform:translateX(2px)}}@keyframes ripple{to{transform:scale(1.3);opacity:.15}}
@media(min-width:1650px){.screen-readout{font-size:15px}.salt-screen{font-size:13px}}
@media(max-width:1100px){.lab-workspace{grid-template-columns:minmax(0,1fr) 285px}.lab-heading>p{font-size:15px}.swimmer-bubble{padding:6px 8px}}
@media(max-width:850px){#pool-lab{padding:25px 4%}.lab-heading{align-items:start;gap:15px}.lab-heading>p{max-width:43%;font-size:14px}.lab-workspace,.room-expanded .lab-workspace{grid-template-columns:1fr}.lab-console{scroll-margin-top:120px}.lab-explanation{grid-template-columns:1fr;gap:20px;padding:22px}.screen-readout{font-size:1.4vw}.salt-screen{font-size:1.2vw}.swimmer-bubble{font-size:clamp(10px,1.5vw,14px)}.lab-caption{font-size:12px}.room-expanded .lab-visual{max-width:none}.room-expanded .lab-scene{max-height:none;width:100%}.lab-tools button{min-height:44px!important}.control-row input{height:32px}.lab-scenarios>span{display:none}}
@media(max-width:520px){.lab-heading{display:block}.lab-heading>p{max-width:100%;font-size:15px;margin:12px 0}.lab-heading h1{font-size:38px!important}.lab-heading h1 br{display:none}.lab-tools{gap:8px}.lab-tools button{font-size:12px!important;padding:8px!important}.lab-tools>div{gap:5px}.swimmer-bubble{padding:4px 6px;max-width:33%;left:55%;font-size:10px}.scene-bottom{font-size:12px}.lab-explanation{padding:18px}.lab-scene .equipment-hit{min-width:18px}.screen-readout{font-size:1.3vw}}
@media(prefers-reduced-motion:reduce){.flow-dashes,.boiler-dashes,.jet-stream,.swimmer-sprite,.swimmer-ripple{animation:none!important}.swimmer{transition:none}}
/* Keep the swimmer and controls in view while exploring. */
.lab-heading h1{font-size:clamp(34px,3vw,48px)!important}.lab-heading h1 br{display:none}.lab-heading>p{font-size:15px}#pool-lab{padding-top:22px}.swimmer{width:10%;bottom:8%}[data-out="true"] .swimmer{width:8%;bottom:25%}.boiler-dashes{animation-name:boiler-flow}@keyframes boiler-flow{to{stroke-dashoffset:-63}}
@media(min-width:851px){.lab-scene{width:min(100%,calc((100vh - 365px)*1.5));min-width:550px;margin:auto}.lab-visual{display:flex;flex-direction:column}.scene-bottom,.lab-caption{width:100%;max-width:100%}.lab-heading{margin-bottom:14px}.lab-heading>p{max-width:360px}.lab-console{position:sticky;top:118px}.room-expanded .lab-scene{width:100%;min-width:0}}
@media(max-width:850px){.lab-visual{position:sticky;top:90px;z-index:6;background:#06131e;padding-bottom:5px}.lab-caption{display:none}.lab-scene{width:100%}.scene-bottom{padding:6px 9px}.room-expanded .lab-visual{position:static}.lab-console{scroll-margin-top:440px}.lab-workspace{align-items:start}}
@media(max-width:520px){.lab-heading h1{font-size:34px!important}.lab-heading>p{font-size:14px}.lab-visual{top:81px}.lab-console{scroll-margin-top:420px}}
.lab-scene{container-type:inline-size}.screen-readout{font-size:1.05cqw}.temp-screen span{font-size:.9cqw;white-space:nowrap}.temp-screen small{font-size:.7cqw}.salt-screen{font-size:.85cqw}.salt-screen small{font-size:.72cqw}.ph-screen{flex-direction:row;align-items:center;gap:.35cqw;font-size:1.2cqw}
.quick-feedback{margin:0 18px 16px;padding:12px;border-left:2px solid #ecc087;background:#193744;font-size:14px;line-height:1.5;color:#e6f5ff}
.trainer-title{position:absolute;left:8%;top:2.3%;color:#102332;font:600 3.3cqw/1.15 "Barlow Condensed",sans-serif;pointer-events:none}.trainer-logo{position:absolute;left:50%;top:1%;transform:translateX(-50%);width:7.5%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;pointer-events:none}

.trainer-title{left:50%;top:2.2%;transform:translateX(-50%);width:40%;text-align:center;font:400 3.7cqw/1.25 "Kalam","Segoe Print",cursive;white-space:nowrap}.trainer-logo{left:9.5%;top:1%;transform:none;width:8%;height:auto;aspect-ratio:auto;object-fit:contain;clip-path:circle(48% at 50% 49%);filter:saturate(.46) contrast(.77) brightness(1.15);opacity:.88}
.mobile-control-hint,#pool-lab #mobile-controls-close{display:none}@media(max-width:850px){.lab-console{display:none}.mobile-control-hint{display:block;font-size:14px;margin:8px 0}.mobile-control-hint button{margin-left:8px}.lab-visual{position:relative;top:auto}.controls-open .lab-console{display:block;position:fixed;left:0;right:0;bottom:0;z-index:110;max-height:48dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 35px #0008}.controls-open .lab-visual{position:sticky;top:80px;z-index:6}.controls-open{padding-bottom:50dvh!important}#pool-lab #mobile-controls-close{display:block;position:sticky;float:right;top:8px;margin:8px;z-index:2;background:#d2f1f6;color:#072237}.controls-open .console-heading{padding-right:86px}.room-expanded.controls-open .lab-visual{position:sticky;top:0}.lab-console .simulation-note{margin-bottom:10px}}

@media(max-width:850px){.lab-visual{scroll-margin-top:90px}.controls-open .lab-visual{scroll-margin-top:90px}.lab-heading{margin-bottom:8px}}