@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap);:root{--font-hindi:'Poppins',sans-serif;--font-accent:var(--theme-accent, #818CF8);--accent-primary:var(--font-accent);--accent-secondary:#4ECDC4;--accent-tertiary:#6C63FF;--accent-gold:#FFD93D;--accent-green:#25A55F;--accent-orange:#818CF8;--accent-correct:#48c78e;--accent-wrong:#ff6b6b;--gradient-hero:linear-gradient(135deg, var(--theme-card) 0%, var(--theme-surface) 100%);--gradient-card:linear-gradient(180deg, var(--theme-card) 0%, var(--theme-surface) 100%);--gradient-button:linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-dk) 100%);--gradient-xp:linear-gradient(90deg, #818CF8 0%, #6366F1 100%);--gradient-glow:radial-gradient(circle, var(--theme-glow) 0%, transparent 70%);--xp-glow:var(--theme-glow);--streak-fire:#FF6B35;--level-badge:var(--theme-accent-dk, #6366F1);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-xxl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:50%;--shadow-sm:0 2px 8px var(--boxshadow-color);--shadow-md:0 4px 16px var(--boxshadow-color);--shadow-lg:0 8px 32px var(--boxshadow-color);--shadow-glow:0 0 20px var(--xp-glow);--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:var(--theme-bg,var(--background-color));color:var(--text-color);min-height:100vh;line-height:1.6;overflow-x:hidden;transition:background-color .3s,color .3s}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;margin-bottom:var(--spacing-md)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}a{color:var(--accent-secondary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-primary)}.hindi-text{font-family:Poppins,sans-serif!important}.quick-start-card{cursor:pointer;transition:all var(--transition-normal)}.quick-start-card:hover{transform:translateY(-5px);border-color:var(--accent-secondary)!important;box-shadow:var(--shadow-lg)}.section-card{cursor:pointer;transition:all var(--transition-normal)}.section-card:hover{transform:translateY(-3px)}.tutorial-container{max-width:1170px;margin:0 auto;padding:var(--spacing-lg)}.tutorial-layout{display:grid;grid-template-columns:300px 1fr;gap:var(--spacing-lg);min-height:calc(100vh - 200px)}.tutorial-sidebar{display:flex;flex-direction:column;gap:var(--spacing-lg)}.font-switcher{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}.font-switch-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:50px;border:2px solid var(--fscolor,rgba(255,255,255,.15));background:rgba(255,255,255,.04);color:var(--text-color);text-decoration:none;font-size:.85rem;font-weight:600;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;white-space:nowrap}.font-switch-btn:hover{background:rgba(255,255,255,.1);border-color:var(--fscolor,rgba(255,255,255,.5));box-shadow:0 0 14px var(--fscolor,rgba(255,255,255,.3));transform:translateY(-2px);color:var(--text-color);text-decoration:none}.hub-btn{--fscolor:rgba(255,255,255,0.35)}.font-switch-icon{font-size:1rem;line-height:1}.profile-section{background:var(--theme-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}.profile-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.profile-avatar{width:60px;height:60px;border-radius:var(--radius-full);background:var(--gradient-button);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--theme-invert)}.profile-info h3{margin-bottom:0;font-size:1.1rem}.level-badge{display:inline-block;background:var(--level-badge);color:var(--theme-invert);padding:2px 10px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.level-title{color:var(--accent-gold);font-size:.85rem}.xp-section{margin-top:var(--spacing-md)}.xp-label{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:var(--spacing-xs)}.xp-current{color:var(--accent-gold);font-weight:600}.xp-next{color:var(--text-color);opacity:.7}.xp-bar{height:12px;background:var(--border-color);border-radius:var(--radius-sm);overflow:hidden;position:relative}.xp-fill{height:100%;background:var(--gradient-xp);border-radius:var(--radius-sm);transition:width var(--transition-slow);position:relative}.xp-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:xpShimmer 2s infinite}@keyframes xpShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm);margin-top:var(--spacing-md)}.stat-item{background:var(--theme-surface);border:1px solid var(--border-color);padding:var(--spacing-sm);border-radius:var(--radius-sm);text-align:center}.stat-value{font-size:1.25rem;font-weight:700;color:var(--accent-primary)}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;opacity:.7}.streak-item .stat-value{color:var(--streak-fire)}.lesson-selector{background:var(--theme-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);flex:1;overflow-y:auto;max-height:500px}.lesson-selector h4{margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm)}.section-group{margin-bottom:var(--spacing-lg)}.section-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--theme-surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);cursor:pointer;transition:background var(--transition-fast)}.section-header:hover{background:var(--theme-card)}.section-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1rem}.section-icon.section-1{background:var(--accent-primary)}.section-icon.section-2{background:var(--accent-secondary)}.section-icon.section-3{background:var(--accent-tertiary)}.section-icon.section-4{background:var(--accent-green)}.section-icon.section-5{background:var(--accent-gold);color:#333}.section-icon.section-6{background:var(--accent-orange)}.section-title{flex:1;font-size:.9rem;font-weight:600}.section-progress{font-size:.75rem;opacity:.7}.lesson-list{display:none;flex-direction:column;gap:var(--spacing-xs);padding-left:var(--spacing-lg)}.lesson-list.active{display:flex}.lesson-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--theme-surface);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:2px solid var(--border-color)}.lesson-item:hover:not(.locked){background:var(--theme-card);border-color:var(--accent-secondary)}.lesson-item.active{background:rgba(129,140,248,.2);border-color:var(--accent-primary)}.lesson-item.completed{background:rgba(37,165,95,.15);border-color:var(--accent-green)}.lesson-item.locked{opacity:.5;cursor:not-allowed}.lesson-number{width:28px;height:28px;border-radius:var(--radius-full);background:var(--border-color);color:var(--a-color);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}.lesson-item.completed .lesson-number{background:var(--accent-green)}.lesson-item.locked .lesson-number{background:var(--border-color);opacity:.5}.lesson-name{flex:1;font-size:.85rem}.lesson-status{font-size:1rem}.tutorial-main{display:flex;flex-direction:column;gap:var(--spacing-lg)}.typing-area{background:var(--theme-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}.typing-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.lesson-title{display:flex;align-items:center;gap:var(--spacing-md)}.lesson-title h2{margin-bottom:0}.lesson-badge{background:var(--accent-secondary);color:var(--theme-invert);padding:4px 12px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600}.live-stats{display:flex;gap:var(--spacing-lg)}.live-stat{text-align:center}.live-stat-value{font-size:1.5rem;font-weight:700;color:var(--accent-primary)}.live-stat-label{font-size:.7rem;text-transform:uppercase;opacity:.7}.character-display{background:var(--theme-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);min-height:80px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.character-sequence{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;font-family:Poppins,sans-serif;font-size:2rem;line-height:1.2}.char{display:inline-flex;align-items:center;justify-content:center;width:40px;height:50px;border-radius:var(--radius-sm);transition:all var(--transition-fast);position:relative}.char.active{background:rgba(255,217,61,.25);border:2px solid var(--accent-gold);transform:scale(1.1);box-shadow:0 0 10px rgba(255,217,61,.5)}.char.active::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:30px;height:3px;background:var(--accent-primary);border-radius:2px;animation:cursorBlink .8s infinite}@keyframes cursorBlink{0%,50%{opacity:1}100%,51%{opacity:0}}.char.correct{color:var(--accent-correct);background:rgba(37,165,95,.25)}.char.incorrect{color:var(--accent-wrong);background:rgba(255,89,90,.35);border:2px solid rgba(255,89,90,.6);animation:shake .3s ease-in-out}.char.expected{border:2px dashed var(--accent-gold);animation:pulse 1s infinite}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,217,61,.4)}50%{box-shadow:0 0 0 8px rgba(255,217,61,0)}}.hidden-input{position:absolute;opacity:0;pointer-events:none}.lesson-progress{display:flex;justify-content:space-between;font-size:.85rem;opacity:.7;margin-bottom:var(--spacing-md)}.keyboard-section{background:var(--theme-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-md)}.keyboard-section h4{margin-bottom:var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-sm)}.action-buttons{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.btn{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-family:Poppins,sans-serif;font-weight:600;font-size:.9rem;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-sm)}.btn-primary{background:var(--gradient-button);color:var(--theme-invert);box-shadow:var(--shadow-sm)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--theme-surface);color:var(--text-color);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--theme-card)}.btn-success{background:var(--accent-green);color:var(--theme-invert)}.results-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.results-overlay.active{display:flex}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.results-card{background:var(--theme-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:var(--spacing-xxl);max-width:500px;width:90%;text-align:center;animation:slideUp .4s ease;position:relative;overflow:hidden}@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.results-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--gradient-xp)}.results-icon{font-size:4rem;margin-bottom:var(--spacing-md)}.results-title{font-size:1.75rem;margin-bottom:var(--spacing-sm)}.results-subtitle{opacity:.7;margin-bottom:var(--spacing-lg)}.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.result-stat{background:var(--theme-surface);border:1px solid var(--border-color);padding:var(--spacing-md);border-radius:var(--radius-md)}.result-stat-value{font-size:1.75rem;font-weight:700;color:var(--accent-gold)}.result-stat-label{font-size:.75rem;text-transform:uppercase;opacity:.7}.xp-earned{background:rgba(255,217,61,.1);border:2px solid var(--accent-gold);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.xp-earned-value{font-size:2rem;font-weight:800;color:var(--accent-gold)}.xp-earned-label{font-size:.85rem;opacity:.7}.new-achievement{background:linear-gradient(135deg,var(--accent-tertiary),var(--accent-primary));border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);display:none}.new-achievement.unlocked{display:block;animation:achievementPop .5s ease}@keyframes achievementPop{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.achievement-badge{font-size:2rem;margin-bottom:var(--spacing-xs)}.achievement-name{font-weight:600;color:var(--theme-invert)}.results-actions{display:flex;gap:var(--spacing-md);justify-content:center}.tutorial-hero{background:var(--theme-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:var(--spacing-xl) var(--spacing-xxl);margin-bottom:var(--spacing-xl);text-align:center;position:relative;overflow:hidden;transition:background-color .3s}.tutorial-hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--gradient-glow) 0,transparent 50%);animation:heroGlow 10s linear infinite}@keyframes heroGlow{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.tutorial-hero h1{position:relative;font-size:3rem;line-height:1.5;padding-top:.2em;margin-bottom:var(--spacing-md);background:linear-gradient(135deg,var(--accent-primary),var(--accent-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tutorial-hero p{position:relative;font-size:1.1rem;opacity:.8;max-width:100%;margin:var(--spacing-md) 0 0 0;text-align:left}.quick-start{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-xl)}.quick-start-card{background:var(--theme-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;cursor:pointer;transition:all var(--transition-normal);border:2px solid var(--border-color)}.quick-start-card:hover{transform:translateY(-5px);border-color:var(--accent-secondary);box-shadow:var(--shadow-lg)}.quick-start-icon{font-size:3rem;margin-bottom:var(--spacing-md)}.quick-start-card h3{margin-bottom:var(--spacing-sm)}.quick-start-card p{font-size:.9rem;opacity:.7}@media (max-width:1024px){.tutorial-layout{grid-template-columns:1fr}.tutorial-sidebar{flex-direction:row;flex-wrap:wrap}.profile-section{flex:1;min-width:250px}.lesson-selector{max-height:300px;flex:2;min-width:300px}.keyboard-section{display:none}}@media (max-width:768px){.tutorial-container{padding:var(--spacing-md)}.tutorial-hero h1{font-size:2rem;line-height:1.5}.character-sequence{font-size:1.8rem}.char{width:35px;height:45px}.live-stats{gap:var(--spacing-md)}.results-stats{grid-template-columns:repeat(2,1fr)}.action-buttons{flex-wrap:wrap}.btn{flex:1;justify-content:center;min-width:120px}}@media (max-width:480px){.profile-section{min-width:100%}.stats-grid{grid-template-columns:repeat(4,1fr)}.stat-item{padding:var(--spacing-xs)}.stat-value{font-size:1rem}}.text-center{text-align:center}.text-gold{color:var(--accent-gold)}.text-green{color:var(--accent-green)}.text-primary{color:var(--accent-primary)}.text-secondary{color:var(--accent-secondary)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.hidden{display:none!important}.visible{display:block!important}