:root{--finger-lp:#6C63FF;--finger-lp-dim:rgba(108, 99, 255, 0.6);--finger-lp-bg:rgba(108, 99, 255, 0.4);--finger-lp-glow:rgba(108, 99, 255, 0.6);--finger-lr:#4ECDC4;--finger-lr-dim:rgba(78, 205, 196, 0.6);--finger-lr-bg:rgba(78, 205, 196, 0.4);--finger-lr-glow:rgba(78, 205, 196, 0.6);--finger-lm:#FF6B6B;--finger-lm-dim:rgba(255, 107, 107, 0.6);--finger-lm-bg:rgba(255, 107, 107, 0.4);--finger-lm-glow:rgba(255, 107, 107, 0.6);--finger-li:#45B7D1;--finger-li-dim:rgba(69, 183, 209, 0.6);--finger-li-bg:rgba(69, 183, 209, 0.4);--finger-li-glow:rgba(69, 183, 209, 0.6);--finger-ri:#96CEB4;--finger-ri-dim:rgba(150, 206, 180, 0.6);--finger-ri-bg:rgba(150, 206, 180, 0.4);--finger-ri-glow:rgba(150, 206, 180, 0.6);--finger-rm:#FFEAA7;--finger-rm-dim:rgba(255, 234, 167, 0.6);--finger-rm-bg:rgba(255, 234, 167, 0.4);--finger-rm-glow:rgba(255, 234, 167, 0.6);--finger-rr:#DDA0DD;--finger-rr-dim:rgba(221, 160, 221, 0.6);--finger-rr-bg:rgba(221, 160, 221, 0.4);--finger-rr-glow:rgba(221, 160, 221, 0.6);--finger-rp:#98D8C8;--finger-rp-dim:rgba(152, 216, 200, 0.6);--finger-rp-bg:rgba(152, 216, 200, 0.4);--finger-rp-glow:rgba(152, 216, 200, 0.6);--key-expected-bg:#FFD93D;--key-expected-border:#FFC107;--key-expected-glow:rgba(255, 217, 61, 0.9);--key-correct-bg:#1a9c52;--key-correct-border:#22c55e;--key-correct-glow:rgba(34, 197, 94, 0.95);--key-incorrect-bg:#c0392b;--key-incorrect-border:#ef4444;--key-incorrect-glow:rgba(239, 68, 68, 0.95);--tooltip-bg:rgba(0, 0, 0, 0.95)}.visual-keyboard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--spacing-md);background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:var(--radius-lg);user-select:none;transition:background-color .3s}.keyboard-row{display:flex;gap:5px;justify-content:center}.key{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:50px;height:55px;padding:4px;background:var(--theme-card);border:2px solid var(--theme-border);border-radius:8px;cursor:pointer;transition:all .1s ease;position:relative;font-family:Poppins,sans-serif;box-shadow:0 2px 4px var(--theme-glow)}.key:hover{transform:translateY(-2px);border-color:var(--theme-border,#777);box-shadow:0 4px 8px rgba(0,0,0,.4)}.key:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.3)}.key-main{font-size:1.3rem;font-weight:600;color:var(--theme-text);line-height:1;font-family:var(--font-hindi),KrutiDev010,serif;height:28px;display:flex;align-items:center;justify-content:center}.key-qwerty{font-size:.65rem;font-weight:500;color:var(--theme-muted);text-transform:uppercase;margin-top:2px;line-height:1}.key.wide{min-width:70px}.key.wide.key.space{min-width:350px;height:50px;padding-left:30px;padding-right:30px}.key.wide.key.shift{min-width:85px}.key.center{justify-content:center}.key.right{justify-content:flex-end;padding-right:10px}.key.shift-key{background:var(--theme-surface)}.key.shift-key.active{background:linear-gradient(180deg,var(--accent-secondary) 0,var(--finger-lr) 100%);border-color:var(--accent-secondary)}.key.finger-lp{border-color:var(--finger-lp-dim)}.key.finger-lp .finger-dot{background:var(--finger-lp)}.key.finger-lp.active,.key.finger-lp.pressed{background:var(--finger-lp-bg);border-color:var(--finger-lp);box-shadow:0 0 15px var(--finger-lp-glow)}.key.finger-lr{border-color:var(--finger-lr-dim)}.key.finger-lr .finger-dot{background:var(--finger-lr)}.key.finger-lr.active,.key.finger-lr.pressed{background:var(--finger-lr-bg);border-color:var(--finger-lr);box-shadow:0 0 15px var(--finger-lr-glow)}.key.finger-lm{border-color:var(--finger-lm-dim)}.key.finger-lm .finger-dot{background:var(--finger-lm)}.key.finger-lm.active,.key.finger-lm.pressed{background:var(--finger-lm-bg);border-color:var(--finger-lm);box-shadow:0 0 15px var(--finger-lm-glow)}.key.finger-li{border-color:var(--finger-li-dim)}.key.finger-li .finger-dot{background:var(--finger-li)}.key.finger-li.active,.key.finger-li.pressed{background:var(--finger-li-bg);border-color:var(--finger-li);box-shadow:0 0 15px var(--finger-li-glow)}.key.finger-ri{border-color:var(--finger-ri-dim)}.key.finger-ri .finger-dot{background:var(--finger-ri)}.key.finger-ri.active,.key.finger-ri.pressed{background:var(--finger-ri-bg);border-color:var(--finger-ri);box-shadow:0 0 15px var(--finger-ri-glow)}.key.finger-rm{border-color:var(--finger-rm-dim)}.key.finger-rm .finger-dot{background:var(--finger-rm)}.key.finger-rm.active,.key.finger-rm.pressed{background:var(--finger-rm-bg);border-color:var(--finger-rm);box-shadow:0 0 15px var(--finger-rm-glow)}.key.finger-rr{border-color:var(--finger-rr-dim)}.key.finger-rr .finger-dot{background:var(--finger-rr)}.key.finger-rr.active,.key.finger-rr.pressed{background:var(--finger-rr-bg);border-color:var(--finger-rr);box-shadow:0 0 15px var(--finger-rr-glow)}.key.finger-rp{border-color:var(--finger-rp-dim)}.key.finger-rp .finger-dot{background:var(--finger-rp)}.key.finger-rp.active,.key.finger-rp.pressed{background:var(--finger-rp-bg);border-color:var(--finger-rp);box-shadow:0 0 15px var(--finger-rp-glow)}.key.expected{opacity:1!important;background:var(--key-expected-bg)!important;border-color:var(--key-expected-border)!important;border-width:3px!important;box-shadow:0 0 18px var(--key-expected-glow),0 0 6px var(--key-expected-glow)!important;animation:keyPulse .7s ease-in-out infinite!important;transform:scale(1.05)!important}.key.expected .key-main{color:#1a1a1a!important;text-shadow:none!important;font-weight:700!important}.key.expected .key-qwerty{color:#5a3e00!important;font-weight:700!important}@keyframes keyPulse{0%,100%{box-shadow:0 0 20px var(--key-expected-glow);transform:scale(1)}50%{box-shadow:0 0 40px var(--key-expected-bg);transform:scale(1.05)}}.key.correct{background:var(--key-correct-bg)!important;border-color:var(--key-correct-border)!important;border-width:3px!important;box-shadow:0 0 24px var(--key-correct-glow)!important;transform:scale(1.06)!important;transition:background 50ms,box-shadow 50ms!important}.key.correct .key-main{color:var(--theme-invert)!important;text-shadow:0 0 8px var(--key-correct-border)!important;font-weight:700!important}.key.correct .key-qwerty{color:#86efac!important}.key.incorrect{background:var(--key-incorrect-bg)!important;border-color:var(--key-incorrect-border)!important;border-width:3px!important;box-shadow:0 0 24px var(--key-incorrect-glow)!important;animation:keyShake .35s ease-in-out!important;transition:background 50ms,box-shadow 50ms!important}.key.incorrect .key-main{color:var(--theme-invert)!important;text-shadow:0 0 8px var(--key-incorrect-border)!important;font-weight:700!important}.key.incorrect .key-qwerty{color:#fca5a5!important}@keyframes keyShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}.key.pressed{transform:scale(.95) translateY(2px);box-shadow:0 1px 3px rgba(0,0,0,.4)}.finger-dot{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;opacity:.9;box-shadow:0 0 6px currentColor;display:none}.finger-dot.visible{display:block}.key.expected .finger-dot{display:block}.finger-guide-hidden .finger-dot{display:none!important}.key:hover::before{content:attr(data-finger);position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:var(--tooltip-bg);color:var(--theme-invert);padding:4px 10px;border-radius:6px;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}.key:hover::before{opacity:1}.keyboard-controls{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-md)}.keyboard-toggle{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:var(--radius-sm);color:var(--text-color);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.keyboard-toggle:hover{background:var(--theme-card)}.keyboard-toggle.active{background:rgba(78,205,196,.2);border-color:var(--accent-secondary);color:var(--accent-secondary)}@keyframes keyAppear{0%{opacity:0;transform:scale(.8) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}.keyboard-row .key{animation:keyAppear .3s ease forwards;opacity:0}.keyboard-row:first-child .key{animation-delay:50ms}.keyboard-row:nth-child(2) .key{animation-delay:.1s}.keyboard-row:nth-child(3) .key{animation-delay:.15s}.keyboard-row:nth-child(4) .key{animation-delay:.2s}.keyboard-row:nth-child(5) .key{animation-delay:.25s}.mobile-keyboard-hint{display:none;text-align:center;padding:var(--spacing-lg);background:var(--theme-surface);border-radius:var(--radius-md);margin-top:var(--spacing-md)}@media (max-width:768px){.visual-keyboard{display:none}.mobile-keyboard-hint{display:block}.keyboard-controls{display:none}}.mini-keyboard{transform:scale(.7);transform-origin:center;opacity:.8}.mini-keyboard .key{min-width:40px;height:42px}.mini-keyboard .key-main{font-size:.9rem}