.header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);padding:20px;text-align:center;box-shadow:0 4px 12px #ff6b3533}.header-content{max-width:1200px;margin:0 auto}.logo{display:flex;align-items:center;justify-content:center;gap:12px}.logo-icon{font-size:48px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.logo-text{font-size:32px;font-weight:800;color:#fff;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.tagline{color:#ffffffe6;font-size:16px;margin-top:4px;font-weight:600}@media(max-width:768px){.logo-icon{font-size:36px}.logo-text{font-size:24px}.tagline{font-size:14px}}.navigation{position:fixed;bottom:0;left:0;right:0;background:#fff;display:flex;justify-content:space-around;padding:8px 16px;box-shadow:0 -4px 20px #0000001a;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;padding:6px 8px;border-radius:12px;background:transparent;color:var(--text-secondary);transition:all .2s ease;gap:2px;flex:1;min-width:0}.nav-item:hover{background:var(--background-warm)}.nav-item.active{color:var(--primary);background:#ff6b351a}.nav-icon{font-size:18px}.nav-label{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:480px){.navigation{padding:6px 8px}.nav-item{padding:4px}.nav-icon{font-size:16px}.nav-label{font-size:9px}}.alphabet-card{background:#fff;border-radius:16px;padding:20px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #00000014;position:relative;display:flex;flex-direction:column;align-items:center}.alphabet-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #ff6b3526}.card-content{display:flex;flex-direction:column;align-items:center;gap:8px}.kannada-letter{font-size:48px;font-weight:700;color:var(--primary);line-height:1.2}.hindi-letter{font-size:24px;color:var(--text-secondary)}.letter-type{font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}.letter-type.vowel{background:#4ecdc426;color:var(--secondary)}.letter-type.consonant{background:#ff6b3526;color:var(--primary)}.hear-button{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:var(--background-warm);display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s ease}.hear-button:hover{background:var(--primary);transform:scale(1.1)}@media(max-width:768px){.alphabet-card{padding:16px}.kannada-letter{font-size:40px}.hindi-letter{font-size:20px}}.alphabets-page{padding-bottom:40px}.alphabet-section{margin-bottom:40px}.section-title{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:20px}.section-icon{font-size:28px}.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}@media(max-width:768px){.alphabet-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.section-title{font-size:20px}}.word-card{background:#fff;border-radius:16px;overflow:hidden;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #00000014;position:relative}.word-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #ff6b3526}.word-image-container{width:100%;height:140px;overflow:hidden;background:var(--background-warm)}.word-image{width:100%;height:100%;object-fit:cover}.word-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%)}.word-image-placeholder span{font-size:48px;color:#fff}.word-info{padding:16px;text-align:center}.word-kannada{font-size:24px;font-weight:700;color:var(--primary);margin:0 0 4px}.word-hindi{font-size:16px;color:var(--text-secondary);margin:0 0 4px}.word-english{font-size:14px;color:var(--text-muted);margin:0;font-weight:600}.word-hear-button{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 8px #0000001a;transition:all .2s ease}.word-hear-button:hover{background:var(--primary);transform:scale(1.1)}@media(max-width:768px){.word-image-container{height:120px}.word-kannada{font-size:20px}}.words-page{padding-bottom:40px}.page-title{display:flex;align-items:center;gap:12px;font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.title-icon{font-size:32px}.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}@media(max-width:768px){.words-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.page-title{font-size:24px}}.practice-page{max-width:600px;margin:0 auto}.letter-selector{background:#fff;border-radius:24px;padding:32px;box-shadow:0 4px 16px #0000000f}.selector-prompt{font-size:18px;color:var(--text-secondary);text-align:center;margin-bottom:24px}.letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:12px}.letter-option{aspect-ratio:1;font-size:28px;font-weight:600;color:var(--primary);background:var(--background-warm);border-radius:12px;transition:all .2s ease}.letter-option:hover{background:var(--primary);color:#fff;transform:scale(1.05)}.practice-area{display:flex;flex-direction:column;gap:24px}.reference-section{background:#fff;border-radius:20px;padding:24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 16px #0000000f}.reference-letter{display:flex;align-items:baseline;gap:16px}.ref-kannada{font-size:72px;font-weight:700;color:var(--primary);line-height:1}.ref-hindi{font-size:32px;color:var(--text-secondary)}.reference-actions{display:flex;gap:12px}.action-btn{padding:12px 20px;background:var(--primary);color:#fff;font-size:14px;font-weight:600;border-radius:12px;transition:all .2s ease}.action-btn:hover{transform:scale(1.05)}.action-btn.secondary{background:var(--background-warm);color:var(--text-secondary)}.action-btn.secondary:hover{background:#eee}.canvas-section{background:#fff;border-radius:20px;padding:24px;box-shadow:0 4px 16px #0000000f}.canvas-label{font-size:16px;color:var(--text-secondary);margin-bottom:16px;text-align:center}.canvas-container{display:flex;justify-content:center;margin-bottom:20px}.drawing-canvas{background:var(--background-warm);border-radius:16px;border:3px dashed #ddd;cursor:crosshair;touch-action:none;max-width:100%}.canvas-actions{display:flex;justify-content:center;gap:16px}.clear-btn{padding:14px 28px;background:#f5f5f5;color:var(--text-secondary);font-size:16px;font-weight:600;border-radius:14px;transition:all .2s ease}.clear-btn:hover{background:#eee}.check-btn{padding:14px 32px;background:var(--primary);color:#fff;font-size:16px;font-weight:600;border-radius:14px;transition:all .2s ease}.check-btn:hover{background:var(--primary-light);transform:scale(1.02)}.result-card{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);border-radius:20px;padding:32px;display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;animation:fadeIn .3s ease-out}.result-emoji{font-size:48px}.result-score{font-size:48px;font-weight:800}.result-text{font-size:20px;font-weight:600}.check-btn:disabled{opacity:.5;cursor:not-allowed}.check-btn:disabled:hover{transform:none}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.score-modal{background:#fff;border-radius:28px;padding:40px;text-align:center;max-width:340px;width:90%;position:relative;animation:scaleIn .3s ease-out;box-shadow:0 20px 60px #0000004d}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#f5f5f5;font-size:24px;color:#999;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.modal-close:hover{background:#eee;color:#666}.modal-emoji{font-size:72px;margin-bottom:16px}.modal-score{font-size:64px;font-weight:800;margin-bottom:8px}.modal-text{font-size:24px;font-weight:600;color:var(--text-primary);margin-bottom:28px}.modal-actions{display:flex;gap:12px;justify-content:center}.modal-btn{padding:14px 28px;font-size:16px;font-weight:600;border-radius:14px;transition:all .2s ease}.modal-btn.primary{background:var(--primary);color:#fff}.modal-btn.primary:hover{background:var(--primary-light);transform:scale(1.02)}.modal-btn.secondary{background:#f5f5f5;color:var(--text-secondary)}.modal-btn.secondary:hover{background:#eee}@media(max-width:768px){.reference-section{flex-direction:column;gap:20px;text-align:center}.reference-actions{flex-wrap:wrap;justify-content:center}.ref-kannada{font-size:56px}.ref-hindi{font-size:24px}.canvas-actions{flex-direction:column}.clear-btn,.check-btn{width:100%}.score-modal{padding:32px 24px}.modal-emoji{font-size:56px}.modal-score{font-size:48px}.modal-actions{flex-direction:column}.modal-btn{width:100%}}.translate-page{max-width:600px;margin:0 auto;padding-bottom:40px}.page-description{color:var(--text-secondary);font-size:16px;margin-bottom:24px}.translate-card{background:#fff;border-radius:24px;padding:28px;box-shadow:0 4px 16px #0000000f;margin-bottom:24px}.input-section{margin-bottom:20px}.input-label{display:block;font-size:14px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.translate-input{width:100%;padding:16px;font-size:18px;border:2px solid #eee;border-radius:14px;resize:none;font-family:inherit;transition:border-color .2s ease}.translate-input:focus{outline:none;border-color:var(--primary)}.translate-input::placeholder{color:#bbb}.translate-btn{width:100%;padding:16px 28px;background:var(--primary);color:#fff;font-size:18px;font-weight:600;border-radius:14px;transition:all .2s ease;margin-bottom:20px}.translate-btn:hover:not(:disabled){background:var(--primary-light);transform:scale(1.02)}.translate-btn:disabled{opacity:.7;cursor:not-allowed}.error-message{background:#fff0f0;color:#d32f2f;padding:14px 18px;border-radius:12px;font-size:15px;margin-bottom:20px}.result-section{margin-top:24px;padding-top:24px;border-top:2px solid #f0f0f0}.result-box{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--background-warm);padding:20px;border-radius:14px}.kannada-text{font-size:32px;font-weight:600;color:var(--primary);flex:1;word-break:break-word}.hear-btn{display:flex;align-items:center;gap:8px;padding:14px 24px;background:var(--primary);color:#fff;font-size:16px;font-weight:600;border-radius:12px;transition:all .2s ease;flex-shrink:0}.hear-btn:hover{background:var(--primary-light);transform:scale(1.05)}.tips-card{background:#4ecdc41a;border-radius:16px;padding:20px 24px}.tips-card h3{font-size:16px;font-weight:700;color:var(--secondary);margin:0 0 12px}.tips-card ul{margin:0;padding-left:20px}.tips-card li{font-size:14px;color:var(--text-secondary);margin-bottom:6px}.tips-card li:last-child{margin-bottom:0}.pronunciation-section{display:flex;align-items:center;gap:10px;margin-top:16px;padding:14px 18px;background:#f8f9fa;border-radius:12px;border-left:4px solid var(--secondary)}.pronunciation-label{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.pronunciation-text{font-size:18px;font-weight:500;color:var(--text-secondary);font-style:italic}@media(max-width:768px){.translate-card{padding:20px}.result-box{flex-direction:column;align-items:stretch;text-align:center}.kannada-text{font-size:28px;margin-bottom:12px}.hear-btn{justify-content:center}.pronunciation-section{flex-direction:column;align-items:flex-start;gap:6px}}.numbers-page{padding:20px 20px 100px}.range-selector{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;justify-content:center}.range-btn{padding:10px 16px;border:2px solid #FF6B35;background:#fff;border-radius:20px;color:#ff6b35;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.range-btn:hover{background:#fff0eb}.range-btn.active{background:#ff6b35;color:#fff}.numbers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:24px}.number-card{display:flex;flex-direction:column;align-items:center;padding:16px 12px;background:#fff;border:none;border-radius:16px;box-shadow:0 2px 8px #00000014;cursor:pointer;transition:all .2s ease;position:relative}.number-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #ff6b3533}.number-card:active{transform:scale(.98)}.number-card.speaking{background:linear-gradient(135deg,#ff6b35,#ff8f6b);box-shadow:0 4px 20px #ff6b3566}.number-card.speaking .number-digit,.number-card.speaking .number-kannada,.number-card.speaking .number-pronunciation{color:#fff}.number-digit{font-size:28px;font-weight:800;color:#ff6b35;line-height:1}.number-kannada{font-size:24px;font-weight:700;color:#333;margin-top:8px}.number-pronunciation{font-size:12px;color:#888;margin-top:4px;text-transform:lowercase}.speak-indicator{position:absolute;top:8px;right:8px;font-size:14px;opacity:.6}.number-card.speaking .speak-indicator{opacity:1;animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.2)}}.instruction-text{text-align:center;color:#888;font-size:14px;margin-top:16px}@media(max-width:480px){.numbers-grid{grid-template-columns:repeat(3,1fr);gap:8px}.number-card{padding:12px 8px}.number-digit{font-size:22px}.number-kannada{font-size:18px}.number-pronunciation{font-size:10px}.range-btn{padding:8px 12px;font-size:12px}}.sentences-page{padding:20px 20px 100px}.category-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;justify-content:center}.category-tab{display:flex;align-items:center;gap:6px;padding:10px 16px;border:2px solid #FF6B35;background:#fff;border-radius:25px;color:#ff6b35;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.category-tab:hover{background:#fff0eb}.category-tab.active{background:#ff6b35;color:#fff}.tab-icon{font-size:16px}.tab-label{white-space:nowrap}.sentences-list{display:flex;flex-direction:column;gap:12px}.sentence-card{background:#fff;border-radius:16px;box-shadow:0 2px 8px #00000014;overflow:hidden;transition:all .2s ease}.sentence-card:hover{box-shadow:0 4px 16px #0000001f}.sentence-card.speaking{background:linear-gradient(135deg,#fff0eb,#ffe4db);box-shadow:0 4px 20px #ff6b3533}.sentence-main{display:flex;align-items:center;padding:16px;cursor:pointer}.sentence-content{flex:1}.sentence-english{font-size:16px;font-weight:600;color:#333;margin:0 0 6px}.sentence-kannada{font-size:20px;font-weight:700;color:#ff6b35;margin:0}.speak-btn{width:48px;height:48px;border:none;background:#fff0eb;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.speak-btn:hover{background:#ffe4db;transform:scale(1.05)}.speak-btn:active{transform:scale(.95)}.sentence-card.speaking .speak-btn{background:#ff6b35;animation:pulse .5s ease-in-out infinite alternate}.sentence-details{padding:0 16px 16px;border-top:1px solid #f0f0f0;background:#fafafa}.pronunciation-row{display:flex;align-items:center;gap:8px;padding-top:12px}.pronunciation-row .label{font-size:12px;color:#888;font-weight:500}.pronunciation-row .value{font-size:14px;color:#555;font-style:italic}.instruction-text{text-align:center;color:#888;font-size:14px;margin-top:24px;line-height:1.5}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@media(max-width:480px){.category-tabs{gap:6px}.category-tab{padding:8px 12px;font-size:12px}.tab-icon,.sentence-english{font-size:14px}.sentence-kannada{font-size:18px}.speak-btn{width:44px;height:44px;font-size:20px}}.alphabet-detail{max-width:800px;margin:0 auto}.back-button{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border-radius:12px;font-size:16px;font-weight:600;color:var(--text-secondary);margin-bottom:24px;transition:all .2s ease;box-shadow:0 2px 8px #00000014}.back-button:hover{background:var(--primary);color:#fff}.letter-hero{background:#fff;border-radius:24px;padding:40px;display:flex;align-items:center;gap:40px;margin-bottom:32px;box-shadow:0 8px 32px #00000014}.letter-display{display:flex;flex-direction:column;align-items:center;gap:8px}.main-letter{font-size:120px;font-weight:700;color:var(--primary);line-height:1}.hindi-equivalent{font-size:48px;color:var(--text-secondary)}.letter-info{flex:1}.type-badge{display:inline-block;padding:8px 20px;border-radius:25px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}.type-badge.vowel{background:#4ecdc426;color:var(--secondary)}.type-badge.consonant{background:#ff6b3526;color:var(--primary)}.pronunciation{font-size:18px;color:var(--text-secondary);margin-bottom:20px}.speak-button{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--primary);color:#fff;font-size:16px;font-weight:600;border-radius:14px;transition:all .2s ease}.speak-button:hover{background:var(--primary-light);transform:scale(1.05)}.words-section{background:#fff;border-radius:24px;padding:32px;box-shadow:0 4px 16px #0000000f}.words-title{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:24px}.words-list{display:flex;flex-direction:column;gap:16px}.word-item{display:flex;align-items:center;gap:20px;padding:16px;background:var(--background-warm);border-radius:16px;cursor:pointer;transition:all .2s ease}.word-item:hover{background:#ff6b351a;transform:translate(8px)}.word-image-wrapper{width:80px;height:80px;border-radius:12px;overflow:hidden;flex-shrink:0}.word-image-wrapper img{width:100%;height:100%;object-fit:cover}.placeholder-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:32px}.word-details{flex:1}.word-details .word-kannada{font-size:24px;font-weight:700;color:var(--primary);margin:0 0 4px}.word-translations{font-size:16px;color:var(--text-secondary);margin:0}.word-speak{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 2px 8px #0000001a;transition:all .2s ease}.word-speak:hover{background:var(--primary);transform:scale(1.1)}.not-found{text-align:center;padding:60px 20px}.not-found p{font-size:18px;color:var(--text-secondary);margin-bottom:20px}.not-found button{padding:12px 24px;background:var(--primary);color:#fff;border-radius:12px;font-weight:600}@media(max-width:768px){.letter-hero{flex-direction:column;padding:32px 24px;text-align:center}.main-letter{font-size:80px}.hindi-equivalent{font-size:36px}.word-image-wrapper{width:60px;height:60px}.word-details .word-kannada{font-size:20px}}.word-detail{max-width:800px;margin:0 auto}.word-hero{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 32px #00000014}.word-image-large{width:100%;height:300px;overflow:hidden}.word-image-large img{width:100%;height:100%;object-fit:cover}.placeholder-large{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:120px}.word-content{padding:32px}.word-main{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.word-kannada-large{font-size:56px;font-weight:800;color:var(--primary);margin:0}.speak-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--primary);color:#fff;font-size:16px;font-weight:600;border-radius:14px;transition:all .2s ease;flex-shrink:0}.speak-btn:hover{background:var(--primary-light);transform:scale(1.05)}.translations-card{background:var(--background-warm);border-radius:16px;padding:24px;margin-bottom:24px}.translation-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.translation-row:not(:last-child){border-bottom:1px solid rgba(0,0,0,.08)}.lang-label{font-size:14px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.lang-value{font-size:24px;font-weight:700;color:var(--text-primary)}.alphabet-link{display:flex;align-items:center;gap:16px;padding:20px;background:#4ecdc41a;border-radius:16px}.link-label{font-size:16px;color:var(--text-secondary)}.link-letter{font-size:40px;font-weight:700;color:var(--secondary)}@media(max-width:768px){.word-image-large{height:220px}.word-content{padding:24px}.word-main{flex-direction:column;align-items:flex-start}.word-kannada-large{font-size:40px}.lang-value{font-size:20px}}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:20px 20px 80px;max-width:1200px;margin:0 auto;width:100%}@media(max-width:768px){.main-content{padding:16px 16px 80px}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #FF6B35;--primary-light: #FF8F66;--secondary: #4ECDC4;--accent: #FFE66D;--background-warm: #FFF8F3;--surface: #FFFFFF;--text-primary: #2D3436;--text-secondary: #636E72;--text-muted: #B2BEC3;--success: #00B894;--error: #FF7675}body{font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--background-warm);color:var(--text-primary);min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer;border:none;outline:none}img{max-width:100%;height:auto}.container{max-width:1200px;margin:0 auto;padding:0 20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.fade-in{animation:fadeIn .4s ease-out forwards}.bounce-hover:hover{animation:bounce .3s ease-in-out}