/* v7.28 — real place, faithfully illustrated, and a qualitative water lab. */
.real-observe{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:42px;align-items:center;padding-top:115px;padding-bottom:128px}
.real-observe .real-copy h2{font-size:clamp(42px,4.8vw,69px);margin:25px 0 20px}
.real-observe .real-copy>p{font-size:16px;line-height:1.75}
.real-discovery{background:#e5efe7;border:1px solid #c7ddce;border-radius:5px 23px 5px 23px;padding:25px 26px;margin:30px 0 21px;min-height:177px;box-shadow:0 12px 33px #2254561a}
.real-discovery small{font-size:10px;letter-spacing:.15em;font-weight:900;color:#558986}
.real-discovery h3{font:normal 30px Georgia,serif;color:#184b57;margin:9px 0 7px}
.real-discovery p{font-size:14px!important;line-height:1.6!important;margin:0;color:#4b7075}
.real-toggle{border:0;background:#205d68;color:#f8fae8;border-radius:5px 15px 5px 15px;min-height:48px;padding:12px 17px;font-weight:800;font-size:13px;box-shadow:0 12px 24px #215f6a31;transition:background .2s,transform .2s}
.real-toggle:hover{background:#123f4b;transform:translateY(-2px)}
.real-observe .real-photo-note{font-size:11px;color:#688482;line-height:1.5;margin:14px 0}
.real-observe .real-figure{margin:0;transform:none;border:7px solid white;border-radius:7px 29px 7px 29px;box-shadow:0 31px 75px #0f394653;overflow:hidden}
.real-image-stack{position:relative;width:100%;height:clamp(450px,39vw,570px);background:#2a695e;overflow:hidden}
.real-image-stack img,.real-observe .real-figure img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:51% center;border-radius:0;transition:opacity .65s ease,transform 1.5s ease}
.real-image-stack .real-original{opacity:0;object-position:center}
.real-figure[data-view="original"] .real-original{opacity:1}
.real-figure[data-view="original"] .real-art{opacity:0}
.real-pins{position:absolute;inset:0;pointer-events:none}
.real-pin{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);pointer-events:auto;display:grid;place-items:center;width:49px;height:49px;border-radius:50%;border:2px solid #f3f8df;color:#fcffe7;background:#185364c7;box-shadow:0 0 0 8px #ecf9e535,0 6px 19px #123d486b;backdrop-filter:blur(8px);font-size:17px;font-weight:900;transition:transform .2s,background .2s,box-shadow .2s}
.real-pin:hover,.real-pin.active{transform:translate(-50%,-50%) scale(1.13);background:#ead298;color:#184554;box-shadow:0 0 0 10px #fff8d25a,0 11px 25px #123d486b}
.real-observe .real-figure figcaption{position:absolute;left:17px;bottom:15px;color:#f3f9e5;background:#0c394abf;border:1px solid #ffffff80;border-radius:7px;padding:8px 11px;font-size:10px;letter-spacing:.05em}
.water-lab{position:relative;background:radial-gradient(ellipse at 10% 9%,#f3f3d8 0%,transparent 37%),linear-gradient(150deg,#daebe3,#bcded6);padding:116px 0 113px;color:#184552;overflow:hidden}
.water-lab:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:radial-gradient(#3c8f86 .7px,transparent .7px);background-size:22px 22px}
.water-lab>.wrap{position:relative}
.lab-heading{max-width:950px;margin-bottom:42px}
.lab-heading h2{font-size:clamp(54px,6vw,83px);margin:21px 0 20px;line-height:1}
.lab-heading h2 em{color:#4d9488}
.lab-heading p{max-width:720px;font-size:17px;line-height:1.65;color:#476e73}
.lab-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(370px,.88fr);gap:17px;align-items:stretch}
.lab-landscape{position:relative;overflow:hidden;isolation:isolate;background:#2d7f87;min-height:670px;border:7px solid #e9f3de;border-radius:8px 33px 8px 33px;box-shadow:0 26px 55px #195e5d48}
.lab-landscape:after{content:'';position:absolute;pointer-events:none;inset:0;box-shadow:inset 0 0 75px #104a5486}
.lab-landscape svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.lab-cloud,.lab-rain{transform:translateX(var(--rain-shift,0px));transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.lab-cloud{filter:drop-shadow(0 8px 16px #296e7480)}
.lab-rain path{animation:labRainFall 1.2s linear infinite;opacity:.8}
.lab-rain path:nth-child(3n){animation-delay:-.55s}
.lab-rain path:nth-child(2n){animation-delay:-.27s}
.lab-landscape[data-rain="0"] .lab-rain path:nth-child(n+5){opacity:.05}
.lab-landscape[data-rain="1"] .lab-rain path:nth-child(n+9){opacity:.05}
.lab-landscape[data-rain="2"] .lab-rain path{animation-duration:.67s;stroke-width:6}
.lab-flow{opacity:.06;transition:opacity .5s;animation:labFlow 1.4s linear infinite}
.lab-landscape[data-target="soil"] .lab-flow-soil,.lab-landscape[data-target="pond"] .lab-flow-pond,.lab-landscape[data-target="paving"] .lab-flow-paving{opacity:.95;filter:drop-shadow(0 0 11px #dfffff)}
#lab-water-fill,#lab-water-line{transition:transform 1.1s ease}
.lab-vapour{opacity:0;transition:opacity .8s;animation:labRise 3.4s ease-in-out infinite alternate}
.lab-sun-disk{opacity:.48;transition:opacity .6s}
.lab-landscape[data-sun="true"] .lab-vapour,.lab-landscape[data-sun="true"] .lab-sun-disk{opacity:1}
.lab-map-label{position:absolute;z-index:3;bottom:42px;display:flex;align-items:center;gap:7px;min-height:42px;border:1px solid #e5f8e0b8;background:#113e4fd4;color:#f7ffed;border-radius:4px 12px 4px 12px;padding:8px 10px;box-shadow:0 6px 18px #0c324755;font-size:10px;font-weight:900;letter-spacing:.07em;white-space:nowrap;transition:background .2s,transform .2s}
.lab-map-label span{font-size:20px;line-height:1;color:#d7e8af}
.lab-map-label:hover,.lab-map-label.active{background:#e6d2a2;color:#184655;transform:translateY(-4px)}
.lab-map-label.active span{color:#277885}
.lab-label-soil{left:5%}.lab-label-pond{left:38%}.lab-label-paving{right:4%}
.lab-scene-badge{position:absolute;top:17px;left:17px;z-index:2;background:#123e4caf;border:1px solid #ffffff66;color:#ecf6df;padding:9px 11px;border-radius:5px;font-size:9px;font-weight:900;letter-spacing:.1em}
.lab-console{background:#faf8ed;border:1px solid #a8c8b8;border-radius:26px 6px 26px 6px;padding:27px 28px;box-shadow:0 25px 55px #1a565747;display:flex;flex-direction:column;gap:20px}
.lab-console-head{display:flex;justify-content:space-between;gap:10px;font-size:10px;font-weight:900;letter-spacing:.12em;color:#427b79}
.lab-console-head strong{color:#b17d47;white-space:nowrap}
.lab-controls,.lab-rain-controls{border:0;padding:0;margin:0;min-width:0}
.lab-controls legend,.lab-rain-controls legend{display:block;color:#245563;font-size:13px;font-weight:900;margin-bottom:10px}
.lab-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.lab-controls legend{grid-column:1/-1}
.lab-controls button{min-width:0;min-height:100px;padding:11px 7px;background:#e7efe9;border:1px solid #c6d9cd;border-radius:5px 16px 5px 16px;color:#235665;display:grid;place-items:center;gap:2px;transition:background .2s,transform .2s}
.lab-controls button span{font:29px Georgia,serif;color:#388d8d}
.lab-controls button b{font-size:12px;line-height:1.13}
.lab-controls button small{font-size:10px;color:#5e7e81}
.lab-controls button.active,.lab-controls button:hover{background:#1d6170;color:#fff;transform:translateY(-2px)}
.lab-controls button.active span,.lab-controls button:hover span{color:#eed6a3}
.lab-controls button.active small,.lab-controls button:hover small{color:#c9e2d8}
.lab-rain-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lab-rain-controls legend{grid-column:1/-1}
.lab-rain-controls button{min-height:41px;border-radius:50px;background:#f4f8ec;border:1px solid #abcdbf;color:#346a70;font-size:12px;font-weight:900}
.lab-rain-controls button.active,.lab-rain-controls button:hover{background:#d9ba83;color:#163f4b;border-color:#d9ba83}
.lab-result{background:#e5f3ec;border-left:4px solid #c99554;border-radius:0 12px 12px 0;padding:18px 20px;min-height:146px}
.lab-result small{font-size:10px;color:#5c8c86;letter-spacing:.13em;font-weight:900}
.lab-result h3{font:normal 29px Georgia,serif;margin:8px 0;color:#1c5662}
.lab-result p{font-size:13px;line-height:1.55;color:#547076;margin:0}
.lab-heat{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;border-top:1px solid #c8ddd2;padding-top:12px}
.lab-heat button{border:1px solid #88b3a9;background:#f7fff2;color:#255a65;padding:10px 11px;min-height:45px;border-radius:8px;font-size:11px;font-weight:900}
.lab-heat button[aria-pressed="true"]{background:#f2dfb8}
.lab-heat p{font-size:11px;line-height:1.4;color:#5a797b;margin:0}
.lab-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:17px}
.lab-readout article{padding:20px;background:#f9fbf1;border:1px solid #b6d2c3;border-radius:5px 16px 5px 16px;min-height:100px}
.lab-readout span{font-size:10px;font-weight:900;letter-spacing:.12em;color:#62918a}
.lab-readout strong{display:block;font:normal 21px/1.23 Georgia,serif;color:#1e5662;margin-top:10px}
.lab-challenge{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;margin-top:27px;padding:37px;background:linear-gradient(145deg,#0e3948,#1b5660);color:#f4faf0;border:1px solid #e8daa75e;border-radius:7px 29px 7px 29px;box-shadow:0 28px 58px #174d5269}
.lab-challenge-eyebrow{font-size:10px;letter-spacing:.15em;color:#b5d9c6;font-weight:900}
.lab-challenge.unlocked .lab-challenge-eyebrow{color:#efcf8f}
.lab-challenge h3{font:normal clamp(30px,3.2vw,46px)/1.1 Georgia,serif;margin:11px 0 10px}
.lab-challenge p{color:#c6e2d9;line-height:1.6;font-size:14px}
.lab-challenge-actions{min-height:170px}
#lab-answers{display:grid;gap:8px}
#lab-answers button{border:1px solid #8dc4b899;background:#ffffff17;color:#effff1;text-align:left;padding:12px 14px;border-radius:6px;font-size:12px;font-weight:800;min-height:42px}
#lab-answers button:hover{background:#ffffff36}
#lab-answers button.correct{background:#477f65;border-color:#c6f2c1}
#lab-answers button.wrong{background:#885e55;border-color:#e4b2a3}
#lab-feedback{font-size:12px;color:#e5efd7;min-height:30px;margin:14px 0}
#lab-next{background:#e9d19a;color:#204a54;border:0;padding:11px 16px;border-radius:6px;font-size:12px;font-weight:900}
#lab-next[hidden]{display:none}
.lab-caution{max-width:990px;text-align:center;color:#477278;font-size:12px;line-height:1.65;margin:24px auto 0}
@keyframes labFlow{to{stroke-dashoffset:-64}}
@keyframes labRainFall{to{transform:translateY(39px);opacity:0}}
@keyframes labRise{to{transform:translateY(-18px);opacity:.45}}
@media(max-width:1050px){.real-observe{grid-template-columns:1fr;gap:23px}.real-observe .real-copy{max-width:800px}.lab-grid{grid-template-columns:1fr}.lab-landscape{min-height:500px}.lab-console{display:grid;grid-template-columns:1fr 1fr;gap:18px}.lab-console-head{grid-column:1/-1}.lab-result{grid-column:1/-1}.lab-heat{grid-column:1/-1}}
@media(max-width:700px){.real-observe{padding-top:86px;padding-bottom:88px;gap:17px}.real-observe .real-copy h2{font-size:clamp(44px,11vw,58px)}.real-observe .real-copy>p{font-size:14px}.real-discovery{padding:20px;margin:24px 0 16px;min-height:0}.real-discovery h3{font-size:26px}.real-image-stack{height:clamp(330px,85vw,445px)}.real-pin{width:44px;height:44px;font-size:15px;box-shadow:0 0 0 5px #ecf9e535,0 6px 12px #123d486b}.real-observe .real-figure figcaption{font-size:8px;max-width:76%;left:10px;bottom:10px}.water-lab{padding:87px 0}.lab-heading{margin-bottom:23px}.lab-heading h2{font-size:clamp(48px,11vw,65px)}.lab-heading p{font-size:14px}.lab-landscape{min-height:310px;height:clamp(310px,85vw,430px);border-width:5px}.lab-map-label{bottom:27px;font-size:8px;min-height:36px;gap:2px;padding:5px}.lab-map-label span{font-size:15px}.lab-label-soil{left:2%}.lab-label-pond{left:34%}.lab-label-paving{right:1%}.lab-scene-badge{font-size:7px;left:7px;top:8px;max-width:68%;padding:5px}.lab-console{display:flex;padding:19px;gap:17px}.lab-console-head{font-size:8px}.lab-controls button{min-height:82px;padding:8px 4px}.lab-controls button b{font-size:10px}.lab-controls button small{font-size:9px}.lab-controls button span{font-size:23px}.lab-result h3{font-size:26px}.lab-heat{grid-template-columns:1fr;gap:6px}.lab-readout{grid-template-columns:1fr;gap:6px}.lab-readout article{min-height:0;padding:11px 15px}.lab-readout strong{font-size:17px;margin-top:3px}.lab-challenge{grid-template-columns:1fr;gap:11px;padding:25px 20px;margin-top:17px}.lab-challenge-actions{min-height:0}.lab-caution{font-size:11px}}
@media(max-width:365px){.lab-map-label{font-size:7px}.lab-map-label span{display:none}.lab-console-head{letter-spacing:.03em}}
@media(prefers-reduced-motion:reduce){.lab-rain path,.lab-flow,.lab-vapour{animation:none!important}.real-image-stack img,.real-toggle,.real-pin,.lab-cloud,.lab-rain,#lab-water-fill,#lab-water-line{transition:none!important}}