:root{color-scheme:dark;--bg:#071c2b;--panel:#0b2a3e;--line:#3a6b80;--text:#f0fbff;--muted:#bbd9e5;--aqua:#6be1e6;--lime:#8befc5;--gold:#ffe29c}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:radial-gradient(ellipse at 25% -12%,#1c6578,transparent 60%),linear-gradient(150deg,#092b41,#071827 64%);color:var(--text);font:16px/1.55 system-ui,Arial,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe29c;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}.water-lab{max-width:1500px;padding:clamp(12px,2vw,28px);margin:auto}.lab-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}.lab-head .unit1-brand{width:210px;flex:none}.lab-head .unit1-brand img{max-width:100%;height:auto}.kicker{color:#75e7d7;font-size:.77rem;font-weight:850;letter-spacing:.12em}.lab-head h1{font-size:clamp(1.6rem,3vw,2rem);line-height:1.2;margin:4px 0}.lab-head h1 small{display:block;color:#afe8e3;font-size:.55em;font-weight:650}.head-tag{margin-left:auto;border:1px solid #5c9bae;border-radius:99px;padding:8px 13px;color:#d4f1f2;font-size:.85rem}.lab-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.lab-nav button{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 15px;min-width:0;background:#102f43;border:1px solid #3b6d83;border-radius:15px;color:#e7f9fe}.lab-nav button.active{background:linear-gradient(120deg,#155265,#14465f);border-color:#76e5db;box-shadow:inset 0 0 0 1px #62e7d366,0 12px 35px #0015267d}.lab-nav b{color:var(--lime);font-size:1.25rem}.lab-nav span{font-size:1rem;font-weight:800;line-height:1.25}.lab-nav small{display:block;color:#b7dedf;font-weight:550;font-size:.82rem;margin-top:3px}.lab-panel[hidden]{display:none}.lab-panel{padding:clamp(15px,2.5vw,30px);border:1px solid #386b7d;border-radius:24px;background:linear-gradient(145deg,#0c3246,#0a2236);box-shadow:0 25px 70px #0005}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}.panel-head h2{font-size:clamp(1.45rem,2.7vw,2.15rem);margin:5px 0;line-height:1.2}.panel-head h2 small{display:block;color:#9be5df;font-size:.66em;line-height:1.45}.panel-head p{margin:7px 0;color:#c4dfeb}.model-tag{border:1px solid #72b2bb;border-radius:99px;padding:7px 12px;color:#d7f9f4;font-size:.81rem;white-space:nowrap}.experiment-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:18px}.experiment-main,.side{min-width:0}.prediction{display:flex;align-items:center;gap:10px;padding:12px 14px;border-left:4px solid #f5d68c;background:#f5d68c14;border-radius:10px;color:#ecf8fd}.prediction b{color:var(--gold);font-size:.75rem;letter-spacing:.07em;white-space:nowrap}.prediction span{font-size:.89rem}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:13px 0}.controls button{border-radius:10px;padding:10px 14px;font-weight:800;font-size:.9rem}.run{border:1px solid #aefff2;background:#56e3d3;color:#053548}.secondary{border:1px solid #6798ab;background:#153f56;color:#effbff}.run:hover,.secondary:hover{filter:brightness(1.12)}.stage{border:1px solid #54899a;border-radius:17px;background:radial-gradient(circle at 50% 40%,#165268,#09253c 75%);overflow:hidden;padding:15px 15px 12px}.stage-top{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#d8f4f4;font-size:.85rem}.stage-top span{color:#ffdf97;font-weight:750;text-align:right}.stage svg{display:block;width:100%;height:auto;max-height:450px}.atom{font:800 31px system-ui;fill:white}.atom.dark{fill:#0c3e56}.charge{font:850 15px system-ui;fill:#fff6d2}.charge.dark{fill:#063c57}.svg-label{font:750 19px system-ui;fill:#d9faff}.ph-value{font:900 31px system-ui;fill:white;paint-order:stroke;stroke:#154856;stroke-width:3}.stage-caption{min-height:37px;border:1px solid #74e6dc77;border-radius:8px;background:#15566b;padding:7px 11px;font-size:.88rem;color:#e8fbf7;font-weight:750}.legend{display:flex;gap:12px 20px;flex-wrap:wrap;margin:11px 3px;color:#cde7ed;font-size:.83rem}.legend i{display:inline-block;width:22px;border-top:4px solid #c8edfb;vertical-align:middle}.legend .dashed{border-color:var(--gold);border-style:dashed}.side{display:grid;align-content:start;gap:12px}.note{padding:19px;border:1px solid #416f82;border-radius:15px;background:linear-gradient(145deg,#174055,#103045)}.note h3{font-size:1.15rem;margin:9px 0}.note p{color:#d1e8ed;margin:10px 0 0;font-size:.92rem}.note p[lang=ar]{line-height:1.8}.note strong{display:block;margin-top:12px;color:#e8faff;font-size:.92rem}.note small{display:block;color:#b2d1da;font-size:.77rem;margin-top:12px}.material-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0 0}.material-picker.two{grid-template-columns:repeat(2,minmax(0,1fr))}.material-picker button{min-width:0;border:1px solid #478199;border-radius:9px;background:#0c354b;color:#e8f9fd;padding:9px 12px;text-align:left;font-weight:800;font-size:.93rem}.material-picker button[aria-pressed=true]{background:#1b6872;border-color:#90f6d8;box-shadow:inset 0 0 0 1px #9cf7d166}.material-picker small{display:block;color:#c1e7e4;font-size:.79rem}.ph-scale{margin-top:12px;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,#ee9594,#dadb9d,#7fe2c2);color:#10394a;display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:.77rem;font-weight:800}.ph-scale strong{white-space:nowrap}footer{display:flex;justify-content:space-between;gap:20px;color:#a7c8d2;padding:19px 2px 5px;font-size:.78rem}footer strong{color:#b8f1e1}@media(max-width:1000px){.experiment-grid{grid-template-columns:1fr}.side{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){body{font-size:15px}.water-lab{padding:10px}.lab-head{gap:9px;flex-wrap:wrap}.lab-head .unit1-brand{width:130px}.head-tag{display:none}.lab-head h1{font-size:1.25rem}.kicker{font-size:.66rem}.lab-nav{gap:5px}.lab-nav button{padding:8px 6px;gap:5px;border-radius:10px}.lab-nav b{font-size:.82rem}.lab-nav span{font-size:.7rem}.lab-nav small{font-size:.62rem}.lab-panel{padding:12px;border-radius:16px}.panel-head{display:block}.panel-head h2{font-size:1.45rem}.panel-head p{font-size:.87rem}.model-tag{display:inline-block;white-space:normal;margin-top:6px}.prediction{display:block;padding:10px}.prediction b{display:block}.prediction span{display:block;margin-top:4px;font-size:.81rem}.controls button{padding:8px 9px;font-size:.76rem}.stage{padding:8px}.stage-top{font-size:.69rem}.stage-caption{font-size:.75rem}.legend{font-size:.72rem}.side{grid-template-columns:1fr}.note{padding:13px}.material-picker button{padding:7px 4px;font-size:.78rem}.material-picker small{font-size:.65rem}.ph-scale{font-size:.61rem}footer{display:block}footer span{display:block;margin-top:6px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}