:root{--bg-main:#0b0f19;--bg-card:#1118278c;--bg-card-hover:#111827bf;--border-glow:#a855f740;--border-muted:#ffffff0f;--txt-primary:#f8fafc;--txt-secondary:#94a3b8;--txt-muted:#475569;--accent-primary:#a855f7;--accent-secondary:#3b82f6;--accent-cyan:#06b6d4;--accent-emerald:#10b981;--accent-rose:#f43f5e;--accent-gradient:linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);--sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;background-color:var(--bg-main);color:var(--txt-primary);font-size:16px;font-family:var(--sans);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:radial-gradient(circle at 100% 0,#a855f71a 0%,#0b0f19 60%);min-height:100vh;margin:0;padding:0;overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--txt-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--txt-secondary)}.app-viewport{box-sizing:border-box;flex-direction:column;min-height:100vh;display:flex}.main-app-container{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem 3rem}.onboarding-viewport-container{box-sizing:border-box;width:100%;max-width:800px;margin:auto;padding:2rem 1.5rem}.onboarding-brand-top{justify-content:center;align-items:center;gap:.75rem;margin-bottom:2rem;display:flex}.practice-viewport-container{box-sizing:border-box;width:100%;max-width:1000px;margin:auto;padding:2rem 1.5rem}.nav-container{border-bottom:1px solid var(--border-muted);justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1.25rem 0;display:flex}.nav-logo{align-items:center;gap:.5rem;display:flex}.logo-icon{background:var(--accent-gradient);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;font-weight:800;display:flex}.logo-text{letter-spacing:-.5px;font-size:1.5rem;font-weight:700}.logo-highlight{color:var(--accent-primary)}.nav-menu{border:1px solid var(--border-muted);background:#ffffff08;border-radius:12px;gap:.5rem;padding:.25rem;display:flex}.nav-item{color:var(--txt-secondary);cursor:pointer;font-family:var(--sans);background:0 0;border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{color:var(--txt-primary);background:#ffffff05}.nav-item.active{color:#fff;background:#a855f726;border:1px solid #a855f733;box-shadow:inset 0 0 10px #a855f71a}.nav-actions{align-items:center;gap:.75rem;display:flex}.nav-action-btn{border:1px solid var(--border-muted);color:var(--txt-secondary);cursor:pointer;background:#ffffff08;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem .75rem;transition:all .2s;display:flex}.nav-action-btn:hover{color:var(--txt-primary);background:#ffffff0f}.nav-dropdown-container{position:relative}.nav-dropdown{z-index:100;background:#0f172a;border:1px solid #ffffff14;border-radius:10px;min-width:180px;margin-top:.5rem;padding:.4rem;display:none;position:absolute;top:100%;right:0;box-shadow:0 10px 25px -5px #00000080}.nav-dropdown-container:hover .nav-dropdown{display:block}.nav-dropdown button{text-align:left;width:100%;color:var(--txt-secondary);cursor:pointer;font-family:var(--sans);background:0 0;border:none;border-radius:6px;padding:.5rem .75rem;font-size:.9rem;display:block}.nav-dropdown button:hover,.nav-dropdown button.active{color:#fff;background:var(--accent-gradient)}.nav-streak{color:var(--accent-primary);background:#a855f714;border:1px solid #a855f726;border-radius:8px;align-items:center;gap:.35rem;padding:.5rem .75rem;font-weight:600;display:flex}.streak-icon{fill:var(--accent-primary);animation:2s infinite pulse-glow}.nav-profile-menu{border:1px solid var(--border-muted);background:#ffffff05;border-radius:10px;align-items:center;gap:.5rem;padding:.4rem .75rem;display:flex}.nav-user-avatar{width:28px;height:28px;color:var(--accent-primary);background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;display:flex}.nav-username{font-size:.9rem;font-weight:500}.nav-logout-btn{color:var(--accent-rose);cursor:pointer;font-size:.8rem;font-family:var(--sans);background:0 0;border:none;margin-left:.5rem}.nav-logout-btn:hover{text-decoration:underline}.nav-login-btn{background:var(--accent-gradient);color:#fff;cursor:pointer;font-family:var(--sans);border:none;border-radius:8px;align-items:center;gap:.4rem;padding:.55rem 1rem;font-weight:600;transition:transform .2s;display:flex}.nav-login-btn:hover{transform:translateY(-1px)}.dashboard-grid{grid-template-columns:1fr;gap:2rem;display:grid}.dashboard-hero-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);border-radius:20px;justify-content:space-between;align-items:center;padding:2.5rem;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 30px #0003}.dashboard-hero-card:before{content:"";background:var(--accent-primary);filter:blur(150px);opacity:.15;z-index:0;width:300px;height:300px;position:absolute;top:-50%;left:-20%}.hero-content{z-index:1;max-width:70%;position:relative}.hero-content h2{margin:0 0 .5rem;font-size:2.25rem;font-weight:800}.hero-subtext{color:var(--txt-secondary);margin:0 0 2rem;font-size:1.1rem}.hero-stats-row{gap:2.5rem;display:flex}.hero-stat{flex-direction:column;display:flex}.hero-stat-val{color:#fff;font-size:2rem;font-weight:800}.hero-stat-lbl{color:var(--txt-secondary);text-transform:uppercase;letter-spacing:.5px;margin-top:.25rem;font-size:.85rem}.restart-diag-btn{border:1px solid var(--border-muted);color:var(--txt-secondary);cursor:pointer;font-family:var(--sans);z-index:1;background:#ffffff0a;border-radius:10px;align-self:flex-start;align-items:center;gap:.4rem;padding:.6rem 1rem;font-weight:500;transition:all .2s;display:flex;position:relative}.restart-diag-btn:hover{color:#fff;background:#ffffff14}.curriculum-section{flex-direction:column;gap:1.5rem;display:flex}.section-title{margin:0;font-size:1.5rem;font-weight:700}.courses-container{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;display:grid}.course-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);border-radius:16px;flex-direction:column;padding:1.75rem;transition:transform .2s,border-color .2s;display:flex;position:relative}.course-card:hover{border-color:#ffffff1f;transform:translateY(-2px)}.course-card.recommended-card{border-color:#a855f766;box-shadow:0 0 20px #a855f70d}.recommended-badge{color:#c084fc;text-transform:uppercase;letter-spacing:.5px;background:#a855f726;border:1px solid #a855f740;border-radius:6px;padding:.25rem .5rem;font-size:.75rem;font-weight:700;position:absolute;top:1rem;right:1rem}.course-title{margin:0 0 .5rem;padding-right:7rem;font-size:1.2rem;font-weight:700}.course-desc{color:var(--txt-secondary);flex-grow:1;margin:0 0 1.5rem;font-size:.9rem;line-height:1.4}.lessons-list{flex-direction:column;gap:.5rem;display:flex}.lesson-row-item{border:1px solid var(--border-muted);cursor:pointer;background:#ffffff05;border-radius:10px;justify-content:space-between;align-items:center;padding:.75rem 1rem;transition:all .2s;display:flex}.lesson-row-item:hover:not(.locked){background:#ffffff0d;border-color:#ffffff26}.lesson-row-item.completed{background:#10b98105;border-color:#10b98140}.lesson-row-item.locked{opacity:.5;cursor:not-allowed}.lesson-left{align-items:center;gap:.75rem;display:flex}.lesson-status-icon{justify-content:center;align-items:center;width:24px;height:24px;display:flex}.icon-check{color:var(--accent-emerald)}.icon-lock{color:var(--txt-muted)}.icon-play{color:var(--accent-primary)}.lesson-info{flex-direction:column;gap:.15rem;display:flex}.lesson-name{font-size:.95rem;font-weight:500}.lesson-keys-badge{font-family:var(--mono);color:var(--accent-primary);background:#a855f714;border-radius:4px;width:fit-content;padding:.05rem .35rem;font-size:.75rem}.lesson-right{align-items:center;display:flex}.best-score-badge{flex-direction:column;align-items:flex-end;font-size:.8rem;font-weight:600;display:flex}.best-score-badge .acc{color:var(--txt-secondary);font-size:.7rem}.start-lbl{color:var(--accent-primary);font-size:.8rem;font-weight:600}.keyboard-container{flex-direction:column;align-items:center;gap:1.5rem;width:100%;display:flex}.keyboard-base{background:#0f172a;border:1px solid #ffffff0f;border-radius:12px;flex-direction:column;gap:.35rem;width:100%;max-width:800px;padding:.75rem;display:flex;box-shadow:inset 0 2px 10px #000c,0 20px 25px -5px #00000080}.keyboard-row{gap:.35rem;width:100%;display:flex}.keyboard-key{height:48px;color:var(--txt-secondary);font-family:var(--sans);cursor:default;background:#1e293b;border:1px solid #ffffff0a;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;transition:background .1s,color .1s;display:flex;position:relative}.key-main{color:#fff;font-size:1rem;font-weight:600}.key-shift{color:var(--txt-muted);font-size:.65rem;position:absolute;top:.2rem;right:.35rem}.key-finger-dot{border-radius:50%;width:5px;height:5px;position:absolute;bottom:.35rem}.special-key{color:var(--txt-muted);background:#0f172a}.space-key{background:#1e293b}.active-key{box-shadow:0 0 15px var(--key-finger-color);background:var(--key-finger-color)!important;color:#fff!important;border-color:#0000!important}.active-shift-key{color:#fff!important;border-color:var(--accent-primary)!important;background:#a855f766!important}.hand-guide{box-sizing:border-box;justify-content:space-between;width:100%;max-width:800px;padding:0 1rem;display:flex}.hand-guide-side{flex-direction:column;flex-basis:48%;gap:.5rem;display:flex}.hand-title{color:var(--txt-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;font-weight:600}.hand-fingers{gap:.35rem;display:flex}.finger-indicator{text-align:center;border:1px dashed var(--border-muted);color:var(--txt-secondary);border-left:3px solid var(--finger-col);background:#ffffff05;border-radius:4px;flex-grow:1;padding:.25rem 0;font-size:.75rem}.practice-arena{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.practice-header{justify-content:space-between;align-items:center;width:100%;display:flex}.back-btn{border:1px solid var(--border-muted);color:var(--txt-secondary);cursor:pointer;background:0 0;border-radius:8px;align-items:center;gap:.4rem;padding:.5rem .75rem;transition:all .2s;display:flex}.back-btn:hover{color:#fff;border-color:#ffffff26}.practice-title-group{flex-direction:column;align-items:center;gap:.2rem;display:flex}.practice-title-group h3{margin:0;font-size:1.35rem;font-weight:700}.lesson-badge{color:#c084fc;background:#a855f71a;border-radius:50px;padding:.15rem .5rem;font-size:.75rem;font-weight:600}.sound-toggle{color:var(--accent-emerald);cursor:pointer;background:#10b9811a;border:1px solid #10b98133;border-radius:8px;align-items:center;gap:.4rem;padding:.5rem .75rem;display:flex}.instructions-card{border:1px dashed var(--border-muted);box-sizing:border-box;background:#ffffff05;border-radius:12px;width:100%;padding:1rem 1.5rem}.instruction-text{text-align:center;color:var(--txt-secondary);margin:0;font-size:.95rem}.typing-sandbox-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);box-sizing:border-box;border-radius:16px;flex-direction:column;gap:1.5rem;width:100%;padding:2rem;display:flex;position:relative}.sandbox-progress-bar{background:#ffffff0a;border-radius:2px;width:100%;height:4px}.sandbox-progress-fill{background:var(--accent-gradient);border-radius:2px;height:100%;transition:width .1s}.sandbox-metrics{justify-content:center;gap:3rem;display:flex}.metric-box{flex-direction:column;align-items:center;display:flex}.metric-lbl{text-transform:uppercase;color:var(--txt-muted);letter-spacing:.5px;font-size:.75rem}.metric-val{color:#fff;font-size:1.75rem;font-weight:800}.typing-text-display{word-spacing:.2rem;font-size:1.5rem;line-height:1.8;font-family:var(--mono);white-space:pre-wrap;word-break:break-all;background:#00000040;border-radius:12px;outline:none;min-height:100px;padding:1.5rem}.monospaced-text{font-family:var(--mono)}.char-pending{color:var(--txt-muted)}.char-correct{color:var(--txt-primary)}.char-incorrect{color:var(--accent-rose);background:#f43f5e26;border-radius:2px;text-decoration:underline}.char-current{color:#fff;border-bottom:2px solid var(--accent-cyan)}.caret-blink{animation:1s steps(2,start) infinite cursor-flash}.habit-warning-box{color:#fbbf24;text-align:center;background:#f59e0b1a;border:1px solid #f59e0b33;border-radius:8px;padding:.6rem;font-size:.9rem;font-weight:500}.start-prompt{color:var(--txt-muted);justify-content:center;align-items:center;gap:.5rem;font-size:.9rem;display:flex}.pulse-icon{animation:2s infinite pulse-glow}.completion-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);text-align:center;box-sizing:border-box;border-radius:20px;width:100%;max-width:500px;padding:3rem}.confetti-emoji{margin-bottom:1rem;font-size:3rem}.completion-card h4{margin:0 0 .5rem;font-size:1.75rem}.completion-stats-grid{grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0;display:grid}.comp-stat-item{border:1px solid var(--border-muted);background:#ffffff05;border-radius:12px;flex-direction:column;padding:1rem;display:flex}.comp-stat-val{font-size:1.75rem;font-weight:800}.comp-stat-lbl{color:var(--txt-secondary);margin-top:.25rem;font-size:.75rem}.completion-actions{justify-content:center;gap:1rem;display:flex}.primary-btn{background:var(--accent-gradient);color:#fff;cursor:pointer;font-family:var(--sans);border:none;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;transition:transform .2s,box-shadow .2s;display:flex}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #a855f759}.primary-btn.full{width:100%}.secondary-btn{color:#fff;border:1px solid var(--border-muted);cursor:pointer;font-family:var(--sans);background:#ffffff0a;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:500;transition:all .2s;display:flex}.secondary-btn:hover{background:#ffffff14}.onboarding-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #0006}.onboarding-header{border-bottom:1px solid var(--border-muted);background:#ffffff05;align-items:center;gap:1rem;padding:1.5rem;display:flex}.agent-avatar{font-size:2rem}.onboarding-header h3{margin:0;font-size:1.15rem}.agent-status{color:var(--accent-emerald);margin:.15rem 0 0;font-size:.8rem}.onboarding-chat-body{flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.chat-bubble-wrapper{width:100%;display:flex}.chat-bubble-wrapper.agent{justify-content:flex-start}.chat-bubble-wrapper.user{justify-content:flex-end}.chat-bubble{border-radius:16px;max-width:75%;padding:.9rem 1.2rem;font-size:.95rem;line-height:1.45}.agent .chat-bubble{color:var(--txt-primary);border:1px solid var(--border-muted);background:#ffffff0a;border-top-left-radius:4px}.user .chat-bubble{background:var(--accent-gradient);color:#fff;border-top-right-radius:4px}.chat-bubble p{margin:0}.typing-indicator span{background:var(--txt-secondary);border-radius:50%;width:6px;height:6px;margin-right:3px;animation:1.4s ease-in-out infinite dot-jump;display:inline-block}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){margin-right:0;animation-delay:.4s}.chat-options-grid{grid-template-columns:1fr;gap:.75rem;width:100%;margin-top:.5rem;display:grid}.chat-options-grid.horizontal{grid-template-columns:repeat(2,1fr)}.chat-opt-btn{border:1px solid var(--border-muted);color:#fff;cursor:pointer;text-align:left;background:#ffffff05;border-radius:12px;align-items:center;gap:1rem;padding:1rem;transition:all .2s;display:flex}.chat-opt-btn:hover{background:#a855f70d;border-color:#a855f74d}.chat-opt-btn strong{margin-bottom:.15rem;font-size:.95rem;display:block}.chat-opt-btn p{color:var(--txt-secondary);margin:0;font-size:.8rem}.chat-start-test-wrapper{justify-content:center;margin-top:1rem;display:flex}.start-test-btn{background:var(--accent-gradient);color:#fff;font-family:var(--sans);cursor:pointer;border:none;border-radius:50px;align-items:center;gap:.5rem;padding:.8rem 2rem;font-weight:600;display:flex;box-shadow:0 4px 15px #a855f759}.onboarding-test-box{border:1px solid var(--border-muted);box-sizing:border-box;background:#0003;border-radius:16px;flex-direction:column;gap:1.25rem;width:100%;padding:1.5rem;display:flex}.test-text-display{font-size:1.25rem;line-height:1.6;font-family:var(--mono);background:#090d16;border-radius:10px;min-height:50px;padding:1.25rem}.test-live-stats{justify-content:center;gap:2rem;font-size:.95rem;font-weight:600;display:flex}.stat-highlight{color:var(--accent-primary);font-weight:800}.test-warning-bubble{color:#fbbf24;text-align:center;background:#f59e0b1a;border:1px solid #f59e0b33;border-radius:8px;padding:.5rem;font-size:.85rem}.diagnosis-result-card{box-sizing:border-box;background:#ffffff05;border:1px solid #a855f733;border-radius:16px;flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.diagnosis-result-card h4{margin:0;font-size:1.25rem}.diag-stats-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.diag-stat-item{border:1px solid var(--border-muted);background:#ffffff05;border-radius:10px;flex-direction:column;align-items:center;padding:.75rem;display:flex}.diag-stat-label{color:var(--txt-secondary);font-size:.75rem}.diag-stat-value{color:#fff;margin-top:.25rem;font-size:1.35rem;font-weight:700}.diag-habits-section h5,.diag-rec-section h5{margin:0 0 .5rem;font-size:.9rem}.diag-habits-section ul,.diag-rec-section ul{color:var(--txt-secondary);margin:0;padding-left:1.25rem;font-size:.85rem;line-height:1.5}.diag-habits-section li{color:#fbbf24}.diag-rec-section li{color:#a7f3d0}.finish-onboarding-btn{background:var(--accent-gradient);color:#fff;font-family:var(--sans);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:.8rem;font-weight:600;transition:transform .2s;display:flex}.finish-onboarding-btn:hover{transform:translateY(-1px)}.stats-container{flex-direction:column;gap:2rem;display:flex}.stats-summary-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;display:grid}.stats-card-metric{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);border-radius:16px;flex-direction:column;padding:1.5rem;display:flex}.metric-header{color:var(--txt-secondary);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.metric-value{margin:.75rem 0 .25rem;font-size:2.25rem;font-weight:800}.metric-value .unit{color:var(--txt-secondary);font-size:1rem;font-weight:500}.metric-desc{color:var(--txt-muted);margin:0;font-size:.8rem}.icon-purple{color:var(--accent-primary)}.icon-emerald{color:var(--accent-emerald)}.icon-rose{color:var(--accent-rose)}.chart-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);box-sizing:border-box;border-radius:16px;padding:2rem}.chart-card h4{margin:0 0 1.5rem;font-size:1.15rem}.chart-empty-state{min-height:120px;color:var(--txt-muted);flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex}.chart-empty-state p{font-size:.9rem}.chart-wrapper{width:100%}.wpm-svg-chart{width:100%;height:auto}.chart-dot-lbl{font-weight:700}.heatmap-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);border-radius:16px;padding:2rem}.heatmap-card h4{margin:0 0 .25rem;font-size:1.15rem}.card-subtext{color:var(--txt-secondary);margin:0 0 1.5rem;font-size:.85rem}.heatmap-keyboard{background:#0f172a;border:1px solid #ffffff0d;border-radius:12px;flex-direction:column;gap:.35rem;padding:.75rem;display:flex}.heatmap-row{gap:.35rem;display:flex}.heatmap-key{height:40px;color:var(--txt-secondary);font-family:var(--sans);background:#1e293b;border-radius:5px;justify-content:center;align-items:center;font-size:.8rem;font-weight:600;display:flex;overflow:hidden}.heatmap-key.special{color:var(--txt-muted);background:#0f172a}.key-error-overlay{z-index:1;pointer-events:none;animation:3s infinite pulse-glow;position:absolute;inset:0}.games-section{flex-direction:column;gap:2rem;display:flex}.section-subtitle{color:var(--txt-secondary);max-width:600px;margin:-1.5rem 0 0;font-size:.95rem;line-height:1.5}.high-score-card{color:#fbbf24;background:#f59e0b14;border:1px solid #f59e0b33;border-radius:12px;align-items:center;gap:.75rem;width:fit-content;padding:1rem 1.5rem;display:flex}.score-trophy{fill:#f59e0b33}.score-val{font-size:1.15rem}.games-menu-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;display:grid}.game-menu-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);text-align:center;border-radius:20px;flex-direction:column;align-items:center;padding:2rem;display:flex}.game-card-icon{border-radius:20px;justify-content:center;align-items:center;width:70px;height:70px;margin-bottom:1.5rem;font-size:2.5rem;display:flex;box-shadow:0 4px 15px #0000004d}.game-card-icon.red{background:#ef44441a;border:1px solid #ef444433}.game-card-icon.blue{background:#38bdf81a;border:1px solid #38bdf833}.game-menu-card h4{margin:0 0 .5rem;font-size:1.25rem}.game-menu-card p{color:var(--txt-secondary);flex-grow:1;margin:0 0 2rem;font-size:.9rem;line-height:1.5}.active-game-wrapper{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}.game-hud{justify-content:space-between;align-items:center;width:100%;max-width:750px;display:flex}.hud-metric{letter-spacing:.5px;font-size:1.25rem;font-weight:800}.hud-lives{gap:.5rem;display:flex}.heart-icon{justify-content:center;align-items:center;width:24px;height:24px;transition:transform .2s;display:flex}.heart-icon.active{color:var(--accent-rose);filter:drop-shadow(0 0 5px #f43f5e80)}.heart-icon.empty{color:var(--txt-muted)}.canvas-container{border:2px solid var(--border-muted);background:#020617;border-radius:16px;width:100%;max-width:950px;position:relative;overflow:hidden;box-shadow:0 20px 25px -5px #0009}.level-up-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#0b0f19d9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.level-up-content{text-align:center;background:#0f172a;border:1px solid #a855f74d;border-radius:20px;flex-direction:column;align-items:center;gap:1.25rem;width:90%;max-width:420px;padding:2.5rem;display:flex;box-shadow:0 10px 40px #a855f733}.level-up-stars{align-items:center;gap:.5rem;display:flex}.bounce-star-1{animation:1.5s ease-in-out infinite alternate star-bounce-alt}.bounce-star-2{animation:1.5s ease-in-out .2s infinite alternate star-bounce-alt}.bounce-star-3{animation:1.5s ease-in-out .4s infinite alternate star-bounce-alt}@keyframes star-bounce-alt{0%{transform:translateY(0)scale(1)}to{transform:translateY(-8px)scale(1.1)}}.level-up-stats{gap:1rem;width:100%;display:flex}.level-stat-box{border:1px solid var(--border-muted);background:#ffffff05;border-radius:12px;flex-direction:column;flex:1;align-items:center;padding:.75rem;display:flex}.level-stat-box span{color:var(--txt-secondary);font-size:.8rem}.level-stat-box .val{margin-top:.25rem;font-size:1.5rem;font-weight:800}.game-level-indicator{align-items:center;gap:.5rem;font-size:1rem;font-weight:600;display:flex}.level-progress-lbl{color:var(--txt-secondary);font-size:.8rem;font-weight:400}.game-viewport-canvas{width:100%;height:auto;display:block}.game-typed-indicator{color:var(--txt-secondary);align-items:center;gap:.5rem;font-size:1.15rem;display:flex}.typed-val{border:1px solid var(--border-muted);color:#fff;background:#0000004d;border-radius:6px;padding:.25rem .75rem;font-weight:700}.gameover-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);text-align:center;box-sizing:border-box;border-radius:24px;width:100%;max-width:450px;margin:auto;padding:3.5rem 2rem;box-shadow:0 10px 40px #00000080}.gameover-skull{margin-bottom:1rem;font-size:3.5rem}.gameover-card h3{margin:0 0 .5rem;font-size:2rem;font-weight:800}.gameover-scores{flex-direction:column;gap:.5rem;margin:2rem 0;display:flex}.gameover-stat{border-bottom:1px solid var(--border-muted);justify-content:space-between;padding:.5rem 0;display:flex}.gameover-stat strong{font-size:1.25rem}.gameover-actions{justify-content:center;gap:1rem;display:flex}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:#0f172a;border:1px solid #ffffff14;border-radius:20px;width:100%;max-width:400px;padding:2.5rem;position:relative;box-shadow:0 25px 50px -12px #000c}.modal-close-btn{color:var(--txt-secondary);cursor:pointer;background:0 0;border:none;position:absolute;top:1.25rem;right:1.25rem}.modal-close-btn:hover{color:#fff}.modal-header{text-align:center;flex-direction:column;align-items:center;margin-bottom:2rem;display:flex}.lock-icon-circle{color:var(--accent-primary);background:#a855f71a;border:1px solid #a855f733;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:1rem;display:flex}.modal-header h3{margin:0;font-size:1.5rem;font-weight:800}.modal-header p{color:var(--txt-secondary);margin:.25rem 0 0;font-size:.85rem}.modal-form{flex-direction:column;gap:1.25rem;display:flex}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-group label{color:var(--txt-secondary);font-size:.85rem;font-weight:500}.form-group input{border:1px solid var(--border-muted);color:#fff;font-family:var(--sans);background:#ffffff08;border-radius:8px;outline:none;padding:.7rem;font-size:.95rem}.form-group input:focus{border-color:var(--accent-primary)}.modal-footer-switch{color:var(--txt-secondary);justify-content:center;align-items:center;gap:.35rem;margin-top:1rem;font-size:.85rem;display:flex}.switch-btn{color:var(--accent-primary);cursor:pointer;font-weight:600;font-family:var(--sans);background:0 0;border:none}.switch-btn:hover{text-decoration:underline}.animate-fade-in{animation:.4s ease-out forwards fadeIn}.animate-zoom-in{animation:.3s cubic-bezier(.34,1.56,.64,1) forwards zoomIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes cursor-flash{0%,to{border-color:#0000}50%{border-color:var(--accent-cyan)}}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.65}}@keyframes dot-jump{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@media (width<=768px){.nav-container{flex-direction:column;align-items:stretch;gap:1rem}.nav-actions{justify-content:space-between}.dashboard-hero-card{flex-direction:column;align-items:stretch;gap:1.5rem;padding:1.5rem}.hero-content{max-width:100%}.hero-stats-row{justify-content:space-between}.courses-container{grid-template-columns:1fr}.typing-sandbox-card{padding:1.25rem}.typing-text-display{font-size:1.25rem}}.game-lobby-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-muted);box-sizing:border-box;border-radius:24px;flex-direction:column;gap:2rem;width:100%;max-width:650px;margin:0 auto;padding:2.5rem;display:flex;box-shadow:0 20px 40px #0006}.back-btn-lobby{color:var(--txt-secondary);cursor:pointer;font-family:var(--sans);background:0 0;border:none;align-self:flex-start;align-items:center;gap:.5rem;padding:0;font-size:.9rem;transition:color .2s;display:flex}.back-btn-lobby:hover{color:#fff}.lobby-header{text-align:center;flex-direction:column;align-items:center;gap:.5rem;margin-top:-.5rem;display:flex}.lobby-avatar-badge{background:#a855f71a;border:1px solid #a855f733;border-radius:24px;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:.5rem;font-size:3rem;display:flex;box-shadow:0 8px 16px #0003}.lobby-header h3{margin:0;font-size:1.75rem;font-weight:800}.lobby-header p{color:var(--txt-secondary);margin:0;font-size:.9rem}.lobby-options-container{flex-direction:column;gap:1.75rem;display:flex}.lobby-option-group{flex-direction:column;gap:.75rem;display:flex}.lobby-option-group.row-flex{border-top:1px solid var(--border-muted);flex-direction:row;justify-content:space-between;align-items:center;padding-top:1.5rem}.opt-left{text-align:left;flex-direction:column;gap:.25rem;display:flex}.opt-desc-sub{color:var(--txt-muted);margin:0;font-size:.8rem}.option-label-row{justify-content:space-between;align-items:center;display:flex}.opt-title{color:#fff;text-align:left;font-size:1rem;font-weight:700}.opt-recommended-tag{color:var(--accent-emerald);background:#10b98114;border:1px solid #10b98126;border-radius:6px;padding:.25rem .5rem;font-size:.8rem;font-weight:600}.lobby-level-buttons{grid-template-columns:repeat(5,1fr);gap:.5rem;display:grid}.lobby-lvl-btn{border:1px solid var(--border-muted);color:var(--txt-secondary);cursor:pointer;font-family:var(--sans);background:#ffffff05;border-radius:10px;flex-direction:column;align-items:center;gap:.15rem;padding:.75rem .5rem;transition:all .2s;display:flex}.lobby-lvl-btn:hover{color:#fff;background:#ffffff0d;border-color:#ffffff26}.lobby-lvl-btn.active{background:var(--accent-gradient);color:#fff;border-color:#0000;box-shadow:0 4px 12px #a855f740}.lobby-lvl-btn .lvl-desc{opacity:.8;font-size:.65rem}.lobby-mode-buttons{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}.lobby-mode-btn{border:1px solid var(--border-muted);color:var(--txt-secondary);cursor:pointer;text-align:left;font-family:var(--sans);background:#ffffff05;border-radius:12px;align-items:flex-start;gap:.75rem;padding:1rem;transition:all .2s;display:flex}.lobby-mode-btn:hover{background:#ffffff0a;border-color:#ffffff1f}.lobby-mode-btn.active{color:#fff;background:#a855f714;border-color:#a855f74d}.lobby-mode-btn strong{margin-bottom:.15rem;font-size:.9rem;display:block}.lobby-mode-btn p{color:var(--txt-muted);margin:0;font-size:.75rem;line-height:1.3}.sound-toggle-lobby{font-family:var(--sans);cursor:pointer;border:1px solid #0000;border-radius:10px;align-items:center;gap:.5rem;padding:.6rem 1rem;font-weight:600;transition:all .2s;display:flex}.sound-toggle-lobby.enabled{color:var(--accent-emerald);background:#10b98114;border-color:#10b98133}.sound-toggle-lobby.disabled{color:var(--accent-rose);background:#f43f5e14;border-color:#f43f5e33}.lobby-start-btn{margin-top:.5rem}.hud-time-val{color:var(--accent-rose);align-items:center;gap:.35rem;font-weight:700;display:flex}