:root{--bg:#f4f8fb;--panel:#fff;--text:#17324a;--muted:#5d7182;--line:#d8e5ee;--accent:#168fd1}
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei","Segoe UI",sans-serif;background:#f4f8fb;color:var(--text)}
.app{display:grid;gap:16px;width:100%;min-height:100vh;padding:18px;overflow-x:hidden}.panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(23,50,74,.08)}
.toolbar{padding:20px 22px 16px;background:linear-gradient(135deg,#fff,#f5fbff)}.toolbar h1{margin:0 0 14px;text-align:center;font-size:clamp(26px,3vw,36px);line-height:1.25;overflow-wrap:anywhere;color:#184b72}
.compare-config{border:1px solid #dbe7f2;background:#f9fcff;border-radius:12px;padding:12px 14px}.compare-config h3{margin:0 0 8px;text-align:center;font-size:14px;color:#365b76}
.compare-options,.buttons,.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 12px}.compare-options label{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #d8e8f4;border-radius:999px;background:#f1f9ff;font-size:13px}.compare-options input,input[type=range]{accent-color:var(--accent)}
.buttons{margin-top:12px}button{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:#f7fbfe;color:#295067;font-size:14px;font-weight:700;cursor:pointer}button:hover{background:#eaf6fd}button:disabled{opacity:.5;cursor:not-allowed}#presetBtn{background:#eaf7ff;border-color:#9fd4f3;color:#12679a}#startBtn{background:linear-gradient(135deg,#22a778,#178c64);border-color:#178c64;color:#fff}#conclusionBtn{background:#ed941f;border-color:#d98517;color:#fff}
.experiment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0;align-items:start}.exp{min-width:0;padding:14px}.exp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.exp-head h2{margin:0;font-size:20px}.exp-head p{margin:0;font-size:14px;color:var(--muted)}
.control-group{margin:9px 0}.control-group.locked{opacity:.48}.control-group label{display:flex;justify-content:space-between;margin-bottom:4px;font-size:14px}input[type=range]{width:100%}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.metrics article{padding:9px;border:1px solid #dce8f0;border-radius:10px;background:#f8fcff}.metrics article:nth-child(1){border-color:#a8dfff;background:#f3fbff}.metrics article:nth-child(2){border-color:#e3c0a1;background:#fff9f3}.metrics article:nth-child(3){border-color:#9edbc8;background:#f2fcf8}.metrics h3{margin:0 0 4px;font-size:12px;color:var(--muted);font-weight:500}.metrics p{margin:0;font-size:19px;font-weight:700}
canvas{display:block;width:100%;max-width:100%;min-width:0;height:420px;border:2px solid #d7e4ef;border-radius:12px;background:#fff;touch-action:none}
.legend{padding:12px 14px;color:var(--muted);font-size:13px}.legend i{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:50%;vertical-align:-1px}.legend .rain{background:#43bfff;box-shadow:0 0 0 3px rgba(67,191,255,.18)}.legend .soil{background:#b96832;box-shadow:0 0 0 3px rgba(185,104,50,.15)}.legend .infiltration{background:#21a77a;box-shadow:0 0 0 3px rgba(33,167,122,.16)}.legend .cup{background:#168fd1}.legend .plant{background:#43a047}
.conclusion{padding:16px 18px;background:#fffaf0}.conclusion h2{margin:0 0 8px}.conclusion p{margin:0;white-space:pre-line;line-height:1.7}.knowledge{padding:18px}.knowledge>h2{text-align:center;color:#214d70}.knowledge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.knowledge-card{padding:12px;border:1px solid #dbe6f2;border-radius:12px;background:#fbfdff}.knowledge-card h3{margin:0 0 8px;color:#2d5b7f;font-size:16px}.knowledge-figure{padding:6px;margin-bottom:10px;border:1px solid #d9e5f1;border-radius:10px;background:#f8fbff}.knowledge-figure svg{display:block;width:100%;height:auto}.fig-title{font-size:11px;fill:#3a5f7b;font-weight:700}.fig-sub{font-size:10px;fill:#5a7389}.fig-text{font-size:11px;fill:#32536e;font-weight:600}.fig-dot-text{font-size:9px;fill:#7b3f35;font-weight:700}.knowledge-card ul{margin:0;padding-left:18px;color:#495a68;font-size:14px;line-height:1.65}
@media(max-width:1080px){.experiment-grid,.knowledge-grid{grid-template-columns:minmax(0,1fr)}canvas{height:380px}}@media(max-width:620px){.app{padding:10px}.toolbar{padding:16px 12px}.toolbar h1{font-size:25px}.compare-options{gap:7px}.buttons{gap:8px}.exp{padding:12px}.exp-head{align-items:flex-start;flex-wrap:wrap}.metrics{grid-template-columns:1fr}.metrics article{display:flex;align-items:center;justify-content:space-between}.metrics h3{margin:0}.metrics p{font-size:17px}canvas{height:330px}}