*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary:#ffffff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#212529;--text-secondary:#6c757d;--text-accent:#0066cc;--border-color:#dee2e6;--shadow-light:0 2px 4px rgba(0,0,0,0.1);--shadow-medium:0 4px 8px rgba(0,0,0,0.15);--shadow-heavy:0 8px 16px rgba(0,0,0,0.2);--key-bg:#ffffff;--key-border:#d1d5db;--key-active:#3b82f6;--key-pressed:#1d4ed8;--gradient-primary:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary:linear-gradient(135deg, #f093fb 0%, #f5576c 100%)}[data-theme="dark"]{--bg-primary:#1a1a1a;--bg-secondary:#2d2d2d;--bg-tertiary:#404040;--text-primary:#ffffff;--text-secondary:#b3b3b3;--text-accent:#4da6ff;--border-color:#555555;--shadow-light:0 2px 4px rgba(0,0,0,0.3);--shadow-medium:0 4px 8px rgba(0,0,0,0.4);--shadow-heavy:0 8px 16px rgba(0,0,0,0.5);--key-bg:#2d2d2d;--key-border:#555555;--key-active:#4da6ff;--key-pressed:#0066cc;--gradient-primary:linear-gradient(135deg, #4a5568 0%, #2d3748 100%);--gradient-secondary:linear-gradient(135deg, #667eea 0%, #764ba2 100%)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);transition:all 0.3s ease}.container{max-width:1200px;margin:0 auto;padding:0 20px}.theme-toggle{position:fixed;top:20px;right:20px;z-index:1000;width:50px;height:50px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-medium);transition:all 0.3s ease}.theme-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-heavy)}.theme-icon{font-size:24px;transition:transform 0.3s ease}.scroll-buttons{position:fixed;right:2rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.5rem;z-index:1000}.scroll-btn{width:50px;height:50px;border:none;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgb(102 126 234 / .3);display:flex;align-items:center;justify-content:center;opacity:1;pointer-events:auto}.scroll-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgb(102 126 234 / .4);background:linear-gradient(135deg,#5a67d8 0%,#667eea 100%)}.scroll-btn:active{transform:scale(.95)}[data-theme="dark"] .scroll-btn{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);box-shadow:0 4px 12px rgb(74 85 104 / .3)}[data-theme="dark"] .scroll-btn:hover{background:linear-gradient(135deg,#2d3748 0%,#1a202c 100%);box-shadow:0 6px 20px rgb(74 85 104 / .4)}@media (max-width:768px){.scroll-buttons{right:1rem}.scroll-btn{width:45px;height:45px;font-size:1.1rem}}@media (max-width:480px){.scroll-buttons{right:.5rem}.scroll-btn{width:40px;height:40px;font-size:1rem}}.notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);color:var(--text-primary);padding:20px 30px;border-radius:10px;box-shadow:var(--shadow-heavy);z-index:2000;opacity:0;visibility:hidden;transition:all 0.3s ease;max-width:400px;text-align:center;border:1px solid var(--border-color)}.notification.show{opacity:1;visibility:visible}.header{background:var(--bg-primary);box-shadow:var(--shadow-light);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border-color)}.navbar{padding:1rem 0}.nav-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 20px}.logo{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:700;color:var(--text-primary);text-decoration:none}.logo-icon{font-size:2rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.nav-menu{display:flex;list-style:none;gap:2rem;align-items:center}.nav-item{position:relative}.nav-link{color:var(--text-primary);text-decoration:none;font-weight:500;transition:color 0.3s ease;padding:.5rem 0}.nav-link:hover{color:var(--text-accent)}.dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-medium);list-style:none;padding:.5rem 0;min-width:200px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.3s ease;z-index:1000}.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu li{padding:0}.dropdown-menu a{display:block;padding:.75rem 1rem;color:var(--text-primary);text-decoration:none;transition:background-color 0.3s ease}.dropdown-menu a:hover{background-color:var(--bg-secondary);color:var(--text-accent)}.nav-actions{display:flex;gap:1rem;align-items:center}.action-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);text-decoration:none;font-weight:600;font-size:1.1rem;transition:all 0.3s ease;cursor:pointer;position:relative;overflow:hidden}.action-btn:hover{background:var(--text-accent);color:#fff;transform:translateY(-3px);box-shadow:0 8px 25px rgb(0 0 0 / .15);border-color:var(--text-accent)}.action-btn .btn-icon{font-size:1.4rem;transition:transform 0.3s ease}.action-btn:hover .btn-icon{transform:scale(1.2)}.action-btn .btn-text{font-size:1rem;font-weight:600;letter-spacing:.5px}.favorite-btn{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);color:#fff;border-color:#f59e0b}.favorite-btn:hover{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-color:#d97706;color:#fff}.share-btn{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;border-color:#2563eb}.share-btn:hover{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border-color:#1d4ed8;color:#fff}[data-theme="dark"] .favorite-btn{background:linear-gradient(135deg,#d97706 0%,#b45309 100%);border-color:#b45309}[data-theme="dark"] .favorite-btn:hover{background:linear-gradient(135deg,#b45309 0%,#92400e 100%);border-color:#92400e}[data-theme="dark"] .share-btn{background:linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%);border-color:#1e40af}[data-theme="dark"] .share-btn:hover{background:linear-gradient(135deg,#1e40af 0%,#1e3a8a 100%);border-color:#1e3a8a}.action-tooltip{position:absolute;background:var(--bg-secondary);color:var(--text-primary);padding:.75rem 1rem;border-radius:8px;box-shadow:0 4px 12px rgb(0 0 0 / .15);font-size:.9rem;white-space:nowrap;z-index:1000;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-10px);transition:all 0.3s ease;border:1px solid var(--border-color);max-width:300px;text-align:center;pointer-events:none}.action-tooltip.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.action-tooltip::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid #fff0;border-right:6px solid #fff0;border-bottom:6px solid var(--bg-secondary)}[data-theme="dark"] .action-tooltip::before{border-bottom-color:var(--bg-secondary)}@media (max-width:768px){.action-tooltip{font-size:.8rem;max-width:250px;padding:.6rem .8rem}}.action-btn .btn-icon{font-size:1.2rem}.action-btn .btn-text{display:none}.action-tooltip{font-size:.8rem;max-width:250px}}.hamburger{display:none;flex-direction:column;cursor:pointer;gap:4px}.hamburger span{width:25px;height:3px;background:var(--text-primary);transition:all 0.3s ease}.main-content{min-height:calc(100vh - 200px)}.hero-section{background:var(--gradient-primary);color:#fff;padding:2rem 0;text-align:center;min-height:auto;display:flex;align-items:center;justify-content:center}.hero-section .container{padding:1.5rem 1rem;max-width:1200px;margin:0 auto;width:100%}.hero-title{font-size:clamp(2rem, 5vw, 3rem);font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 4px rgb(0 0 0 / .3);line-height:1.2;word-wrap:break-word}.hero-subtitle{font-size:clamp(1rem, 2.5vw, 1.2rem);opacity:.9;max-width:600px;margin:0 auto;line-height:1.5;word-wrap:break-word;padding:0 1rem}.keyboard-section{padding:3rem 0;background:var(--bg-secondary)}.keyboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.keyboard-tabs{display:flex;gap:.5rem}.tab-btn{padding:.75rem 1.5rem;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);border-radius:8px;cursor:pointer;font-weight:500;transition:all 0.3s ease}.tab-btn.active{background:var(--text-accent);color:#fff;border-color:var(--text-accent)}.tab-btn:hover:not(.active){background:var(--bg-tertiary)}.sound-control{display:flex;align-items:center;gap:10px}.reset-btn{background:var(--gradient-primary);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease;box-shadow:var(--shadow-light)}.reset-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-medium)}.reset-btn:active{transform:translateY(0)}.sound-label{font-weight:500;color:var(--text-primary)}.sound-select{padding:.5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-size:.9rem}.keyboard-container{display:flex;gap:2rem;align-items:flex-start;justify-content:center}.stats-panel{width:350px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow-medium);order:1}.stats-panel.show{display:block}.keyboard-wrapper{flex:1;order:2;max-width:1200px}.keyboard-content{display:none}.keyboard-content.active{display:block}.stats-header h3{color:var(--text-primary);margin-bottom:1rem;text-align:center;font-size:1.2rem}.stats-content{display:flex;flex-direction:column;gap:1rem}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color)}.stat-label{font-weight:600;color:var(--text-secondary);font-size:.9rem}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text-accent)}.chart-container{margin-top:1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;text-align:center;border:1px solid var(--border-color)}#statsChart{max-width:100%;height:auto;border-radius:4px}@media (max-width:1024px){.keyboard-container{flex-direction:column;align-items:center}.stats-panel{order:2;width:100%;max-width:600px;margin-top:1rem}.keyboard-wrapper{order:1;width:100%}}@media (max-width:768px){.keyboard-container{gap:1rem}.stats-panel{padding:1rem}.stat-item{padding:.5rem}.stat-value{font-size:1.2rem}}@media (max-width:480px){.stats-panel{width:100%;margin:0}.chart-container{padding:.5rem}}.tools-section{padding:4rem 0;background:var(--bg-primary)}.section-title{text-align:center;font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:3rem}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.tool-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:2rem;text-align:center;transition:all 0.3s ease;cursor:pointer}.tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-heavy);border-color:var(--text-accent)}.tool-icon{font-size:3rem;margin-bottom:1rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.tool-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.tool-description{color:var(--text-secondary);line-height:1.6}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:3rem 0 1rem}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h4{color:var(--text-primary);font-size:1.2rem;margin-bottom:1rem}.footer-links{list-style:none}.footer-links li{margin-bottom:.5rem}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:color 0.3s ease}.footer-links a:hover{color:var(--text-accent)}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid var(--border-color);color:var(--text-secondary)}.input-info-panel{background:var(--card-bg);border-top:2px solid var(--primary-color);padding:20px 0;margin-top:20px;box-shadow:0 -2px 10px rgb(0 0 0 / .1)}.info-display{display:flex;justify-content:space-between;align-items:center;background:var(--bg-color);border:2px solid var(--border-color);border-radius:12px;padding:20px;box-shadow:inset 0 2px 5px rgb(0 0 0 / .1)}.mouse-info,.keyboard-info{flex:1;padding:0 20px}.mouse-info h4,.keyboard-info h4{color:var(--primary-color);margin:0 0 15px 0;font-size:16px;font-weight:600;text-align:center}.mouse-position,.mouse-buttons,.current-keys,.last-key{display:flex;justify-content:space-between;align-items:center;margin:10px 0;padding:8px 12px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:6px;font-family:'Courier New',monospace}.mouse-position span:first-child,.mouse-buttons span:first-child,.current-keys span:first-child,.last-key span:first-child{color:var(--text-secondary);font-weight:500}.mouse-position span:last-child,.mouse-buttons span:last-child,.current-keys span:last-child,.last-key span:last-child{color:var(--primary-color);font-weight:600;background:var(--primary-color-light);padding:4px 8px;border-radius:4px;min-width:120px;text-align:center}.mouse-stats-area{display:flex;justify-content:center;margin-bottom:1.5rem}.mouse-button-stats{display:flex;gap:1rem;background:var(--bg-secondary);padding:.5rem;border-radius:8px;border:1px solid var(--border-color);box-shadow:var(--shadow-light)}.mouse-btn-stat{position:relative;display:flex;align-items:center;justify-content:center;min-width:80px;height:42px;background:var(--key-bg);border:1px solid var(--key-border);border-radius:6px;cursor:pointer;transition:all 0.3s ease;font-weight:500;color:var(--text-primary)}.mouse-btn-stat:hover{background:var(--bg-tertiary);transform:translateY(-1px);box-shadow:var(--shadow-medium)}.mouse-btn-stat.active{background:var(--key-active)!important;color:white!important;border-color:var(--key-active)!important;transform:translateY(-2px);box-shadow:var(--shadow-medium)}.mouse-btn-label{font-size:14px;user-select:none}.mouse-btn-count{position:absolute;top:2px;right:4px;background:#f44;color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 3px rgb(0 0 0 / .3);z-index:10;pointer-events:none}.mouse-btn-count:empty,.mouse-btn-count[data-count="0"]{display:none}[data-theme="dark"] .mouse-btn-count{background:#f66;box-shadow:0 1px 3px rgb(0 0 0 / .5)}.nav-icon{display:inline-block;margin-right:6px;font-size:16px;vertical-align:middle}.menu-icon{display:inline-block;margin-right:8px;font-size:14px;vertical-align:middle}.key{transition:all 0.3s ease}.key.press-count-1{background:#22c55e!important;color:#fff;border-color:#16a34a}.key.press-count-2,.key.press-count-3,.key.press-count-4{background:#16a34a!important;color:#fff;border-color:#15803d}.key.press-count-5,.key.press-count-6,.key.press-count-7,.key.press-count-8{background:#a16207!important;color:#fff;border-color:#92400e}.key.press-count-9-plus{background:#7c3aed!important;color:#fff;border-color:#6d28d9}[data-theme="dark"] .key.press-count-1{background:#16a34a!important;border-color:#15803d}[data-theme="dark"] .key.press-count-2,[data-theme="dark"] .key.press-count-3,[data-theme="dark"] .key.press-count-4{background:#15803d!important;border-color:#166534}[data-theme="dark"] .key.press-count-5,[data-theme="dark"] .key.press-count-6,[data-theme="dark"] .key.press-count-7,[data-theme="dark"] .key.press-count-8{background:#92400e!important;border-color:#78350f}[data-theme="dark"] .key.press-count-9-plus{background:#6d28d9!important;border-color:#5b21b6}@media (max-width:768px){.nav-icon{margin-right:4px;font-size:14px}.menu-icon{margin-right:6px;font-size:12px}.nav-menu{display:none}.hamburger{display:flex}.nav-actions{gap:.5rem}.action-btn .btn-text{display:none}.hero-section{padding:1.5rem 0}.hero-section .container{padding:1rem .5rem}.hero-title{margin-bottom:.75rem;font-size:clamp(1.5rem, 6vw, 2.5rem)}.hero-subtitle{font-size:clamp(0.9rem, 3vw, 1.1rem);padding:0 .5rem}.keyboard-header{flex-direction:column;align-items:stretch}.keyboard-container{flex-direction:column}.stats-panel{width:100%}.key{min-width:30px;height:35px;font-size:.7rem}.key-wide{min-width:60px}.key-extra-wide{min-width:80px}.key-shift{min-width:90px}.key-space{min-width:200px}.tools-grid{grid-template-columns:1fr}.scroll-buttons{right:10px;bottom:10px}.theme-toggle{top:10px;right:10px;width:40px;height:40px}.theme-icon{font-size:20px}.scroll-btn{width:40px;height:40px;font-size:16px}.info-display{flex-direction:column;gap:20px}.mouse-info,.keyboard-info{padding:0;width:100%}.mouse-button-stats{gap:.5rem;padding:.3rem}.mouse-btn-stat{min-width:60px;height:36px}.mouse-btn-label{font-size:12px}.mouse-btn-count{font-size:9px;min-width:14px;height:14px}.performance-header{flex-direction:column;align-items:stretch}.performance-controls{justify-content:center}.performance-table{font-size:12px}.performance-table th,.performance-table td{padding:.5rem .25rem}.performance-stats{gap:1rem}.stat-item{min-width:80px}}@media (max-width:480px){.container{padding:0 10px}.hero-section{padding:1rem 0}.hero-section .container{padding:.75rem .25rem}.hero-title{margin-bottom:.5rem;font-size:clamp(1.25rem, 7vw, 2rem)}.hero-subtitle{font-size:clamp(0.8rem, 4vw, 1rem);padding:0 .25rem}.keyboard{padding:1rem}.key{min-width:25px;height:30px;font-size:.6rem}.key-wide{min-width:50px}.key-extra-wide{min-width:65px}.key-shift{min-width:75px}.key-space{min-width:150px}.performance-table-container{overflow-x:auto}.performance-table{min-width:600px}.control-btn{font-size:12px;padding:.4rem .8rem}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.tool-card:hover .tool-icon{animation:pulse 1s infinite}.keyboard-content{animation:fadeIn 0.5s ease}.notification.show{animation:fadeIn 0.3s ease}.keyboard.full-size{max-width:1200px;width:100%}.keyboard-main{display:flex;gap:1rem;justify-content:center;align-items:flex-start}.main-keyboard{display:flex;flex-direction:column;gap:.25rem}.edit-section{display:flex;flex-direction:column;gap:.5rem;margin-left:.5rem}.edit-keys-group{display:flex;gap:.25rem}.arrow-keys{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-top:.5rem}.arrow-row{display:flex;gap:.25rem}.numpad{display:flex;flex-direction:column;gap:.25rem;margin-left:.5rem}.numpad-row{display:flex;gap:.25rem;position:relative}.numpad-tall{height:85px;position:absolute;right:0}.numpad-row:nth-child(2) .numpad-tall{top:0;height:85px}.numpad-row:nth-child(4) .numpad-tall{top:0;height:85px}.numpad-wide{min-width:85px}@media (max-width:1024px){.keyboard-main{flex-direction:column;align-items:center}.edit-section,.numpad{margin-left:0;margin-top:1rem}}@media (max-width:768px){.keyboard.full-size{transform:scale(.8);transform-origin:center}.numpad,.edit-section{display:none}}@media (max-width:480px){.keyboard.full-size{transform:scale(.6)}}.key-fn{min-width:50px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-weight:700;border:1px solid #5a67d8;font-size:.75rem}.key-fn:hover{background:linear-gradient(135deg,#5a67d8 0%,#667eea 100%);transform:translateY(-1px);box-shadow:0 4px 8px rgb(90 103 216 / .3)}.key-fn.active,.key-fn.pressed{background:linear-gradient(135deg,#4c51bf 0%,#553c9a 100%);transform:translateY(1px);box-shadow:inset 0 2px 4px rgb(0 0 0 / .3)}[data-theme="dark"] .key-fn{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);border-color:#4a5568}[data-theme="dark"] .key-fn:hover{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 4px 8px rgb(102 126 234 / .3)}.keyboard{background:linear-gradient(145deg,#f8f9fa,#e9ecef);border-radius:16px;padding:20px;box-shadow:0 20px 40px rgb(0 0 0 / .1),0 10px 20px rgb(0 0 0 / .06),inset 0 1px 0 rgb(255 255 255 / .1),inset 0 -1px 0 rgb(0 0 0 / .1);border:2px solid;border-image:linear-gradient(145deg,rgb(255 255 255 / .8),var(--border-color),rgb(0 0 0 / .1)) 1;max-width:100%;overflow-x:auto}.function-row,.number-row,.letter-row,.control-row{display:flex;gap:.25rem;margin-bottom:.25rem;justify-content:center}.mac-keyboard .function-row{margin-left:-120px}.key-group{display:flex;gap:.25rem;margin-right:.5rem}.mac-keyboard .function-row{justify-content:flex-start;margin-left:0;padding-left:0}.key{min-width:40px;height:40px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--key-bg),#f0f0f0);border:1px solid var(--key-border);border-radius:8px;cursor:pointer;font-weight:500;font-size:14px;color:var(--text-primary);user-select:none;transition:all 0.15s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 8px rgb(0 0 0 / .1),0 2px 4px rgb(0 0 0 / .06),inset 0 1px 0 rgb(255 255 255 / .1),inset 0 -1px 0 rgb(0 0 0 / .1);background:linear-gradient(145deg,rgb(255 255 255 / .9) 0%,var(--key-bg) 50%,rgb(0 0 0 / .05) 100%);border:2px solid;border-image:linear-gradient(145deg,rgb(255 255 255 / .8),var(--key-border),rgb(0 0 0 / .2)) 1;text-shadow:0 1px 2px rgb(0 0 0 / .1);transform-origin:center center;transform-style:preserve-3d}.key-count{position:absolute;top:2px;right:2px;background:#fff0;color:#f44;font-size:10px;font-weight:700;padding:0;border-radius:0;min-width:auto;height:auto;display:flex;align-items:center;justify-content:center;box-shadow:none;z-index:10;line-height:1}[data-theme="dark"] .key-count{background:#fff0;color:#f66;box-shadow:none}.key.small .key-count{font-size:8px;padding:0;min-width:auto;height:auto}.key:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 16px rgb(0 0 0 / .15),0 4px 8px rgb(0 0 0 / .1),inset 0 1px 0 rgb(255 255 255 / .2),inset 0 -1px 0 rgb(0 0 0 / .1);background:linear-gradient(145deg,rgb(255 255 255 / .95) 0%,var(--key-bg) 50%,rgb(0 0 0 / .03) 100%)}.key.active,.key.pressed{animation:keyPressJump 0.3s cubic-bezier(.68,-.55,.265,1.55);transform:translateY(4px) scale(.95);box-shadow:0 2px 4px rgb(0 0 0 / .2),0 1px 2px rgb(0 0 0 / .15),inset 0 2px 4px rgb(0 0 0 / .1),inset 0 -1px 0 rgb(255 255 255 / .1);background:linear-gradient(145deg,rgb(0 0 0 / .05) 0%,var(--key-pressed) 50%,rgb(0 0 0 / .1) 100%);box-shadow:0 2px 4px rgb(0 0 0 / .2),0 0 20px rgb(59 130 246 / .3),0 0 40px rgb(59 130 246 / .1),inset 0 2px 4px rgb(0 0 0 / .1)}.key-wide{min-width:60px}.key-extra-wide{min-width:80px}.key-shift{min-width:100px}.key-space{min-width:200px}.key[data-count="1"]{background-color:#e3f2fd}.key[data-count="2"]{background-color:#bbdefb}.key[data-count="3"]{background-color:#90caf9}.key[data-count="4"]{background-color:#64b5f6}.key[data-count="5"]{background-color:#42a5f5}.key[data-count="6"]{background-color:#2196f3}.key[data-count="7"]{background-color:#1e88e5}.key[data-count="8"]{background-color:#1976d2}.key[data-count="9"]{background-color:#1565c0}.key[data-count="10"]{background-color:#0d47a1;color:#fff}@keyframes keyPressJump{0%{transform:translateY(0) scale(1) rotateX(0deg);box-shadow:0 4px 8px rgb(0 0 0 / .1),0 0 0 #fff0}25%{transform:translateY(-8px) scale(1.05) rotateX(-5deg);box-shadow:0 12px 24px rgb(0 0 0 / .2),0 0 30px rgb(59 130 246 / .4)}50%{transform:translateY(-12px) scale(1.08) rotateX(-8deg);box-shadow:0 16px 32px rgb(0 0 0 / .25),0 0 40px rgb(59 130 246 / .6)}75%{transform:translateY(-6px) scale(1.03) rotateX(-3deg);box-shadow:0 10px 20px rgb(0 0 0 / .15),0 0 25px rgb(59 130 246 / .3)}100%{transform:translateY(4px) scale(.95) rotateX(2deg);box-shadow:0 2px 4px rgb(0 0 0 / .2),0 0 20px rgb(59 130 246 / .2)}}.key.active::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgb(59 130 246 / .3) 0%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);animation:rippleEffect 0.6s ease-out;pointer-events:none;z-index:1}@keyframes rippleEffect{0%{width:0;height:0;opacity:1}100%{width:200%;height:200%;opacity:0}}@keyframes keyBounce{0%{transform:scale(1) translateY(0)}50%{transform:scale(1.1) translateY(-3px)}100%{transform:scale(1) translateY(0)}}.key.bounce{animation:keyBounce 0.3s ease}[data-theme="dark"] .key{background:linear-gradient(145deg,rgb(255 255 255 / .1) 0%,var(--key-bg) 50%,rgb(0 0 0 / .3) 100%);box-shadow:0 4px 8px rgb(0 0 0 / .3),0 2px 4px rgb(0 0 0 / .2),inset 0 1px 0 rgb(255 255 255 / .05),inset 0 -1px 0 rgb(0 0 0 / .3);text-shadow:0 1px 2px rgb(0 0 0 / .5)}[data-theme="dark"] .key:hover{background:linear-gradient(145deg,rgb(255 255 255 / .15) 0%,var(--key-bg) 50%,rgb(0 0 0 / .2) 100%);box-shadow:0 8px 16px rgb(0 0 0 / .4),0 4px 8px rgb(0 0 0 / .3),inset 0 1px 0 rgb(255 255 255 / .1),inset 0 -1px 0 rgb(0 0 0 / .3)}[data-theme="dark"] .key.active,[data-theme="dark"] .key.pressed{background:linear-gradient(145deg,rgb(0 0 0 / .2) 0%,var(--key-pressed) 50%,rgb(0 0 0 / .4) 100%);box-shadow:0 2px 4px rgb(0 0 0 / .4),0 0 20px rgb(77 166 255 / .4),0 0 40px rgb(77 166 255 / .2),inset 0 2px 4px rgb(0 0 0 / .3)}[data-theme="dark"] .keyboard{background:linear-gradient(145deg,#2d2d2d,#1a1a1a);box-shadow:0 20px 40px rgb(0 0 0 / .3),0 10px 20px rgb(0 0 0 / .2),inset 0 1px 0 rgb(255 255 255 / .05),inset 0 -1px 0 rgb(0 0 0 / .3)}.key[data-key="Space"]{background:linear-gradient(145deg,rgb(255 255 255 / .95) 0%,#f8f9fa 30%,var(--key-bg) 70%,rgb(0 0 0 / .05) 100%)}.key[data-key="Enter"]{background:linear-gradient(145deg,rgb(34 197 94 / .1) 0%,var(--key-bg) 50%,rgb(34 197 94 / .05) 100%)}.key[data-key="Backspace"]{background:linear-gradient(145deg,rgb(239 68 68 / .1) 0%,var(--key-bg) 50%,rgb(239 68 68 / .05) 100%)}.function-row .key{background:linear-gradient(145deg,rgb(99 102 241 / .1) 0%,var(--key-bg) 50%,rgb(99 102 241 / .05) 100%)}.number-row .key{background:linear-gradient(145deg,rgb(168 85 247 / .1) 0%,var(--key-bg) 50%,rgb(168 85 247 / .05) 100%)}.key-performance-panel{background:var(--bg-secondary);padding:2rem 0;border-top:1px solid var(--border-color)}.performance-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.performance-header h4{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin:0}.performance-controls{display:flex;gap:.5rem;flex-wrap:wrap}.control-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.3s ease}.control-btn:hover{background:var(--bg-tertiary);transform:translateY(-1px);box-shadow:var(--shadow-light)}.control-btn .btn-icon{font-size:16px}.performance-table-container{background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color);overflow:hidden;margin-bottom:1.5rem;box-shadow:var(--shadow-light)}.performance-table{width:100%;border-collapse:collapse;font-size:14px}.performance-table th{background:var(--bg-tertiary);color:var(--text-primary);padding:1rem .75rem;text-align:left;font-weight:600;border-bottom:2px solid var(--border-color)}.performance-table td{padding:.75rem;border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle}.performance-table tbody tr:hover{background:var(--bg-secondary)}.performance-table tbody tr:last-child td{border-bottom:none}.record-actions{display:flex;gap:.25rem}.action-btn{padding:.25rem .5rem;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:all 0.2s ease;display:flex;align-items:center;gap:.25rem}.copy-btn{background:#3b82f6;color:#fff}.copy-btn:hover{background:#2563eb}.delete-btn{background:#ef4444;color:#fff}.delete-btn:hover{background:#dc2626}.empty-state{display:none;text-align:center;padding:3rem 1rem;color:var(--text-secondary)}.empty-state.show{display:block}.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.empty-state p{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-primary)}.empty-state small{font-size:.9rem;opacity:.7}.performance-stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;padding:1rem;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color);box-shadow:var(--shadow-light)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-label{font-size:.9rem;color:var(--text-secondary);font-weight:500}.stat-value{font-size:1.2rem;color:var(--text-accent);font-weight:600}.delay-excellent{color:#22c55e;font-weight:600}.delay-good{color:#3b82f6;font-weight:600}.delay-average{color:#f59e0b;font-weight:600}.delay-poor{color:#ef4444;font-weight:600}.layout-tag{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:12px;font-weight:500;text-transform:uppercase}.layout-pc{background:#dbeafe;color:#1e40af}.layout-mac{background:#f3e8ff;color:#7c3aed}[data-theme="dark"] .layout-pc{background:#1e3a8a;color:#93c5fd}[data-theme="dark"] .layout-mac{background:#581c87;color:#c4b5fd}@media (min-width:1400px){.hero-section{padding:2.5rem 0}.hero-section .container{padding:2rem 1rem}}@media (max-width:768px){.keyboard{padding:1rem}.key{min-width:30px;height:35px;font-size:.7rem;box-shadow:0 2px 4px rgb(0 0 0 / .1),0 1px 2px rgb(0 0 0 / .06),inset 0 1px 0 rgb(255 255 255 / .1)}.key.active,.key.pressed{animation:keyPressJumpMobile 0.25s cubic-bezier(.68,-.55,.265,1.55)}.key-wide{min-width:45px}.key-extra-wide{min-width:60px}.key-shift{min-width:75px}.key-space{min-width:150px}.function-row,.number-row,.letter-row,.control-row{gap:.15rem}.key-group{gap:.15rem;margin-right:.3rem}}@keyframes keyPressJumpMobile{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.05)}100%{transform:translateY(2px) scale(.98)}}@media (max-width:480px){.key{min-width:25px;height:30px;font-size:.6rem}.key-wide{min-width:35px}.key-extra-wide{min-width:45px}.key-shift{min-width:55px}.key-space{min-width:100px}}.key-performance-panel .performance-table-container{background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color);overflow:hidden;margin-bottom:1.5rem;box-shadow:var(--shadow-light);position:relative}.key-performance-panel .performance-table-scroll{max-height:400px!important;overflow-y:auto!important;overflow-x:hidden!important;display:block}.key-performance-panel .performance-table-scroll.no-scroll{max-height:none!important;overflow-y:visible!important}.key-performance-panel .performance-table{width:100%;border-collapse:collapse;font-size:14px;display:table}.key-performance-panel .performance-table thead{position:sticky;top:0;z-index:10;background:var(--bg-tertiary)}.key-performance-panel .performance-table-scroll::-webkit-scrollbar{width:8px!important}.key-performance-panel .performance-table-scroll::-webkit-scrollbar-track{background:var(--bg-secondary)!important;border-radius:4px}.key-performance-panel .performance-table-scroll::-webkit-scrollbar-thumb{background:var(--border-color)!important;border-radius:4px;transition:background 0.3s ease}.key-performance-panel .performance-table-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)!important}.key-performance-panel .performance-table-scroll{scrollbar-width:thin!important;scrollbar-color:var(--border-color) var(--bg-secondary)!important}.key-performance-panel .scroll-indicator{position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(transparent,var(--bg-primary));pointer-events:none;opacity:0;transition:opacity 0.3s ease;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-secondary);z-index:5}.key-performance-panel .scroll-indicator.show{opacity:1}.key-performance-panel .scroll-indicator::before{content:'↓ 向下滚动查看更多记录 ↓'}.key-performance-panel .empty-state{display:none;text-align:center;padding:3rem 1rem;color:var(--text-secondary)}.key-performance-panel .empty-state.show{display:block}@media (max-width:768px){.key-performance-panel .performance-table-scroll{max-height:300px!important}.key-performance-panel .performance-table-container{overflow-x:auto}.key-performance-panel .performance-table{min-width:600px}}.key-charts-panel{background:var(--bg-secondary);padding:2rem 0;border-top:1px solid var(--border-color)}.charts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.charts-header h4{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin:0;display:flex;align-items:center;gap:.5rem}.charts-header h4::before{content:'📊';font-size:1.2rem}.charts-controls{display:flex;gap:.75rem}.charts-tabs{display:flex;background:var(--bg-primary);border-radius:12px;padding:.5rem;margin-bottom:2rem;box-shadow:var(--shadow-light);overflow-x:auto;gap:.25rem}.charts-tab-btn{flex:1;min-width:200px;padding:1rem 1.5rem;border:none;background:#fff0;color:var(--text-secondary);border-radius:8px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;white-space:nowrap;position:relative}.charts-tab-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);transform:translateY(-2px)}.charts-tab-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 4px 12px rgb(102 126 234 / .3);transform:translateY(-2px)}.charts-tab-btn.active::after{content:'';position:absolute;bottom:-.5rem;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid #fff0;border-right:8px solid #fff0;border-top:8px solid #667eea}.charts-content{min-height:600px}.charts-tab-content{display:none;animation:slideIn 0.4s ease}.charts-tab-content.active{display:block}@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.chart-wrapper{background:var(--bg-primary);border-radius:16px;padding:2rem;box-shadow:var(--shadow-light);border:1px solid var(--border-color)}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;padding-bottom:1rem;border-bottom:2px solid var(--border-color)}.chart-header h5{color:var(--text-primary);font-size:1.3rem;font-weight:600;margin:0;display:flex;align-items:center;gap:.5rem}.chart-info{display:flex;align-items:center;gap:.5rem}.info-text{color:var(--text-secondary);font-size:.9rem;background:var(--bg-secondary);padding:.5rem 1rem;border-radius:20px;border:1px solid var(--border-color)}.chart-container{position:relative;margin:2rem 0;padding:1rem;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color)}#heatmapBarChart,#responseBarChart,#rateBarChart{max-width:100%;height:auto!important;border-radius:8px;background:var(--bg-primary)}.chart-stats{margin-top:2rem;padding-top:2rem;border-top:2px solid var(--border-color)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;justify-items:center}.stat-grid .stat-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color);min-width:180px;transition:all 0.3s ease;position:relative;overflow:hidden}.stat-grid .stat-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea,#764ba2)}.stat-grid .stat-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgb(0 0 0 / .1)}.stat-grid .stat-label{color:var(--text-secondary);font-size:.9rem;font-weight:500;text-align:center}.stat-grid .stat-value{color:var(--accent-color);font-size:1.8rem;font-weight:700;text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.chart-loading{display:flex;align-items:center;justify-content:center;height:400px;color:var(--text-secondary);font-size:1.1rem}.chart-loading::before{content:'⏳';margin-right:.5rem;animation:spin 2s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}[data-theme="dark"] .chart-wrapper{background:var(--bg-tertiary);border-color:var(--border-color)}[data-theme="dark"] .chart-container{background:var(--bg-primary)}[data-theme="dark"] #heatmapBarChart,[data-theme="dark"] #responseBarChart,[data-theme="dark"] #rateBarChart{background:var(--bg-secondary)}@media (max-width:768px){.charts-tabs{flex-direction:column}.charts-tab-btn{min-width:auto;padding:.8rem 1rem}.chart-wrapper{padding:1rem}.chart-header{flex-direction:column;align-items:flex-start}.stat-grid{grid-template-columns:1fr;gap:1rem}.stat-grid .stat-item{min-width:auto;width:100%}}@media (max-width:480px){.charts-header{flex-direction:column;align-items:flex-start}.charts-controls{width:100%;justify-content:flex-start}.chart-header h5{font-size:1.1rem}.info-text{font-size:.8rem;padding:.4rem .8rem}}.keyboard-tabs{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.recommendation-buttons{display:flex;gap:.75rem;margin-left:auto;align-items:center}.recommendation-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border:none;border-radius:12px;font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all 0.3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 8px rgb(0 0 0 / .1);backdrop-filter:blur(10px);transform:translateY(0)}.rec-icon{font-size:1.1rem;transition:transform 0.3s ease}.rec-text{font-size:.9rem;letter-spacing:.5px}.keyboard-rec-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:2px solid #fff0}.keyboard-rec-btn:hover{background:linear-gradient(135deg,#5a67d8 0%,#667eea 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgb(102 126 234 / .4)}.keyboard-rec-btn:hover .rec-icon{transform:scale(1.2) rotate(5deg)}.keyboard-rec-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgb(102 126 234 / .3)}.mouse-rec-btn{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff;border:2px solid #fff0}.mouse-rec-btn:hover{background:linear-gradient(135deg,#e084fc 0%,#f093fb 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgb(240 147 251 / .4)}.mouse-rec-btn:hover .rec-icon{transform:scale(1.2) rotate(-5deg)}.mouse-rec-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgb(240 147 251 / .3)}[data-theme="dark"] .keyboard-rec-btn{background:linear-gradient(135deg,#4c51bf 0%,#553c9a 100%);box-shadow:0 2px 8px rgb(76 81 191 / .3)}[data-theme="dark"] .keyboard-rec-btn:hover{background:linear-gradient(135deg,#5a67d8 0%,#4c51bf 100%);box-shadow:0 8px 25px rgb(76 81 191 / .5)}[data-theme="dark"] .mouse-rec-btn{background:linear-gradient(135deg,#d53f8c 0%,#b83280 100%);box-shadow:0 2px 8px rgb(213 63 140 / .3)}[data-theme="dark"] .mouse-rec-btn:hover{background:linear-gradient(135deg,#e53e3e 0%,#d53f8c 100%);box-shadow:0 8px 25px rgb(213 63 140 / .5)}@media (max-width:768px){.keyboard-tabs{flex-direction:column;gap:1rem;align-items:stretch}.recommendation-buttons{margin-left:0;justify-content:center;order:-1}.recommendation-btn{padding:.7rem 1rem;font-size:.85rem;flex:1;justify-content:center;max-width:140px}.rec-text{font-size:.8rem}}@media (max-width:480px){.recommendation-buttons{flex-direction:column;gap:.5rem;width:100%}.recommendation-btn{width:100%;max-width:none;padding:.8rem 1rem}.rec-icon{font-size:1rem}.rec-text{font-size:.85rem}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.8}}.recommendation-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.5s}.recommendation-btn:hover::before{left:100%}.tab-btn{height:42px}.recommendation-btn{height:42px;min-height:42px}.analysis-section{padding:4rem 0;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%)}[data-theme="dark"] .analysis-section{background:linear-gradient(135deg,#1a202c 0%,#2d3748 100%)}.analysis-content{max-width:1000px;margin:0 auto}.analysis-intro{text-align:center;margin-bottom:3rem}.analysis-description{font-size:1.1rem;line-height:1.8;color:#4a5568;max-width:800px;margin:0 auto}[data-theme="dark"] .analysis-description{color:#cbd5e0}.performance-rating{margin-bottom:3rem}.rating-title{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:2rem;color:#2d3748}[data-theme="dark"] .rating-title{color:#f7fafc}.rating-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem}.rating-item{background:#fff;border-radius:12px;padding:1.5rem;text-align:center;box-shadow:0 4px 12px rgb(0 0 0 / .1);transition:transform 0.3s ease,box-shadow 0.3s ease;border:2px solid #fff0}[data-theme="dark"] .rating-item{background:#2d3748;box-shadow:0 4px 12px rgb(0 0 0 / .3)}.rating-item:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgb(0 0 0 / .15)}.rating-item.excellent{border-color:#48bb78}.rating-item.good{border-color:#4299e1}.rating-item.average{border-color:#ed8936}.rating-item.slow{border-color:#f56565}.rating-icon{font-size:2rem;margin-bottom:.5rem}.rating-label{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:#2d3748}[data-theme="dark"] .rating-label{color:#f7fafc}.rating-value{font-size:.9rem;color:#718096;font-weight:500}[data-theme="dark"] .rating-value{color:#a0aec0}.factors-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 12px rgb(0 0 0 / .1)}[data-theme="dark"] .factors-section{background:#2d3748;box-shadow:0 4px 12px rgb(0 0 0 / .3)}.factors-title{font-size:1.3rem;font-weight:600;margin-bottom:1rem;color:#2d3748}[data-theme="dark"] .factors-title{color:#f7fafc}.factors-description,.conclusion{line-height:1.7;color:#4a5568;margin-bottom:1rem}[data-theme="dark"] .factors-description,[data-theme="dark"] .conclusion{color:#cbd5e0}.conclusion{font-weight:600;color:#2b6cb0}[data-theme="dark"] .conclusion{color:#63b3ed}.scenarios-section{padding:4rem 0;background:linear-gradient(135deg,#edf2f7 0%,#e2e8f0 100%)}[data-theme="dark"] .scenarios-section{background:linear-gradient(135deg,#2d3748 0%,#1a202c 100%)}.scenarios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:3rem}.scenario-card{background:#fff;border-radius:16px;padding:2rem;text-align:center;box-shadow:0 4px 20px rgb(0 0 0 / .1);transition:all 0.3s ease;border:2px solid #fff0}[data-theme="dark"] .scenario-card{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.scenario-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgb(0 0 0 / .15);border-color:#667eea}.scenario-icon{font-size:3rem;margin-bottom:1rem}.scenario-title{font-size:1.3rem;font-weight:600;margin-bottom:1rem;color:#2d3748}[data-theme="dark"] .scenario-title{color:#f7fafc}.scenario-description{line-height:1.6;color:#4a5568}[data-theme="dark"] .scenario-description{color:#cbd5e0}.scenarios-conclusion{text-align:center;background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 12px rgb(0 0 0 / .1)}[data-theme="dark"] .scenarios-conclusion{background:#2d3748;box-shadow:0 4px 12px rgb(0 0 0 / .3)}.scenarios-conclusion p{font-size:1.1rem;font-weight:600;color:#2b6cb0;margin:0}[data-theme="dark"] .scenarios-conclusion p{color:#63b3ed}.comparison-section{padding:4rem 0;background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%)}[data-theme="dark"] .comparison-section{background:linear-gradient(135deg,#1a202c 0%,#2d3748 100%)}.comparison-intro{text-align:center;font-size:1.1rem;line-height:1.8;color:#4a5568;margin-bottom:3rem;max-width:800px;margin-left:auto;margin-right:auto}[data-theme="dark"] .comparison-intro{color:#cbd5e0}.comparison-table-container{overflow-x:auto;background:#fff;border-radius:12px;box-shadow:0 4px 20px rgb(0 0 0 / .1)}[data-theme="dark"] .comparison-table-container{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.comparison-table{width:100%;border-collapse:collapse;font-size:.9rem}.comparison-table th{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:1rem;text-align:left;font-weight:600;border:none}.comparison-table th:first-child{border-top-left-radius:12px}.comparison-table th:last-child{border-top-right-radius:12px}.comparison-table td{padding:1rem;border-bottom:1px solid #e2e8f0;vertical-align:middle}[data-theme="dark"] .comparison-table td{border-bottom-color:#4a5568}.comparison-table tbody tr:hover{background:#f8fafc}[data-theme="dark"] .comparison-table tbody tr:hover{background:#374151}.comparison-table tbody tr:last-child td{border-bottom:none}.keyboard-type{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#2d3748}[data-theme="dark"] .keyboard-type{color:#f7fafc}.type-icon{font-size:1.2rem}.response-time.excellent{color:#48bb78;font-weight:600}.response-time.good{color:#4299e1;font-weight:600}.response-time.average{color:#ed8936;font-weight:600}.noise.low{color:#48bb78}.noise.medium{color:#ed8936}.noise.low-medium{color:#4299e1}@media (max-width:768px){.rating-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.scenarios-grid{grid-template-columns:1fr;gap:1.5rem}.comparison-table{font-size:.8rem}.comparison-table th,.comparison-table td{padding:.75rem .5rem}}@media (max-width:480px){.rating-grid{grid-template-columns:1fr}.analysis-section,.scenarios-section,.comparison-section{padding:2rem 0}.factors-section,.scenario-card,.scenarios-conclusion{padding:1.5rem}}.keyboard-types-section{padding:4rem 0;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%)}[data-theme="dark"] .keyboard-types-section{background:linear-gradient(135deg,#1a202c 0%,#2d3748 100%)}.keyboard-types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:3rem}.keyboard-type-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .1);transition:all 0.3s ease;border:2px solid #fff0}[data-theme="dark"] .keyboard-type-card{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.keyboard-type-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgb(0 0 0 / .15);border-color:#667eea}.type-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}[data-theme="dark"] .type-header{border-bottom-color:#4a5568}.type-icon{font-size:2rem}.type-title{font-size:1.3rem;font-weight:600;color:#2d3748;margin:0}[data-theme="dark"] .type-title{color:#f7fafc}.type-content h4{font-size:1rem;font-weight:600;color:#4a5568;margin:1rem 0 .5rem 0}[data-theme="dark"] .type-content h4{color:#cbd5e0}.type-content p{color:#718096;line-height:1.6;margin-bottom:1rem}[data-theme="dark"] .type-content p{color:#a0aec0}.type-content ul{color:#718096;padding-left:1.2rem;margin-bottom:1rem}[data-theme="dark"] .type-content ul{color:#a0aec0}.type-content li{margin-bottom:.3rem;line-height:1.5}.selection-guide{background:#fff;border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .1)}[data-theme="dark"] .selection-guide{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.guide-title{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:2rem;color:#2d3748}[data-theme="dark"] .guide-title{color:#f7fafc}.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.guide-item{display:flex;align-items:flex-start;gap:1rem;padding:1rem;background:#f8fafc;border-radius:12px;transition:all 0.3s ease}[data-theme="dark"] .guide-item{background:#374151}.guide-item:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgb(0 0 0 / .1)}.guide-icon{font-size:1.5rem;flex-shrink:0}.guide-content h4{font-size:1rem;font-weight:600;color:#2d3748;margin:0 0 .5rem 0}[data-theme="dark"] .guide-content h4{color:#f7fafc}.guide-content p{font-size:.9rem;color:#718096;line-height:1.5;margin:0}[data-theme="dark"] .guide-content p{color:#a0aec0}.switches-section{padding:4rem 0;background:linear-gradient(135deg,#edf2f7 0%,#e2e8f0 100%)}[data-theme="dark"] .switches-section{background:linear-gradient(135deg,#2d3748 0%,#1a202c 100%)}.switches-intro{text-align:center;font-size:1.1rem;line-height:1.8;color:#4a5568;margin-bottom:3rem;max-width:800px;margin-left:auto;margin-right:auto}[data-theme="dark"] .switches-intro{color:#cbd5e0}.switches-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}.switch-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .1);transition:all 0.3s ease;border:2px solid #fff0}[data-theme="dark"] .switch-card{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.switch-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgb(0 0 0 / .15)}.switch-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}[data-theme="dark"] .switch-header{border-bottom-color:#4a5568}.switch-color{width:20px;height:20px;border-radius:50%;flex-shrink:0}.red-switch .switch-color{background:#f56565}.green-switch .switch-color{background:#48bb78}.brown-switch .switch-color{background:#d69e2e}.black-switch .switch-color{background:#2d3748}.red-switch:hover{border-color:#f56565}.green-switch:hover{border-color:#48bb78}.brown-switch:hover{border-color:#d69e2e}.black-switch:hover{border-color:#2d3748}.switch-name{font-size:1.2rem;font-weight:600;color:#2d3748;margin:0}[data-theme="dark"] .switch-name{color:#f7fafc}.switch-specs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.5rem;padding:1rem;background:#f8fafc;border-radius:8px}[data-theme="dark"] .switch-specs{background:#374151}.spec-item{display:flex;justify-content:space-between;align-items:center}.spec-label{font-size:.85rem;color:#718096;font-weight:500}[data-theme="dark"] .spec-label{color:#a0aec0}.spec-value{font-size:.85rem;color:#2d3748;font-weight:600}[data-theme="dark"] .spec-value{color:#f7fafc}.switch-description p{font-size:.9rem;line-height:1.6;color:#718096;margin-bottom:.8rem}[data-theme="dark"] .switch-description p{color:#a0aec0}.switch-guide{background:#fff;border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .1)}[data-theme="dark"] .switch-guide{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.switch-recommendations{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.recommendation-item{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:#f8fafc;border-radius:12px;transition:all 0.3s ease}[data-theme="dark"] .recommendation-item{background:#374151}.recommendation-item:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgb(0 0 0 / .1)}.rec-icon{font-size:1.5rem;flex-shrink:0}.rec-content h4{font-size:1rem;font-weight:600;color:#2d3748;margin:0 0 .5rem 0}[data-theme="dark"] .rec-content h4{color:#f7fafc}.rec-content p{font-size:.9rem;color:#718096;line-height:1.5;margin:0}[data-theme="dark"] .rec-content p{color:#a0aec0}.troubleshooting-section{padding:4rem 0;background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%)}[data-theme="dark"] .troubleshooting-section{background:linear-gradient(135deg,#1a202c 0%,#2d3748 100%)}.troubleshooting-intro{text-align:center;font-size:1.1rem;line-height:1.8;color:#4a5568;margin-bottom:3rem;max-width:800px;margin-left:auto;margin-right:auto}[data-theme="dark"] .troubleshooting-intro{color:#cbd5e0}.problems-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:3rem}.problem-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .1);transition:all 0.3s ease;border:2px solid #fff0}[data-theme="dark"] .problem-card{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.problem-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgb(0 0 0 / .15);border-color:#f56565}.problem-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}[data-theme="dark"] .problem-header{border-bottom-color:#4a5568}.problem-icon{font-size:2rem}.problem-title{font-size:1.3rem;font-weight:600;color:#2d3748;margin:0}[data-theme="dark"] .problem-title{color:#f7fafc}.problem-content h4{font-size:1rem;font-weight:600;color:#4a5568;margin:1rem 0 .5rem 0}[data-theme="dark"] .problem-content h4{color:#cbd5e0}.problem-content p{color:#718096;line-height:1.6;margin-bottom:1rem}[data-theme="dark"] .problem-content p{color:#a0aec0}.problem-content ol{color:#718096;padding-left:1.2rem;margin-bottom:1rem}[data-theme="dark"] .problem-content ol{color:#a0aec0}.problem-content li{margin-bottom:.5rem;line-height:1.5}.maintenance-section{background:#fff;border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .1)}[data-theme="dark"] .maintenance-section{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.maintenance-title{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:2rem;color:#2d3748}[data-theme="dark"] .maintenance-title{color:#f7fafc}.maintenance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.maintenance-item{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:#f8fafc;border-radius:12px;transition:all 0.3s ease}[data-theme="dark"] .maintenance-item{background:#374151}.maintenance-item:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgb(0 0 0 / .1)}.maintenance-icon{font-size:1.5rem;flex-shrink:0}.maintenance-content h4{font-size:1rem;font-weight:600;color:#2d3748;margin:0 0 .5rem 0}[data-theme="dark"] .maintenance-content h4{color:#f7fafc}.maintenance-content p{font-size:.9rem;color:#718096;line-height:1.5;margin:0}[data-theme="dark"] .maintenance-content p{color:#a0aec0}.section-summary{text-align:center;background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 12px rgb(0 0 0 / .1)}[data-theme="dark"] .section-summary{background:#2d3748;box-shadow:0 4px 12px rgb(0 0 0 / .3)}.section-summary p{font-size:1.1rem;font-weight:600;color:#2b6cb0;margin:0;line-height:1.7}[data-theme="dark"] .section-summary p{color:#63b3ed}@media (max-width:768px){.keyboard-types-grid,.switches-grid,.problems-grid{grid-template-columns:1fr;gap:1.5rem}.guide-grid,.switch-recommendations,.maintenance-grid{grid-template-columns:1fr;gap:1rem}.switch-specs{grid-template-columns:1fr}}@media (max-width:480px){.keyboard-types-section,.switches-section,.troubleshooting-section{padding:2rem 0}.keyboard-type-card,.switch-card,.problem-card,.selection-guide,.switch-guide,.maintenance-section{padding:1.5rem}.type-header,.switch-header,.problem-header{flex-direction:column;text-align:center;gap:.5rem}}.keyboard-tips-section{padding:4rem 0;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%)}[data-theme="dark"] .keyboard-tips-section{background:linear-gradient(135deg,#1a202c 0%,#2d3748 100%)}.tips-intro{text-align:center;font-size:1.1rem;line-height:1.8;color:#4a5568;margin-bottom:3rem;max-width:800px;margin-left:auto;margin-right:auto}[data-theme="dark"] .tips-intro{color:#cbd5e0}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem}.tip-category{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .1);transition:all 0.3s ease;border:2px solid #fff0}[data-theme="dark"] .tip-category{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.tip-category:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgb(0 0 0 / .15);border-color:#667eea}.category-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}[data-theme="dark"] .category-header{border-bottom-color:#4a5568}.category-icon{font-size:2rem}.category-title{font-size:1.3rem;font-weight:600;color:#2d3748;margin:0}[data-theme="dark"] .category-title{color:#f7fafc}.tip-item{margin-bottom:2rem}.tip-item:last-child{margin-bottom:0}.tip-title{font-size:1.1rem;font-weight:600;color:#4a5568;margin:0 0 1rem 0}[data-theme="dark"] .tip-title{color:#cbd5e0}.tip-list{color:#718096;padding-left:1.2rem;margin-bottom:1rem}[data-theme="dark"] .tip-list{color:#a0aec0}.tip-list li{margin-bottom:.5rem;line-height:1.6}.tip-desc{color:#718096;line-height:1.6;margin-bottom:1rem}[data-theme="dark"] .tip-desc{color:#a0aec0}.tip-note{color:#2b6cb0;font-weight:500;margin-top:.5rem}[data-theme="dark"] .tip-note{color:#63b3ed}.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1rem 0}.shortcut-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background:#f8fafc;border-radius:8px;transition:all 0.3s ease}[data-theme="dark"] .shortcut-item{background:#374151}.shortcut-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .1)}.shortcut-key{font-family:'Courier New',monospace;font-weight:600;color:#2d3748;background:#e2e8f0;padding:.3rem .6rem;border-radius:4px;margin-bottom:.5rem;font-size:.9rem}[data-theme="dark"] .shortcut-key{color:#f7fafc;background:#4a5568}.shortcut-desc{font-size:.85rem;color:#718096;text-align:center}[data-theme="dark"] .shortcut-desc{color:#a0aec0}.setting-steps{margin:1rem 0}.step-item{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.8rem;padding:.8rem;background:#f8fafc;border-radius:8px}[data-theme="dark"] .step-item{background:#374151}.step-label{font-weight:600;color:#4a5568;flex-shrink:0;min-width:80px}[data-theme="dark"] .step-label{color:#cbd5e0}.step-desc{color:#718096;line-height:1.5}[data-theme="dark"] .step-desc{color:#a0aec0}.cleaning-steps{margin-top:1rem}.cleaning-steps h5{font-size:1rem;font-weight:600;color:#4a5568;margin:0 0 .5rem 0}[data-theme="dark"] .cleaning-steps h5{color:#cbd5e0}.step-list{color:#718096;padding-left:1.2rem;margin:0}[data-theme="dark"] .step-list{color:#a0aec0}.step-list li{margin-bottom:.3rem;line-height:1.5}.terminology-section{padding:4rem 0;background:linear-gradient(135deg,#edf2f7 0%,#e2e8f0 100%)}[data-theme="dark"] .terminology-section{background:linear-gradient(135deg,#2d3748 0%,#1a202c 100%)}.terminology-intro{text-align:center;font-size:1.1rem;line-height:1.8;color:#4a5568;margin-bottom:3rem;max-width:800px;margin-left:auto;margin-right:auto}[data-theme="dark"] .terminology-intro{color:#cbd5e0}.terminology-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.term-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px rgb(0 0 0 / .1);transition:all 0.3s ease;border:2px solid #fff0}[data-theme="dark"] .term-card{background:#2d3748;box-shadow:0 4px 20px rgb(0 0 0 / .3)}.term-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgb(0 0 0 / .15);border-color:#667eea}.term-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}[data-theme="dark"] .term-header{border-bottom-color:#4a5568}.term-number{width:40px;height:40px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.1rem;flex-shrink:0}.term-title{font-size:1.2rem;font-weight:600;color:#2d3748;margin:0}[data-theme="dark"] .term-title{color:#f7fafc}.term-content h4{font-size:1rem;font-weight:600;color:#4a5568;margin:1rem 0 .5rem 0}[data-theme="dark"] .term-content h4{color:#cbd5e0}.term-definition{margin-bottom:1.5rem}.term-definition p{color:#718096;line-height:1.6;margin-bottom:.5rem}[data-theme="dark"] .term-definition p{color:#a0aec0}.term-definition ul{color:#718096;padding-left:1.2rem;margin-bottom:.5rem}[data-theme="dark"] .term-definition ul{color:#a0aec0}.term-definition li{margin-bottom:.3rem;line-height:1.5}.term-details p{color:#718096;line-height:1.6;margin-bottom:.8rem}[data-theme="dark"] .term-details p{color:#a0aec0}.term-details ul{color:#718096;padding-left:1.2rem;margin-bottom:1rem}[data-theme="dark"] .term-details ul{color:#a0aec0}.term-details li{margin-bottom:.4rem;line-height:1.5}.term-note{color:#2b6cb0;font-weight:500;margin-top:.5rem}[data-theme="dark"] .term-note{color:#63b3ed}@media (max-width:768px){.tips-grid{grid-template-columns:1fr;gap:1.5rem}.terminology-grid{grid-template-columns:1fr;gap:1.5rem}.shortcut-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}.setting-steps{margin:.8rem 0}.step-item{flex-direction:column;gap:.3rem}.step-label{min-width:auto}}@media (max-width:480px){.keyboard-tips-section,.terminology-section{padding:2rem 0}.tip-category,.term-card{padding:1.5rem}.category-header,.term-header{flex-direction:column;text-align:center;gap:.5rem}.shortcut-grid{grid-template-columns:1fr}.term-number{width:35px;height:35px;font-size:1rem}}.mac-keyboard .edit-section .key-group.edit-keys{margin-top:-45px}.mac-keyboard .edit-section .key-group.edit-keys{margin-top:-45px}.numpad .key-group.edit-keys{margin-top:-45px}.mac-keyboard .edit-section .key-group.edit-keys{margin-top:-45px}.numpad .key-group.edit-keys{margin-top:-45px}.mac-keyboard .numpad .numpad-row:nth-child(5){margin-top:-45px}.mac-keyboard .edit-section .arrow-keys{margin-top:45px}.mac-keyboard .edit-section .key-group.edit-keys{margin-top:-45px}.numpad .key-group.edit-keys{margin-top:-45px}.mac-keyboard .numpad .numpad-row:nth-child(5){margin-top:-45px}.mac-keyboard .edit-section .arrow-keys{margin-top:45px}.pc-keyboard .function-row{justify-content:flex-start;margin-left:0;padding-left:0}.pc-keyboard .edit-section{margin-top:-45px}.pc-keyboard .numpad .numpad-row:nth-child(3) .key[data-key="Numpad4"],.pc-keyboard .numpad .numpad-row:nth-child(3) .key[data-key="Numpad5"],.pc-keyboard .numpad .numpad-row:nth-child(3) .key[data-key="Numpad6"]{margin-top:-45px}.pc-keyboard .numpad .numpad-row:nth-child(5) .key[data-key="Numpad0"],.pc-keyboard .numpad .numpad-row:nth-child(5) .key[data-key="NumpadDecimal"]{margin-top:-45px}.pc-keyboard .numpad .numpad-row:nth-child(5) .key[data-key="NumpadDecimal"]{margin-left:45px}// ... existing code ... .pc-keyboard .numpad .key[data-key="Numpad0"]{min-width:170px;height:80px;font-size:28px;transform:scale(1)}