:root{--bg: #0d0d1a;--surface: #1a1a35;--surface-2: #22224a;--border: #2a2a6a;--border-hover: #4444aa;--text: #e8e8ff;--text-muted: #7777cc;--accent: #00e676;--accent-red: #ff4444;--key-never-bg: #1e1e4a;--key-never-shadow: #0f0f2a;--key-never-text: #5555aa;--key-pressed-bg: #1e1e4a;--key-pressed-shadow: #0f0f2a;--key-pressed-text: #ffffff;--key-active-bg: #ff8c00;--key-active-shadow: #cc6600;--key-active-text: #ffffff;--key-active-border: #ffaa33;--key-active-glow: 0 0 16px #ff8c00, 0 0 32px rgba(255,140,0,.4);--btn-pressed-bg: #2a1a00;--btn-pressed-border: #ff8c00;--btn-pressed-text: #ffe0b2;--canvas-bg: #111122;--btn-hover-bg: #2a2a55;--click-ring-color: rgba(255,200,50,.9);--radius: 6px;--key-color-1: #e53935;--key-color-shadow-1: #b71c1c;--key-color-2: #f4511e;--key-color-shadow-2: #bf360c;--key-color-3: #f9a825;--key-color-shadow-3: #f57f17;--key-color-4: #43a047;--key-color-shadow-4: #2e7d32;--key-color-5: #00acc1;--key-color-shadow-5: #00838f;--key-color-6: #1e88e5;--key-color-shadow-6: #1565c0;--key-color-7: #8e24aa;--key-color-shadow-7: #6a1b9a;--key-color-8: #d81b60;--key-color-shadow-8: #880e4f}html[data-theme=light]{--bg: #fef9f0;--surface: #ffffff;--surface-2: #f5f0e8;--border: #ddd5c8;--border-hover: #b0a898;--text: #2a2015;--text-muted: #7a6a55;--accent: #059669;--accent-red: #dc2626;--key-never-bg: #ede8f8;--key-never-shadow: #cdc8e8;--key-never-text: #7a70aa;--key-pressed-bg: #ede8f8;--key-pressed-shadow: #cdc8e8;--key-pressed-text: #2a2015;--key-active-bg: #ff6d00;--key-active-shadow: #cc5500;--key-active-text: #ffffff;--key-active-border: #ff9933;--key-active-glow: 0 0 12px #ff6d00, 0 0 24px rgba(255,109,0,.35);--btn-pressed-bg: #fff0e0;--btn-pressed-border: #ff6d00;--btn-pressed-text: #7a3000;--canvas-bg: #f0ece0;--btn-hover-bg: #f0ece0;--click-ring-color: rgba(200,100,0,.6);--key-color-1: #ef5350;--key-color-shadow-1: #c62828;--key-color-2: #ff7043;--key-color-shadow-2: #d84315;--key-color-3: #ffca28;--key-color-shadow-3: #f9a825;--key-color-4: #66bb6a;--key-color-shadow-4: #388e3c;--key-color-5: #26c6da;--key-color-shadow-5: #0097a7;--key-color-6: #42a5f5;--key-color-shadow-6: #1976d2;--key-color-7: #ab47bc;--key-color-shadow-7: #7b1fa2;--key-color-8: #ec407a;--key-color-shadow-8: #c2185b}@media(prefers-color-scheme:light){html:not([data-theme]){--bg: #fef9f0;--surface: #ffffff;--surface-2: #f5f0e8;--border: #ddd5c8;--border-hover: #b0a898;--text: #2a2015;--text-muted: #7a6a55;--accent: #059669;--accent-red: #dc2626;--key-never-bg: #ede8f8;--key-never-shadow: #cdc8e8;--key-never-text: #7a70aa;--key-pressed-bg: #ede8f8;--key-pressed-shadow: #cdc8e8;--key-pressed-text: #2a2015;--key-active-bg: #ff6d00;--key-active-shadow: #cc5500;--key-active-text: #ffffff;--key-active-border: #ff9933;--key-active-glow: 0 0 12px #ff6d00, 0 0 24px rgba(255,109,0,.35);--btn-pressed-bg: #fff0e0;--btn-pressed-border: #ff6d00;--btn-pressed-text: #7a3000;--canvas-bg: #f0ece0;--btn-hover-bg: #f0ece0;--click-ring-color: rgba(200,100,0,.6);--key-color-1: #ef5350;--key-color-shadow-1: #c62828;--key-color-2: #ff7043;--key-color-shadow-2: #d84315;--key-color-3: #ffca28;--key-color-shadow-3: #f9a825;--key-color-4: #66bb6a;--key-color-shadow-4: #388e3c;--key-color-5: #26c6da;--key-color-shadow-5: #0097a7;--key-color-6: #42a5f5;--key-color-shadow-6: #1976d2;--key-color-7: #ab47bc;--key-color-shadow-7: #7b1fa2;--key-color-8: #ec407a;--key-color-shadow-8: #c2185b}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}*,*:before,*:after{cursor:none!important}*{scrollbar-width:thin;scrollbar-color:var(--border) var(--surface)}html,body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;min-height:100vh}#app{max-width:1400px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:16px;align-items:center;min-height:100vh}.main-row{display:flex;gap:16px;align-items:center;width:100%;flex:.5}.section-keyboard{flex:1;min-width:0}.section-mouse-card{flex-shrink:0}.app-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.app-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:.1em}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}::-webkit-scrollbar-corner{background:var(--surface)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.card-title{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;text-align:center}.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;transition:all .15s}.btn:hover{border-color:var(--border-hover);background:var(--btn-hover-bg)}.theme-bar{display:flex;align-items:center;gap:4px}.theme-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;font-size:12px;font-family:inherit;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);transition:all .15s}.theme-btn:hover{border-color:var(--border-hover);color:var(--text);background:var(--btn-hover-bg)}.theme-btn--active{background:var(--key-active-bg);border-color:var(--key-active-border);color:var(--key-active-text)}.fullscreen-btn{margin-left:8px}#custom-cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;will-change:transform}.click-ring{position:fixed;width:10px;height:10px;border-radius:50%;border:2px solid var(--click-ring-color);pointer-events:none;z-index:9998;margin-left:-5px;margin-top:-5px;animation:click-ring-expand 1s ease-out forwards}@keyframes click-ring-expand{0%{transform:scale(1);opacity:.9}to{transform:scale(8);opacity:0}}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9000}.tutorial-card{background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:40px 48px;max-width:480px;width:90%;text-align:center}.tutorial-emoji{font-size:64px;margin-bottom:16px}.tutorial-title{font-size:28px;font-weight:800;color:var(--text);margin-bottom:12px}.tutorial-body{font-size:18px;color:var(--text-muted);line-height:1.7;margin-bottom:32px}.tutorial-highlight{color:var(--accent);font-weight:700}.tutorial-nav{display:flex;gap:12px;justify-content:center}.tutorial-btn{padding:12px 28px;font-size:18px;font-weight:700;border-radius:10px;border:2px solid var(--border);background:var(--surface-2);color:var(--text);transition:all .15s;font-family:inherit}.tutorial-btn:hover{border-color:var(--border-hover);background:var(--btn-hover-bg)}.tutorial-btn--primary{background:var(--accent);color:#000;border-color:var(--accent)}.tutorial-btn--primary:hover{opacity:.85}.tutorial-dots{display:flex;gap:8px;justify-content:center;margin-bottom:24px}.tutorial-dot{width:10px;height:10px;border-radius:50%;background:var(--border)}.tutorial-dot--active{background:var(--accent)}.kb-page{display:flex;gap:16px;align-items:flex-start}.kb-area{flex:1;min-width:0;overflow-x:auto}.kb-wrap{display:flex;gap:12px;align-items:flex-start;width:max-content;margin-top:24px}.kb-section{display:flex;flex-direction:column;gap:var(--key-gap, 4px)}.kb-numpad{padding-top:50px}.kb-row{display:flex;gap:4px}.kb-row--fn{margin-bottom:4px}.key{height:44px;border-radius:4px;display:flex;flex-direction:column;justify-content:space-between;padding:3px 5px;position:relative;cursor:default;-webkit-user-select:none;user-select:none;font-size:10px;transition:background .08s,box-shadow .12s,transform .08s;flex-shrink:0}.key--never{background:var(--key-never-bg);box-shadow:0 3px 0 var(--key-never-shadow);color:var(--key-never-text)}.key--pressed{background:var(--key-never-bg);box-shadow:0 3px 0 var(--key-never-shadow);color:#fff}.key--active{background:var(--key-active-bg);box-shadow:var(--key-active-glow);color:var(--key-active-text);transform:translateY(-3px) scale(1.08);animation:key-pop .12s ease-out forwards}@keyframes key-pop{0%{transform:translateY(-4px) scale(1.12)}50%{transform:translateY(-2px) scale(1.07)}to{transform:translateY(-3px) scale(1.08)}}.key--ghost{background:transparent;box-shadow:none;pointer-events:none}.key-primary{font-size:11px;font-weight:500;line-height:1;align-self:flex-end}.key-primary--solo{align-self:center;font-size:10px;text-align:center;width:100%}.key-secondary{font-size:9px;opacity:.7;line-height:1}.key-mod .key-primary--solo{font-size:9px}.numpad-grid{display:grid;grid-template-columns:repeat(4,44px);grid-template-rows:repeat(6,44px);gap:4px}.key-numpad{height:auto;width:auto;justify-content:center;align-items:center}.key--color-1.key--pressed{background:var(--key-color-1);box-shadow:0 3px 0 var(--key-color-shadow-1)}.key--color-2.key--pressed{background:var(--key-color-2);box-shadow:0 3px 0 var(--key-color-shadow-2)}.key--color-3.key--pressed{background:var(--key-color-3);box-shadow:0 3px 0 var(--key-color-shadow-3)}.key--color-4.key--pressed{background:var(--key-color-4);box-shadow:0 3px 0 var(--key-color-shadow-4)}.key--color-5.key--pressed{background:var(--key-color-5);box-shadow:0 3px 0 var(--key-color-shadow-5)}.key--color-6.key--pressed{background:var(--key-color-6);box-shadow:0 3px 0 var(--key-color-shadow-6)}.key--color-7.key--pressed{background:var(--key-color-7);box-shadow:0 3px 0 var(--key-color-shadow-7)}.key--color-8.key--pressed{background:var(--key-color-8);box-shadow:0 3px 0 var(--key-color-shadow-8)}.key--active.key--color-1,.key--active.key--color-2,.key--active.key--color-3,.key--active.key--color-4,.key--active.key--color-5,.key--active.key--color-6,.key--active.key--color-7,.key--active.key--color-8{background:var(--key-active-bg);box-shadow:var(--key-active-glow)}.kb-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:6px}.kb-legend{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-muted)}.legend-dot{width:12px;height:12px;border-radius:3px;display:inline-block}.legend-never{background:var(--key-never-bg);box-shadow:0 2px 0 var(--key-never-shadow)}.legend-pressed{background:var(--key-color-4);box-shadow:0 2px 0 var(--key-color-shadow-4)}.legend-active{background:var(--key-active-bg);box-shadow:var(--key-active-glow)}.kb-reset-btn{margin-left:8px}.kb-fullscreen-btn--active{background:var(--key-active-bg);border-color:var(--key-active-border);color:var(--key-active-text)}.hit-counter-block{display:flex;flex-direction:column;align-items:center;gap:2px}.hit-counter-label{font-size:12px;color:var(--text-muted)}.hit-counter-num{font-size:36px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;transform-origin:center;transition:transform .08s ease-out}.hit-counter-num.bump{transform:scale(1.25)}.bt-layout{display:flex;flex-direction:column;align-items:center;gap:16px}.bt-mouse-wrap{display:flex;gap:16px;align-items:center}.mouse-svg{display:block}.mouse-btn{transition:fill .1s}.mouse-btn.btn-active{fill:var(--key-active-bg);stroke:var(--key-active-border)}.scroll-indicator{display:flex;flex-direction:column;gap:6px}.scroll-arrow{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:14px;transition:all .1s}.scroll-arrow.scroll-active{background:var(--key-active-bg);color:var(--key-active-text);border-color:var(--key-active-border)}.bt-counts{display:flex;flex-direction:column;gap:10px;width:100%}.bt-btn-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;font-size:14px;transition:all .1s}.bt-btn-row.btn-active{background:var(--btn-pressed-bg);border-color:var(--btn-pressed-border);color:var(--btn-pressed-text)}.bt-label{color:var(--text-muted)}.bt-count{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}