.typing-tutor-container{--tutor-bg:var(--color-tutor-bg);--tutor-text:var(--color-tutor-text);--tutor-muted:var(--color-tutor-muted);--tutor-dimmed:var(--color-tutor-dimmed);--tutor-accent:var(--color-tutor-accent);--tutor-secondary:var(--color-tutor-secondary);--tutor-success:var(--color-tutor-success);--tutor-error:var(--color-tutor-error);--tutor-warning:var(--color-tutor-warning);--tutor-heading:var(--color-heading);--tutor-neutral-bg:var(--color-neutral-20);--tutor-dark-bg:var(--color-dark-bg);color:var(--tutor-text);flex-direction:column;align-items:center;padding:2rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}.typing-tutor-header{text-align:center;margin-bottom:2rem}.typing-tutor-header h1{color:var(--tutor-heading);margin-bottom:1rem;font-size:2.5rem}.typing-tutor-container{--tab-border:var(--tutor-dimmed);--tab-color:var(--tutor-muted);--tab-hover:var(--tutor-text);--tab-active:var(--tutor-accent)}.start-content{background:var(--tutor-bg);text-align:center;border-radius:12px;flex-direction:column;gap:1.25rem;max-width:500px;margin:2rem auto;padding:2rem;display:flex}.start-mode h3{color:var(--tutor-heading);margin-bottom:.3rem;font-size:1.1rem}.start-mode p{color:var(--tutor-muted);margin:0;font-size:.95rem;line-height:1.4}.keyboard-toggle{background:linear-gradient(#0006,#0000);border-radius:8px 8px 0 0;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-bottom:.5rem;padding:.75rem 1rem;display:flex}.toggle-group{align-items:center;gap:.35rem;display:flex}.toggle-label{color:var(--tutor-muted);font-size:.75rem}.keyboard-btn{border:1px solid var(--tutor-secondary);color:var(--tutor-secondary);cursor:pointer;background:0 0;border-radius:6px;padding:.3rem .7rem;font-size:.75rem;transition:all .2s}.keyboard-btn:hover,.keyboard-btn.active{background:var(--tutor-secondary);color:var(--tutor-neutral-bg)}.show-keyboard-btn{z-index:100;border:1px solid var(--tutor-secondary);background:var(--tutor-bg);color:var(--tutor-secondary);cursor:pointer;border-radius:6px;padding:.4rem 1rem;font-size:.8rem;transition:all .2s;position:fixed;bottom:.75rem;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0006}.show-keyboard-btn:hover{background:var(--tutor-secondary);color:var(--tutor-neutral-bg)}.stats-container{gap:3rem;margin-bottom:2rem;display:flex}.stat{text-align:center}.stat-value{color:var(--tutor-secondary);font-size:2.5rem;font-weight:700}.stat-label{color:var(--tutor-muted);text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.main-container{width:100%;max-width:900px;padding-bottom:320px;position:relative;overflow:hidden}.mastered-wallpaper{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.mastered-wallpaper span{color:var(--tutor-text);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:700;position:absolute}.main-container>:not(.mastered-wallpaper):not(.done-container):not(.show-keyboard-btn){z-index:1;position:relative}.lesson-selector{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:2rem;margin-bottom:1rem;display:flex}.letter-mastery{flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem;margin-bottom:1.5rem;display:flex}.letter-indicator{text-transform:uppercase;border-radius:4px;justify-content:center;align-items:center;width:28px;height:28px;font-family:Consolas,Monaco,monospace;font-size:.8rem;font-weight:700;transition:all .3s;display:flex}.letter-indicator.locked{background:var(--tutor-dark-bg);color:var(--tutor-dimmed)}.letter-indicator.new{color:var(--tutor-error);border:1px solid var(--tutor-error);background:#f38ba833}.letter-indicator.learning{color:var(--tutor-heading);border:1px solid var(--tutor-heading);background:#d9c9a033}.letter-indicator.confident{color:var(--tutor-success);border:1px solid var(--tutor-success);background:#99d1a033}.mastery-reset-btn{border:1px solid var(--tutor-dimmed);background:var(--tutor-dark-bg);height:28px;color:var(--tutor-dimmed);cursor:pointer;border-radius:4px;margin-top:.625rem;padding:0 6px;font-size:.7rem;transition:all .2s}.mastery-reset-btn:hover{border-color:var(--tutor-error);color:var(--tutor-error)}.unlock-notification{flex-direction:column;align-items:center;gap:.5rem;margin-top:1rem;animation:.6s ease-out unlock-reveal;display:flex}.unlock-letter{border:2px solid var(--tutor-success);width:48px;height:48px;color:var(--tutor-success);background:#99d1a033;border-radius:8px;justify-content:center;align-items:center;font-family:Consolas,Monaco,monospace;font-size:1.5rem;font-weight:700;display:flex;box-shadow:0 0 20px #99d1a04d}.unlock-text{color:var(--tutor-success);text-transform:uppercase;letter-spacing:1px;font-size:.9rem;font-weight:700}@keyframes unlock-reveal{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.challenge-notification{flex-direction:column;align-items:center;gap:.5rem;margin-top:1rem;animation:.6s ease-out unlock-reveal;display:flex}.challenge-letter{border:2px solid var(--tutor-heading);width:48px;height:48px;color:var(--tutor-heading);background:#d9c9a033;border-radius:8px;justify-content:center;align-items:center;font-family:Consolas,Monaco,monospace;font-size:1.5rem;font-weight:700;display:flex;box-shadow:0 0 20px #d9c9a04d}.challenge-text{color:var(--tutor-heading);text-transform:uppercase;letter-spacing:1px;font-size:.9rem;font-weight:700}.challenge-retry{color:var(--tutor-error);text-transform:uppercase;letter-spacing:1px;font-size:.9rem;font-weight:700}.notes-controls{flex-direction:column;align-items:center;gap:1rem;margin-bottom:1.5rem;display:none}.notes-controls.visible{display:flex}.category-select{border:2px solid var(--tutor-secondary);background:var(--tutor-bg);color:var(--tutor-text);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0a0a0' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;border-radius:8px;min-width:200px;padding:.75rem 2.5rem .75rem 1rem;font-size:1rem}.category-select:focus{border-color:var(--tutor-accent);outline:none}.notes-list{flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:100%;display:flex}.note-btn{border:1px solid var(--tutor-secondary);color:var(--tutor-text);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border-radius:6px;max-width:250px;padding:.5rem 1rem;font-size:.9rem;transition:all .2s;position:relative;overflow:hidden}.note-btn:hover,.note-btn.active{background:var(--tutor-secondary);color:var(--tutor-neutral-bg)}.typing-area{background:var(--tutor-bg);border-radius:12px;min-height:200px;margin-bottom:1.5rem;padding:2rem;position:relative}.typing-text{word-wrap:break-word;font-family:Consolas,Monaco,monospace;font-size:1.4rem;line-height:2;position:relative}.word{white-space:nowrap;display:inline}.char{transition:color .1s}.char.current{color:var(--syntax-color,gray)}.typing-cursor{pointer-events:none;z-index:1;position:absolute;top:0;left:0}.char.correct{color:var(--tutor-text)}.char.incorrect{color:var(--tutor-error);text-decoration:underline}.char.pending{color:var(--syntax-color,gray)}.char.wildcard.pending,.char.wildcard.current{color:var(--tutor-success)}.char.wildcard.correct{color:var(--tutor-text)}.char.code-block{background:#1e1e1e99;border-radius:1px}.char.code-block.pending{color:color-mix(in srgb, var(--syntax-color,gray) 40%, transparent)}.char.code-block.correct{color:var(--syntax-color,var(--tutor-success))}.char.code-block.current{color:color-mix(in srgb, var(--syntax-color,gray) 40%, transparent)}.progress-bar{background:#404040;border-radius:2px;height:4px;margin-bottom:1rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--tutor-secondary), var(--tutor-accent));border-radius:2px;height:100%;transition:width .3s}.infinite-progress{gap:1.5rem;margin-bottom:1rem;display:none}.infinite-progress.visible{display:flex}.infinite-bar-group{flex-direction:column;flex:1;display:flex}.infinite-bar-label{text-transform:uppercase;letter-spacing:.05em;color:gray;justify-content:space-between;margin-bottom:.3rem;font-size:.7rem;display:flex}.infinite-bar-label span:last-child{color:var(--tutor-secondary);font-family:JetBrains Mono,monospace}.infinite-bar-group .progress-bar{margin-bottom:0}@keyframes bar-glow-green{0%{box-shadow:0 0 8px 2px #99d1a0cc}to{box-shadow:0 0 #99d1a000}}@keyframes bar-glow-red{0%{box-shadow:0 0 8px 2px #f38ba8cc}to{box-shadow:0 0 #f38ba800}}.bar-flash-green{animation:.5s ease-out bar-glow-green}.bar-flash-red{animation:.5s ease-out bar-glow-red}.message{text-align:center;color:var(--tutor-muted);padding:1rem;font-style:italic}.results{background:var(--tutor-bg);text-align:center;border-radius:12px;margin-top:3rem;padding:2rem;display:none}.results.visible{display:block}.results h2{color:var(--tutor-heading);margin-bottom:1.5rem}.results-stats{justify-content:center;gap:3rem;margin-bottom:1.5rem;display:flex}.result-stat{text-align:center}.result-value{color:var(--tutor-success);font-size:3rem;font-weight:700}.result-label{color:var(--tutor-muted);text-transform:uppercase;letter-spacing:1px}.best-score{color:var(--tutor-heading);margin-bottom:1.5rem}.next-level{border-left:3px solid var(--tutor-accent);text-align:left;background:#00000040;border-radius:6px;margin-bottom:1.5rem;padding:.75rem 1rem}.next-level:empty{display:none}.next-level .next-level-label{text-transform:uppercase;letter-spacing:1px;color:var(--tutor-accent);margin-bottom:.4rem;font-size:.7rem;font-weight:600}.next-level .next-level-content{color:var(--tutor-heading);font-size:.85rem;line-height:1.4}.next-level .next-level-progress{align-items:center;gap:.6rem;margin-top:.5rem;display:flex}.next-level .next-level-bar{background:#ffffff1a;border-radius:2px;flex:1;height:4px;overflow:hidden}.next-level .next-level-bar-fill{background:var(--tutor-accent);border-radius:2px;height:100%;transition:width .3s}.next-level .next-level-bar-label{color:var(--tutor-muted);white-space:nowrap;font-size:.75rem}.next-level .next-level-keys{flex-wrap:wrap;gap:.35rem;margin-top:.5rem;display:flex}.next-level .next-level-key{text-transform:uppercase;width:1.6rem;height:1.6rem;color:var(--tutor-text);background:#ffffff0f;border:1px solid #ffffff26;border-radius:4px;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;display:inline-flex}.next-level .next-level-key.needs-work{border-color:var(--tutor-warning);color:var(--tutor-heading)}.result-actions{justify-content:center;gap:1rem;display:flex}.action-btn{cursor:pointer;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;transition:all .2s}.action-btn.primary{background:var(--tutor-accent);color:var(--tutor-neutral-bg)}.action-btn.secondary{border:2px solid var(--tutor-secondary);color:var(--tutor-secondary);background:0 0}.action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.done-container{z-index:101;position:fixed;bottom:1rem;right:1rem}.done-btn{border:2px solid var(--tutor-secondary);background:var(--tutor-bg);color:var(--tutor-secondary);cursor:pointer;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;transition:all .2s;box-shadow:0 4px 12px #0006}.done-btn:hover{background:var(--tutor-secondary);color:var(--tutor-neutral-bg)}.missed-keys{background:#252525;border-radius:8px;margin:1.5rem 0;padding:1rem}.missed-keys-label{color:var(--tutor-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;font-size:.85rem}.missed-keys-table{border-collapse:separate;border-spacing:0 .35rem;margin:0 auto}.missed-keys-table td{color:var(--tutor-muted);vertical-align:middle;padding:.25rem .5rem;font-size:.85rem}.missed-keys-table td:first-child{text-align:center;width:40px;padding-right:.75rem}.missed-keys-table td:last-child{text-align:right;white-space:nowrap}.missed-key-cap{background:var(--tutor-dark-bg);border:1px solid var(--tutor-error);min-width:28px;height:28px;color:var(--tutor-error);border-radius:4px;justify-content:center;align-items:center;padding:0 6px;font-family:Consolas,Monaco,monospace;font-size:.8rem;font-weight:700;display:inline-flex}.cli-controls{flex-direction:column;align-items:center;gap:1rem;margin-bottom:1.5rem;display:none}.cli-controls.visible{display:flex}.cli-tier-selector{align-items:center;gap:.5rem;display:flex}.cli-tier-btn{border:2px solid var(--tutor-secondary);width:36px;height:36px;color:var(--tutor-secondary);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;font-size:1rem;font-weight:700;transition:all .2s;display:flex}.cli-tier-btn:hover,.cli-tier-btn.active{background:var(--tutor-secondary);color:var(--tutor-neutral-bg)}.cli-tier-description{color:var(--tutor-muted);font-size:.9rem;font-style:italic}.cli-feedback{flex-direction:column;gap:.5rem;width:100%;max-width:900px;display:flex}.cli-feedback-card{background:var(--tutor-bg);border-left:3px solid var(--tutor-success);border-radius:0 8px 8px 0;padding:.75rem 1rem;animation:.3s ease-out cli-fade-in}@keyframes cli-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.cli-feedback-command{color:var(--tutor-heading);margin-bottom:.25rem;font-family:Consolas,Monaco,monospace;font-size:.95rem}.cli-prompt-symbol{color:var(--tutor-success);margin-right:.5rem}.cli-feedback-description{color:silver;margin-bottom:.25rem;font-size:.85rem}.cli-feedback-stats{color:var(--tutor-secondary);font-size:.8rem}@keyframes flash-glow-green{0%{box-shadow:0 0 15px 3px #99d1a0b3}}@keyframes flash-glow-red{0%{box-shadow:0 0 15px 3px #f38ba8b3}}@keyframes flash-glow-green-kb{0%{box-shadow:0 -4px 20px #00000080,0 0 15px 3px #99d1a0b3}}@keyframes flash-glow-red-kb{0%{box-shadow:0 -4px 20px #00000080,0 0 15px 3px #f38ba8b3}}.typing-area.focus-drill{box-shadow:0 0 12px 2px #ffffff59}.typing-area.lock-in{box-shadow:0 0 12px 2px #78c87859}.typing-area.flash-green{animation:.4s ease-out flash-glow-green}.typing-area.flash-red{animation:.4s ease-out flash-glow-red}#keyboard.flash-green{animation:.4s ease-out flash-glow-green-kb}#keyboard.flash-red{animation:.4s ease-out flash-glow-red-kb}.cli-infinite-status{text-align:center;padding:.5rem;font-size:.9rem;font-weight:700;animation:.3s ease-out cli-fade-in}.typing-tutor-container .hidden{display:none!important}.focus-keys-container{flex-direction:column;flex:0 0 100%;align-items:center;gap:.75rem;margin-top:.75rem;display:flex}.focus-keys-toggle{cursor:pointer;color:var(--tutor-muted);accent-color:var(--tutor-secondary);align-items:center;gap:.5rem;font-size:.9rem;display:flex}.focus-key-grid{justify-content:center;gap:.35rem;margin-bottom:1.5rem;display:flex}.focus-key-btn{background:var(--tutor-dark-bg);width:28px;height:28px;color:var(--tutor-dimmed);cursor:pointer;text-transform:uppercase;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;font-family:Consolas,Monaco,monospace;font-size:.8rem;font-weight:700;transition:all .2s;display:flex}.focus-key-btn:hover{color:var(--tutor-accent);background:#7d9dcc26}.focus-key-btn.active{color:var(--tutor-accent);border:1px solid var(--tutor-accent);background:#7d9dcc33}#keyboardContainer{z-index:100;position:fixed;bottom:0;left:50%;transform:translate(-50%)}#keyboard{background:var(--tutor-bg);border-radius:8px 8px 0 0;padding:1rem;display:block;box-shadow:0 -4px 20px #00000080}.keyboard-close-btn{color:#666;cursor:pointer;z-index:101;background:0 0;border:none;border-radius:4px;padding:.25rem .5rem;font-size:1rem;transition:color .2s;position:absolute;top:4px;right:4px}.keyboard-close-btn:hover{color:var(--tutor-muted)}.points-counter{color:var(--tutor-heading);pointer-events:none;z-index:10;font-family:JetBrains Mono,Consolas,monospace;font-size:.9rem;font-weight:700;position:absolute;top:.5rem;right:.75rem}.points-counter.zero{opacity:.35}.points-counter.bump{animation:.2s ease-out counter-bump}@keyframes counter-bump{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.points-popup{pointer-events:none;z-index:10;font-family:JetBrains Mono,Consolas,monospace;font-size:.85rem;font-weight:700;animation:.6s ease-out forwards points-float;position:absolute;top:.5rem;right:3.5rem}.points-popup.positive{color:var(--tutor-success)}.points-popup.negative{color:var(--tutor-error)}.points-popup.wildcard{color:var(--tutor-warning)}@keyframes points-float{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}.streak-word{color:var(--tutor-heading);pointer-events:none;z-index:10;font-size:1.8rem;font-weight:700;animation:.8s ease-out forwards streak-pop;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes streak-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}30%{opacity:1;transform:translate(-50%,-50%)scale(1.2)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}.speed-bonus-reveal{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards bonus-slam;display:inline-block}@keyframes bonus-slam{0%{opacity:0;transform:scale(1.5)}60%{opacity:1;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (width<=600px){.typing-tutor-container{padding:1rem}.typing-tutor-header h1{font-size:1.8rem}.typing-text{font-size:1.1rem}.stats-container{gap:1.5rem}.stat-value{font-size:1.8rem}.stats-panel,.stats-panel-tab{display:none}}.stats-panel{background:var(--tutor-bg);border-left:1px solid var(--tutor-dimmed);z-index:200;flex-direction:column;width:220px;height:100vh;transition:transform .25s;display:flex;position:fixed;top:0;right:0;overflow:hidden;transform:translate(100%)}.stats-panel.open{transform:translate(0)}.stats-panel-header{border-bottom:1px solid var(--tutor-dimmed);color:var(--tutor-heading);justify-content:space-between;align-items:center;padding:.75rem 1rem;font-size:.9rem;font-weight:600;display:flex}.stats-panel-close{color:var(--tutor-muted);cursor:pointer;background:0 0;border:none;padding:0 .25rem;font-size:1.2rem;line-height:1}.stats-panel-close:hover{color:var(--tutor-text)}.stats-panel-body{flex:1;padding:.5rem 0;overflow-y:auto}.stats-panel-tab{writing-mode:vertical-rl;background:var(--tutor-bg);border:1px solid var(--tutor-dimmed);color:var(--tutor-muted);letter-spacing:1px;cursor:pointer;z-index:199;border-right:none;border-radius:6px 0 0 6px;padding:.6rem .35rem;font-size:.75rem;transition:color .2s;position:fixed;top:50%;right:0;transform:translateY(-50%)}.stats-panel-tab:hover{color:var(--tutor-text)}.stats-panel-tab.hidden,.stats-panel.open~.stats-panel-tab{display:none}.stats-section{border-left:3px solid var(--tutor-accent);background:#00000026;border-radius:0 4px 4px 0;margin:.5rem;padding:.6rem 1rem}.stats-section-title{text-transform:uppercase;letter-spacing:1px;color:var(--tutor-accent);margin-bottom:.4rem;font-size:.65rem;font-weight:600}.stats-count{color:var(--tutor-muted);text-transform:none;letter-spacing:0}.stats-row{justify-content:space-between;align-items:center;padding:.15rem 0;font-size:.8rem;display:flex}.stats-label{color:var(--tutor-muted)}.stats-value{color:var(--tutor-text);font-family:Consolas,Monaco,monospace;font-weight:500}.stats-word-list{color:var(--tutor-text);max-height:120px;font-family:Consolas,Monaco,monospace;font-size:.75rem;line-height:1.5;overflow-y:auto}.stats-empty{color:var(--tutor-muted);font-size:.75rem;font-style:italic}.lock-in-ready{color:var(--tutor-success)}.panel-results{border-left-color:var(--tutor-success);background:#0003}.panel-results .challenge-notification,.panel-results .unlock-notification{margin-top:.4rem;font-size:.75rem}.panel-results .challenge-letter,.panel-results .unlock-letter{font-size:1rem}.panel-results .next-level-label{color:var(--tutor-accent);text-transform:uppercase;letter-spacing:1px;margin-top:.4rem;font-size:.65rem;font-weight:600}.panel-results .next-level-content{color:var(--tutor-muted);font-size:.75rem}.panel-points-label{color:var(--tutor-muted);text-align:right;min-height:1em;padding:0 0 .1rem;font-size:.7rem}.auto-advance{animation:1s ease-in-out infinite pulse-advance}@keyframes pulse-advance{0%,to{opacity:1}50%{opacity:.5}}.challenge-interstitial{flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;display:flex}.challenge-interstitial-actions{gap:.75rem;display:flex}.challenge-interstitial-btn{cursor:pointer;border:1px solid var(--tutor-dimmed);background:var(--tutor-accent);color:var(--tutor-bg);border-radius:6px;padding:.5rem 1.25rem;font-size:.9rem;transition:opacity .2s}.challenge-interstitial-btn:hover{opacity:.85}.challenge-interstitial-btn.secondary{color:var(--tutor-muted);border-color:var(--tutor-dimmed);background:0 0}.challenge-interstitial-btn.secondary:hover{color:var(--tutor-text)}@media (width<=768px){.stats-panel,.stats-panel-tab{display:none!important}}