@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap";:root{--bg-color: #FAFBFC;--text-color: #111827;--primary: #6366F1;--secondary: #8B5CF6;--subtle: #9CA3AF;--correct: #10B981;--incorrect: #EF4444;--cursor: #6366F1;--card-bg: #FFFFFF;--header-bg: #FFFFFF;--keyboard-bg: #F3F4F6;--key-bg: #FFFFFF}[data-theme=dark]{--bg-color: #0F172A;--text-color: #F8FAFC;--primary: #818CF8;--secondary: #A78BFA;--subtle: #94A3B8;--correct: #34D399;--incorrect: #F87171;--cursor: #818CF8;--card-bg: #1E293B;--header-bg: #1E293B;--keyboard-bg: #334155;--key-bg: #1E293B}body{margin:0;padding:0;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--bg-color);color:var(--text-color);transition:all .3s ease;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}button{font-family:inherit;cursor:pointer}:root{--bg-primary: #FAFBFC;--bg-secondary: #FFFFFF;--bg-tertiary: #F3F4F6;--text-primary: #111827;--text-secondary: #6B7280;--text-tertiary: #9CA3AF;--accent-primary: #6366F1;--accent-primary-hover: #4F46E5;--accent-secondary: #8B5CF6;--accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--success: #10B981;--error: #EF4444;--warning: #F59E0B;--border-light: #E5E7EB;--border-medium: #D1D5DB;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-primary: #0F172A;--bg-secondary: #1E293B;--bg-tertiary: #334155;--text-primary: #F8FAFC;--text-secondary: #CBD5E1;--text-tertiary: #94A3B8;--accent-primary: #818CF8;--accent-primary-hover: #6366F1;--accent-secondary: #A78BFA;--accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--success: #34D399;--error: #F87171;--warning: #FBBF24;--border-light: #334155;--border-medium: #475569;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-base),color var(--transition-base)}button{font-family:inherit;cursor:pointer;border:none;outline:none}a{text-decoration:none;color:inherit}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:2rem 1.5rem}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border-light);padding:1rem 2rem;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffc}[data-theme=dark] .header{background:#1e293bcc}.header-container{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:700;color:var(--accent-primary);transition:transform var(--transition-fast)}.logo:hover{transform:translateY(-2px)}.logo-icon{font-size:1.5rem}nav{display:flex;align-items:center;gap:1.5rem}.nav-link{font-weight:500;color:var(--text-secondary);transition:color var(--transition-fast);position:relative}.nav-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent-primary);transition:width var(--transition-base)}.nav-link:hover{color:var(--accent-primary)}.nav-link:hover:after{width:100%}.btn{padding:.625rem 1.25rem;border-radius:var(--radius-md);font-weight:500;font-size:.875rem;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:.5rem}.btn-primary{background:var(--accent-primary);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--accent-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:var(--border-medium)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{background:var(--bg-tertiary);color:var(--text-primary)}.theme-toggle{width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.theme-toggle:hover{background:var(--accent-primary);color:#fff;transform:rotate(180deg)}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-light);padding:2rem;text-align:center;color:var(--text-tertiary);font-size:.875rem}.dashboard-page{max-width:900px;margin:0 auto}.stats-header{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:3rem}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1.5rem;display:flex;align-items:center;gap:1rem;transition:all var(--transition-base)}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-primary)}.stat-icon-wrapper{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem}.stat-icon-wrapper.trophy{background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#fff}.stat-icon-wrapper.speed{background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#fff}.stat-icon-wrapper.stars{background:linear-gradient(135deg,#f472b6,#ec4899);color:#fff}.stat-content{flex:1}.stat-value{font-size:1.75rem;font-weight:700;color:var(--text-primary);line-height:1}.stat-label{font-size:.75rem;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-top:.25rem}.course-map{position:relative}.chapter-section{margin-bottom:3rem}.chapter-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.chapter-number{width:40px;height:40px;border-radius:50%;background:var(--accent-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;box-shadow:var(--shadow-md)}.chapter-title{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.lessons-grid{display:grid;gap:1rem}.lesson-card{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1.25rem;display:flex;align-items:center;gap:1rem;cursor:pointer;transition:all var(--transition-base)}.lesson-card:hover{transform:translate(8px);box-shadow:var(--shadow-md);border-color:var(--accent-primary)}.lesson-card.locked{opacity:.5;cursor:not-allowed}.lesson-card.locked:hover{transform:none}.lesson-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--accent-primary);font-size:1.125rem;transition:all var(--transition-fast)}.lesson-card:hover .lesson-icon{background:var(--accent-primary);color:#fff;transform:scale(1.1)}.lesson-info{flex:1}.lesson-title{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.lesson-stars{display:flex;gap:.25rem;color:#fcd34d;font-size:.875rem}.lesson-page{max-width:900px;margin:0 auto}.lesson-header-bar{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;box-shadow:var(--shadow-sm)}.lesson-stats{display:flex;gap:2rem}.stat-item{text-align:center}.stat-item .stat-value{font-size:1.5rem;font-weight:700;color:var(--accent-primary)}.stat-item .stat-label{font-size:.75rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.text-area-container{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:3rem 2rem;position:relative;box-shadow:var(--shadow-lg);margin-bottom:2rem}.lesson-progress-bar{position:absolute;top:1.5rem;left:2rem;right:2rem;height:6px;background:var(--bg-tertiary);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--accent-gradient);transition:width var(--transition-base);border-radius:999px}.text-display-cards{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}.char-card{width:64px;height:64px;border:2px solid var(--border-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:600;color:var(--text-primary);background:var(--bg-primary);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.char-card.current{border-color:var(--accent-primary);border-width:3px;box-shadow:0 0 0 3px #6366f11a,var(--shadow-md)}.char-card.current.error{border-color:var(--error);box-shadow:0 0 0 3px #ef44441a,var(--shadow-md);animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.char-card.correct.faded{opacity:.25;border-color:transparent;background:transparent;color:var(--text-tertiary)}.hidden-input{position:absolute;opacity:0;pointer-events:none}.virtual-keyboard{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-lg)}.keyboard-row{display:flex;gap:.5rem;justify-content:center;margin-bottom:.5rem}.keyboard-row:last-child{margin-bottom:0}.key{min-width:48px;height:48px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:.875rem;color:var(--text-primary);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.key.function-key{min-width:64px;font-size:.75rem;color:var(--text-tertiary)}.key.space-key{min-width:300px}.key.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);box-shadow:0 0 0 3px #6366f133,var(--shadow-md)}.key.pressed{transform:scale(.95);background:var(--accent-secondary);color:#fff}.modal-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:2.5rem;max-width:500px;width:90%;box-shadow:var(--shadow-xl);animation:slideUp .3s}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content h2{font-size:1.875rem;font-weight:700;margin-bottom:1.5rem;text-align:center;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.result-stat{font-size:1.125rem;margin-bottom:1rem;color:var(--text-secondary);text-align:center}.result-stat strong{color:var(--accent-primary);font-size:1.5rem;font-weight:700}.modal-actions{display:flex;gap:1rem;margin-top:2rem}.modal-actions .btn{flex:1}.primary-btn{background:var(--accent-gradient);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;box-shadow:var(--shadow-md);transition:all var(--transition-fast)}.primary-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.streak-container{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,#fcd34d,#f59e0b);border-radius:var(--radius-md);color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}@media(max-width:768px){.header{padding:1rem}nav{gap:.75rem}.nav-link{font-size:.875rem}.stats-header{grid-template-columns:1fr}.lesson-header-bar{flex-direction:column;gap:1rem}.text-area-container{padding:2rem 1rem}.char-card{width:52px;height:52px;font-size:1.5rem}.key{min-width:40px;height:40px;font-size:.75rem}.key.space-key{min-width:200px}}.loading{display:inline-block;width:20px;height:20px;border:3px solid var(--border-light);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}