.keyboard-container{width:100%;max-width:clamp(650px,calc((100vh - 475px) * 7 / 3),1000px);margin:0 auto;padding:.5rem;background:#f5f5f5;border-radius:8px;border:1px solid #e0e0e0;aspect-ratio:7 / 3;pointer-events:none}:root.dark .keyboard-container,.dark .keyboard-container{background:#1f2937;border-color:#374151}.keyboard-svg{width:100%;height:auto;display:block;direction:ltr}.key-shape{vector-effect:non-scaling-stroke}.key{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.key-shape{fill:#fff;stroke:#d0d0d0;stroke-width:1;transition:fill .1s ease,stroke .1s ease,stroke-width .1s ease;transform-box:fill-box;transform-origin:center}:root.dark .key-shape,.dark .key-shape{fill:#374151;stroke:#4b5563}.key-label{fill:#333;font-family:system-ui,-apple-system,sans-serif;font-weight:400;font-size:11px;pointer-events:none}.key-label-primary{font-size:12px;font-weight:600}.key-label-shift{fill:#666;font-size:8px}:root.dark .key-label,.dark .key-label{fill:#e5e7eb}:root.dark .key-label-shift,.dark .key-label-shift{fill:#9ca3af}.key.active .key-shape{fill:#b3d9ff;stroke:#4a9eff;stroke-width:2}.key.active .key-label{fill:#06c;font-weight:600}.key.active .key-label-shift{fill:#38d}:root.dark .key.active .key-shape,.dark .key.active .key-shape{fill:#1e3a5f;stroke:#60a5fa}:root.dark .key.active .key-label,.dark .key.active .key-label{fill:#93c5fd}:root.dark .key.active .key-label-shift,.dark .key.active .key-label-shift{fill:#60a5fa}.key.pressed .key-shape{fill:#80c7ff;stroke:#06c;stroke-width:2;transform-box:fill-box;transform-origin:center;transform:scale(.97)}.key.pressed .key-label{fill:#049;font-weight:600}.key.pressed .key-label-shift{fill:#26a}:root.dark .key.pressed .key-shape,.dark .key.pressed .key-shape{fill:#2563eb;stroke:#3b82f6}:root.dark .key.pressed .key-label,.dark .key.pressed .key-label{fill:#dbeafe}:root.dark .key.pressed .key-label-shift,.dark .key.pressed .key-label-shift{fill:#93c5fd}@media (prefers-reduced-motion: reduce){.key-shape{transition:none}.key.pressed .key-shape{transform:none}}:root{--kb-hand-stroke: #aeb4bc;--kb-hand-fill: #e9ebef;--kb-hand-fill-opacity: .5;--kb-hand-stroke-width: 1.7;--kb-finger-active: #2f6fed;--kb-finger-active-width: 3}:root.dark,.dark{--kb-hand-stroke: #7c828b;--kb-hand-fill: #243042;--kb-finger-active: #60a5fa}.hands{pointer-events:none}.keyboard-container.with-hands{aspect-ratio:700 / 430}.kb-hand-palm,.kb-hand-finger{fill:var(--kb-hand-fill);fill-opacity:var(--kb-hand-fill-opacity);stroke:var(--kb-hand-stroke);stroke-width:var(--kb-hand-stroke-width);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.kb-hand-finger.active{stroke:var(--kb-finger-active);stroke-width:var(--kb-finger-active-width);fill:var(--kb-finger-active);fill-opacity:.1}.kb-hand-ray{fill:none;stroke:var(--kb-finger-active);stroke-width:2.2;opacity:.9;stroke-linecap:round;vector-effect:non-scaling-stroke}@media (prefers-reduced-motion: reduce){.kb-hand-finger,.kb-hand-ray{transition:none}}@keyframes kb-key-wave{0%{transform:scale(1);opacity:.5}70%{opacity:0}to{transform:scale(1.5);opacity:0}}.key-wave{fill:none;stroke:#4a9eff;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:kb-key-wave 1.4s ease-out infinite;pointer-events:none}:root.dark .key-wave,.dark .key-wave{stroke:#60a5fa}@media (prefers-reduced-motion: reduce){.key-wave{animation:none;opacity:0}}@keyframes kb-finger-press{0%,to{transform:translateY(0)}55%{transform:translateY(3px)}}.kb-hand-finger.active,.kb-hand-ray{animation:kb-finger-press 1.15s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.kb-hand-finger.active,.kb-hand-ray{animation:none}}.keyboard-with-stats{width:clamp(650px,calc((100vh - 475px) * 7 / 3),1000px);max-width:100%}@media (max-width: 768px){.keyboard-container{padding:.5rem}.key-label{font-size:10px}.key-label-primary{font-size:11px}.key-label-shift{font-size:7px}}