:root{color-scheme:light;--ink:#293f35;--paper:#fff9ec;--sub:#546650}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#e8e7d7;color:var(--ink);font-family:ui-sans-serif,system-ui,sans-serif}canvas{display:block;width:100%;height:100dvh;touch-action:none}button{font:inherit;cursor:pointer;color:var(--ink);border:0;background:transparent}button:focus-visible{outline:3px solid #a65b35;outline-offset:2px}#heading{position:absolute;top:27px;left:32px;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--sub);font-weight:700}h1{font-family:Georgia,serif;font-size:38px;font-weight:400;margin:4px 0}h1 span{font:18px Georgia;color:#88502f;padding-left:12px}#stats{position:absolute;right:28px;top:26px;display:flex;gap:20px;background:#fff9ecef;padding:13px 20px;border-radius:18px;box-shadow:0 6px 25px #29482e0b;font-size:15px}#stats small{display:block;font-size:9px;letter-spacing:1px;color:var(--sub);margin-bottom:4px}#clock{position:absolute;right:30px;top:100px;font-size:11px;color:#425744;text-align:right}#controls{position:absolute;right:24px;top:129px;display:flex;background:#fff9eced;border-radius:12px;padding:4px}#controls button{padding:8px 10px;font-size:12px;border-radius:8px}button:hover{background:#dce6ce}#inspector{position:absolute;left:30px;bottom:145px;background:#fff9eced;border:1px solid #fff9ec;padding:17px 20px;border-radius:16px;width:240px;box-shadow:0 10px 40px #293d2510}#inspector strong{display:block;font:22px Georgia,serif;margin-top:6px}#inspector p{font-size:12px;line-height:1.6;margin:7px 0 0;color:#4b5d49}#goal{position:absolute;left:32px;top:110px;font-size:11px;max-width:230px;color:#4b5d49}#dock{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#fff9ec;box-shadow:0 12px 38px #18382525;border:1px solid white;border-radius:20px;padding:8px;display:flex;gap:3px;max-width:96vw;overflow-x:auto}#dock button{border-radius:13px;padding:8px 13px;min-width:65px;font-size:11px;white-space:nowrap}#dock button.active{background:#294f43;color:#fff9e7}#dock svg{display:block;width:34px;height:34px;margin:0 auto 5px}#dock small{font-size:9px;opacity:.85;display:block;margin-top:3px}#note{position:absolute;bottom:125px;left:50%;transform:translateX(-50%);max-width:90vw;width:max-content;text-align:center;background:#fff9eced;padding:7px 13px;border-radius:12px;font-size:11px;pointer-events:none} @media(max-width:700px){#heading{top:16px;left:16px}h1{font-size:29px}.eyebrow{font-size:8px;letter-spacing:1.4px}#stats{right:12px;top:17px;padding:10px 12px;gap:12px;font-size:13px}#stats small{font-size:8px}#clock{right:15px;top:81px;font-size:10px}#controls{right:10px;top:101px}#controls button{padding:7px 9px;font-size:11px}#goal{top:90px;left:16px;max-width:150px;font-size:10px}#inspector{left:12px;bottom:151px;width:205px;padding:11px 14px}#inspector strong{font-size:18px}#inspector p{font-size:11px;margin-top:4px;line-height:1.4}#dock{bottom:13px;max-width:98vw;padding:5px;gap:0}#dock button{min-width:53px;padding:6px 7px;font-size:10px}#dock svg{width:28px;height:28px}#note{bottom:112px;font-size:10px} }