:root{--bg: #05070a;--panel: #0d1219;--line: #1c2733;--fg: #e7f0f7;--muted: #7d8a99;--accent: #36e0c0;--accent2: #f5d067}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}#app{min-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 12px 28px}h1{margin:4px 0 0;font-size:28px;letter-spacing:8px;font-weight:800;text-transform:uppercase;color:var(--fg)}.sub{color:var(--muted);font-size:13px;margin:0;letter-spacing:1px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px}.toolbar label{color:var(--muted);font-size:13px}select,button{font:inherit;font-size:14px;color:var(--fg);background:#131c26;border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;transition:border-color .15s,background .15s}select:hover,button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#042019;border-color:var(--accent);font-weight:700}button.primary:hover{filter:brightness(1.08)}.stage{position:relative;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#020406;box-shadow:0 0 60px #36e0c014 inset}canvas{display:block;touch-action:none}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#03060ad1;text-align:center;padding:20px}.overlay.hidden{display:none}.overlay h2{margin:0;font-size:30px;letter-spacing:2px}.overlay p{margin:0;color:var(--muted);max-width:420px;line-height:1.5}.overlay .big{font-size:44px;color:var(--accent2);font-weight:800}.hint{color:var(--muted);font-size:12px;letter-spacing:.5px;text-align:center;max-width:640px;line-height:1.6}.hint kbd{background:#131c26;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:11px;color:var(--fg)}.online-row{display:flex;gap:8px;justify-content:center;margin:8px 0}.online-row input{width:110px;text-align:center;text-transform:uppercase;letter-spacing:2px;padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--fg);font:600 14px/1 Segoe UI,sans-serif}