:root{--bg:#1a1a2e;--bg-surface:#252540;--text-primary:#d8d4cf;--text-dim:#646669;--accent:#e2b714;--error:#ca4754;--extra:#7e2a33;--cursor:#e2b714;--chord-pending:#6b685f;--chord-correct:#9ac940;--chord-missed:#c4956a;--arpeggiate-pending:#5b7a6b;--arpeggiate-missed:#7ab89a;--tier-s:gold;--tier-a:#9ac940;--tier-b:#5ba0d4;--tier-c:#c4956a;--tier-d:#ca4754;--tier-fail:#7e2a33}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text-primary);background-image:radial-gradient(at 50% 20%,#e2b71406 0%,#0000 60%);min-height:100vh;font-family:JetBrains Mono,Fira Code,Cascadia Code,Consolas,monospace}.app{justify-content:center;align-items:flex-start;gap:2rem;min-height:100vh;padding:2rem;display:flex}.app-main{flex-direction:column;flex:1;align-items:center;min-width:0;display:flex}.app-view{justify-content:center;width:100%;display:flex}.app-view.hidden{display:none}.app-header{flex-direction:column;align-items:center;gap:.75rem;margin-bottom:3rem;display:flex}.app-header-controls,.page-nav,.secondary-controls,.modifier-toggles{align-items:center;display:flex}.app-header-controls{flex-direction:column;gap:.65rem}.page-nav{gap:.5rem}.page-nav-link{color:var(--text-dim);border-radius:999px;padding:.3rem .8rem;font-size:.9rem;text-decoration:none;transition:color .15s,background-color .15s}.page-nav-link:hover{color:var(--text-primary);background:#ffffff08}.page-nav-link.active{color:var(--accent);background:#e2b71414}.secondary-controls{opacity:.78;gap:.65rem}.modifier-toggles{border-left:1px solid #64666940;gap:.25rem;padding-left:.65rem}.app-title{color:var(--accent);letter-spacing:.15em;text-shadow:0 0 30px #e2b71426;font-size:1.5rem;font-weight:300}.typing-test{width:100%;max-width:900px}.loading{color:var(--text-dim);font-size:1.2rem}.mode-selector{justify-content:center;align-items:center;gap:.75rem;margin-bottom:8vh;display:flex}.typing-test:has(.word-display.finished) .mode-selector{margin-bottom:1.5rem}.mode-tabs,.preset-tabs{gap:.5rem;display:flex}.dict-select{color:var(--text-dim);cursor:pointer;appearance:none;background:0 0;border:none;border-radius:4px;padding:.25rem;font-family:inherit;font-size:.9rem;transition:color .15s}.dict-select:hover{color:var(--text-primary)}.dict-select:focus{color:var(--accent);outline:none}.dict-select:disabled{opacity:.4;cursor:default}.dict-select option{background:var(--bg-surface);color:var(--text-primary)}.mode-divider{background:var(--text-dim);opacity:.3;border-radius:1px;width:2px;height:1.2rem}.mode-tab,.preset-tab{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.25rem .75rem;font-family:inherit;font-size:.9rem;transition:color .15s}.mode-tab:hover,.preset-tab:hover{color:var(--text-primary)}.mode-tab.active,.preset-tab.active{color:var(--accent)}.mode-tab:disabled,.preset-tab:disabled{opacity:.4;cursor:default}.timer{text-align:center;color:var(--accent);font-variant-numeric:tabular-nums;min-height:2.5rem;margin-bottom:1rem;font-size:2rem}.word-display-wrapper{cursor:text;position:relative}.focus-overlay{color:var(--text-dim);z-index:1;background:#1a1a2ecc;border-radius:8px;justify-content:center;align-items:center;font-size:1.1rem;display:flex;position:absolute;inset:0}.word-display{-webkit-user-select:none;user-select:none;outline:none;min-height:200px;padding:1rem;font-size:1.65rem;line-height:2.2;transition:filter .15s}.word-display.blurred{filter:blur(4px)}.word{display:inline}.char{transition:color 50ms;position:relative}.char.pending{color:var(--text-dim)}.word.chorded .char.pending{color:var(--chord-pending)}.word.arpeggiate .char.pending{color:var(--arpeggiate-pending)}.char.correct{color:var(--accent)}.word.chord-entered .char.correct{color:var(--chord-correct)}.word-display.finished .word.chord-entered .char.correct{-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#e2b714,#f0d850,#8ad240,#40c4aa,#5ba0d4,#9b7fd4,#e2b714) 0 0/200%;-webkit-background-clip:text;background-clip:text;animation:2s linear infinite rainbow-shimmer}@keyframes rainbow-shimmer{to{background-position:200%}}.word.chord-missed .char.correct{color:var(--chord-missed)}.word.arpeggiate.chord-missed .char.correct{color:var(--arpeggiate-missed)}.char.incorrect{color:var(--error)}.char.missed{color:var(--error);opacity:.5}.char.extra{color:var(--extra)}.char.cursor:after{content:"";background:var(--cursor);width:100%;height:2px;animation:1s step-end infinite blink;position:absolute;bottom:-2px;left:0}.char.after-word{width:.6ch;font-size:0;display:inline-block}.char.after-word:after{width:.6ch}@keyframes blink{50%{opacity:0}}.results{text-align:center;padding:3rem 1rem}.results-main{justify-content:center;gap:4rem;margin-bottom:3rem;display:flex}.result-item{flex-direction:column;gap:.25rem;display:flex}.result-label{color:var(--text-dim);font-size:1rem}.result-value{color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 20px #e2b7141a;font-size:3rem}.result-wpm .result-value{font-size:4rem}.chord-results{margin-bottom:2rem}.chord-summary{color:var(--chord-correct);margin-bottom:1rem;font-size:1.1rem}.chord-summary.arpeggiate-summary{color:var(--arpeggiate-missed);margin-top:-.5rem;font-size:.95rem}.chord-missed-list{text-align:left;max-width:400px;margin:0 auto}.chord-missed-title{color:var(--text-dim);margin-bottom:.5rem;font-size:.9rem}.chord-missed-list ul{padding:0;list-style:none}.chord-missed-list li{color:var(--text-dim);padding:.15rem 0;font-size:.9rem}.chord-missed-word{color:var(--chord-missed)}.chord-missed-keys{color:var(--text-dim);font-size:.85rem}.chord-practice{text-align:left;max-width:400px;margin:0 auto 1.5rem}.chord-practice-title{color:var(--text-dim);margin-bottom:.5rem;font-size:.9rem}.chord-practice-list{padding:0;list-style:none}.chord-practice-item{color:var(--text-dim);opacity:.4;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.9rem;display:flex}.chord-practice-item.active{opacity:1}.chord-practice-item.done{opacity:.6}.chord-practice-indicator{text-align:center;min-width:1rem}.chord-practice-arrow{color:var(--accent);font-size:.7rem}.chord-practice-done-check{color:var(--chord-correct);opacity:.6}.chord-practice-word{color:var(--chord-missed)}.chord-practice-item.done .chord-practice-word{color:var(--chord-correct);opacity:.7}.chord-practice-keys{color:var(--text-dim);font-size:.85rem}.chord-practice-feedback{font-weight:700;animation:.6s ease-out forwards flash-feedback}.chord-practice-feedback.correct{color:var(--chord-correct)}.chord-practice-feedback.incorrect{color:var(--error)}@keyframes flash-feedback{0%{opacity:0;transform:scale(1.3)}15%{opacity:1;transform:scale(1)}70%{opacity:1}to{opacity:0}}.chord-input-visual{justify-content:center;align-items:center;gap:.3rem;margin-top:.25rem;font-size:.85rem;display:flex}.chord-practice-item .chord-input-visual{justify-content:flex-start;width:100%;margin-left:1.5rem}.chord-input-slot{text-align:center;border-radius:3px;min-width:1.2rem;padding:.1rem .25rem;font-weight:500;display:inline-block}.chord-input-slot.pending{color:var(--text-dim);opacity:.4}.chord-input-slot.matched{color:var(--chord-correct)}.chord-input-slot.missing{color:var(--accent)}.chord-input-slot.error{color:var(--error)}.chord-input-missing-label{color:var(--accent);opacity:.8;margin-left:.5rem;font-size:.75rem}.chord-practice-complete{color:var(--chord-correct);margin-top:1rem;font-size:.95rem}.results-actions{justify-content:center;gap:1.5rem;display:flex}.btn-restart{color:var(--text-dim);cursor:pointer;background:0 0;border:1px solid #6466694d;border-radius:4px;padding:.5rem 1.5rem;font-family:inherit;font-size:1rem;transition:all .15s}.btn-restart:hover{color:var(--accent);border-color:var(--accent)}.run-history{border-top:1px solid #64666926;margin-top:2rem;padding-top:1.5rem}.run-history-title{color:var(--text-dim);margin-bottom:.75rem;font-size:.85rem}.run-history-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;max-width:400px;margin:0 auto;font-size:.85rem}.run-history-table th{color:var(--text-dim);text-align:right;opacity:.6;padding:.25rem .75rem;font-weight:400}.run-history-table th:first-child{text-align:right}.run-history-table td{color:var(--text-dim);text-align:right;opacity:.5;padding:.2rem .75rem}.run-history-latest td{color:var(--text-primary);opacity:.8}.run-history-wpm{font-weight:500;color:var(--accent)!important}.chord-upload{align-items:center;gap:.25rem;display:flex}.chord-upload-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.2rem .5rem;font-family:inherit;font-size:.8rem;transition:color .15s}.chord-upload-btn:hover{color:var(--text-primary)}.chording-mode{color:var(--text-dim);opacity:.75;font-size:.72rem}.chord-clear-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0 .25rem;font-family:inherit;font-size:.9rem;line-height:1;transition:color .15s}.chord-clear-btn:hover{color:var(--error)}.left-rail,.right-rail{flex-shrink:0;align-self:stretch;width:280px}.left-rail{flex-direction:column;align-self:flex-start;height:calc(100vh - 4rem);display:flex;position:sticky;top:2rem}.recommendations-rail{flex-direction:column;flex:1;gap:1.25rem;min-height:0;display:flex}.recommendations-section{flex-direction:column;flex-shrink:0;min-height:0;display:flex}.recommendations-section.scrollable{flex:1 1 0}.recommendations-section.scrollable .recommendations-list{flex:1;min-height:0}.recommendations-title,.recommendations-section-title{color:var(--text-dim);text-align:center;margin-bottom:.5rem;font-size:.8rem}.recommendations-list{overflow-y:auto}.recommendation-item{padding:.3rem 0}.recommendation-word-row{justify-content:space-between;align-items:center;gap:.25rem;display:flex}.recommendation-word{color:var(--text-primary);margin-bottom:.1rem;font-size:.9rem}.recommendation-dismiss{color:var(--text-dim);cursor:pointer;opacity:0;background:0 0;border:none;padding:0 .3rem;font-family:inherit;font-size:.75rem;line-height:1;transition:opacity .15s,color .15s}.recommendation-item:hover .recommendation-dismiss{opacity:1}.recommendation-dismiss:hover{color:var(--error)}.recommendation-chord{padding-left:.75rem;font-size:.8rem;line-height:1.5}.recommendation-easy{color:var(--chord-correct)}.recommendation-medium{color:var(--accent)}.recommendation-hard{color:var(--chord-missed)}.recommendations-actions{flex-direction:column;gap:.3rem;margin-bottom:.5rem;display:flex}.recommendations-action{color:var(--text-primary);cursor:pointer;background:0 0;border:1px solid #e2b71466;border-radius:4px;padding:.3rem .5rem;font-family:inherit;font-size:.75rem;transition:background .15s,color .15s,border-color .15s}.recommendations-action:hover:not(:disabled){color:var(--accent);border-color:var(--accent);background:#e2b7141a}.recommendations-action:disabled{opacity:.4;cursor:not-allowed;border-color:#6466694d}.recommendations-empty{color:var(--text-dim);text-align:center;padding:.5rem 0;font-size:.75rem;line-height:1.4}.missed-chord-item{grid-template-rows:auto auto;grid-template-columns:1fr auto;align-items:baseline;column-gap:.5rem;padding:.3rem 0;display:grid}.missed-chord-item .recommendation-word{grid-area:1/1}.missed-chord-item .recommendation-chord{grid-area:2/1}.missed-chord-meta{flex-direction:column;grid-area:1/2/span 2;align-items:flex-end;gap:.1rem;font-size:.7rem;display:flex}.missed-chord-count{color:var(--chord-missed)}.missed-chord-streak{color:var(--text-dim)}.practice-toggle{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.2rem .5rem;font-family:inherit;font-size:.8rem;transition:color .15s}.practice-toggle:hover{color:var(--text-primary)}.practice-toggle.active{color:var(--accent)}.right-rail{flex-direction:column;gap:1rem;display:flex}.chord-lookup{z-index:20;background:var(--bg-surface);border:1px solid #6466692e;border-radius:10px;flex-direction:column;gap:.5rem;width:280px;padding:.75rem 1rem;display:flex;position:fixed;top:2rem;right:2rem;box-shadow:0 8px 24px #00000040}.chord-lookup-title{color:var(--text-dim);text-align:center;font-size:.8rem}.chord-lookup-input{background:var(--bg-surface);color:var(--text-primary);border:1px solid #64666933;border-radius:8px;outline:none;padding:.5rem .75rem;font-family:inherit;font-size:.9rem;transition:border-color .15s}.chord-lookup-input:focus{border-color:#e2b7144d}.chord-lookup-input::placeholder{color:var(--text-dim);opacity:.5}.chord-lookup-results{flex-direction:column;gap:.2rem;min-height:5.5rem;display:flex}.chord-lookup-label{color:var(--text-dim);font-size:.75rem}.chord-lookup-existing{flex-direction:column;gap:.2rem;display:flex}.chord-lookup-chord{color:var(--chord-correct);padding-left:.75rem;font-size:.9rem}.chord-lookup-suggestion{padding-left:.75rem;font-size:.8rem;line-height:1.5}.long-form-staging{flex-direction:column;gap:1rem;width:100%;max-width:900px;display:flex}.long-form-heading{justify-content:space-between;align-items:flex-end;gap:1rem;display:flex}.long-form-title{color:var(--accent);letter-spacing:.08em;font-size:1.4rem;font-weight:300}.long-form-subtitle{color:var(--text-dim);margin-top:.35rem;font-size:.85rem}.long-form-stats{color:var(--text-dim);white-space:nowrap;gap:.75rem;font-size:.78rem;display:flex}.long-form-stats strong{color:var(--accent);font-weight:500}.long-form-editor-wrap{background:var(--bg-surface);border:1px solid #64666933;border-radius:12px;min-height:56vh;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}.long-form-editor-wrap:focus-within{border-color:#e2b71459;box-shadow:0 0 30px #e2b7140a}.long-form-overlay,.long-form-textarea{width:100%;height:100%;font:inherit;letter-spacing:.01em;white-space:pre-wrap;padding:1.8rem 1.25rem 1.25rem;font-size:1.05rem;line-height:2.25rem;position:absolute;inset:0;overflow:auto}.long-form-overlay{z-index:1;color:var(--text-primary);pointer-events:none;overflow-wrap:anywhere;scrollbar-width:none}.long-form-overlay::-webkit-scrollbar{display:none}.long-form-textarea{z-index:2;resize:none;color:#0000;caret-color:var(--accent);background:0 0;border:none;outline:none}.long-form-textarea::selection{background:#e2b71438}.long-form-placeholder{color:var(--text-dim);opacity:.55}.long-form-word{display:inline-block;position:relative}.long-form-word.annotated{text-underline-offset:.18em;-webkit-text-decoration:underline dotted #e2b71438;text-decoration:underline dotted #e2b71438}.long-form-annotation{white-space:nowrap;opacity:.9;font-size:.58rem;font-style:italic;line-height:1;position:absolute;top:-.38rem;left:0}.long-form-annotation.missed{color:var(--chord-missed)}.long-form-annotation.missed-arpeggiate{color:var(--arpeggiate-missed)}.long-form-annotation.new{color:var(--text-dim)}.long-form-legend{color:var(--text-dim);flex-wrap:wrap;gap:1rem;font-size:.75rem;display:flex}.legend-swatch{border-radius:50%;width:.55rem;height:.55rem;margin-right:.35rem;display:inline-block}.long-form-wpm{color:var(--text-dim);opacity:.55;letter-spacing:.03em;margin-left:.75rem;font-size:.7rem;font-style:italic}.legend-swatch.missed{background:var(--chord-missed)}.legend-swatch.arpeggiate{background:var(--arpeggiate-missed)}.legend-swatch.new{background:var(--text-dim)}.chord-drill{flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:900px;min-height:300px;display:flex;position:relative}.drill-presenting{flex-direction:column;align-items:center;gap:1rem;display:flex;position:relative}.drill-word{color:var(--accent);letter-spacing:.05em;text-shadow:0 0 30px #e2b7141a;font-size:3.5rem;font-weight:300;transition:color .15s}.drill-word.blurred{filter:blur(4px)}.drill-word.tier-S{color:var(--tier-s);text-shadow:0 0 30px #ffd70026}.drill-word.tier-A{color:var(--tier-a);text-shadow:0 0 30px #9ac94026}.drill-word.tier-B{color:var(--tier-b);text-shadow:0 0 30px #5ba0d426}.drill-word.tier-C{color:var(--tier-c);text-shadow:0 0 30px #c4956a26}.drill-word.tier-D{color:var(--tier-d);text-shadow:0 0 30px #ca475426}.drill-word.tier-fail{color:var(--tier-fail)}.drill-hint{color:var(--text-dim);opacity:.7;font-size:1rem;animation:.3s ease-out fade-in}.drill-hint.compound{align-items:center;gap:.5rem;display:flex}.compound-arrow{color:var(--accent);opacity:.6;margin:0 .15rem;font-size:.9em}.compound-part{letter-spacing:.02em}.drill-compound-label{color:var(--text-dim);opacity:.4;margin-top:.25rem;font-size:.75rem;font-style:italic}.drill-upcoming{flex-direction:column;align-items:center;gap:.25rem;min-height:3.5rem;margin-top:1rem;display:flex}.drill-upcoming-word{color:var(--text-dim);letter-spacing:.05em;font-weight:300}.drill-upcoming-word.next{opacity:.3;font-size:1.6rem}.drill-upcoming-word.later{opacity:.15;font-size:1.2rem}@keyframes fade-in{0%{opacity:0}to{opacity:.7}}.drill-focus-overlay{color:var(--text-dim);background:#1a1a2ecc;border-radius:8px;justify-content:center;align-items:center;font-size:1.1rem;display:flex;position:absolute;inset:0}.drill-empty{text-align:center;color:var(--text-dim)}.drill-empty-text{margin-bottom:.5rem;font-size:1.2rem}.drill-empty-hint{opacity:.6;font-size:.9rem}.drill-feedback{align-items:center;gap:.75rem;animation:.8s ease-out forwards flash-feedback;display:flex}.drill-tier-badge{background:#ffffff0d;border-radius:6px;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:2rem;font-weight:700;display:flex}.drill-tier-badge.tier-S{color:var(--tier-s)}.drill-tier-badge.tier-A{color:var(--tier-a)}.drill-tier-badge.tier-B{color:var(--tier-b)}.drill-tier-badge.tier-C{color:var(--tier-c)}.drill-tier-badge.tier-D{color:var(--tier-d)}.drill-tier-badge.tier-fail{color:var(--tier-fail)}.drill-time{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:1.2rem}.drill-hinted{color:var(--text-dim);opacity:.5;font-size:.85rem}.drill-wrong-chord{color:var(--chord-missed);text-align:center;font-size:.9rem}.drill-wrong-chord-label{color:var(--text-dim);font-size:.8rem}.drill-slide-result{pointer-events:none;z-index:10;background:#ffffff08;border-radius:6px;align-items:center;gap:.5rem;padding:.4rem .75rem;animation:1.1s ease-out forwards slide-out-right;display:flex;position:absolute;top:0;right:0}.drill-slide-result .drill-tier-badge{width:1.6rem;height:1.6rem;font-size:1.2rem}.drill-slide-word{color:var(--text-dim);opacity:.8;font-size:.9rem}.drill-slide-time{color:var(--text-dim);opacity:.6;font-variant-numeric:tabular-nums;font-size:.8rem}.drill-slide-hinted{color:var(--text-dim);opacity:.4;font-size:.7rem}@keyframes slide-out-right{0%{opacity:1;transform:translate(0)}20%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(4rem)}}.drill-streak{color:var(--tier-a);font-variant-numeric:tabular-nums;opacity:.7;font-size:.9rem;animation:.3s ease-out fade-in}.drill-progress{flex-direction:column;align-items:center;gap:.75rem;display:flex}.drill-batch{gap:.4rem;display:flex}.drill-batch-pill{background:var(--text-dim);opacity:.3;border-radius:50%;width:.6rem;height:.6rem;transition:all .15s}.drill-batch-pill.current{opacity:1;transform:scale(1.4);box-shadow:0 0 6px}.drill-batch-pill.s{background:var(--tier-s);opacity:.8}.drill-batch-pill.a{background:var(--tier-a);opacity:.8}.drill-batch-pill.b{background:var(--tier-b);opacity:.8}.drill-batch-pill.c{background:var(--tier-c);opacity:.8}.drill-batch-pill.d{background:var(--tier-d);opacity:.8}.drill-batch-pill.fail{background:var(--tier-fail);opacity:.8}.drill-stats{color:var(--text-dim);opacity:.6;gap:1rem;font-size:.75rem;display:flex}.drill-stat.well-known{color:var(--tier-s)}.drill-stat.good{color:var(--tier-a)}.drill-stat.struggling{color:var(--tier-d)}