.key{background:#fff;border:1px solid #bdc3c7;border-radius:4px;cursor:pointer;font-family:inherit;font-size:18px;line-height:1.2;transition:all .1s;position:relative;user-select:none;display:flex;align-items:center;justify-content:center;text-align:center;color:#000}.key:hover{background:#f8f9fa;border-color:#95a5a6}.key.pressed{background:#3498db;color:#fff;transform:translateY(1px)}.letter-key,.number-key{width:42px;height:42px;padding:2px}.special-key{height:42px;padding:8px 12px;font-size:12px;background:#f8f9fa}.tab-key{width:60px}.caps-lock-key{width:72px}.shift-key{width:80px}.enter-key{width:80px}.backspace-key{width:90px}.space-key{flex:1;min-width:220px;max-width:320px}.caps-lock-key.active{background:#e74c3c;color:#fff}.shift-key.active{background:#f39c12;color:#fff}.keyboard-row{display:flex;justify-content:center;margin-bottom:6px;gap:3px}.key .hint{position:absolute;left:6px;top:4px;font-size:10px;color:#7f8c8d}.notification{position:fixed;top:20px;right:20px;background:#27ae60;color:#fff;padding:10px 20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.2);z-index:10000;opacity:0;transition:opacity .25s}.notification.show{opacity:1}@media (max-width:768px){.letter-key,.number-key{width:36px;height:36px}.tab-key{width:54px}.shift-key{width:70px}.enter-key{width:70px}}