*{box-sizing:border-box}body{margin:0;background:#090f1f;color:#eef4ff;font:16px system-ui,sans-serif}header{padding:16px 20px;background:#121d35}a{color:#77c9ff}main{max-width:850px;margin:24px auto;padding:0 15px}h1{margin:8px 0}p{color:#b8c8e0}canvas{display:block;max-width:100%;width:100%;height:auto;background:#15253b;border:1px solid #385476;border-radius:14px;touch-action:none}button{cursor:pointer;background:#234775;border:1px solid #5581ac;color:white;border-radius:9px;padding:11px 16px;margin:5px;font:inherit}button:focus-visible{outline:3px solid #f8d56a}#status{padding:12px;background:#172c48;border-radius:10px;margin:12px 0;min-height:45px}.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.hint{font-size:14px}.board{display:grid;gap:6px;justify-content:center;margin:18px auto}.cell{width:clamp(40px,10vw,65px);height:clamp(40px,10vw,65px);display:grid;place-items:center;background:#294461;border:2px solid #5d83a8;border-radius:9px;font-size:27px;cursor:pointer;user-select:none}.cell.sel{outline:3px solid #ffcc55}.tube{display:flex;flex-direction:column-reverse;justify-content:flex-start;width:65px;height:190px;border:3px solid #8fb5d7;border-top:0;border-radius:0 0 16px 16px;overflow:hidden;cursor:pointer;background:#1b3049}.liquid{height:25%;border-top:2px solid #ffffff55}.tubes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0}.tube.sel{outline:3px solid #fbd05b;outline-offset:4px}