:root{--deep:#123d49;--ink:#174553;--teal:#207481;--mint:#d8f1e6;--sand:#f8f6ee}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--sand);color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif}button,a{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #efa953;outline-offset:3px}h1,h2,h3{font-family:Georgia,serif;font-weight:normal;line-height:1.07;margin:0}h2{font-size:clamp(42px,5vw,73px);letter-spacing:-.05em}h3{font-size:32px}em{color:#57a7a2}.wrap{max-width:1240px;padding-left:32px;padding-right:32px;margin:auto}.skip{position:fixed;top:-80px;left:12px;padding:10px;background:#fff;z-index:20}.skip:focus{top:12px}.hero{height:min(860px,97vh);min-height:690px;position:relative;background:var(--deep);color:#fff;isolation:isolate;overflow:hidden}.hero>img,.hero-shade{position:absolute;inset:0;width:100%;height:100%}.hero>img{z-index:-2;object-fit:cover;object-position:center 57%}.hero-shade{z-index:-1;background:linear-gradient(90deg,#082a32f2 0%,#082a32d5 43%,#082a3240 76%),linear-gradient(0deg,#082a3299,transparent 35%)}nav{height:88px;max-width:1400px;padding:0 32px;margin:auto;border-bottom:1px solid #ffffff55;display:flex;justify-content:space-between;align-items:center;gap:20px}nav a{color:white;text-decoration:none;font-size:13px;font-weight:bold}nav>span{font-size:11px;letter-spacing:.14em;font-weight:800}nav>div{display:flex;gap:25px}.back{border:1px solid #ffffff8c;border-radius:100px;padding:10px 16px}.hero-copy{max-width:1400px;margin:auto;padding:125px 32px 60px}.label,.small-label{font-size:11px;font-weight:800;letter-spacing:.17em}.hero-copy .label{color:#d5f2e3}.hero h1{font-size:clamp(52px,6.1vw,94px);letter-spacing:-.055em;margin:26px 0 20px}.hero h1 em{color:#bce3d9}.hero-copy p{max-width:560px;font-size:18px;line-height:1.7;color:#ecf8f2}.action{background:#e5f5e8;color:var(--deep);display:inline-flex;justify-content:space-between;align-items:center;gap:20px;min-width:265px;padding:15px 18px;margin-top:15px;border-radius:100px;text-decoration:none;font-weight:bold;font-size:14px}.action b{font-size:20px}.hero-number{position:absolute;bottom:28px;right:36px;font-size:10px;letter-spacing:.15em;color:#fff9}.marker{font-size:11px;font-weight:800;letter-spacing:.16em;color:#347984}.marker.light{color:#a7dfd4}.intro{display:grid;grid-template-columns:250px 1fr;gap:70px;padding-top:120px;padding-bottom:125px}.intro h2{margin:0 0 22px}.intro p{max-width:760px;font-size:18px;color:#50747b;line-height:1.8}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.chips span{padding:11px 16px;background:#e6f1e9;border-radius:99px;font-size:13px;font-weight:bold;color:#376977}.cycle{padding:105px 0 120px;background:#123c49;color:#fff}.cycle-head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 48px;gap:20px}.cycle h2 em,.quiz h2 em{color:#b6e6d8}.cycle-head p{max-width:570px;color:#c5e2df}.ring{border:1px solid #c2e1df8c;border-radius:50%;width:150px;height:150px;display:grid;place-content:center;text-align:center;transform:rotate(8deg);font-size:12px;line-height:1.6;color:#d4eeea;flex:none}.ring b{font:18px Georgia,serif;color:#f2d9a8}.cycle-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);gap:22px}.scene{min-height:560px;background:#9bd8da;border-radius:25px;position:relative;overflow:hidden}.scene svg{position:absolute;width:100%;height:100%;inset:0}.scene-tag{position:absolute;background:#f7fff3e0;color:var(--deep);padding:6px 10px;border-radius:99px;font-size:9px;font-weight:900;letter-spacing:.15em}.cloud-tag{top:23%;left:36%}.pond-tag{top:72%;left:54%}.earth-tag{bottom:8%;left:8%}.scene>small{position:absolute;bottom:10px;right:13px;background:#174a57dc;padding:6px;border-radius:7px;font-size:9px;max-width:175px;text-align:right}.scene .cloud,.scene .rain,.scene .vapour,.scene .soak,.scene .fish,.scene .ripples{transition:all .5s}.scene[data-step="0"] .rain,.scene[data-step="1"] .soak,.scene[data-step="2"] .fish,.scene[data-step="3"] .vapour,.scene[data-step="4"] .cloud{filter:drop-shadow(0 0 9px #fff);animation:glow 2.2s ease-in-out infinite}@keyframes glow{50%{opacity:.5;transform:translateY(6px)}}.cycle-panel{background:#1b4d5a;border:1px solid #ffffff38;padding:30px;border-radius:25px;display:flex;flex-direction:column}.count{display:flex;justify-content:space-between;gap:10px;color:#a6e3d8;font-size:10px;font-weight:800;letter-spacing:.15em}.steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:24px 0}.steps button{border:1px solid #ffffff29;background:#ffffff16;color:#eff8f4;border-radius:11px;padding:11px 10px;font-size:12px;text-align:left;font-weight:bold}.steps button.active,.steps button:hover{background:#dcf5e6;color:#164654}.story{flex:1}.story small{color:#9bdacb;font-size:10px;font-weight:bold;letter-spacing:.14em}.story h3{font-size:clamp(30px,3vw,43px);margin:11px 0}.story p{color:#e1f3ed;font-size:15px;line-height:1.7}.story aside{border-left:2px solid #9cdac8;padding:8px 0 8px 14px;color:#bfe0d8;font-size:13px;margin:20px 0}.panel-next{width:100%;border:0;border-radius:99px;padding:13px 18px;background:#d8f4e7;color:#154757;font-size:13px;font-weight:bold;display:flex;justify-content:space-between;align-items:center}.panel-next b{font-size:20px}.real{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center;padding-top:135px;padding-bottom:135px}.real h2{margin:26px 0}.real p{color:#52727a;line-height:1.75}.spot-options{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 10px}.spot-options button{background:white;color:#2e6270;border:1px solid #b8d5cd;padding:10px 15px;border-radius:50px;font-size:13px;font-weight:bold}.spot-options button.active{background:#236e77;color:#fff}.spot-text{background:#e5f3ea;padding:16px 19px;border-radius:12px;min-height:80px;font-size:14px}.real figure{position:relative;margin:0;border:10px solid white;border-radius:22px;transform:rotate(1.8deg);box-shadow:0 26px 60px #17465344}.real figure img{display:block;width:100%;height:510px;object-fit:cover;border-radius:12px}.real figcaption{position:absolute;bottom:20px;left:20px;background:#fffef6e8;color:#24545c;padding:9px 13px;border-radius:99px;font-size:11px;font-weight:bold}.experiment{background:#dcece6;padding:115px 0}.experiment-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.experiment h2{margin:22px 0}.experiment p{max-width:560px;color:#486d78;line-height:1.75}.rain-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0}.rain-buttons button{border:1px solid #619898;border-radius:50px;background:transparent;color:#205d6a;padding:11px 14px;font-size:13px;font-weight:bold}.rain-buttons button.active{background:#236e78;color:#fff}.rain-answer{background:#f6fff9;border-left:4px solid #57a9a3;padding:17px 21px;border-radius:11px;min-height:118px}.rain-answer strong{font:22px Georgia,serif}.rain-answer p{font-size:14px;margin:5px 0}.disclaimer{display:block;color:#587982;margin-top:17px;line-height:1.5}.rain-scene{height:530px;position:relative;border-radius:30px;overflow:hidden;background:linear-gradient(#79c2d1,#d0f0e9 60%,#abd3ac);box-shadow:0 18px 50px #2f7c7855}.rain-cloud{position:absolute;top:3%;left:34%;color:white;text-shadow:0 10px 17px #5e9a9f;font-size:160px;line-height:1}.drops{position:absolute;top:32%;left:40%;width:40%;height:160px;display:flex;gap:22px}.drops i{width:3px;height:40px;background:#e2ffff;border-radius:10px;transform:rotate(18deg);animation:fall 1.3s linear infinite}.drops i:nth-child(even){animation-delay:.5s}.rain-scene[data-rain="1"] .drops i{animation-duration:.85s}.rain-scene[data-rain="2"] .drops i{animation-duration:.5s;height:65px}@keyframes fall{0%{transform:translateY(-20px) rotate(18deg);opacity:0}50%{opacity:1}100%{transform:translateY(130px) rotate(18deg);opacity:0}}.basin{position:absolute;bottom:53px;left:12%;width:76%;height:47%;overflow:hidden;border:8px solid #668379;border-top:0;border-radius:0 0 44% 44%;background:#f1ffec40}.basin:before{content:'';position:absolute;z-index:2;top:0;left:0;right:0;border-top:6px solid #668379}.level{position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(#68cacf,#11677f);transition:height .8s}.level:before{content:'';position:absolute;top:-7px;left:-5%;width:110%;height:15px;background:#aaefde;border-radius:50%}.basin span{position:absolute;z-index:3;bottom:12%;left:25%;font-size:30px;animation:swim 4s infinite}.basin .fish-b{left:67%;bottom:7%;animation-delay:1s}@keyframes swim{50%{transform:translate(12px,-6px)}}.ground{position:absolute;bottom:0;left:0;right:0;height:53px;background:#69907a}.basin-label{position:absolute;bottom:17px;left:0;right:0;text-align:center;color:#fff;font-size:10px;letter-spacing:.16em;font-weight:bold}.life{padding-top:130px;padding-bottom:140px}.life-grid{display:grid;grid-template-columns:1fr .9fr;gap:12%;margin-top:43px}.life h2{margin:19px 0}.life-grid>div>p{color:#51747a;font-size:17px;line-height:1.75}.small-label{color:#4a9293}.koi-illustration{font-size:140px;line-height:1.5;text-align:center;border-radius:50%;background:radial-gradient(circle,#d9efe5,transparent 70%);max-width:410px}.life-list article{border-top:1px solid #bfd6ce;padding:19px 0}.life-list article span{font-size:10px;color:#468f93;font-weight:bold;letter-spacing:.14em}.life-list h3{font-size:27px;margin:8px 0}.life-list p{font-size:15px;color:#507279;line-height:1.65}.quiz{background:#123c49;color:#fff;padding:120px 0}.quiz-grid{display:grid;grid-template-columns:.9fr 1fr;gap:80px;align-items:center}.quiz h2{margin:23px 0}.quiz-grid>div>p{color:#c8e4de}.quiz-card{background:#edf8ee;color:#194a57;border-radius:24px;padding:34px;min-height:390px}.quiz-card>small{font-size:11px;font-weight:800;color:#468a8d;letter-spacing:.13em}.quiz-card h3{margin:19px 0;font-size:31px}.quiz-answers{display:grid;gap:9px}.quiz-answers button{border:1px solid #bed7d3;background:#fff;color:#205463;border-radius:11px;text-align:left;padding:13px;font-size:14px;font-weight:bold}.quiz-answers button.correct{background:#c4edda}.quiz-answers button.wrong{border-color:#c9997a}.quiz-card>p{min-height:50px;color:#246b77;font-size:14px}.quiz-card>button{border:0;border-radius:99px;background:#206b77;color:#fff;padding:12px 18px;font-size:13px;font-weight:bold}.quiz-card>button[hidden]{display:none}footer{background:#0a2c35;color:#d9eee8;padding:45px max(32px,calc((100% - 1180px)/2));display:flex;justify-content:space-between;gap:30px}footer a{color:inherit;text-decoration:none;font-size:13px;font-weight:bold}footer p{font-size:12px;color:#a9cdcb}footer>div:last-child{display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:930px){.cycle-grid,.intro{grid-template-columns:1fr;gap:25px}.scene{min-height:440px}.real,.experiment-grid,.quiz-grid{gap:30px}}
@media(max-width:690px){.wrap{padding-left:20px;padding-right:20px}nav{height:68px;padding:0 18px}nav>div{display:none}nav>span{letter-spacing:0;font-size:10px}.back{font-size:11px;padding:7px}.hero{min-height:730px;height:auto}.hero>img{object-position:62% center}.hero-shade{background:linear-gradient(0deg,#082b35 0%,#082b35cf 55%,#082b3566)}.hero-copy{padding:210px 20px 125px}.hero h1{font-size:clamp(45px,11vw,62px)}.hero-copy p{font-size:15px}.hero-number{left:20px;right:auto;font-size:9px}.intro{padding-top:90px;padding-bottom:90px}.intro h2,.real h2,.life h2{font-size:45px}.intro p{font-size:16px}.cycle{padding:85px 0}.cycle h2,.experiment h2,.quiz h2{font-size:47px}.ring{display:none}.scene{min-height:355px}.scene-tag{font-size:7px;padding:5px}.scene>small{font-size:8px}.cycle-panel{padding:20px}.steps button{font-size:10px;padding:9px}.real{grid-template-columns:1fr;padding-top:95px;padding-bottom:95px}.real figure img{height:370px}.real figcaption{font-size:9px;left:10px;bottom:10px}.experiment{padding:90px 0}.experiment-grid{grid-template-columns:1fr}.rain-scene{height:390px}.rain-cloud{font-size:115px}.basin{bottom:42px}.ground{height:42px}.life{padding-top:95px;padding-bottom:100px}.life-grid{grid-template-columns:1fr;gap:10px}.koi-illustration{font-size:100px}.quiz{padding:95px 0}.quiz-grid{grid-template-columns:1fr}.quiz-card{padding:23px;min-height:0}.quiz-card h3{font-size:27px}footer{padding:37px 22px;display:block}footer>div:last-child{margin-top:20px;display:grid;gap:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.koi-illustration svg{display:block;width:100%;height:auto}