.virtual-keyboard{padding:var(--space-md) var(--space-lg);background:var(--bg-surface);border-radius:var(--radius-md);-webkit-user-select:none;user-select:none;max-width:840px;font-family:var(--font-sans);flex-direction:column;gap:2px;margin:0 auto;display:flex}.keyboard-row{justify-content:center;gap:2px;display:flex}.key{background:var(--key-bg);min-width:44px;height:44px;color:var(--key-text);cursor:default;border-radius:3px;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:3px 5px;font-size:.8rem;font-weight:600;line-height:1;transition:filter 80ms,transform 80ms;display:flex;position:relative;overflow:hidden}.key-shift-label{opacity:.7;font-size:.55rem;font-weight:500;position:absolute;top:3px;left:5px}.key-main-label,.key-label-only{font-size:.8rem;font-weight:600}.key-modifier{background:var(--bg-overlay);color:var(--text-muted);justify-content:center;align-items:center;font-size:.65rem;font-weight:500}.space-key{justify-content:center;align-items:center;font-size:0}.key.locked{opacity:.25}.key.pressed{filter:brightness(.75);transform:translateY(1px)}.key.highlighted{outline-offset:-2px;z-index:5;filter:brightness(1.1);outline:3px solid #4a7fbd}.key.correct-flash{animation:.2s kbFlashCorrect}.key.error-flash{animation:.2s kbFlashError}@keyframes kbFlashCorrect{0%{filter:brightness(1.4)}to{filter:brightness()}}@keyframes kbFlashError{0%{background:var(--color-error);color:#fff}to{}}.key.home-key:after{content:"";background:#00000040;border-radius:1px;width:8px;height:2px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.key.finger-pinky{background:var(--key-finger-pinky);color:#fffffff2}.key.finger-ring{background:var(--key-finger-ring);color:#fffffff2}.key.finger-middle{background:var(--key-finger-middle);color:#fffffff2}.key.finger-index{background:var(--key-finger-index);color:#fffffff2}.key.finger-thumb{background:var(--key-finger-thumb);color:#fffffff2}.key.finger-pinky .key-shift-label,.key.finger-ring .key-shift-label,.key.finger-middle .key-shift-label,.key.finger-index .key-shift-label{opacity:.6}@media (max-width:768px){.virtual-keyboard{display:none}}