*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff0dd;color:#283936;font:16px system-ui,sans-serif}canvas{display:block;width:100%;height:100%;touch-action:none}nav{position:fixed;bottom:max(15px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:6px}button{color:#344d49;background:#fff8ecd9;border:1px solid #b9b2a44d;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;padding:8px}button:hover{background:#fffdf8}button:focus-visible{outline:2px solid #007e80;outline-offset:3px}svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#speed svg path{fill:currentColor;stroke:none}button[aria-pressed=true]{background:#deece5}dialog{border:1px solid #cdc4b5;border-radius:18px;background:#fff8ed;color:#283936;padding:28px;max-width:570px;max-height:85dvh;width:calc(100% - 32px);overflow:auto}dialog::backdrop{background:#2f423d45}dialog h1{font-size:21px;margin:0 38px 15px 0}dialog p{font-size:14px;line-height:1.55;margin:0 0 15px}#close{float:right;margin:-10px -10px 8px 12px;font-size:24px}a{color:#16766b}#error{position:fixed;top:20%;left:15%;right:15%;padding:20px;background:#fff8ed;border-radius:12px}@media(max-width:600px){nav{gap:5px}button{width:34px;height:34px}dialog{padding:22px}}