*{box-sizing:border-box}body{margin:0;background:#0b222b;color:#f5f9ef;font:15px system-ui,sans-serif}main{max-width:440px;margin:auto;padding:8px 12px}header,.hud,.tools{display:flex;align-items:center;justify-content:space-between;gap:8px}header{height:34px}header a{color:#b4eee1;text-decoration:none;display:flex;align-items:center;min-height:32px}header span{font-size:10px;letter-spacing:.1em;color:#ffd884}.hud{height:33px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.field{height:clamp(235px,51dvh,420px);position:relative;border:2px solid #538c83;border-radius:16px;overflow:hidden}canvas{width:100%;height:100%;display:block}#overlay{position:absolute;inset:0;background:#102b32ed;display:flex;flex-direction:column;justify-content:center;padding:18px;text-align:center;overflow:auto}#overlay[hidden]{display:none}h1{font-size:27px;margin:0 0 8px}#overlay p{font-size:13px;line-height:1.35;margin:5px 0}button{border:0;border-radius:10px;min-height:44px;padding:9px 12px;font:700 14px system-ui;color:#102b32;background:#d4f6db;cursor:pointer}#start{margin:10px 0;background:#ffd884}#notice{height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#ffdd8a;font-weight:700}#pad{height:94px;border:2px solid #719b9e;background:#173d46;border-radius:30px;touch-action:none;position:relative;user-select:none;display:flex;align-items:center;justify-content:center}#pad span{position:absolute;top:9px;font-size:10px;letter-spacing:.07em;color:#bbe3df}#thumb{height:38px;width:60px;border:2px solid #d3ece3;background:#619e98aa;border-radius:20px;margin-top:12px;pointer-events:none}.tools{margin-top:8px}.tools button{flex:1;background:#274954;color:white}.fine{font-size:10px;color:#a7c8ca;line-height:1.4;margin:6px 0}button:focus-visible,a:focus-visible{outline:3px solid #ffce59;outline-offset:2px}@media(max-height:670px){#overlay{padding:11px}#overlay p{font-size:12px}h1{font-size:23px}#pad{height:82px}.fine{font-size:9px}.field{height:48dvh}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

dialog{max-width:310px;background:#153b43;color:#fff;border:2px solid #91b8ad;border-radius:16px;padding:20px}dialog::backdrop{background:#001a23b0}dialog button{margin:5px 0}