.keyboard-container{width:100%;max-width:1000px;margin:0 auto;padding:1rem;background:#f5f5f5;border-radius:8px;border:1px solid #e0e0e0}: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}}@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}}