:root{--pond-gold:#e7ca90;--pond-dark:#092c36;--pond-light:#f8f6ee}
body{background:#f8f6ee}
.water-progress{position:fixed;z-index:100;top:0;left:0;right:0;height:4px;background:#103f4755;pointer-events:none}.water-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#83d8d0,#e8ca8d);box-shadow:0 1px 13px #d1ecde;transition:width .15s}
.hero{min-height:780px;height:min(930px,100svh)}.hero>img{filter:saturate(1.11) contrast(1.05)}.hero-shade{background:linear-gradient(90deg,#052e38f7 0%,#052e38e9 37%,#052e3873 65%,#052e3815 100%),linear-gradient(0deg,#082f3daf,transparent 42%)}
.hero-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 82% 55%,#e1c78624 0%,transparent 41%),repeating-linear-gradient(129deg,transparent 0 84px,#ffffff08 85px 86px,transparent 87px 170px);mix-blend-mode:screen}.hero-ornament{position:absolute;left:51%;top:21%;width:140px;height:200px;pointer-events:none;transform:rotate(-18deg);color:#e7cb89aa;font-size:30px}.hero-ornament span{position:absolute;animation:shimmer 4s ease-in-out infinite}.hero-ornament span:nth-child(2){top:80px;left:110px;font-size:15px;animation-delay:1s}.hero-ornament span:nth-child(3){top:155px;left:35px;font-size:11px;animation-delay:2s}@keyframes shimmer{50%{opacity:.27;transform:scale(.65)}}
.hero nav{position:relative;z-index:3;border-bottom-color:#ffffff39}.hero nav>span{color:#d4e9db}.hero .back{border-color:#e4f6ed80;background:#ffffff10;backdrop-filter:blur(10px)}.hero nav a:hover{color:#f9db9c}.hero-copy{position:relative;z-index:2;padding-top:clamp(130px,17vh,190px)}.hero-copy>.label{padding:10px 15px;border:1px solid #e6eecb66;border-radius:100px;background:#e3f5e815;backdrop-filter:blur(8px);display:inline-block;color:#eaf5dc}.hero h1{font-size:clamp(59px,6.45vw,104px);letter-spacing:-.065em;text-shadow:0 12px 55px #092a394a}.hero h1 em{color:#e6d6a3;font-style:italic}.hero-copy p{max-width:590px;color:#e7f3ed}.hero .action{background:#e7ca90;color:#123c48;border-radius:7px;padding:17px 23px;box-shadow:0 17px 35px #071f2c55;transition:transform .2s,background .2s}.hero .action:hover{transform:translateY(-4px);background:#f8e2ad}.hero-number{z-index:3;right:auto;left:max(32px,calc((100% - 1335px)/2));bottom:32px;letter-spacing:.25em;color:#fff}.hero-glass{position:absolute;z-index:2;right:max(45px,calc((100% - 1320px)/2));bottom:135px;padding:28px 30px;background:#082f39ba;border:1px solid #d7f4e46e;border-radius:5px 25px 5px 25px;box-shadow:0 23px 64px #062b3566;backdrop-filter:blur(14px);min-width:276px}.hero-glass span,.hero-glass small{display:block;letter-spacing:.18em;font-size:9px;color:#b4e8db;font-weight:800}.hero-glass strong{display:block;font:34px/1.06 Georgia,serif;margin:14px 0;color:#fff}.hero-glass small{color:#ead49d}.hero-waves{position:absolute;bottom:-1px;left:0;width:100%;height:125px;z-index:2;pointer-events:none}
.intro{padding-top:128px;padding-bottom:146px}.intro .marker{color:#bd9257}.intro h2{font-size:clamp(54px,5.7vw,79px)}.intro h2 em{color:#347e85}.intro>div:nth-child(2){position:relative}.intro>div:nth-child(2):after{content:'◌';font:240px Georgia,serif;line-height:1;position:absolute;z-index:-1;right:0;top:-85px;color:#cfe8dc88}.intro p{color:#516a6d;max-width:800px}.chips span{border:1px solid #b5d3cb;background:#f0f6ed;padding:12px 17px}.pond-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:-55px;margin-bottom:150px;position:relative;z-index:1}.pond-pillars article{min-height:255px;padding:29px 27px;background:#fffdf8;border:1px solid #dde7dc;box-shadow:0 21px 53px #17454a18;position:relative;overflow:hidden;border-radius:4px 20px 4px 20px}.pond-pillars article:nth-child(2){background:#184d59;color:white;border-color:#184d59;transform:translateY(-17px)}.pond-pillars article:nth-child(3){background:#e9f2e9}.pond-pillars article>span{display:block;font-size:10px;letter-spacing:.18em;color:#549399;font-weight:900}.pond-pillars article:nth-child(2)>span{color:#a6ded2}.pond-pillars article strong{font:31px Georgia,serif;display:block;margin:24px 0 12px}.pond-pillars article p{line-height:1.6;font-size:14px;color:#607b7d;max-width:245px}.pond-pillars article:nth-child(2) p{color:#d1e9df}.pond-pillars article i{position:absolute;right:21px;bottom:17px;font-size:66px;line-height:1;font-style:normal;color:#6cc0b554;pointer-events:none}
.cycle{position:relative;background:radial-gradient(ellipse at 100% 5%,#1c5a63 0%,transparent 37%),radial-gradient(ellipse at 2% 88%,#235e65 0%,transparent 38%),#0c3440;border-top:1px solid #eff4e230;border-bottom:9px solid #e3d8b3}.cycle:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:.14;background-image:radial-gradient(#d2efe7 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,#000 40%,transparent 85%)}.cycle>.wrap{position:relative}.cycle-head h2{font-size:clamp(54px,5.8vw,81px)}.cycle-head h2 em{color:#edd6a2}.ring{border:1px solid #e7cf9a8c;color:#fff;width:170px;height:170px;box-shadow:0 0 0 13px #d7ebdf0e,0 0 0 25px #d7ebdf0a;line-height:1.8}.ring b{color:#edce8d}.scene{border:8px solid #e7f6e992;border-radius:8px 30px 8px 30px;box-shadow:0 30px 65px #061f2b99;min-height:625px;isolation:isolate}.scene:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 90px #124e5b55;pointer-events:none}.scene svg{transform:scale(1.03);transition:transform .9s}.scene[data-step="0"] svg{transform:scale(1.03)}.scene[data-step="2"] svg{transform:scale(1.09) translateY(-8px)}.scene .scene-tag{z-index:2;border:1px solid #ffffffda;box-shadow:0 7px 21px #073e4b4d}.scene .pond-tag{background:#155c6ce8;color:#fff}.scene>small{z-index:2;right:20px;bottom:16px;background:#0e3d49f0;border:1px solid #ffffff3d}.cycle-panel{position:relative;background:linear-gradient(154deg,#235764,#123e4e);border:1px solid #a6e5d95e;border-radius:26px 6px 26px 6px;box-shadow:0 28px 60px #061b28a8;padding:37px}.cycle-panel:after{content:'';position:absolute;right:18px;top:18px;bottom:18px;left:18px;border:1px solid #e7f6df1d;pointer-events:none;border-radius:17px 3px 17px 3px}.steps{position:relative;z-index:1}.steps button{border:1px solid #b4e2d548;background:#e7f6e912;border-radius:5px;padding:13px 12px;transition:transform .2s,background .2s}.steps button:hover,.steps button.active{transform:translateY(-2px);background:#e6d3a0;color:#123c49}.steps button.active{box-shadow:inset 0 0 0 1px #fff9,0 6px 15px #08232f77}.story h3{font-size:clamp(33px,3.4vw,47px)}.story aside{border-left-color:#e8d1a1;color:#e7e1c9;background:#ffffff0a;border-radius:0 6px 6px 0}.panel-next{position:relative;z-index:2;background:#d7f3df;border-radius:5px}.panel-next:hover{background:#efddaf}
.real{position:relative;padding-top:155px;padding-bottom:155px;gap:85px}.real:before{content:'';position:absolute;top:62px;right:8%;width:240px;height:240px;border-radius:50%;border:1px solid #acd0cc66;box-shadow:0 0 0 28px #d3e5dd52,0 0 0 56px #e9efe55c;z-index:-1}.real figure{border:13px solid white;border-radius:4px 26px 4px 26px;box-shadow:0 38px 78px #0b43504d}.real figure img{height:550px}.real figure figcaption{font-size:11px;letter-spacing:.1em;background:#fff9ecf0}.real h2 em{color:#377d82}.real .spot-options button.active{background:#194f5a}.real .spot-text{background:#e1f0e5;border-left:3px solid #d7b773;box-shadow:0 10px 20px #154b5612}
.experiment{position:relative;background:radial-gradient(ellipse at 94% 0%,#f7f6dd,transparent 46%),#d8e9e2;padding:135px 0}.experiment:before{content:'';height:90px;position:absolute;inset:0 0 auto;background:repeating-radial-gradient(ellipse at 50% -110px,transparent 0 26px,#ffffff56 27px 29px,transparent 30px 55px);opacity:.45;pointer-events:none}.experiment-grid{position:relative}.experiment h2{font-size:clamp(55px,5.7vw,79px)}.experiment h2 em{color:#418a8b}.rain-buttons button{border-radius:5px;background:#f8fbf370;padding:13px 17px}.rain-buttons button.active{background:#174e5e;box-shadow:0 10px 22px #1c566437}.rain-answer{border-left-color:#d5b974;box-shadow:0 15px 45px #2e676028;border-radius:5px 15px 5px 15px}.rain-scene{border:9px solid #f8f8e5;border-radius:32px 7px 32px 7px;box-shadow:0 35px 80px #1e64636b;background:radial-gradient(circle at 76% 15%,#fbeac3,transparent 26%),linear-gradient(#579cad 0%,#a7d7d0 57%,#bed6b6 95%)}.rain-scene:before{content:'';position:absolute;inset:0 0 30%;background:repeating-radial-gradient(ellipse at 60% 100%,transparent 0 26px,#e7fff624 27px 29px,transparent 30px 56px);opacity:.7}.rain-cloud{position:absolute;top:10%;left:31%;width:215px;height:90px;background:#f4fbf8;filter:drop-shadow(0 13px 8px #488ea0a1);border-radius:60px;z-index:2}.rain-cloud:after{content:'';position:absolute;left:-36px;bottom:0;width:275px;height:62px;background:#f4fbf8;border-radius:50px}.rain-cloud i{position:absolute;background:#f4fbf8;border-radius:50%;z-index:1}.rain-cloud i:first-child{left:9px;top:-37px;width:100px;height:102px}.rain-cloud i:nth-child(2){left:81px;top:-64px;width:105px;height:120px}.rain-cloud i:nth-child(3){right:5px;top:-20px;width:85px;height:86px}.drops{top:34%;left:36%;z-index:1}.basin{z-index:1;background:#bde2d46e;border:11px solid #806f53;border-top:0;box-shadow:inset 0 -8px 20px #093a5366}.basin span{width:74px;height:42px;font-size:initial;filter:drop-shadow(0 7px 4px #07344455)}.basin span svg{display:block;width:74px;height:42px}.basin .fish-b{width:59px}.basin .fish-b svg{width:59px}.ground{background:linear-gradient(#5d8b72,#3c695c)}.level{background:linear-gradient(#75cbd0,#1f8299 62%,#145e80)}
.koi-stage{min-height:640px;height:min(760px,74vw);position:relative;background:#06313b;color:white;overflow:hidden;isolation:isolate}.koi-stage>img,.koi-shade{position:absolute;inset:0;width:100%;height:100%}.koi-stage>img{z-index:-2;object-fit:cover;object-position:center center}.koi-shade{z-index:-1;background:linear-gradient(90deg,#062f3cee,#062f3cb5 28%,#062f3c12 67%),linear-gradient(0deg,#092b3b94,transparent 31%)}.koi-stage-content{padding-top:clamp(110px,13vw,185px);position:relative}.koi-stage-content>span,.koi-stage-content small{font-size:10px;font-weight:900;letter-spacing:.19em;color:#d5eaba}.koi-stage h2{font-size:clamp(55px,6.5vw,104px);letter-spacing:-.06em;max-width:950px;margin:25px 0}.koi-stage h2 em{color:#f5d697}.koi-stage p{max-width:470px;font-size:17px;line-height:1.7;color:#e1f4e8}.koi-stage-content small{display:block;margin-top:40px;color:#d2e3dd}.life{padding-top:135px}.life .small-label{color:#b38a53}.life .life-list article{padding:27px 0;position:relative}.life .life-list article:after{content:'↗';position:absolute;right:6px;top:17px;color:#8ec5b7;font:27px Georgia,serif}.life h2 em{color:#31818d}.koi-illustration{max-width:290px;opacity:.95;margin:0}.quiz{position:relative;background:radial-gradient(circle at 12% 82%,#1e5a65,transparent 38%),radial-gradient(circle at 89% 0%,#296875,transparent 48%),#0c303c;border-top:8px solid #b7d3c7}.quiz:before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 18% 95%,transparent 0 29px,#aed8d316 30px 31px,transparent 32px 58px);opacity:.6;pointer-events:none}.quiz-grid{position:relative}.quiz h2 em{color:#e9d297}.quiz-card{border:1px solid #ffffffaa;background:#f8f9ef;box-shadow:0 30px 60px #061c2777;border-radius:7px 25px 7px 25px}.quiz-answers button{border-radius:5px 12px 5px 12px;transition:transform .2s,border-color .2s}.quiz-answers button:hover{transform:translateX(4px)}.quiz-card>button{border-radius:5px;background:#1b6072}
@media(max-width:960px){.hero-glass{display:none}.pond-pillars{gap:8px}.pond-pillars article{padding:24px 20px}.pond-pillars article strong{font-size:25px}.cycle-grid{grid-template-columns:1fr}.scene{min-height:480px}.cycle-panel{min-height:470px}.koi-stage{height:670px}.koi-stage>img{object-position:59% center}.experiment-grid{gap:35px}}
@media(max-width:690px){.hero{min-height:745px;height:auto}.hero-shade{background:linear-gradient(0deg,#052b35f5 0%,#052b35c4 55%,#052b3573)}.hero-ornament{display:none}.hero-copy{padding-top:185px;padding-bottom:150px}.hero h1{font-size:clamp(49px,11vw,66px)}.hero-waves{height:73px}.hero-number{bottom:22px;left:20px;font-size:8px}.intro{padding-top:108px;padding-bottom:90px}.intro h2{font-size:50px}.pond-pillars{grid-template-columns:1fr;margin-top:-20px;margin-bottom:90px}.pond-pillars article,.pond-pillars article:nth-child(2){min-height:135px;transform:none;padding:21px 23px}.pond-pillars article strong{font-size:28px;margin:8px 0}.pond-pillars article p{margin:0;max-width:90%}.cycle{padding:92px 0}.cycle-head h2{font-size:51px}.scene{min-height:365px;border-width:5px}.scene>small{right:8px;font-size:7px}.cycle-panel{padding:25px;min-height:0}.real{padding-top:105px;padding-bottom:110px}.real figure img{height:390px}.real h2{font-size:49px}.experiment{padding:105px 0}.experiment h2{font-size:54px}.rain-scene{height:405px;border-width:6px}.rain-cloud{transform:scale(.66);transform-origin:top left;top:17%;left:32%}.drops{top:38%}.koi-stage{min-height:680px;height:auto}.koi-stage>img{object-position:59% center}.koi-shade{background:linear-gradient(0deg,#072e3fe8,#072e3f94 53%,#072e3f24)}.koi-stage-content{padding-top:340px;padding-bottom:48px}.koi-stage h2{font-size:51px}.koi-stage h2 br{display:none}.koi-stage p{font-size:15px}.koi-stage-content small{margin-top:21px;line-height:1.7}.life{padding-top:95px}.life h2{font-size:51px}.quiz-card{padding:24px}}
@media(prefers-reduced-motion:reduce){.hero-ornament span,.scene .cloud,.scene .rain,.scene .vapour,.scene .soak,.scene .fish,.scene .ripples{animation:none!important}.steps button:hover,.quiz-answers button:hover,.hero .action:hover{transform:none}}
.photo-touch{position:absolute;z-index:3;left:50%;right:3%;top:55%;bottom:12%;overflow:hidden;border:0;background:transparent;color:#f8fff2;text-align:right;padding:10px;cursor:crosshair}.photo-touch>span{position:absolute;right:12px;bottom:10px;background:#0d4654d9;border:1px solid #ffffff7c;border-radius:100px;padding:8px 12px;font-size:11px;font-weight:800;pointer-events:none;box-shadow:0 4px 13px #062a3c6e}.touch-ripple{position:absolute;width:20px;height:20px;border:2px solid #f7f5d4;border-radius:50%;transform:translate(-50%,-50%) scale(.2);pointer-events:none;box-shadow:0 0 0 3px #b8e6db77;animation:touchwave 1.25s ease-out forwards}@keyframes touchwave{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(8)}}.science-sources{padding-top:25px;padding-bottom:35px;font-size:12px;color:#668184}.science-sources summary{font-weight:800;color:#396f76;cursor:pointer;list-style:disclosure-closed}.science-sources p{max-width:820px;line-height:1.7}.science-sources a{color:#236979}.science-sources a:hover{text-decoration-thickness:2px}@media(max-width:690px){.photo-touch{left:53%;top:57%;bottom:14%}.photo-touch>span{font-size:9px;padding:6px}.science-sources{padding-bottom:28px}}
.hero-number{bottom:107px}
@media(max-width:690px){.hero-number{bottom:80px}}