html,body,#root{background:#111;width:100%;height:100%;margin:0;font-family:system-ui,sans-serif;overflow:hidden}.hud{color:#eee;pointer-events:none;-webkit-user-select:none;user-select:none;background:#00000073;border-radius:8px;padding:10px 14px;font-size:14px;line-height:1.5;position:fixed;bottom:16px;left:16px}.hud kbd{background:#333;border:1px solid #555;border-radius:4px;padding:0 6px;font-family:inherit}.hud .hits{margin-bottom:4px;font-size:20px;font-weight:700}.flash{pointer-events:none;opacity:0;animation:.45s ease-out flash;position:fixed;inset:0}.flash-hit{background:radial-gradient(#c8000026,#c8000099)}.flash-blocked{background:radial-gradient(#0000 50%,#ffffff59)}@keyframes flash{0%{opacity:1}to{opacity:0}}.voice{color:#eee;flex-direction:column;align-items:center;gap:6px;max-width:calc(100vw - 32px);font-size:14px;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.voice button{font:inherit;color:#fff;cursor:pointer;background:#0000008c;border:1px solid #666;border-radius:999px;padding:8px 18px;font-size:15px;font-weight:600}.voice button.on{background:#2e7d32d9;border-color:#81c784}.voice .heard,.voice .error{background:#00000073;border-radius:6px;padding:4px 10px}.voice .error{color:#ff8a80}.logo{pointer-events:none;-webkit-user-select:none;user-select:none;z-index:10;border-radius:50%;width:96px;height:96px;position:fixed;top:16px;right:16px;box-shadow:0 2px 10px #00000080}.touch-controls{display:none}@media (hover:none) and (pointer:coarse){.touch-controls{display:block}.hud .keys{display:none}.hud{white-space:nowrap;padding:4px 12px;top:120px;bottom:auto;left:50%;transform:translate(-50%)}.hud .hits{margin-bottom:0;font-size:16px}}.pad{bottom:calc(16px + env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;z-index:5;grid-template-columns:76px 76px;gap:10px;display:grid;position:fixed}.pad-left{left:calc(16px + env(safe-area-inset-left));grid-template-areas:"extra extra""hook straight"}.pad-right{right:calc(16px + env(safe-area-inset-right));grid-template-areas:"extra extra""straight hook"}.pad button{font:inherit;color:#fff;touch-action:none;-webkit-tap-highlight-color:transparent;background:#00000080;border:2px solid #ffffff59;transition:transform 60ms,background 60ms}.pad button.hook,.pad button.straight{background:#c6282899;border-color:#ff8a80cc;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:76px;height:76px;line-height:1.1;display:flex}.pad button.hook{grid-area:hook}.pad button.straight{grid-area:straight}.pad button b{font-size:24px}.pad button span{font-size:12px;font-weight:600}.pad button.step,.pad button.block{border-radius:22px;grid-area:extra;height:44px;font-size:15px;font-weight:700}.pad button.block{background:#1565c099;border-color:#90caf9cc}.pad button.pressed{background:#ffffff59;transform:scale(.92)}@media (width<=500px){.logo{width:60px;height:60px}.voice button{white-space:nowrap;padding:6px 12px;font-size:13px}.hud{top:72px}}