:root{--color-bg: #f8f9fa;--color-surface: #ffffff;--color-surface-2: #f0f2f5;--color-border: #dee2e6;--color-text: #212529;--color-text-muted: #6c757d;--color-text-inv: #ffffff;--color-primary: #4361ee;--color-primary-h: #3a56d4;--color-success: #2dc653;--color-error: #e5383b;--color-warning: #f4a261;--color-neutral: #adb5bd;--color-warmup: #fb8500;--color-warmup-h: #e07600;--finger-left-pinky: #c77dff;--finger-left-ring: #4cc9f0;--finger-left-middle: #4361ee;--finger-left-index: #f72585;--finger-right-index: #fb8500;--finger-right-middle: #06d6a0;--finger-right-ring: #118ab2;--finger-right-pinky: #ef233c;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px 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);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}.dark{--color-bg: #0f1117;--color-surface: #1a1d2e;--color-surface-2: #252840;--color-border: #2e3250;--color-text: #e2e8f0;--color-text-muted: #94a3b8;--color-text-inv: #0f1117;--color-primary: #738ef5;--color-primary-h: #8fa0f7;--color-success: #34d058;--color-error: #ff6b6b;--color-neutral: #475569}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh;transition:background-color var(--transition-slow),color var(--transition-slow)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}.app-wrapper{max-width:960px;margin:0 auto;padding:var(--space-4) var(--space-4) var(--space-16)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) 0 var(--space-8);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-8);gap:var(--space-4);flex-wrap:wrap}.app-logo{display:flex;align-items:center;gap:var(--space-3)}.app-logo-icon{font-size:1.75rem;line-height:1}.app-title{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--color-text)}.app-subtitle{font-size:.8rem;color:var(--color-text-muted);margin-top:.1rem}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);white-space:nowrap;user-select:none}.btn:active{transform:scale(.97)}.btn--primary{background-color:var(--color-primary);color:#fff}.btn--primary:hover{background-color:var(--color-primary-h);box-shadow:var(--shadow-md)}.btn--secondary{background-color:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover{background-color:var(--color-border)}.btn--warmup{background-color:var(--color-warmup);color:#fff}.btn--warmup:hover{background-color:var(--color-warmup-h);box-shadow:var(--shadow-md)}.btn--accent{background-color:#fb850026;color:var(--color-warmup);border:1px solid var(--color-warmup);font-weight:600}.btn--accent:hover{background-color:#fb850040}.btn--icon{padding:var(--space-2);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:1rem;line-height:1}.btn--icon:hover{background:var(--color-border)}.metrics{margin-bottom:var(--space-6)}.progress-track{height:6px;background:var(--color-surface-2);border-radius:99px;overflow:hidden;margin-bottom:var(--space-4)}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--color-primary),var(--color-success));border-radius:99px;transition:width var(--transition-normal)}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-bottom:var(--space-3)}.metric-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.metric-icon{font-size:1.25rem;flex-shrink:0}.metric-body{display:flex;flex-direction:column}.metric-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;line-height:1;color:var(--color-primary)}.metric-label{font-size:.75rem;color:var(--color-text-muted);margin-top:var(--space-1);text-transform:uppercase;letter-spacing:.05em}.metric-card--errors .metric-value{color:var(--color-error)}.metric-card--accuracy .metric-value{color:var(--color-success)}.finger-hint{font-size:.875rem;font-weight:500;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);min-height:2rem;display:inline-flex;align-items:center;transition:all var(--transition-fast)}.finger-hint--left{background:#4361ee1f;color:var(--color-primary)}.finger-hint--right{background:#fb85001f;color:var(--color-warning)}.typing-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md);margin-bottom:var(--space-6)}.typing-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);gap:var(--space-3);flex-wrap:wrap}.typing-header-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}.warmup-badge{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:#fb850026;color:var(--color-warmup);border:1px solid var(--color-warmup);border-radius:99px;font-size:.8rem;font-weight:700;animation:warmup-pulse 2s ease-in-out infinite}@keyframes warmup-pulse{0%,to{opacity:1}50%{opacity:.7}}.progress-bar--warmup{background:linear-gradient(90deg,var(--color-warmup),#ffd166)!important}.typing-title{font-size:1rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.typing-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}.typing-keys-info{font-size:.8rem;color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.exercise-indicator{font-size:.8rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.exercise-indicator strong{color:var(--color-primary);font-weight:700}.exercise-indicator--warmup{color:var(--color-warmup);font-weight:600}.keys-row{display:inline-flex;gap:var(--space-1);flex-wrap:wrap}.typing-area{background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);min-height:5.5rem;cursor:default;transition:border-color var(--transition-fast);overflow:hidden}.typing-area:focus,.typing-area:focus-within{border-color:var(--color-primary);outline:none}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.shake{animation:shake .3s ease;border-color:var(--color-error)!important}.text-display{font-family:var(--font-mono);font-size:1.5rem;line-height:2;letter-spacing:.06em;display:flex;flex-wrap:wrap;gap:0;word-break:break-all;user-select:none}.char{display:inline-block;transition:color var(--transition-fast),background-color var(--transition-fast);border-radius:3px}.char-correct{color:var(--color-success)}.char-pending{color:var(--color-text-muted)}.char-current{color:var(--color-text);background-color:var(--color-primary);color:#fff;border-radius:3px;animation:pulse-cursor 1s ease-in-out infinite}.char-current.char-error{background-color:var(--color-error);animation:none}@keyframes pulse-cursor{0%,to{opacity:1}50%{opacity:.7}}.typing-legend{display:flex;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:.8rem;color:var(--color-text-muted)}.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.legend-dot--correct{background:var(--color-success)}.legend-dot--current{background:var(--color-primary)}.legend-dot--pending{background:var(--color-neutral)}.overlay{position:fixed;inset:0;background:#0000008c;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.overlay--visible{opacity:1;pointer-events:all}.overlay-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10) var(--space-12);max-width:420px;width:90%;text-align:center;box-shadow:var(--shadow-lg);animation:overlay-in .3s ease}@keyframes overlay-in{0%{transform:scale(.9) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.overlay-icon{font-size:3rem;margin-bottom:var(--space-3)}.overlay-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-2)}.overlay-message{color:var(--color-text-muted);margin-bottom:var(--space-6)}.overlay-results{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-6)}.overlay-stat{display:flex;flex-direction:column;align-items:center}.overlay-stat-value{font-family:var(--font-mono);font-size:2.5rem;font-weight:700;color:var(--color-primary);line-height:1}.overlay-stat-label{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:var(--space-1)}.overlay-countdown{font-size:.8rem;color:var(--color-text-muted);margin-bottom:var(--space-4)}.overlay-card--warmup{border-color:var(--color-warmup)}.overlay-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-2)}.warmup-dots{display:flex;gap:var(--space-2);justify-content:center;margin:var(--space-4) 0}.warmup-dot{width:14px;height:14px;border-radius:50%;background:var(--color-border);transition:background var(--transition-normal)}.warmup-dot--done{background:var(--color-warmup);box-shadow:0 0 8px #fb850080}.keyboard-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);margin-bottom:var(--space-6);overflow-x:auto}.keyboard-title{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-4)}.keyboard{display:flex;flex-direction:column;gap:var(--space-2);min-width:480px}.keyboard-row{display:flex;gap:var(--space-1);justify-content:center}.keyboard-row--home{position:relative}.key{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);border:2px solid var(--color-border);background:var(--color-surface-2);cursor:default;transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);position:relative;user-select:none}.key--sm{width:38px;height:38px}.key--space{width:280px;height:38px}.key-label{font-family:var(--font-mono);font-size:.875rem;font-weight:600;line-height:1;color:var(--color-text)}.key-finger{font-size:.5rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em;line-height:1;margin-top:2px}.key--home[data-key=a]{border-color:var(--finger-left-pinky)}.key--home[data-key=s]{border-color:var(--finger-left-ring)}.key--home[data-key=d]{border-color:var(--finger-left-middle)}.key--home[data-key=f],.key--home[data-key=g]{border-color:var(--finger-left-index)}.key--home[data-key=h],.key--home[data-key=j]{border-color:var(--finger-right-index)}.key--home[data-key=k]{border-color:var(--finger-right-middle)}.key--home[data-key=l]{border-color:var(--finger-right-ring)}.key--home[data-key=ñ]{border-color:var(--finger-right-pinky)}.key--active{transform:translateY(-4px);box-shadow:var(--shadow-md)}.key--active-left{background:#4361ee33;border-color:var(--color-primary)!important}.key--active-right{background:#fb850033;border-color:var(--color-warning)!important}.key--inactive .key-label{color:var(--color-neutral)}.keyboard-legend{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);justify-content:center}.legend-finger{font-size:.7rem;padding:2px var(--space-2);border-radius:99px;color:#fff;font-weight:500}.legend-finger--left-pinky{background:var(--finger-left-pinky)}.legend-finger--left-ring{background:var(--finger-left-ring)}.legend-finger--left-middle{background:var(--finger-left-middle)}.legend-finger--left-index{background:var(--finger-left-index)}.legend-finger--right-index{background:var(--finger-right-index)}.legend-finger--right-middle{background:var(--finger-right-middle)}.legend-finger--right-ring{background:var(--finger-right-ring)}.legend-finger--right-pinky{background:var(--finger-right-pinky)}.guide-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);margin-bottom:var(--space-6)}.guide-title{font-size:1.25rem;font-weight:700;margin-bottom:var(--space-4)}.guide-intro{background:var(--color-surface-2);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);padding:var(--space-4);margin-bottom:var(--space-6);font-size:.9rem;line-height:1.7}.guide-hands{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6)}.guide-hand{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.guide-hand-title{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-primary);color:#fff;font-size:.875rem;font-weight:600}.guide-hand-title--right{background:var(--color-warning)}.guide-key-list{list-style:none;padding:var(--space-2)}.guide-key-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.guide-key-item:hover{background:var(--color-surface-2)}.guide-key-item--stretch{opacity:.8}.guide-key{font-family:var(--font-mono);font-size:1rem;font-weight:700;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:2px solid;min-width:2.5rem;text-align:center;flex-shrink:0}.guide-key-item--pinky .guide-key{border-color:var(--finger-left-pinky);background:#c77dff1a}.guide-key-item--ring .guide-key{border-color:var(--finger-left-ring);background:#4cc9f01a}.guide-key-item--middle .guide-key{border-color:var(--finger-left-middle);background:#4361ee1a}.guide-key-item--index .guide-key{border-color:var(--finger-left-index);background:#f725851a}.guide-hand--right .guide-key-item--pinky .guide-key{border-color:var(--finger-right-pinky);background:#ef233c1a}.guide-hand--right .guide-key-item--ring .guide-key{border-color:var(--finger-right-ring);background:#118ab21a}.guide-hand--right .guide-key-item--middle .guide-key{border-color:var(--finger-right-middle);background:#06d6a01a}.guide-hand--right .guide-key-item--index .guide-key{border-color:var(--finger-right-index);background:#fb85001a}.guide-key-info{display:flex;flex-direction:column}.guide-key-info strong{font-size:.875rem}.guide-key-info span{font-size:.75rem;color:var(--color-text-muted)}.guide-tips{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6)}.guide-tips-title{font-size:1rem;font-weight:600;margin-bottom:var(--space-3)}.guide-tips-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.guide-tips-list li{font-size:.875rem;padding-left:var(--space-5);position:relative;line-height:1.5}.guide-tips-list li:before{content:"→";position:absolute;left:0;color:var(--color-primary);font-weight:700}.guide-history-title{font-size:1rem;font-weight:600;margin-bottom:var(--space-3)}.history-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-1)}.history-empty{font-size:.875rem;color:var(--color-text-muted);padding:var(--space-3) 0}.history-item{display:grid;grid-template-columns:auto auto 1fr 1fr 2fr;gap:var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);background:var(--color-surface-2);border-radius:var(--radius-md);font-size:.875rem}.history-rank{color:var(--color-text-muted);font-weight:600}.history-level{color:var(--color-primary);font-size:.7rem;font-weight:700;background:#4361ee1f;padding:1px 5px;border-radius:99px;align-self:center}.history-acc{color:var(--color-success);font-family:var(--font-mono);font-weight:700}.history-wpm{color:var(--color-primary);font-family:var(--font-mono);font-weight:700}.history-date{color:var(--color-text-muted);font-size:.75rem}kbd{display:inline-block;font-family:var(--font-mono);font-size:.8em;padding:.15em .4em;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--color-border);color:var(--color-text);white-space:nowrap}.modal{position:fixed;inset:0;background:#0000008c;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:110;opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.modal--visible{opacity:1;pointer-events:all}.modal-card{background:var(--color-surface);border:2px solid var(--color-warmup);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-10);max-width:400px;width:90%;text-align:center;box-shadow:var(--shadow-lg);animation:overlay-in .3s ease}.modal-level-badge{display:inline-block;background:var(--color-warmup);color:#fff;font-size:.75rem;font-weight:700;padding:var(--space-1) var(--space-3);border-radius:99px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3)}.modal-title{font-size:1.4rem;font-weight:700;margin-bottom:var(--space-2)}.modal-desc{color:var(--color-text-muted);font-size:.9rem;margin-bottom:var(--space-4)}.modal-new-keys{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-6)}.modal-keys-label{font-size:.8rem;color:var(--color-text-muted);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.06em}.modal-keys-row{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}.welcome-key{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;padding:var(--space-2) var(--space-4);background:var(--color-surface);border:2px solid var(--color-warmup);border-radius:var(--radius-md);color:var(--color-warmup);box-shadow:0 3px 0 var(--color-warmup-h)}.modal-actions{display:flex;flex-direction:column;gap:var(--space-3)}.drawer-backdrop{position:fixed;inset:0;background:#0006;z-index:200;opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.drawer-backdrop--visible{opacity:1;pointer-events:all}.drawer{position:fixed;top:0;right:0;height:100%;width:min(380px,92vw);background:var(--color-surface);border-left:1px solid var(--color-border);z-index:201;transform:translate(100%);transition:transform var(--transition-slow);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}.drawer--open{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);flex-shrink:0}.drawer-title{font-size:1.1rem;font-weight:700}.drawer-body{flex:1;overflow-y:auto;padding:var(--space-5) var(--space-6)}.setting-group{margin-bottom:var(--space-6)}.setting-group-title{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-4)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);cursor:pointer}.setting-row--sub{padding-left:var(--space-4);border-bottom:none;padding-top:var(--space-2);padding-bottom:var(--space-2)}.setting-info{display:flex;flex-direction:column;gap:2px}.setting-name{font-size:.9rem;font-weight:500}.setting-desc{font-size:.75rem;color:var(--color-text-muted)}.toggle-switch{position:relative;display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}.toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.toggle-track{width:42px;height:24px;background:var(--color-neutral);border-radius:99px;position:relative;transition:background var(--transition-fast)}.toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform var(--transition-fast);box-shadow:var(--shadow-sm)}.toggle-switch input:checked~.toggle-track{background:var(--color-primary)}.toggle-switch input:checked~.toggle-track .toggle-thumb{transform:translate(18px)}.toggle-switch input:disabled~.toggle-track{opacity:.4;cursor:not-allowed}.setting-sublevel{padding:var(--space-2) 0;transition:opacity var(--transition-fast)}.setting-sublevel-title{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-2) 0 var(--space-1)}.setting-sublevel--disabled{opacity:.45;pointer-events:none}.level-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-sm);margin-bottom:var(--space-4)}.level-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);gap:var(--space-3);flex-wrap:wrap}.level-section-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.level-current-label{font-size:.85rem;font-weight:600;color:var(--color-primary)}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2)}.level-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-2);background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);font-family:var(--font-sans);text-align:center;user-select:none}.level-btn:hover{border-color:var(--color-primary);background:#4361ee12;transform:translateY(-2px)}.level-btn:active{transform:translateY(0)}.level-btn--active{border-color:var(--color-primary);background:#4361ee1f}.level-btn-number{font-size:1.5rem;font-weight:700;line-height:1;color:var(--color-text-muted);transition:color var(--transition-fast)}.level-btn--active .level-btn-number{color:var(--color-primary)}.level-btn-desc{font-size:.7rem;color:var(--color-text-muted);line-height:1.3;font-weight:500}.level-btn-keys{font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-muted);opacity:.7;letter-spacing:.05em}.level-btn--active .level-btn-keys{color:var(--color-primary);opacity:1}@media(max-width:640px){.level-grid{grid-template-columns:repeat(5,1fr);gap:var(--space-1)}.level-btn{padding:var(--space-2) var(--space-1)}.level-btn-keys{display:none}.metrics-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.metric-value{font-size:1.2rem}.metric-icon{display:none}.text-display{font-size:1.2rem}.guide-hands{grid-template-columns:1fr}.overlay-card{padding:var(--space-8) var(--space-6)}.overlay-stat-value{font-size:2rem}.app-header{gap:var(--space-3)}}@media(max-width:480px){.typing-section,.keyboard-section,.guide-section{border-radius:var(--radius-lg);padding:var(--space-4)}}.app-footer[data-astro-cid-j7pv25f6]{text-align:center;padding:var(--space-8) 0 var(--space-4);color:var(--color-text-muted);font-size:.85rem;border-top:1px solid var(--color-border);margin-top:var(--space-8)}