:root{--bg: #05050d;--panel: #11121d;--ink: #e8ecff;--accent: #4fd0e7;--red: #e23b4d}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,sans-serif}#app{max-width:660px;margin:0 auto;padding:14px 12px 40px;text-align:center}h1{font-family:monospace;letter-spacing:4px;font-size:26px;margin:6px 0 12px;color:var(--accent);text-shadow:0 0 10px rgba(79,208,231,.4)}.hud{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;font-family:monospace;font-size:14px;margin-bottom:10px}.hud b{color:var(--accent)}canvas{display:block;margin:0 auto;background:#07070f;border:2px solid #23263a;border-radius:6px;image-rendering:pixelated;max-width:100%;touch-action:none}.controls{font-size:12px;color:#9aa3c7;margin:12px 0;line-height:1.6}.row{display:flex;justify-content:center;align-items:center;gap:16px;margin:6px 0 14px;font-family:monospace;font-size:13px}select{background:var(--panel);color:var(--ink);border:1px solid #2c2f44;border-radius:4px;padding:3px 6px}.btn{background:var(--accent);color:#04222a;border:none;border-radius:5px;padding:7px 16px;font-family:monospace;font-weight:700;letter-spacing:1px;cursor:pointer}.btn:hover{filter:brightness(1.1)}.pads{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}.pad{background:var(--panel);color:var(--ink);border:1px solid #2c2f44;border-radius:6px;min-width:52px;padding:12px 10px;font-family:monospace;font-size:15px;cursor:pointer;user-select:none;touch-action:none}.pad:active{background:var(--accent);color:#04222a}