:root{color-scheme:light;--paper:#f6f3eb;--ink:#233d43;--muted:#52696c;--accent:#9b4b36;--teal:#2f6263;--line:#b8c8c6;--stage:#e7efeb;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{color:var(--ink);background:var(--paper);-webkit-tap-highlight-color:transparent}button,select,a{touch-action:manipulation}button,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #9b4b36;outline-offset:3px}button,[hidden]{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}button{border:1px solid var(--line);background:#fffdf7;border-radius:8px}a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.water-app{height:100vh;height:100dvh;width:100%;max-width:1440px;margin:auto;padding:12px 34px 24px;display:flex;flex-direction:column;gap:14px;overflow:hidden}.water-app.is-expanded{position:fixed;inset:0;z-index:1000;max-width:none;background:var(--paper);width:100%;height:100dvh}.water-app:fullscreen{max-width:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}.back-link{min-height:44px;display:flex;align-items:center;gap:8px;text-decoration:none;font-size:13px;color:var(--muted)}.wordmark{font-size:10px;letter-spacing:4px;color:var(--muted)}.fullscreen{min-height:44px;padding:6px 12px;font-size:12px;background:transparent}.heading{display:flex;align-items:center;justify-content:space-between;min-height:84px}.eyebrow{margin:0 0 6px;font-size:10px;letter-spacing:3px;color:var(--muted)}h1{margin:0;font-family:"Songti SC","Noto Serif CJK SC",serif;font-weight:500;font-size:44px;line-height:1.15;letter-spacing:6px}h1 span{color:var(--accent)}h1 i{display:inline-block;width:15px;height:22px;margin-left:9px;background:#86bcb9;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.heading-note{margin:0;font-size:12px;line-height:1.9;color:var(--muted);padding-right:3px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:36px;flex:1;min-height:0}.play-column{display:flex;flex-direction:column;min-height:0;gap:10px}.board-meta{display:flex;align-items:center;justify-content:space-between;min-height:40px;gap:10px}.level-heading{display:flex;align-items:center;gap:16px}.level-tag{font-size:11px;color:var(--muted);white-space:nowrap}.level-tag b{font-family:serif;font-size:21px;color:var(--ink);margin-left:5px}.level-tag small{font-size:10px}.level-heading h2{margin:0;font-weight:500;letter-spacing:2px;font-size:14px;padding-left:16px;border-left:1px solid #c2cfca}.sorted-tag{font-size:11px;color:var(--muted);white-space:nowrap}.sorted-tag b{font-size:15px;color:var(--teal);margin-left:6px}.scene{position:relative;flex:1;min-height:0;border:1px solid #c2d0ca;border-radius:18px;isolation:isolate;overflow:hidden;background-color:var(--stage);background-image:radial-gradient(#49716a10 1px,transparent 1px);background-size:14px 14px;box-shadow:inset 0 0 65px #fff5}.scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(transparent,#b9cfc930);z-index:-1}.sunbeam{position:absolute;width:270px;height:270px;right:-65px;top:-80px;border-radius:50%;background:#fff8d879;filter:blur(1px);z-index:-1}.sunbeam::before,.sunbeam::after{content:"";position:absolute;width:1px;height:430px;left:80px;top:-20px;background:#fff8;transform:rotate(35deg)}.sunbeam::after{left:160px}.scene-mark{position:absolute;top:15px;left:20px;font:italic 12px Georgia,serif;color:#52696c;letter-spacing:1px}.water-board{height:100%;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:38px 25px 24px;--bottle-width:78px;--bottle-height:188px}.bottle-row{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:27px;flex:1;min-height:0;max-height:215px}.bottle-row::after{content:"";position:absolute;height:6px;bottom:19px;left:0;right:0;background:linear-gradient(#aac2bb70,#d5e1d880);border-top:1px solid #9dbbb356;border-radius:8px;box-shadow:0 7px 9px #36534b0a;z-index:-1}.bottle{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:none;width:var(--bottle-width);height:min(100%,var(--bottle-height));min-width:44px;min-height:66px;border:0;border-radius:16px;padding:0 7px;background:transparent;transition:transform .18s;isolation:isolate}.bottle-glass{position:relative;display:block;width:100%;height:calc(100% - 24px);min-height:40px;border:2px solid #769899;border-top-color:transparent;border-radius:11px 11px 20px 20px;background:linear-gradient(105deg,#ffffff83,#ffffff18 35%,#d2e5e233 65%,#ffffff70);box-shadow:inset 3px 0 5px #ffffff55,2px 4px 7px #32535415;pointer-events:none;transform-origin:50% 6px}.bottle-glass::before{content:"";position:absolute;left:-4px;right:-4px;top:-3px;height:8px;border:2px solid #769899;border-radius:50%;background:#f5faf4;z-index:4}.bottle-glass::after{content:"";position:absolute;left:5px;top:12px;bottom:15px;width:4px;background:linear-gradient(#fff9,#fff3);border-radius:5px;z-index:3}.liquid-well{position:absolute;left:4px;right:4px;top:15px;bottom:5px;border-radius:2px 2px 13px 13px;overflow:hidden;pointer-events:none}.liquid{position:absolute;left:0;right:0;height:25%;bottom:calc(var(--unit)*25%);background:var(--paint);background-image:linear-gradient(90deg,#ffffff18,transparent 50%,#233d430d);border-top:1px solid #ffffff65;display:flex;align-items:center;justify-content:center;color:#233d43;font-size:14px;font-family:Arial,sans-serif;font-weight:700;line-height:1;text-shadow:none}.liquid::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:50%;background:#ffffff30}.liquid.surface{border-radius:50% 50% 0 0 / 5px 5px 0 0}.liquid-symbol{position:relative;z-index:2;opacity:1}.bottle-id{height:24px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none}.bottle-id em{font-style:normal;color:#2f6263;font-weight:800}.bottle.selected{transform:translateY(-8px)}.bottle.selected::after{content:"";position:absolute;inset:-6px 0 20px;border:2px solid #2f6263;border-radius:15px;pointer-events:none}.bottle.selected .bottle-id{color:#233d43;font-weight:700}.bottle.target .bottle-glass{box-shadow:0 0 0 3px #2f626355,0 0 20px #ffffffa0}.bottle.complete .bottle-glass{border-color:#39785f;box-shadow:0 3px 9px #39785f29}.bottle.complete .bottle-glass::before{border-color:#39785f}.bottle.invalid{animation:shake .28s ease}.bottle.completed-now{animation:complete .6s ease}.bottle.pour-origin .bottle-glass{opacity:.13}.pour-layer{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:visible}.pour-ghost{position:absolute;pointer-events:none;transition:transform .22s ease-in-out;transform-origin:50% 6px;filter:drop-shadow(0 8px 5px #244c4c20)}.pour-ghost .bottle-glass{height:100%;min-height:0}.pour-stream{position:absolute;width:5px;border-radius:4px;background:var(--paint);box-shadow:1px 0 #ffffff80;transform-origin:top center;animation:stream .3s ease-in-out both}.feedback{display:flex;align-items:center;min-height:30px;margin:0;font-size:12px;line-height:1.45;color:var(--muted);padding:0 2px}.feedback.error{color:#9b3e2a}.feedback.success{color:#2f6263}.controls{display:flex;align-items:center;gap:10px;min-height:44px}.controls>button{min-height:44px;padding:7px 15px;font-size:12px;background:transparent}.level-picker{position:relative;display:block;min-width:140px}.level-picker select{appearance:none;width:100%;height:44px;padding:6px 30px 6px 13px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:12px}.level-picker i{position:absolute;right:12px;top:11px;font-style:normal;pointer-events:none}.saved{margin-left:auto;font-size:10px;color:var(--muted)}.guide{border-top:1px solid #bbc8bf;padding-top:13px;display:flex;flex-direction:column;min-height:0}.guide-top{display:flex;align-items:center;justify-content:space-between}.guide-kicker{font-size:8px;letter-spacing:2px;color:var(--muted)}.little-star{color:var(--accent);font-size:28px}.guide h2{font-family:"Songti SC",serif;font-weight:500;font-size:29px;line-height:1.55;letter-spacing:3px;margin:12px 0 0}.guide h2 em{font-style:normal;color:var(--accent)}.guide-illustration{width:210px;max-height:155px;margin:4px auto 0;min-height:70px;flex:1}.guide-illustration svg{display:block;width:100%;height:100%}.guide-rules p{font-size:11px;color:var(--muted);margin:10px 0}.guide-rules b{font:11px Georgia,serif;color:var(--accent);margin-right:9px}.guide-footer{font-size:10px;line-height:1.9;color:var(--muted);margin:8px 0 0}.palette{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid #c8d2c9}.palette-chip{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--paint);color:#233d43;font:700 12px Arial,sans-serif}.win-card{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:20px;text-align:center;background:#f6f3ebf2;backdrop-filter:blur(5px)}.win-drop{display:grid;place-items:center;width:52px;height:65px;background:#91c2b6;color:#233d43;font-size:30px;border-radius:60% 40% 55% 45%;transform:rotate(10deg);box-shadow:inset -6px -4px #79aaa655}.win-card p{font-size:12px;line-height:1.5;margin:0;color:var(--muted)}.win-card .win-eyebrow{font-size:10px;letter-spacing:3px}.win-card h2{margin:0;font-family:"Songti SC",serif;font-size:28px;font-weight:500;letter-spacing:2px}.win-card button{min-height:44px;padding:10px 24px;background:#2f6263;border-color:#2f6263;color:#fffdf7;font-size:13px;margin-top:4px}
@keyframes shake{25%,75%{translate:-4px 0}50%{translate:4px 0}}@keyframes complete{45%{filter:drop-shadow(0 0 12px #fff5b0);translate:0 -5px}100%{filter:none;translate:0 0}}@keyframes stream{0%{scale:1 0;opacity:0}30%{scale:1 1;opacity:1}80%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
@media(min-width:1100px) and (min-height:700px){.water-app{padding:15px 48px 26px;gap:18px}.play-layout{gap:42px;grid-template-columns:minmax(0,1fr) 280px}.water-board{--bottle-width:82px;--bottle-height:205px;gap:22px}.bottle-row{gap:30px}.heading{min-height:90px}.guide h2{font-size:31px}}
@media(max-width:900px){.water-app{padding:10px 22px 18px}.play-layout{grid-template-columns:minmax(0,1fr) 210px;gap:22px}.guide h2{font-size:25px}.guide-illustration{width:190px}.water-board{--bottle-width:62px;--bottle-height:178px;padding-inline:20px}.bottle-row{gap:14px}.saved{display:none}}
@media(max-width:600px) and (orientation:portrait){.water-app{padding:7px 15px max(12px,env(safe-area-inset-bottom));gap:12px}.topbar{gap:8px}.wordmark{font-size:8px;letter-spacing:2px}.back-link{font-size:12px;min-width:44px}.back-link span{display:none}.fullscreen{font-size:10px;padding-inline:8px}.heading{min-height:78px;align-items:center}.eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:6px}h1{font-size:34px;letter-spacing:5px}h1 i{height:18px;width:13px}.heading-note{font-size:10px;line-height:1.8}.play-layout{display:flex;gap:0}.play-column{width:100%;gap:10px}.guide{display:none}.board-meta{min-height:38px}.level-heading{gap:10px}.level-heading h2{font-size:12px;letter-spacing:1px;padding-left:10px}.level-tag{font-size:10px}.level-tag b{font-size:20px}.sorted-tag{font-size:10px}.scene{border-radius:15px}.scene-mark{top:14px;left:15px;font-size:10px}.water-board{--bottle-width:58px;--bottle-height:180px;gap:26px;padding:45px 12px 25px}.bottle-row{gap:7px;max-height:210px}.bottle{padding-inline:5px}.bottle-glass{border-radius:9px 9px 17px 17px}.bottle-id{font-size:10px}.liquid{font-size:13px}.feedback{font-size:11px;min-height:34px;line-height:1.5}.controls{gap:9px}.controls>button{flex:1;font-size:12px;padding-inline:10px}.level-picker{flex:1.3;min-width:0}.level-picker select{font-size:11px;padding-left:10px}.win-card{gap:12px;padding:14px}.win-card h2{font-size:24px}.win-card p{font-size:11px}.win-card .win-eyebrow{font-size:9px;letter-spacing:2px}}
@media(max-width:600px) and (orientation:portrait) and (max-height:700px){.water-app{padding:5px 12px 8px;gap:8px}.heading{min-height:62px}.eyebrow{font-size:8px;margin-bottom:4px}h1{font-size:30px}.heading-note{font-size:9px}.play-column{gap:7px}.board-meta{min-height:33px}.water-board{--bottle-width:54px;--bottle-height:150px;padding:34px 9px 16px;gap:18px}.bottle-row{gap:7px;max-height:165px}.liquid{font-size:12px}.bottle-id{height:22px;font-size:9px}.bottle-glass{height:calc(100% - 22px)}.bottle-row::after{bottom:17px}.scene-mark{font-size:9px;top:11px}.feedback{min-height:31px;font-size:10px}.win-card{gap:8px}.win-card h2{font-size:22px}.win-drop{height:50px;width:41px;font-size:24px}}
@media(max-width:350px) and (orientation:portrait){.water-app{padding-inline:9px;gap:7px}.wordmark{letter-spacing:1.4px;font-size:7px}.heading-note{font-size:8px}.heading{min-height:59px}h1{font-size:29px;letter-spacing:3px}.water-board{--bottle-width:49px;--bottle-height:139px;padding-inline:5px;gap:17px}.bottle-row{gap:5px}.bottle{padding-inline:5px}.liquid-well{left:3px;right:3px;top:13px;bottom:4px}.bottle-glass::after{left:4px;width:3px}.level-heading{gap:7px}.level-heading h2{font-size:11px;padding-left:7px}.sorted-tag{font-size:9px}.level-tag{font-size:9px}.level-tag b{font-size:18px}.level-tag small{font-size:9px}.controls>button,.level-picker select{font-size:10px}.feedback{font-size:10px}.scene-mark{font-size:9px}.bottle.selected{transform:translateY(-5px)}}
@media(orientation:landscape) and (max-height:520px){.water-app{padding:4px 14px 8px;gap:4px}.topbar{min-height:44px}.wordmark{font-size:8px;letter-spacing:3px}.fullscreen{font-size:10px}.back-link{font-size:11px}.heading{position:absolute;top:11px;left:50%;transform:translateX(-50%);min-height:0;pointer-events:none}.heading h1{font-size:24px;letter-spacing:4px}.heading h1 i{width:9px;height:14px;margin-left:4px}.eyebrow,.heading-note,.wordmark{display:none}.play-layout{display:block;flex:1;min-height:0}.play-column{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 158px;grid-template-rows:34px minmax(0,1fr) 44px;column-gap:16px;row-gap:5px}.board-meta{grid-column:1;grid-row:1;min-height:0}.scene{grid-column:1;grid-row:2 / 4;border-radius:12px}.feedback{grid-column:2;grid-row:2;font-size:11px;line-height:1.8;align-self:center;min-height:0;padding:0 5px}.controls{grid-column:2;grid-row:3;gap:5px;min-height:44px}.controls>button{min-width:54px;font-size:9px;padding:4px 6px}.level-picker{min-width:0;flex:1}.level-picker select{font-size:9px;padding:5px 15px 5px 6px}.level-picker i{right:5px;top:14px;font-size:9px}.guide{display:none}.level-heading h2{font-size:12px}.level-tag{font-size:10px}.level-tag b{font-size:19px}.sorted-tag{font-size:10px}.water-board{--bottle-width:53px;--bottle-height:118px;gap:10px;padding:23px 15px 9px}.bottle-row{gap:15px;max-height:135px}.bottle{padding-inline:5px}.bottle-glass{height:calc(100% - 18px);border-radius:9px 9px 14px 14px}.bottle-id{height:18px;font-size:8px}.liquid-well{top:11px;bottom:4px;left:3px;right:3px}.liquid{font-size:10px}.bottle-row::after{bottom:14px;height:5px}.scene-mark{top:7px;left:12px;font-size:8px}.bottle.selected{transform:translateY(-4px)}.bottle.selected::after{inset:-4px 0 15px}.win-card{gap:7px;padding:10px}.win-drop{display:none}.win-card h2{font-size:24px}.win-card p{font-size:10px}.win-card .win-eyebrow{font-size:9px}.win-card button{font-size:11px;margin-top:2px}}
@media(orientation:landscape) and (max-height:380px){.water-app{padding-inline:10px}.play-column{grid-template-columns:minmax(0,1fr) 142px;column-gap:12px;grid-template-rows:30px minmax(0,1fr) 44px}.water-board{--bottle-width:49px;--bottle-height:107px;gap:8px;padding:20px 11px 7px}.bottle-row{gap:9px}.feedback{font-size:10px}.bottle-glass::after{left:4px;width:3px}.liquid{font-size:9px}.liquid-well{top:10px}.controls>button{min-width:52px;font-size:8px}.level-picker select{font-size:8px}.level-heading{gap:10px}.level-heading h2{font-size:11px;padding-left:10px}.level-tag small{font-size:9px}.sorted-tag{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.pour-layer{display:none!important}}

.cozy-sound{min-height:44px;padding:8px 14px;border:1px solid #8b7764;border-radius:12px;background:#fff9ef;color:#423a30;font:inherit;cursor:pointer;touch-action:manipulation}.cozy-sound:focus-visible{outline:3px solid #355e56;outline-offset:2px}

.controls{flex-wrap:wrap}.controls>button{white-space:nowrap}.controls>button:disabled{opacity:.45;cursor:default}.topbar .cozy-sound{margin-left:auto;font-size:12px;white-space:nowrap}
@media(orientation:landscape) and (max-height:520px){.play-column{grid-template-rows:34px minmax(0,1fr) 92px}.controls{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:44px 44px}.controls .level-picker{grid-column:1/-1}.controls .saved{display:none}.controls>button{font-size:10px}}

@media(max-width:600px){.topbar .wordmark{display:none}.topbar{gap:7px}}