:root{--ivory:#f7f1e8;--paper:#fffdf9;--ink:#24313d;--muted:#66716f;--sage:#44755d;--slate:#415a77;--line:#d8cec2;--water:#6f9fb2}*{box-sizing:border-box}[hidden]{display:none!important}body.water-states-page{margin:0;background:var(--ivory);color:var(--ink);font-family:system-ui,-apple-system,"PingFang SC",sans-serif}.states-main{max-width:1240px;margin:auto;padding:36px 28px 90px}.tool-heading{max-width:850px;margin-bottom:22px}.eyebrow,.stage-kicker{letter-spacing:.07em;color:var(--sage);font-weight:780}.tool-heading h1{font-size:clamp(2rem,5vw,3.6rem);margin:.14em 0}.lead{font-size:1.08rem;line-height:1.65}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip,.route-badge{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}.states-lab{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);background:var(--paper);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 20px 50px #3a46500f}.stage{min-width:0;padding:26px;background:linear-gradient(145deg,#faf5ed,#edf1ed)}.stage-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.stage-head h2{margin:4px 0}.route-badge{color:var(--slate);font-weight:780;white-space:nowrap}.state-board{position:relative;min-height:360px;margin:18px 0 12px;padding:58px 26px 92px;display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;border:8px solid #d8d0c3;border-radius:28px;background:linear-gradient(155deg,#f5efe5,#e1ddd3);box-shadow:inset 0 0 0 2px #fff8,0 14px 24px #33404c14;overflow:hidden}.state-object{position:relative;z-index:2;min-width:0;display:grid;justify-items:center;gap:10px;padding:16px 8px;border-radius:18px;opacity:.55;transition:opacity .25s,transform .45s,background .25s}.state-object strong{text-align:center}.state-object small{color:var(--slate);font-weight:700}.state-object.is-active,.state-object.is-origin,.state-object.is-arriving,.state-object.is-route-from,.state-object.is-route-to{opacity:1;background:#fff9}.state-object.is-route-from{box-shadow:inset 0 0 0 2px #415a7770}.state-object.is-route-to{box-shadow:inset 0 0 0 2px #44755d70}.state-object.is-arriving{animation:arrive .8s ease}.ice-cube{width:92px;height:78px;border:2px solid #66899a;border-radius:14px;background:linear-gradient(135deg,#f8ffff,#b8d5dd 58%,#eaffff);box-shadow:inset -12px -10px 0 #6f9fb225,0 12px 18px #415a7724;transform:rotate(-4deg)}.water-cup{width:94px;height:88px;border:4px solid #718b96;border-top-width:2px;border-radius:5px 5px 22px 22px;background:linear-gradient(transparent 0 40%,#7db1c18c 41% 88%,#d9f3f4 89%)}.clear-air{width:100px;height:88px;display:flex;justify-content:center;gap:13px;align-items:end}.clear-air i{display:block;width:3px;height:58px;border-radius:50%;background:linear-gradient(transparent,#6f9fb2,transparent);opacity:.7;transform:rotate(-8deg)}.clear-air i:nth-child(2){height:76px;transform:rotate(7deg)}.route-track{height:4px;background:var(--slate);position:relative;opacity:.14;transition:opacity .2s}.route-track:after{content:"";position:absolute;top:50%;width:14px;height:14px;background:var(--slate);opacity:0;transform:translateY(-50%)}.route-track.is-route-active{opacity:1}.route-track.is-route-active:after{opacity:1}.route-track.is-route-forward:after{right:-1px;left:auto;clip-path:polygon(0 0,100% 50%,0 100%)}.route-track.is-route-reverse:after{right:auto;left:-1px;clip-path:polygon(100% 0,0 50%,100% 100%)}.mist-note{position:absolute;right:24px;bottom:15px;display:grid;grid-template-columns:54px auto;column-gap:8px;align-items:center;padding:8px 10px;border:1px dashed #82939a;border-radius:12px;background:#fffaf0}.mist-note span{grid-row:1/3;width:50px;height:27px;border-radius:50%;background:#e7eceb;box-shadow:14px -7px 0 #eef2f1,-11px -5px 0 #f4f5f2}.mist-note small{color:var(--muted)}.motion-note,.boundary,.no-score{color:var(--muted);line-height:1.5}.boundary{margin-bottom:0}.result{padding:14px 16px;border-left:4px solid var(--sage);background:#eef3ed;border-radius:10px}.result span{display:block;margin-top:5px}.control-panel{padding:26px;border-left:1px solid var(--line)}fieldset{border:0;padding:0;margin:0 0 18px}legend{font-weight:800;margin-bottom:9px}.choices{display:grid;gap:7px}.change-choices{grid-template-columns:1fr 1fr}.choice{display:flex;align-items:center;gap:9px;min-height:48px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}.choice span{display:grid}.choice small{color:var(--muted);margin-top:2px}.choice:has(input:checked){border-color:var(--sage);box-shadow:0 0 0 2px #44755d24}.choice input{width:20px;height:20px;accent-color:var(--sage);flex:0 0 auto}.action-row{display:grid;gap:9px}.primary-action,.reset-button{min-height:48px;border-radius:12px;font:inherit;font-weight:800;cursor:pointer}.primary-action{border:0;background:var(--sage);color:#fff}.primary-action:disabled{opacity:.48}.reset-button{border:1px solid var(--line);background:#fff;color:var(--ink)}button:focus-visible,input:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid #b76638;outline-offset:3px}.no-score{text-align:center;font-size:.88rem;margin-bottom:0}.water-states-page button,.water-states-page .choice,.water-states-page .site-links a,.water-states-page .site-brand,.water-states-page .strip-button{min-height:44px!important}@keyframes arrive{0%{transform:scale(.9);box-shadow:0 0 0 0 #44755d55}70%{transform:scale(1.04);box-shadow:0 0 0 10px #44755d00}100%{transform:scale(1)}}@media(max-width:820px){.states-lab{--states-stacked:1;grid-template-columns:1fr}.control-panel{border-left:0;border-top:1px solid var(--line);order:-1}.stage{scroll-margin-top:8px}.state-board{min-height:320px}.stage-head{display:block}.route-badge{display:inline-block;margin-top:8px}}@media(max-width:520px){.states-main{padding:24px 14px 80px}.stage,.control-panel{padding:17px}.change-choices{grid-template-columns:1fr}.state-board{min-height:285px;padding:38px 8px 86px;grid-template-columns:1fr 26px 1fr 26px 1fr;border-width:6px}.state-object{padding:10px 2px;font-size:.78rem}.ice-cube,.water-cup,.clear-air{width:60px;height:58px}.route-track:after{width:9px;height:9px}.mist-note{right:8px;bottom:10px}.tool-heading h1{font-size:2.15rem}.site-nav,.site-links{max-width:100%;min-width:0}.site-links{overflow-x:auto}}body.water-states-page:not(.classroom-screen) .classroom-toolbar{color:var(--ink)!important;background:#f5efe6!important;background-image:none!important}body.classroom-screen.water-states-page{background:#fff9ef!important;color:var(--ink)!important;font-size:118%}body.classroom-screen.water-states-page .states-lab,body.classroom-screen.water-states-page .stage,body.classroom-screen.water-states-page .control-panel,body.classroom-screen.water-states-page .classroom-toolbar,body.classroom-screen.water-states-page .resource-strip{color:var(--ink)!important;background:#fffaf2!important;background-image:none!important;border-color:#9aa9a4!important;box-shadow:none!important}body.classroom-screen.water-states-page .control-panel,body.classroom-screen.water-states-page .control-panel h2,body.classroom-screen.water-states-page .control-panel legend,body.classroom-screen.water-states-page .control-panel label,body.classroom-screen.water-states-page .choice b,body.classroom-screen.water-states-page .prediction-choices .choice,body.classroom-screen.water-states-page .result{color:var(--ink)!important}body.classroom-screen.water-states-page .stage-kicker{color:var(--sage)!important}body.classroom-screen.water-states-page .choice{color:var(--ink)!important;background:#fffdf9!important;border-color:#9aa9a4!important}body.classroom-screen.water-states-page .choice small,body.classroom-screen.water-states-page .motion-note,body.classroom-screen.water-states-page .boundary,body.classroom-screen.water-states-page .no-score{color:var(--slate)!important}body.classroom-screen.water-states-page .result{background:#eef3ed!important;border-color:var(--sage)!important}body.classroom-screen.water-states-page .reset-button{color:var(--ink)!important;background:#fffdf9!important;border-color:#728a80!important}body.water-states-page .classroom-screen-toggle,body.water-states-page .fullscreen-button{color:var(--ink)!important;background:#fffdf9!important;background-image:none!important;border-color:#728a80!important}body.water-states-page .classroom-screen-toggle:focus-visible,body.water-states-page .fullscreen-button:focus-visible{outline:3px solid #b76638!important;outline-offset:3px}body.classroom-screen.water-states-page .primary-action{color:#fff!important;background:var(--sage)!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.state-object.is-arriving{transform:none}}