*{box-sizing:border-box}body{margin:0;background:#10243a;color:#fff;font-family:system-ui,sans-serif}main{max-width:680px;margin:auto;padding:12px}h1{font-size:18px;margin:0 0 6px}p{font-size:13px;margin:6px 0}.hud{display:flex;justify-content:space-between;font-weight:700;margin:8px 0}canvas{display:block;width:100%;height:180px;background:#163d58;border-radius:8px;touch-action:none}canvas:focus-visible,button:focus-visible{outline:3px solid #f6ce55;outline-offset:2px}.controls{display:flex;gap:12px;margin:10px 0}button{font:inherit;color:#10243a;background:#f6ce55;border:0;border-radius:8px;min-height:44px;padding:8px 16px;touch-action:none}#start{flex:1}#result{min-height:20px;font-weight:700}