.input-mode-switcher{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px}.mode-btn-split-group{display:flex;gap:1px;background:var(--border);border-radius:8px;padding:0;overflow:hidden}.mode-btn-split-group .mode-btn{border-radius:0;padding:8px 10px}.mode-btn-split-group .split-left{border-top-left-radius:8px;border-bottom-left-radius:8px}.mode-btn-split-group .split-right{border-top-right-radius:8px;border-bottom-right-radius:8px}.mode-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:none;background:0 0;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4, 0, .2, 1);color:var(--text-secondary);font-size:.85rem;font-weight:500;text-decoration:none}.mode-btn:hover{background:var(--highlight);color:var(--text-primary)}.mode-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px var(--primary-glow)}.mode-icon{font-size:.9rem;font-weight:700;min-width:24px;text-align:center}.mode-btn[data-mode=preeti] .mode-icon{font-family:Preeti,sans-serif;font-size:1.1rem}.mode-btn[data-mode=unicode] .mode-icon,.mode-btn[data-mode=unicode_roman] .mode-icon{font-family:'Tiro Devanagari Hindi',serif}.mode-label{font-family:Inter,sans-serif}@media (max-width:768px){.input-mode-switcher{padding:3px;gap:2px}.mode-btn{padding:6px 8px;gap:4px}.mode-label{display:none}.mode-icon{min-width:20px;font-size:.85rem}}@media (max-width:480px){.input-mode-switcher{border-radius:8px}.mode-btn{padding:5px 6px;border-radius:6px}}body[data-input-mode=unicode] .keyboard-container::before{content:'Unicode Traditional';position:absolute;top:-24px;right:10px;font-size:.7rem;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}body[data-input-mode=unicode_roman] .keyboard-container::before{content:'Unicode Romanized';position:absolute;top:-24px;right:10px;font-size:.7rem;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}body[data-input-mode=english] .keyboard-container::before{content:'English';position:absolute;top:-24px;right:10px;font-size:.7rem;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}body[data-input-mode=preeti] .keyboard-container::before{content:''}body[data-input-mode=preeti] #free-typing-area,body[data-input-mode=preeti] #typing-input{font-family:Preeti,sans-serif!important}body[data-input-mode=unicode] #free-typing-area,body[data-input-mode=unicode] #typing-input,body[data-input-mode=unicode_roman] #free-typing-area,body[data-input-mode=unicode_roman] #typing-input{font-family:Inter,Arial,sans-serif!important}body[data-input-mode=english] #free-typing-area,body[data-input-mode=english] #typing-input{font-family:Inter,Arial,sans-serif!important}body[data-input-mode=preeti] .target-text{font-family:Preeti,sans-serif}body[data-input-mode=unicode] .target-text,body[data-input-mode=unicode_roman] .target-text{font-family:Inter,Arial,sans-serif}body[data-input-mode=english] .target-text{font-family:Inter,Arial,sans-serif}.unicode-display{font-family:Inter,Arial,sans-serif!important;font-size:1rem}.english-font{font-family:Inter,Arial,sans-serif!important}body[data-input-mode=unicode] #text-display,body[data-input-mode=unicode] .char,body[data-input-mode=unicode] .ghost-layer,body[data-input-mode=unicode] .layers-container,body[data-input-mode=unicode] .typed-layer,body[data-input-mode=unicode_roman] #text-display,body[data-input-mode=unicode_roman] .char,body[data-input-mode=unicode_roman] .ghost-layer,body[data-input-mode=unicode_roman] .layers-container,body[data-input-mode=unicode_roman] .typed-layer{font-family:Inter,Arial,sans-serif!important}body[data-input-mode=english] #text-display,body[data-input-mode=preeti] #text-display,body[data-input-mode=unicode] #text-display,body[data-input-mode=unicode_roman] #text-display{display:flex;flex-direction:column;justify-content:center}body[data-input-mode=english] .layers-container,body[data-input-mode=preeti] .layers-container,body[data-input-mode=unicode] .layers-container,body[data-input-mode=unicode_roman] .layers-container{padding:.5rem 2rem;margin:0 auto}body[data-input-mode=english] #text-display,body[data-input-mode=english] .char,body[data-input-mode=english] .ghost-layer,body[data-input-mode=english] .layers-container,body[data-input-mode=english] .typed-layer{font-family:Inter,Arial,sans-serif!important}body[data-input-mode=preeti] .char{font-family:Preeti,sans-serif!important}body:not([data-input-mode=preeti]) #alt-helper-trigger,body:not([data-input-mode=preeti]) #learn-mode-alt-trigger,body:not([data-input-mode=preeti]) .alt-helper-btn{display:none!important}