:root{color-scheme:light;--ink:#34574f;--paper:#eee9d8;--accent:#a56a6a}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:#e3e2d4;color:var(--ink);font-family:Mali,Georgia,serif}
main{max-width:1100px;margin:auto;padding:18px 24px}header,footer{display:flex;align-items:center;gap:14px;font-size:13px}header{margin-bottom:12px}header span{flex:1}a{color:inherit;text-underline-offset:4px}button{font:inherit;color:inherit;cursor:pointer;background:#eeeada;border:1px solid #52706550;border-radius:8px;padding:8px 14px}button:hover{background:#faf6e8}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.water{position:relative;border-radius:14px 25px 19px 9px;overflow:hidden;box-shadow:0 5px 24px #34574f15;background:#b7c7a6}canvas{display:block;width:100%;height:auto;touch-action:none}
.hud{position:absolute;top:0;left:0;right:0;padding:20px 24px;display:flex;align-items:flex-start;gap:20px;pointer-events:none}.hud p{font-size:11px;margin:0 0 3px;letter-spacing:.12em}.hud h1{font-size:22px;margin:0;font-weight:600}#goals{display:flex;flex-wrap:wrap;gap:10px;margin:auto 78px auto auto}.goal{font-size:13px;display:flex;align-items:center;gap:7px;background:#eeeada8a;border-radius:15px;padding:5px 10px}.goal svg{width:36px;height:18px}.goal.done{opacity:.55}#clock{position:absolute;right:20px;top:12px;width:64px;height:64px}
#overlay{position:absolute;inset:0;display:grid;place-items:center;background:#4b6a5b30;padding:18px;overflow:auto}article{width:min(420px,100%);background:var(--paper);border-radius:9px 20px 12px 17px;padding:24px 28px;box-shadow:4px 6px 0 #34574f15;max-height:100%;overflow:auto}article h2{font-size:24px;font-weight:600;margin:0 0 12px}article p{font-size:14px;line-height:1.6}.diagram{width:100%;height:115px}article .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.primary{background:var(--ink);color:var(--paper)}.primary:hover{background:#466e63}.map{display:grid;gap:8px}.map button{text-align:left}.map small{display:block;opacity:.65}.card-number{font-size:11px;letter-spacing:.12em}
#status{position:absolute;bottom:12px;left:18px;right:18px;text-align:center;pointer-events:none;font-size:13px;min-height:20px;margin:0;color:#294e46;text-shadow:0 1px 4px #edf0d7}footer{justify-content:space-between;margin-top:12px;font-size:12px}
@media(max-width:650px){main{padding:10px}.hud{padding:16px 14px;display:block}.hud h1{font-size:18px;padding-right:60px}#goals{margin:8px 48px 0 0;gap:5px}.goal{font-size:11px;padding:4px 7px}.goal svg{width:24px}#clock{right:10px;top:7px}header{font-size:11px;gap:8px}button{padding:7px 10px}article{padding:20px}article p{font-size:13px}#status{font-size:12px}footer{font-size:10px;gap:7px}}
/* The fitted field contains every control and menu. */
html,body{width:100%;height:100%;overflow:hidden}
body{display:grid;place-items:center;height:100dvh}
main{padding:0;margin:0;max-width:none}
.water{border-radius:0;box-shadow:none;flex:none}
canvas{width:100%;height:100%}
header{position:absolute;left:16px;top:12px;right:80px;margin:0;z-index:1;font-size:11px;gap:8px;pointer-events:none}
header a{pointer-events:auto}header span{flex:none;opacity:.7}
.hud{top:30px;padding:14px 16px;gap:12px}
.hud h1{font-size:20px}#goals{margin:4px 64px 0 auto;gap:6px}
#clock{top:0;right:12px}
footer{position:absolute;left:12px;right:12px;bottom:12px;margin:0;gap:8px;z-index:2;justify-content:flex-start}
footer #pause{margin-left:auto}footer button{font-size:12px}
#status{bottom:65px}#overlay{z-index:3}
.water.portrait .hud,.water.compact .hud{display:block}
.water.portrait #goals,.water.compact #goals{margin:8px 50px 0 0}
.water.compact .goal{font-size:11px;padding:4px 7px;gap:4px}
.water.compact .goal svg{width:24px}
.water.compact .hud h1{font-size:18px;padding-right:50px}
.water.compact article{padding:18px}.water.compact article p{font-size:13px}
@media(max-height:450px){header{top:6px}.hud{top:22px;padding-top:6px}footer{bottom:6px}footer button{font-size:11px;padding:5px 10px}article{padding:16px}article h2{font-size:20px}.diagram{height:90px}}