.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}.key-label.key-label-sm{font-size:9px}.keyboard-container.keyboard-theme-apple{background:#e3e4e6;border-color:#cfd0d3}:root.dark .keyboard-container.keyboard-theme-apple,.dark .keyboard-container.keyboard-theme-apple{background:#1c1d1f;border-color:#0f1011}.keyboard-theme-apple .key-shape{fill:#f5f5f7;stroke:#d7d7da}:root.dark .keyboard-theme-apple .key-shape,.dark .keyboard-theme-apple .key-shape{fill:#2b2c2e;stroke:#3a3b3d}.keyboard-theme-apple .key-label{fill:#4a4a4a}.keyboard-theme-apple .key-label-shift{fill:#595960}:root.dark .keyboard-theme-apple .key-label,.dark .keyboard-theme-apple .key-label{fill:#e8e8ea}:root.dark .keyboard-theme-apple .key-label-shift,.dark .keyboard-theme-apple .key-label-shift{fill:#b0b1b4}.keyboard-container.keyboard-theme-macbook{background:#1b1c1e;border-color:#0d0d0f}.keyboard-theme-macbook .key-shape{fill:#1c1c1e;stroke:#2c2c2e}.keyboard-theme-macbook .key-label{fill:#f5f5f7}.keyboard-theme-macbook .key-label-shift{fill:#b8b9bc}.keyboard-theme-macbook .fn-icon{stroke:#e8e8ea}.keyboard-theme-macbook .fn-icon .solid{fill:#e8e8ea}.keyboard-theme-macbook .key.active .key-shape{fill:#1d4ed8;stroke:#93c5fd}.keyboard-theme-macbook .key.active .key-label{fill:#fff}.keyboard-container.keyboard-theme-surface{background:#a7a9ac;border-color:#95979a}.keyboard-theme-surface .key-shape{fill:#c8caca;stroke:#b4b6b7}.keyboard-theme-surface .key-label{fill:#333537}.keyboard-theme-surface .key-label-shift{fill:#4f5153}.keyboard-theme-surface .fn-icon{stroke:#333537}.keyboard-theme-surface .fn-icon .solid{fill:#333537}.keyboard-container.keyboard-theme-winlaptop{background:#1b1c1e;border-color:#0e0f10}.keyboard-theme-winlaptop .key-shape{fill:#2a2a2c;stroke:#3a3a3c}.keyboard-theme-winlaptop .key-label{fill:#e8e8e8}.keyboard-theme-winlaptop .key-label-shift{fill:#b6b7b9}.keyboard-theme-winlaptop .fn-icon{stroke:#e8e8e8}.keyboard-theme-winlaptop .fn-icon .solid{fill:#e8e8e8}.keyboard-theme-surface .key.active .key-shape,.keyboard-theme-winlaptop .key.active .key-shape{fill:#1d4ed8;stroke:#93c5fd}.keyboard-theme-surface .key.active .key-label,.keyboard-theme-winlaptop .key.active .key-label{fill:#fff}:root.dark .keyboard-theme-macbook .key-shape,.dark .keyboard-theme-macbook .key-shape{fill:#1c1c1e;stroke:#2c2c2e}:root.dark .keyboard-theme-macbook .key-label,.dark .keyboard-theme-macbook .key-label{fill:#f5f5f7}:root.dark .keyboard-theme-macbook .key-label-shift,.dark .keyboard-theme-macbook .key-label-shift{fill:#b8b9bc}:root.dark .keyboard-theme-macbook .fn-icon,.dark .keyboard-theme-macbook .fn-icon{stroke:#e8e8ea}:root.dark .keyboard-theme-macbook .fn-icon .solid,.dark .keyboard-theme-macbook .fn-icon .solid{fill:#e8e8ea}:root.dark .keyboard-theme-surface .key-shape,.dark .keyboard-theme-surface .key-shape{fill:#c8caca;stroke:#b4b6b7}:root.dark .keyboard-theme-surface .key-label,.dark .keyboard-theme-surface .key-label{fill:#333537}:root.dark .keyboard-theme-surface .key-label-shift,.dark .keyboard-theme-surface .key-label-shift{fill:#4f5153}:root.dark .keyboard-theme-surface .fn-icon,.dark .keyboard-theme-surface .fn-icon{stroke:#333537}:root.dark .keyboard-theme-surface .fn-icon .solid,.dark .keyboard-theme-surface .fn-icon .solid{fill:#333537}:root.dark .keyboard-theme-winlaptop .key-shape,.dark .keyboard-theme-winlaptop .key-shape{fill:#2a2a2c;stroke:#3a3a3c}:root.dark .keyboard-theme-winlaptop .key-label,.dark .keyboard-theme-winlaptop .key-label{fill:#e8e8e8}:root.dark .keyboard-theme-winlaptop .key-label-shift,.dark .keyboard-theme-winlaptop .key-label-shift{fill:#b6b7b9}:root.dark .keyboard-theme-winlaptop .fn-icon,.dark .keyboard-theme-winlaptop .fn-icon{stroke:#e8e8e8}:root.dark .keyboard-theme-winlaptop .fn-icon .solid,.dark .keyboard-theme-winlaptop .fn-icon .solid{fill:#e8e8e8}:root.dark .keyboard-container.keyboard-theme-surface,.dark .keyboard-container.keyboard-theme-surface{background:#a7a9ac;border-color:#95979a}:root.dark .keyboard-container.keyboard-theme-macbook,.dark .keyboard-container.keyboard-theme-macbook{background:#1b1c1e;border-color:#0d0d0f}:root.dark .keyboard-container.keyboard-theme-winlaptop,.dark .keyboard-container.keyboard-theme-winlaptop{background:#1b1c1e;border-color:#0e0f10}.fn-icon{fill:none;stroke:#4a4a4a;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}.fn-icon .solid{fill:#4a4a4a;stroke:none}:root.dark .fn-icon,.dark .fn-icon{stroke:#d6d7d9}:root.dark .fn-icon .solid,.dark .fn-icon .solid{fill:#d6d7d9}: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:#1a73e8;stroke-width:2.5}.key.active .key-label{fill:#00478f;font-weight:600}.key.active .key-label-shift{fill:#134a8a}: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}:root.dark .keyboard-theme-apple .key.active .key-shape,.dark .keyboard-theme-apple .key.active .key-shape{fill:#1d4ed8;stroke:#93c5fd}:root.dark .keyboard-theme-apple .key.active .key-label,.dark .keyboard-theme-apple .key.active .key-label{fill:#fff}.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}.keyboard-container.keyboard-size-numpad{aspect-ratio:870 / 300;max-width:clamp(720px,calc((100vh - 475px)*2.9),1180px)}.keyboard-container.keyboard-size-numpad.with-hands{aspect-ratio:870 / 430}.keyboard-container.keyboard-size-office{aspect-ratio:972 / 300;max-width:clamp(820px,calc((100vh - 430px)*3.24),1340px)}.keyboard-container.keyboard-size-office.with-hands{aspect-ratio:972 / 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:#1a73e8;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:.6}}@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%}@supports selector(:has(*)){.keyboard-with-stats:has(.keyboard-size-office){width:min(96vw,1340px,calc((100vh - 430px) * 972 / 430))}}@supports (height: 100dvh){.keyboard-container{max-width:clamp(650px,calc((100dvh - 475px) * 7 / 3),1000px)}.keyboard-container.keyboard-size-numpad{max-width:clamp(720px,calc((100dvh - 475px)*2.9),1180px)}.keyboard-container.keyboard-size-office{max-width:clamp(820px,calc((100dvh - 430px)*3.24),1340px)}.keyboard-with-stats{width:clamp(650px,calc((100dvh - 475px) * 7 / 3),1000px)}}@supports (height: 100dvh) and (selector(:has(*))){.keyboard-with-stats:has(.keyboard-size-office){width:min(96vw,1340px,calc((100dvh - 430px) * 972 / 430))}}@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}.key-label.key-label-sm{font-size:8px}}