:root{color:#16445a;font-synthesis:none;text-rendering:optimizelegibility;--ink:#16445a;--muted:#557887;--blue:#36a9d6;--deep-blue:#147aa6;--aqua:#70d3d0;--mint:#bcebd8;--yellow:#ffd166;--coral:#ff806b;--paper:#fffdf6;--line:#c7e8e9;--shadow:0 16px 36px #1f698024;background:#eaf9fb;font-family:Avenir Next,PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100svh;overflow-x:hidden}button{font:inherit;touch-action:manipulation}img{-webkit-user-drag:none;pointer-events:none}button:focus-visible{outline-offset:3px;outline:4px solid #ffb703}.app-shell{background:radial-gradient(circle at 8% 6%,#fffffff5 0 4%,#0000 18%),radial-gradient(circle at 91% 10%,#ffd16642,#0000 22%),linear-gradient(155deg,#effdfb 0%,#def5fa 48%,#e9f8ef 100%);justify-content:center;min-height:100svh;padding:clamp(12px,1.6vw,26px);display:flex}.app-content{width:min(1500px,100%);margin:0 auto}.loading-screen{background:radial-gradient(circle at 50% 40%,#ffffffe6,#0000 28%),linear-gradient(155deg,#effdfb 0%,#d9f4fa 52%,#e6f8ed 100%);place-items:center;min-height:100svh;padding:24px;display:grid}.loading-card{text-align:center;background:#fffdf6e6;border:2px solid #fffffff5;border-radius:32px;width:min(520px,92vw);padding:clamp(28px,5vw,48px);box-shadow:0 22px 55px #1f69802e}.loading-ripples{color:#fff;background:linear-gradient(145deg, var(--blue), var(--aqua));border-radius:50%;place-items:center;width:116px;height:116px;margin:0 auto 16px;display:grid;position:relative;box-shadow:0 13px 30px #1b84a33d}.loading-ripples svg{z-index:3;width:48px;height:48px;position:relative}.loading-ripples i{border:3px solid #36a9d65c;border-radius:50%;animation:1.8s ease-out infinite loading-ripple;position:absolute;inset:0}.loading-ripples i:nth-of-type(2){animation-delay:.55s}.loading-ripples i:nth-of-type(3){animation-delay:1.1s}.loading-kicker{color:var(--deep-blue);letter-spacing:.12em;margin:0 0 5px;font-size:14px;font-weight:900}.loading-card h1{margin:0;font-size:clamp(25px,4vw,38px)}.loading-track{background:#d8ecec;border-radius:999px;height:15px;margin-top:25px;overflow:hidden;box-shadow:inset 0 2px 5px #28626f1f}.loading-track span{border-radius:inherit;background:linear-gradient(90deg, var(--blue), var(--aqua), var(--yellow));width:0;height:100%;transition:width .25s;display:block}.loading-progress{color:var(--muted);margin:10px 0 0;font-size:14px;font-weight:750}.topbar{justify-content:space-between;align-items:center;gap:24px;margin:0 0 12px;display:flex}.brand-lockup{align-items:center;gap:14px;display:flex}.brand-mark{color:#fff;background:linear-gradient(145deg, var(--blue), var(--aqua));border-radius:19px;flex:none;place-items:center;width:56px;height:56px;display:grid;transform:rotate(-4deg);box-shadow:0 8px 18px #1767842e}.brand-mark svg{width:31px;height:31px}.eyebrow{color:var(--deep-blue);letter-spacing:.14em;margin:0 0 2px;font-size:clamp(11px,1vw,15px);font-weight:850}h1{color:var(--ink);margin:0;font-size:clamp(23px,2.5vw,42px);line-height:1.08}.topbar-actions{align-items:center;gap:10px;display:flex}.round-tool,.teacher-trigger,.icon-button{cursor:pointer;border:0;box-shadow:0 8px 18px #17678424}.round-tool{width:54px;min-width:54px;height:54px;color:var(--deep-blue);background:#fff;border-radius:18px;place-items:center;display:grid}.round-tool svg{width:24px;height:24px}.teacher-trigger{color:#755813;-webkit-user-select:none;user-select:none;background:#fff5ca;border-radius:18px;align-items:center;gap:9px;min-height:54px;padding:0 19px;font-weight:850;display:inline-flex}.teacher-trigger svg{width:21px}.progress-rail{box-shadow:var(--shadow);background:#ffffffc2;border:1px solid #ffffffe6;border-radius:22px;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px;padding:8px;display:grid}.progress-step{color:#6d909c;border-radius:16px;justify-content:center;align-items:center;gap:9px;min-height:51px;font-size:clamp(13px,1.3vw,18px);font-weight:850;transition:transform .25s,background .25s;display:flex}.progress-step.is-active{background:linear-gradient(135deg, var(--blue), var(--aqua));color:#fff;transform:translateY(-1px)}.progress-step.is-complete:not(.is-active){color:#177c6f;background:#e1f7ec}.step-number{width:31px;height:31px;color:inherit;background:#ffffff7a;border-radius:50%;flex:none;place-items:center;font-weight:950;display:grid}.lesson-stage,.summary-card,.result-card{width:100%;box-shadow:var(--shadow);background:#fffdf6eb;border:2px solid #fffffffa;border-radius:30px;margin:0;padding:clamp(14px,1.55vw,24px)}.stage-heading{align-items:center;gap:14px;margin-bottom:10px;display:flex}.stage-heading h2{color:var(--ink);margin:0;font-size:clamp(22px,2.2vw,34px);line-height:1.15}.stage-heading p{color:var(--muted);margin:3px 0 0;font-size:clamp(14px,1.25vw,19px);font-weight:680}.stage-badge{background:var(--yellow);color:#735213;border-radius:14px;flex:none;padding:9px 14px;font-size:clamp(14px,1.2vw,18px);font-weight:950;transform:rotate(-2deg)}.stage-scene{isolation:isolate;border:6px solid #b7dfd4;border-radius:26px;min-height:clamp(280px,43vh,430px);position:relative;overflow:hidden}.scene-cloud{background:#ffffff94;border-radius:50px;width:120px;height:30px;position:absolute;top:7%}.scene-cloud:before,.scene-cloud:after{content:"";background:inherit;border-radius:50%;position:absolute;bottom:2px}.scene-cloud:before{width:46px;height:46px;left:20px}.scene-cloud:after{width:58px;height:58px;right:17px}.cloud-one{left:8%}.cloud-two{top:11%;right:17%;transform:scale(.68)}.screening-scene{background:linear-gradient(#ccf0ed 0 25%,#9edecf 25% 28%,#61bdd1 28% 100%)}.water-channel{background:linear-gradient(#568f9b,#416e78);border-radius:14px 14px 34px 34px;transition:background .7s;position:absolute;inset:29% 15% 8% 7%;overflow:hidden;box-shadow:inset 0 12px #ffffff29}.screening-scene.is-finished .water-channel{background:linear-gradient(#66bfcd,#4d9baa)}.water-wave{opacity:.4;background:repeating-radial-gradient(at 10% 0,#0000 0 30px,#ffffff47 32px 34px);animation:7s linear infinite drift;position:absolute;inset:0}.draggable-trash{z-index:7;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:0;width:clamp(84px,8vw,122px);height:clamp(102px,9vw,135px);padding:0;transition:filter .2s;position:absolute}.draggable-trash:active{cursor:grabbing;filter:drop-shadow(0 14px 10px #123d4a45)}.trash-leaf{top:35%;left:12%}.trash-bottle{top:51%;left:37%}.trash-cup{top:28%;left:52%}.trash-art{filter:drop-shadow(0 8px 5px #1545512e);pointer-events:none;background-image:url(/assets/litter-props.png);background-repeat:no-repeat;background-size:300% 100%;width:100%;height:78%;display:block}.art-leaf{background-image:url(/assets/litter-leaf.png);background-position:50%;background-size:contain}.art-bottle{background-image:url(/assets/litter-bottle.png);background-position:50%;background-size:contain}.art-cup{background-position:100%}.object-label{color:#375865;background:#ffffffe6;border-radius:999px;padding:4px 11px;font-size:clamp(12px,1vw,15px);font-weight:850;display:inline-block;box-shadow:0 4px 10px #28596626}.grate{z-index:4;justify-content:space-around;width:9%;display:flex;position:absolute;top:25%;bottom:6%;right:26%;transform:skewY(-7deg)}.grate i{background:#647d85;border-radius:6px;width:clamp(5px,.55vw,9px);box-shadow:3px 2px #ffffff61}.grate span{color:#fff;white-space:nowrap;background:#516a73;border-radius:999px;padding:5px 13px;font-size:14px;font-weight:900;position:absolute;top:-4px;left:50%;transform:translate(-50%,-100%)skewY(7deg)}.recycle-bin{z-index:6;color:#684a14;background:repeating-linear-gradient(90deg,#ffd166 0 18px,#ffc654 18px 30px);border:7px solid #e99b33;border-radius:18px 18px 34px 34px;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:20%;height:57%;font-size:clamp(16px,1.8vw,26px);font-weight:950;display:flex;position:absolute;bottom:7%;right:3%;box-shadow:inset 0 0 0 7px #ffffff47,0 13px 25px #58492233}.recycle-bin>svg{width:clamp(30px,3vw,46px);height:auto}.bin-check{color:#fff;background:#2eae78;border-radius:50%;padding:5px;position:absolute;top:8px;right:8px}.pipe{z-index:1;background:#7fa9ad;border:6px solid #668c91;width:19%;height:62px;position:absolute;top:20%}.pipe-in{border-radius:0 18px 18px 0;left:-4%}.pipe-out{border-radius:18px 0 0 18px;right:-4%}.remaining-counter{z-index:9;color:#fff;background:#145062bd;border-radius:14px;padding:8px 13px;font-weight:850;position:absolute;top:18px;left:18px}.challenge-steps{z-index:20;background:#ffffffdb;border-radius:18px;grid-template-columns:repeat(2,1fr);gap:7px;height:48px;margin:0;padding:5px;list-style:none;display:grid;position:absolute;top:10px;left:3%;right:3%;box-shadow:0 7px 18px #184c581f}.challenge-steps li{color:#6b8790;white-space:nowrap;border-radius:13px;justify-content:center;align-items:center;gap:7px;min-width:0;font-size:clamp(12px,1.05vw,16px);font-weight:900;display:flex}.challenge-steps li>span{background:#dfeaec;border-radius:50%;flex:none;place-items:center;width:27px;height:27px;display:grid}.challenge-steps li>span svg{width:17px}.challenge-steps li.is-current{color:#175b74;background:#dff4f7;box-shadow:inset 0 0 0 2px #68c3d1}.challenge-steps li.is-current>span{color:#fff;background:var(--blue)}.challenge-steps li.is-complete{color:#227c60;background:#e2f7eb}.challenge-steps li.is-complete>span{color:#fff;background:#37ae7c}.stage-control-panel{z-index:18;background:#ffffffde;border:3px solid #ffffffe0;border-radius:22px;flex-direction:column;justify-content:center;gap:10px;width:27%;padding:11px;display:flex;position:absolute;top:24%;bottom:5%;right:2.5%;box-shadow:0 12px 28px #174d5b26}.control-task,.microbe-status{color:#355d69;background:#f7fcfc;border:2px solid #cfe5e7;border-radius:15px;flex-direction:column;justify-content:center;gap:5px;min-height:67px;padding:9px 12px;font-size:clamp(12px,1vw,15px);font-weight:900;display:flex}.control-task>span,.microbe-status{align-items:center;gap:7px;display:flex}.control-task svg,.microbe-status svg{flex:none;width:20px;height:20px}.control-task small{color:#65808a;justify-content:space-between;font-size:11px;display:flex}.control-task small:only-child{justify-content:center}.control-task.is-complete,.microbe-status.is-complete{color:#176f51;background:#e7f8ef;border-color:#8dd8b6}.control-task input[type=range]{accent-color:#35aa7a;cursor:grab;touch-action:none;width:100%;height:30px;margin:0}.control-task input[type=range]::-webkit-slider-thumb{width:29px;height:29px}.hold-button{color:#7b4519;cursor:pointer;touch-action:none;background:#fff4e6;border:2px solid #f3c092;border-radius:16px;min-height:68px;padding:0;position:relative;overflow:hidden}.hold-fill{z-index:0;width:var(--hold-progress);background:linear-gradient(90deg,#ffd166,#ff9d70);transition:width 80ms linear;position:absolute;inset:0 auto 0 0}.hold-content{z-index:1;text-align:left;grid-template-columns:22px 1fr;align-items:center;gap:9px;padding:8px 14px;font-size:clamp(13px,1.08vw,16px);font-weight:950;display:grid;position:relative}.hold-content svg{width:20px}.hold-button.is-pressing{color:#653411;transform:scale(.985);box-shadow:0 0 0 5px #ffa65d40}.hold-button.is-done{color:#fff;background:#36a775;border-color:#36a775}.hold-button.is-done .hold-fill{background:#36a775;width:100%}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sedimentation-scene{background:linear-gradient(#d8f5ed 0 32%,#a8dbc7 32% 100%)}.clarifier-rim{z-index:5;background:#bdd2d3;border:7px solid #7a9ca3;border-radius:50%;height:44px;position:absolute;top:24%;left:5%;right:33%;box-shadow:0 8px #2d5d6824}.clarifier-rim span{color:#fff;background:#557a82;border-radius:999px;padding:7px 18px;font-weight:900;position:absolute;top:-9px;left:50%;transform:translate(-50%,-100%)}.clarifier-water{background:linear-gradient(#628f9a,#4e7881);border:7px solid #789ba2;border-top:0;border-radius:0 0 18% 18%/0 0 22% 22%;transition:background 1s;position:absolute;inset:calc(24% + 19px) 33% 7% 5%;overflow:hidden;box-shadow:inset 0 18px 30px #ffffff26}.phase-settled .clarifier-water,.phase-done .clarifier-water{background:linear-gradient(#78cfdd 0 70%,#66a8b3 70%)}.settling-clear-water{z-index:0;background:linear-gradient(#78cfdd 0 70%,#66a8b3 70%);transition:opacity 90ms linear;position:absolute;inset:0}.water-surface-lines{opacity:.38;background:repeating-radial-gradient(at 15% 0,#0000 0 46px,#fff 48px 50px);position:absolute;inset:0}.sediment-particle{z-index:3;background:#765840;border-radius:50%;transition:top 90ms linear,opacity 90ms linear;position:absolute;box-shadow:inset 2px 2px #fff3}.sludge-layer{z-index:4;color:#fff2c5;background:#765840;border-radius:50% 50% 0 0;place-items:start center;height:20%;padding-top:7px;font-size:12px;font-weight:850;transition:transform 90ms linear;display:grid;position:absolute;bottom:-2%;left:-2%;right:-2%}.sludge-scraper{z-index:6;width:44px;height:55px;transition:left 80ms linear;position:absolute;bottom:7%}.sludge-scraper:before{content:"";transform-origin:bottom;background:#dbe7e7;border-radius:5px;width:7px;height:64px;position:absolute;top:-28px;left:20px;transform:rotate(-18deg)}.sludge-scraper i{background:#f4c95d;border-radius:9px;width:45px;height:12px;position:absolute;bottom:0;left:0}.sludge-outlet{z-index:9;color:#fff;white-space:nowrap;background:#5d4638;border-radius:9px;padding:5px 10px;font-size:11px;font-weight:900;position:absolute;bottom:4%;right:8%}.microbe-scene{background:linear-gradient(#d9f6ef 0 25%,#65c5d5 25% 100%)}.microbe-tank{background:linear-gradient(#4c9aaa,#357984);border:7px solid #6f9ba4;border-radius:25px 25px 80px 80px;position:absolute;inset:24% 33% 5% 5%;overflow:hidden;box-shadow:inset 0 14px 28px #ffffff29}.aeration-pipe{z-index:2;background:#667d84;border-radius:14px;height:24px;position:absolute;bottom:9%;left:12%;right:38%;box-shadow:inset 0 5px #ffffff3b}.bubble-field i{bottom:3%;left:var(--bubble-left);width:var(--bubble-size);height:var(--bubble-size);opacity:0;border:2px solid #ffffffb3;border-radius:50%;position:absolute}.has-air .bubble-field i{opacity:1;animation:bubble-up var(--bubble-duration) linear infinite;animation-delay:var(--bubble-delay)}.pollutant-dot{z-index:3;left:var(--dot-left);top:var(--dot-top);width:14px;height:14px;transition:opacity .5s,transform .5s;transition-delay:var(--dot-delay);background:#5b453e;border-radius:50%;position:absolute;box-shadow:0 0 0 4px #5b453e21}.microbe-art{z-index:4;object-fit:contain;opacity:0;filter:drop-shadow(0 12px 16px #103f4e33);width:min(48%,390px);max-height:82%;transition:opacity .55s,transform .7s cubic-bezier(.2,1.4,.4,1);position:absolute;top:52%;left:50%;transform:translate(-50%,-42%)scale(.3)}.has-microbes .microbe-art{opacity:1;animation:2.6s ease-in-out infinite microbe-float;transform:translate(-50%,-50%)scale(1)}.microbe-pack{z-index:25;color:#6c4b10;cursor:grab;touch-action:none;background:#ffda70;border:4px solid #fff;border-radius:20px;justify-content:center;align-items:center;gap:7px;width:24%;min-height:68px;padding:8px 13px;font-size:14px;font-weight:950;display:flex;position:absolute;top:28%;right:4%;box-shadow:0 9px #d5a83d,0 13px 24px #2e4f5333}.microbe-pack:active{cursor:grabbing}.microbe-pack svg{width:22px}.microbe-status{flex-direction:row;min-height:52px}.disinfection-scene{background:linear-gradient(#eef1ff 0 22%,#665f9f 22% 25%,#55a9bb 25% 100%)}.uv-machine{z-index:5;background:#7770ad;border:7px solid #514a83;border-radius:22px;height:30%;transition:background .45s,box-shadow .45s,filter .45s;position:absolute;top:24%;left:5%;right:33%;overflow:hidden;box-shadow:0 10px 24px #342f5c47}.power-on .uv-machine{filter:brightness(1.12);background:#928bd0;box-shadow:0 0 18px #e3d5ffe6,0 0 42px #996deca6,0 10px 24px #342f5c47}.uv-label{color:#fff;background:#36305fa6;border-radius:12px;padding:6px 13px;font-weight:900;position:absolute;top:13px;left:20px}.uv-lamps{justify-content:space-between;display:flex;position:absolute;bottom:13%;left:5%;right:5%}.uv-lamps i{background:#aaa5cb;border:5px solid #454074;border-radius:999px;width:14%;height:34px;transition:background .35s,box-shadow .35s}.power-on .uv-lamps i,.phase-done .uv-lamps i{background:#f2eaff;box-shadow:0 0 12px #fff,0 0 32px #d5b9ff,0 0 55px #a474ff}.uv-beam{opacity:0;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);background:linear-gradient(90deg,#0000,#dec2ffad,#0000);height:170%;transition:opacity .4s;position:absolute;top:90%;left:3%;right:3%}.is-scanning .uv-beam{animation:1.2s ease-in-out infinite alternate uv-scan}.uv-shield{z-index:8;color:#ffffffb8;background:repeating-linear-gradient(135deg,#4f4b76f2 0 18px,#656091f2 18px 36px);border-bottom:6px solid #46416f;place-items:center;transition:transform 80ms linear;display:grid;position:absolute;inset:0}.uv-shield svg{width:52px;height:52px}.disinfection-water{background:linear-gradient(#4b8792,#386d78);border:7px solid #638b99;border-top:0;border-radius:0 0 54px 54px;transition:background 1s;position:absolute;inset:52% 33% 6% 5%;overflow:hidden}.phase-done .disinfection-water{background:linear-gradient(#69cfe0,#42aabd)}.disinfection-clear-water{z-index:0;background:linear-gradient(#69cfe0,#42aabd);transition:opacity 90ms linear;position:absolute;inset:0}.harmful-germ{left:var(--germ-left);top:var(--germ-top);width:17px;height:17px;transition:opacity .55s,transform .55s;transition-delay:var(--germ-delay);background:#5e3d6e;border-radius:44% 56% 52% 48%;position:absolute;box-shadow:0 0 0 5px #52346129}.harmful-germ:before,.harmful-germ:after{content:"";border-top:3px solid #5e3d6e;border-bottom:3px solid #5e3d6e;border-radius:50%;position:absolute;inset:-5px 6px}.harmful-germ:after{transform:rotate(90deg)}.clean-water-glow{opacity:0;background:radial-gradient(circle at 50% 20%,#ffffffb3,#0000 55%);transition:opacity 1.5s;position:absolute;inset:0}.phase-done .clean-water-glow{opacity:1}.clean-water-label{z-index:4;text-align:center;color:#244f62;font-size:12px;font-weight:900;position:absolute;bottom:8%;left:5%;right:33%}.power-button{color:#514a83;cursor:pointer;background:#f1effc;border:2px solid #cbc7e8;border-radius:16px;justify-content:center;align-items:center;gap:10px;min-height:72px;padding:10px 14px;font-size:clamp(13px,1.08vw,16px);font-weight:950;transition:background .35s,color .35s,box-shadow .35s,transform .15s;display:flex}.power-button svg{width:24px;height:24px}.power-button:active{transform:translateY(3px)}.power-button.is-on{color:#fff;background:linear-gradient(135deg,#7252b2,#a47be8);border-color:#a181e0;box-shadow:0 0 22px #8b63d27a}.power-control input{accent-color:#7e5ac1!important}.guide-bar{border:2px solid var(--line);background:#fff;border-radius:23px;grid-template-columns:64px 1fr auto;align-items:center;gap:13px;min-height:74px;margin-top:10px;padding:7px 9px 7px 7px;display:grid}.guide-mascot{object-fit:contain;object-position:center 28%;background:radial-gradient(circle,#d9f5fb,#bcecf2);border-radius:18px;width:61px;height:61px}.guide-bar p{color:var(--ink);margin:0;font-size:clamp(14px,1.3vw,19px);font-weight:760}.primary-button{color:#fff;background:linear-gradient(135deg, var(--coral), #ff9d70);cursor:pointer;border:0;border-radius:18px;justify-content:center;align-items:center;gap:9px;min-height:60px;padding:0 23px;font-size:clamp(15px,1.25vw,18px);font-weight:900;display:inline-flex;box-shadow:0 7px #d85f4c}.primary-button svg{width:21px}.primary-button.is-gentle{color:#446978;background:#e6f7f7;box-shadow:0 7px #bedfe0}.primary-button:active{transform:translateY(4px);box-shadow:0 3px #d85f4c}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#1137428c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.teacher-panel{width:min(720px,94vw);max-height:92svh;color:var(--ink);background:#fffdf6;border:3px solid #fff;border-radius:30px;padding:24px;overflow:auto;box-shadow:0 28px 80px #0c2b3657}.panel-title-row{justify-content:space-between;align-items:center;gap:20px;margin-bottom:19px;display:flex}.panel-title-row h2{margin:0;font-size:31px}.panel-kicker{color:var(--deep-blue);letter-spacing:.12em;margin:0 0 2px;font-size:13px;font-weight:850}.icon-button{width:48px;height:48px;color:var(--ink);background:#edf6f6;border-radius:15px;place-items:center;display:grid}.teacher-stage-grid{grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:13px;display:grid}.teacher-stage-grid button,.teacher-nav-row button,.teacher-tool-grid button{min-height:65px;color:var(--ink);cursor:pointer;background:#fff;border:2px solid #d9ebea;border-radius:18px;font-weight:850}.teacher-stage-grid button{flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:8px;display:flex}.teacher-stage-grid button span{color:#fff;background:var(--blue);border-radius:50%;place-items:center;width:27px;height:27px;display:grid}.teacher-stage-grid button.is-current{border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue);background:#e9f8fc}.teacher-nav-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px;display:grid}.teacher-nav-row button,.teacher-tool-grid button{justify-content:center;align-items:center;gap:8px;display:flex}.teacher-nav-row button:disabled{opacity:.4;cursor:not-allowed}.teacher-tool-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.teacher-tool-grid button{min-height:58px}.teacher-tool-grid .danger-button{color:#a74636;background:#fff1ed;border-color:#f3c8bf}.result-celebration{z-index:300;color:var(--ink);background:radial-gradient(circle at 50% 45%,#fffef5 0 18%,#d9f8f5 52%,#bcecf2 100%);place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.celebration-backdrop{object-fit:cover;opacity:.72;width:100%;height:100%;animation:2.2s ease-out both celebration-zoom;position:absolute;inset:0}.confetti-field{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti-field i{left:var(--confetti-left);width:var(--confetti-width);height:var(--confetti-height);background:hsl(var(--confetti-hue) 78% 56%);animation:confetti-fall var(--confetti-duration) ease-in var(--confetti-delay) both;border-radius:4px;position:absolute;top:-12%}.celebration-message{z-index:3;text-align:center;place-items:center;animation:.65s cubic-bezier(.2,1.35,.4,1) both celebration-pop;display:grid;position:relative}.celebration-message p{color:#f06452;margin:0;font-size:clamp(30px,4.2vw,66px);font-weight:1000;transform:rotate(-3deg)}.celebration-message h2{text-shadow:0 6px #ffffffbf;margin:0;font-size:clamp(34px,5vw,78px);line-height:1.05}.celebration-message img{object-fit:contain;object-position:center 25%;filter:drop-shadow(0 20px 20px #1e637540);width:clamp(170px,19vw,285px);height:clamp(190px,25vh,310px);animation:.8s ease-in-out .45s infinite alternate mascot-bounce}.celebration-message span{color:#70520d;background:#ffd166;border:4px solid #fff;border-radius:999px;align-items:center;gap:12px;min-height:55px;padding:0 22px;font-size:clamp(17px,1.7vw,26px);font-weight:950;display:flex;box-shadow:0 9px #e0ad3e}.celebration-message span svg{width:24px}.result-card{padding:clamp(14px,1.6vw,24px);animation:.6s ease-out both result-reveal;overflow:hidden}.result-heading{text-align:center}.result-heading p{color:#23839a;letter-spacing:.08em;margin:0 0 2px;font-size:clamp(13px,1.2vw,18px);font-weight:900}.result-heading h2{color:var(--ink);margin:0;font-size:clamp(27px,3vw,45px);line-height:1.1}.water-comparison{grid-template-columns:minmax(260px,1fr) minmax(110px,.24fr) minmax(260px,1fr);align-items:center;gap:clamp(12px,2vw,30px);min-height:clamp(315px,42vh,430px);margin-top:12px;display:grid}.water-sample{text-align:center;border:5px solid #fff;border-radius:34px;height:100%;min-height:310px;padding:50px 22px 14px;position:relative;overflow:hidden;box-shadow:0 14px 28px #1a505e29}.dirty-sample{background:linear-gradient(145deg,#fff2d8,#e9c99a)}.clean-sample{background:linear-gradient(145deg,#e8fcff,#bceef3)}.sample-label{z-index:5;color:#fff;background:#8a6747;border-radius:999px;min-width:110px;padding:7px 18px;font-size:clamp(16px,1.45vw,22px);font-weight:950;position:absolute;top:12px;left:50%;transform:translate(-50%)}.clean-sample .sample-label{background:#2498b1}.sample-window{border:8px solid #ffffffc7;border-radius:50% 50% 31% 31%/24% 24% 18% 18%;height:calc(100% - 45px);min-height:215px;position:relative;overflow:hidden;box-shadow:inset 0 13px 24px #ffffff3d,0 9px 18px #30534e21}.dirty-sample .sample-window{background:linear-gradient(#8a806b,#665746)}.clean-sample .sample-window{background:linear-gradient(#65d3e3,#2aa9c1)}.water-sample h3{color:#654a32;margin:8px 0 0;font-size:clamp(15px,1.35vw,20px)}.clean-sample h3{color:#1a7185}.dirty-cloud{filter:blur(14px);background:#4a3c3059;border-radius:50%;width:48%;height:48%;position:absolute}.cloud-a{top:8%;left:3%}.cloud-b{bottom:10%;right:2%}.sample-sludge{background:#4e3d31;border-radius:50% 50% 0 0;height:30%;position:absolute;bottom:-6%;left:-5%;right:-5%}.sample-speck{z-index:2;left:var(--speck-left);top:var(--speck-top);width:var(--speck-size);height:var(--speck-size);transform:rotate(var(--speck-angle));background:#49372c;border-radius:45%;position:absolute}.comparison-arrow{color:#e87559;text-align:center;flex-direction:column;align-items:center;gap:4px;font-weight:950;display:flex}.comparison-arrow span{color:#6f5316;white-space:nowrap;background:#ffe28a;border-radius:999px;padding:7px 12px}.comparison-arrow svg{stroke-width:4px;width:clamp(60px,7vw,105px);height:auto;animation:1s ease-in-out infinite alternate arrow-nudge}.water-shine{background:linear-gradient(90deg,#0000,#ffffff6b,#0000);width:32%;height:140%;position:absolute;top:-15%;transform:rotate(14deg)}.shine-a{left:8%}.shine-b{opacity:.6;right:8%}.clean-bubble{left:var(--clean-bubble-left);bottom:var(--clean-bubble-bottom);width:var(--clean-bubble-size);height:var(--clean-bubble-size);animation:sample-bubble 2s ease-in-out var(--clean-bubble-delay) infinite;border:2px solid #ffffffc2;border-radius:50%;position:absolute}.sample-sparkle{color:#fffad1;filter:drop-shadow(0 0 8px #fff);width:48px;height:48px;animation:.8s ease-in-out infinite alternate sparkle-pulse;position:absolute;top:12%;right:10%}.result-actions{grid-template-columns:1fr auto;align-items:stretch;gap:14px;display:grid}.science-warning{color:#8b3429;text-align:left;background:#fff0eb;border:3px solid #ffb6a8;border-radius:22px;justify-content:center;align-items:center;gap:17px;min-height:72px;padding:10px 20px;display:flex}.science-warning>svg{flex:none;width:36px;height:36px}.science-warning div{flex-wrap:wrap;align-items:baseline;gap:5px 14px;display:flex}.science-warning strong{font-size:clamp(20px,2vw,29px)}.science-warning span{font-size:clamp(15px,1.3vw,19px);font-weight:800}.restart-button{color:#fff;background:linear-gradient(135deg, var(--blue), #51c7bf);cursor:pointer;border:0;border-radius:19px;justify-content:center;align-items:center;gap:10px;min-height:72px;margin:0;padding:0 25px;font-weight:900;display:flex;box-shadow:0 7px #197c91}@keyframes drift{to{transform:translate(120px)}}@keyframes loading-ripple{0%{opacity:.85;transform:scale(.68)}to{opacity:0;transform:scale(1.65)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bubble-up{0%{opacity:0;transform:translateY(0)scale(.75)}15%{opacity:.85}to{opacity:0;transform:translateY(-310px)scale(1.1)}}@keyframes microbe-float{50%{transform:translate(-50%,-53%)rotate(1.5deg)}}@keyframes uv-scan{0%{transform:translate(-4%)}to{transform:translate(4%)}}@keyframes water-shimmer{to{filter:brightness(1.2);transform:scaleX(.86)}}@keyframes celebration-zoom{0%{opacity:0;transform:scale(1.12)}to{opacity:.72;transform:scale(1)}}@keyframes celebration-pop{0%{opacity:0;transform:scale(.55)rotate(-4deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes mascot-bounce{to{transform:translateY(-16px)rotate(2deg)}}@keyframes confetti-fall{0%{transform:translateY(-10vh)rotate(0)}to{transform:translateY(120vh)rotate(520deg)}}@keyframes result-reveal{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes arrow-nudge{to{transform:translate(10px)}}@keyframes sample-bubble{50%{opacity:.55;transform:translateY(-13px)}}@keyframes sparkle-pulse{to{opacity:.68;transform:scale(1.2)rotate(8deg)}}@media (width<=900px){.app-shell{padding:10px}.brand-mark{border-radius:15px;width:45px;height:45px}.eyebrow{font-size:10px}.round-tool{width:48px;min-width:48px;height:48px}.fullscreen-button{display:none}.teacher-trigger{justify-content:center;width:48px;min-height:48px;padding:0}.teacher-trigger span{display:none}.progress-step{gap:4px;min-height:43px;font-size:12px}.step-number{width:25px;height:25px}.lesson-stage{border-radius:22px;padding:11px}.stage-heading{margin-bottom:7px}.stage-badge{padding:7px 10px}.stage-scene{border-width:4px;min-height:300px}.guide-bar{grid-template-columns:50px 1fr auto;min-height:61px}.guide-mascot{width:48px;height:48px}.primary-button{min-height:51px;padding-inline:13px}.primary-button svg{display:none}.teacher-stage-grid{grid-template-columns:1fr 1fr}.challenge-steps li{gap:4px}.challenge-steps li>span{width:23px;height:23px}.stage-control-panel{gap:6px;width:29%;padding:7px;right:1.5%}.clarifier-rim,.clarifier-water,.microbe-tank,.uv-machine,.disinfection-water{right:34%}.control-task,.hold-button{min-height:60px}.water-comparison{grid-template-columns:minmax(220px,1fr) 80px minmax(220px,1fr)}}@media (height<=760px) and (orientation:landscape){.app-shell{padding-block:8px}.topbar{margin-bottom:7px}.brand-mark{width:46px;height:46px}.round-tool{width:48px;min-width:48px;height:48px}.teacher-trigger{min-height:48px}.progress-rail{margin-bottom:7px;padding:6px}.progress-step{min-height:42px}.lesson-stage{padding-block:10px}.stage-scene{height:43vh;min-height:305px}.guide-bar{min-height:61px}.guide-mascot{width:50px;height:50px}.primary-button{min-height:51px}.water-comparison{min-height:300px}.water-sample{min-height:285px}.sample-window{min-height:190px}}@media (orientation:portrait) and (width<=900px){.app-shell:before{content:"请把设备横过来，操作空间更大哦";z-index:200;color:#fff;text-align:center;background:#147aa6;place-items:center;padding:40px;font-size:26px;font-weight:900;display:grid;position:fixed;inset:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}