:root{--color-bg-primary: #0a0a1a;--color-bg-secondary: #12122a;--color-bg-card: rgba(30, 30, 60, .6);--color-bg-glass: rgba(255, 255, 255, .05);--color-primary: #667eea;--color-primary-light: #8b9cf5;--color-secondary: #764ba2;--color-accent: #f093fb;--color-success: #10b981;--color-error: #ef4444;--color-warning: #f59e0b;--color-text-primary: #ffffff;--color-text-secondary: rgba(255, 255, 255, .7);--color-text-muted: rgba(255, 255, 255, .4);--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-dark: linear-gradient(180deg, #0a0a1a 0%, #12122a 100%);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 30px rgba(102, 126, 234, .3);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-family);background:var(--gradient-dark);color:var(--color-text-primary);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}a{color:var(--color-primary-light);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-family);font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-decoration:none}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md),var(--shadow-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 40px #667eea66}.btn-secondary{background:var(--color-bg-glass);color:var(--color-text-primary);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-lg{padding:var(--spacing-lg) var(--spacing-2xl);font-size:1.125rem}.card{background:var(--color-bg-card);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:var(--spacing-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all var(--transition-normal)}.card:hover{border-color:#fff3;transform:translateY(-4px);box-shadow:var(--shadow-lg)}.glass{background:var(--color-bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1)}.stars{display:flex;gap:var(--spacing-xs)}.star{width:24px;height:24px;color:var(--color-text-muted);transition:all var(--transition-fast)}.star.filled{color:#fbbf24;filter:drop-shadow(0 0 4px rgba(251,191,36,.5))}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes typing-cursor{0%,to{opacity:1}50%{opacity:0}}.fade-in{animation:fadeIn .6s ease forwards}.float{animation:float 3s ease-in-out infinite}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-light)}@media(max-width:768px){h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}.container{padding:0 var(--spacing-md)}}.keyboard{display:flex;flex-direction:column;gap:8px;padding:var(--spacing-lg);background:var(--color-bg-card);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);max-width:900px;margin:0 auto}.keyboard-row{display:flex;justify-content:center;gap:6px}.key{display:flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 12px;background:linear-gradient(180deg,#2a2a4a,#1a1a3a);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:.875rem;font-weight:500;font-family:var(--font-family);text-transform:uppercase;cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;position:relative;box-shadow:0 4px #0a0a1a,0 6px 10px #0000004d}.key:hover{transform:translateY(-2px);border-color:#fff3}.key:active,.key.pressed{transform:translateY(2px);box-shadow:0 2px #0a0a1a,0 3px 5px #0000004d}.key.target{background:var(--gradient-primary);color:#fff;border-color:var(--color-primary-light);box-shadow:0 4px #4a5699,0 0 20px #667eea80;animation:pulse 1.5s ease-in-out infinite}.key.correct{background:linear-gradient(180deg,#10b981,#059669);color:#fff;border-color:#10b981;box-shadow:0 4px #047857,0 0 15px #10b98166}.key.error{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;border-color:#ef4444;box-shadow:0 4px #b91c1c,0 0 15px #ef444466;animation:shake .3s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.key[data-finger=pinky-left]{border-bottom:3px solid #f472b6}.key[data-finger=ring-left]{border-bottom:3px solid #fb923c}.key[data-finger=middle-left]{border-bottom:3px solid #facc15}.key[data-finger=index-left]{border-bottom:3px solid #4ade80}.key[data-finger=index-right]{border-bottom:3px solid #22d3ee}.key[data-finger=middle-right]{border-bottom:3px solid #818cf8}.key[data-finger=ring-right]{border-bottom:3px solid #c084fc}.key[data-finger=pinky-right]{border-bottom:3px solid #f472b6}.key[data-finger=thumb]{border-bottom:3px solid #a78bfa}.key.key-backspace{min-width:100px}.key.key-tab{min-width:80px}.key.key-caps{min-width:95px}.key.key-enter{min-width:110px}.key.key-shift-left{min-width:120px}.key.key-shift-right{min-width:140px}.key.key-space{min-width:320px}.key.key-ctrl{min-width:60px}.key.key-alt,.key.key-meta{min-width:50px}.key.home-key:after{content:"";position:absolute;bottom:6px;left:50%;transform:translate(-50%);width:6px;height:2px;background:#ffffff80;border-radius:var(--radius-full)}.hand-guide{display:flex;justify-content:center;gap:var(--spacing-2xl);margin-top:var(--spacing-lg);padding:var(--spacing-md);background:#0003;border-radius:var(--radius-lg)}.hand{display:flex;gap:var(--spacing-sm)}.finger-indicator{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);font-size:.75rem;color:var(--color-text-muted)}.finger-dot{width:12px;height:12px;border-radius:var(--radius-full);transition:all var(--transition-fast)}.finger-dot.active{transform:scale(1.3);box-shadow:0 0 10px currentColor}@media(max-width:900px){.keyboard{transform:scale(.85);transform-origin:top center}}@media(max-width:600px){.keyboard{transform:scale(.65)}.hand-guide{display:none}}.lessons-page{padding:var(--spacing-2xl) 0}.lessons-header{text-align:center;margin-bottom:var(--spacing-2xl)}.lessons-header h1{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-sm)}.lessons-header p{color:var(--color-text-secondary)}.lesson-groups{display:flex;flex-direction:column;gap:var(--spacing-2xl)}.lesson-group{padding:var(--spacing-xl);background:var(--color-bg-card);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.1)}.lesson-group h2{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid rgba(255,255,255,.1)}.group-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border-radius:var(--radius-md);font-size:1.25rem}.lesson-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-md)}.lesson-card{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg);background:#0003;border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-decoration:none;color:inherit}.lesson-card:hover:not(.locked){background:#667eea1a;border-color:var(--color-primary);transform:translateY(-4px)}.lesson-card.locked{opacity:.5;cursor:not-allowed}.lesson-number{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border-radius:var(--radius-full);font-size:1.25rem;font-weight:700}.lesson-card.locked .lesson-number{background:#ffffff1a}.lesson-card.locked .lesson-number:after{content:"🔒";font-size:1rem}.lesson-card.completed .lesson-number{background:linear-gradient(135deg,#10b981,#059669)}.lesson-card.completed .lesson-number:after{content:"✓"}.lesson-title{font-size:.875rem;font-weight:500;text-align:center;color:var(--color-text-secondary)}.lesson-stars{display:flex;gap:2px}.lesson-stars .star{width:16px;height:16px}.practice-page{min-height:100vh;display:flex;flex-direction:column}.practice-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl);background:var(--color-bg-secondary);border-bottom:1px solid rgba(255,255,255,.1)}.practice-nav{display:flex;align-items:center;gap:var(--spacing-md)}.back-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.back-btn:hover{background:#ffffff1a;color:var(--color-text-primary)}.lesson-info h3{font-size:1rem;font-weight:600}.lesson-info span{font-size:.75rem;color:var(--color-text-muted)}.stats-panel{display:flex;gap:var(--spacing-xl)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.stat-value{font-size:1.5rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.typing-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);gap:var(--spacing-2xl)}.typing-area{width:100%;max-width:800px;padding:var(--spacing-2xl);background:var(--color-bg-card);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.typing-text{font-size:2rem;font-weight:500;line-height:1.8;text-align:center;font-family:Courier New,monospace;letter-spacing:2px}.typing-text .char{display:inline-block;transition:all var(--transition-fast)}.typing-text .char.current{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);animation:typing-cursor 1s ease infinite}.typing-text .char.correct{color:var(--color-success)}.typing-text .char.error{color:var(--color-error);text-decoration:underline;text-decoration-style:wavy}.typing-text .char.pending{color:var(--color-text-muted)}.progress-container{width:100%;max-width:800px}.progress-bar{height:8px;background:#ffffff1a;border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width var(--transition-normal)}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal{background:var(--color-bg-secondary);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:var(--spacing-2xl);max-width:500px;width:90%;text-align:center;animation:fadeIn .3s ease}.modal h2{margin-bottom:var(--spacing-lg);font-size:2rem}.modal-stars{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.modal-stars .star{width:48px;height:48px}.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:#0003;border-radius:var(--radius-lg)}.modal-actions{display:flex;gap:var(--spacing-md);justify-content:center}@media(max-width:768px){.practice-header{flex-direction:column;gap:var(--spacing-md)}.stats-panel{width:100%;justify-content:space-around}.typing-text{font-size:1.5rem}.lesson-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}.games-page{padding:var(--spacing-2xl) 0;min-height:100vh}.games-header{text-align:center;margin-bottom:var(--spacing-2xl)}.games-header h1{background:var(--gradient-secondary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-sm)}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl);max-width:1000px;margin:0 auto}.game-card{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);padding:var(--spacing-2xl);background:var(--color-bg-card);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-normal);text-decoration:none;color:inherit}.game-card:hover{transform:translateY(-8px);border-color:var(--color-accent);box-shadow:0 0 30px #f093fb4d}.game-icon{font-size:4rem;animation:float 3s ease-in-out infinite}.game-title{font-size:1.5rem;font-weight:700}.game-desc{color:var(--color-text-secondary);text-align:center;font-size:.9rem}.falling-words-game{position:relative;width:100%;height:500px;background:linear-gradient(180deg,#0a0a1a,#1a1a3a);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(255,255,255,.1)}.game-area{position:relative;width:100%;height:100%}.falling-word{position:absolute;padding:var(--spacing-sm) var(--spacing-md);background:var(--gradient-primary);border-radius:var(--radius-md);font-size:1.25rem;font-weight:600;color:#fff;animation:fall linear forwards;cursor:default;-webkit-user-select:none;user-select:none;box-shadow:0 4px 15px #667eea66}.falling-word.matched{background:var(--color-success);animation:explode .3s ease forwards}.falling-word.missed{background:var(--color-error);opacity:.5}@keyframes fall{0%{top:-50px}to{top:100%}}@keyframes explode{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5)}to{transform:scale(0);opacity:0}}.game-input-area{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-lg);background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}.game-input{width:100%;padding:var(--spacing-md) var(--spacing-lg);background:#ffffff1a;border:2px solid var(--color-primary);border-radius:var(--radius-lg);color:#fff;font-size:1.25rem;font-family:var(--font-family);text-align:center;outline:none;transition:all var(--transition-fast)}.game-input:focus{border-color:var(--color-accent);box-shadow:0 0 20px #f093fb4d}.game-stats{display:flex;justify-content:space-around;padding:var(--spacing-lg);background:var(--color-bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg)}.game-stat{text-align:center}.game-stat-value{font-size:2rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-stat-label{font-size:.875rem;color:var(--color-text-muted)}.speed-race-game{padding:var(--spacing-xl)}.race-track{position:relative;height:80px;background:#0000004d;border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl);overflow:hidden}.race-progress{position:absolute;top:0;left:0;height:100%;background:var(--gradient-primary);border-radius:var(--radius-lg);transition:width .1s ease}.race-car{position:absolute;top:50%;transform:translateY(-50%);font-size:2.5rem;transition:left .1s ease;filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}.race-finish{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:2rem}.race-text{font-size:1.5rem;line-height:2;padding:var(--spacing-xl);background:var(--color-bg-card);border-radius:var(--radius-xl);text-align:center;font-family:Courier New,monospace;letter-spacing:1px}.race-text .char.correct{color:var(--color-success)}.race-text .char.error{color:var(--color-error);text-decoration:underline}.race-text .char.current{background:var(--color-primary);color:#fff;border-radius:4px}.race-text .char.pending{color:var(--color-text-muted)}.word-shooter-game{position:relative;width:100%;height:400px;background:linear-gradient(180deg,#0f0f23,#1a0a2e);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(255,255,255,.1)}.shooter{position:absolute;bottom:20px;left:50%;transform:translate(-50%);font-size:3rem}.bullet{position:absolute;width:4px;height:20px;background:var(--color-accent);border-radius:var(--radius-full);box-shadow:0 0 10px var(--color-accent);animation:shoot .3s linear forwards}@keyframes shoot{0%{bottom:80px}to{bottom:100%}}.target-word{position:absolute;padding:var(--spacing-sm) var(--spacing-md);background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);font-size:1rem;color:#fff;animation:float-target 3s ease-in-out infinite}.target-word.hit{animation:hit-explode .3s ease forwards}@keyframes float-target{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes hit-explode{0%{transform:scale(1);opacity:1}to{transform:scale(2);opacity:0}}.game-over-modal{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000}.game-over-content{background:var(--color-bg-secondary);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:var(--spacing-2xl);text-align:center;max-width:400px;animation:fadeIn .3s ease}.game-over-title{font-size:2.5rem;margin-bottom:var(--spacing-lg)}.game-over-score{font-size:4rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-lg)}.game-over-actions{display:flex;gap:var(--spacing-md);justify-content:center;margin-top:var(--spacing-xl)}.countdown-overlay{position:absolute;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10}.countdown-number{font-size:8rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:pulse 1s ease infinite}@media(max-width:768px){.falling-words-game{height:400px}.game-stats{flex-wrap:wrap;gap:var(--spacing-md)}.race-text{font-size:1.125rem}}