*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#f8f8f8;min-height:100vh;padding:0;margin:0;line-height:1.6}.container{max-width:1200px;margin:0 auto;background:transparent;border-radius:0;padding:48px 24px;box-shadow:none}h1{text-align:center;color:#1a1a1a;margin-bottom:8px;font-size:2.25em;font-weight:600;letter-spacing:-.02em}.subtitle{text-align:center;color:#737373;margin-bottom:40px;font-size:1em;font-weight:400}.finger-selector{margin-bottom:24px;padding:20px 24px;background:#fff;border-radius:16px;border:1px solid #e8e8e8;box-shadow:0 2px 4px #00000005,0 1px 2px #0000000a}.finger-buttons{display:flex;gap:30px;flex-wrap:wrap;align-items:center}.hand-section{display:flex;align-items:center;gap:10px}.hand-label{font-weight:500;color:#525252;font-size:.875em;white-space:nowrap}.fingers-visual{display:flex;gap:5px;align-items:flex-end}.keyboard{margin:16px 0;padding:32px;background:#fff;border-radius:16px;width:100%;border:1px solid #e8e8e8;box-shadow:0 2px 4px #00000005,0 1px 2px #0000000a}.keyboard-row{display:flex;gap:5px;margin-bottom:5px;justify-content:center}.keyboard-row:nth-child(2){margin-left:30px}.keyboard-row:nth-child(3){margin-left:45px}.keyboard-row:nth-child(4){margin-left:60px}.key{width:55px;height:55px;display:flex;align-items:center;justify-content:center;background:#f8f8f8;border:1.5px solid #ececec;border-radius:10px;color:#525252;font-size:.95em;font-weight:500;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none;position:relative}.key:hover{background:#f0f0f0;border-color:#e0e0e0;transform:translateY(-1px);box-shadow:0 2px 4px #0000000a}.key.selected{background:#fff;border-color:#e2b714;border-width:2px;color:#404040;transform:translateY(-1px);box-shadow:0 2px 6px #e2b71426}.key.space{width:350px;opacity:.6;cursor:default}.key.space:hover{transform:none}.key.tab{width:80px}.key.caps{width:90px}.key.shift-left{width:105px}.key.shift-right{width:120px}.key.backspace{width:90px}.key.enter{width:100px}.key-label{font-size:.7em;position:absolute;top:5px;left:8px;opacity:.6}.key-main{font-size:1.15em;margin-top:10px}.key.tab,.key.caps,.key.shift-left,.key.shift-right,.key.backspace,.key.enter{font-size:.75em;background:#efefef;color:#737373;font-weight:500}.key.tab:hover,.key.caps:hover,.key.shift-left:hover,.key.shift-right:hover,.key.backspace:hover,.key.enter:hover{background:#e5e5e5;color:#525252}.key.tab.selected,.key.caps.selected,.key.shift-left.selected,.key.shift-right.selected,.key.backspace.selected,.key.enter.selected{background:#fff;border-color:#e2b714;border-width:2px;color:#404040}.key.home-row{position:relative}.key.home-row:after{content:"";position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:20px;height:3px;background:#95a5a6;border-radius:2px}.key.home-row.selected:after{background:#fff}.key.selected[data-finger=left-pinky]{background:#ec4899;border-color:#db2777;color:#831843}.key.selected[data-finger=left-ring]{background:#8b5cf6;border-color:#7c3aed;color:#4c1d95}.key.selected[data-finger=left-middle]{background:#3b82f6;border-color:#2563eb;color:#1e3a8a}.key.selected[data-finger=left-index]{background:#10b981;border-color:#059669;color:#064e3b}.key.selected[data-finger=right-index]{background:#e2b714;border-color:#d1a513;color:#78350f}.key.selected[data-finger=right-middle]{background:#ef4444;border-color:#dc2626;color:#7f1d1d}.key.selected[data-finger=right-ring]{background:#ec4899;border-color:#db2777;color:#831843}.key.selected[data-finger=right-pinky]{background:#8b5cf6;border-color:#7c3aed;color:#4c1d95}.key.selected[data-finger]{transform:translateY(-2px);filter:none}.key.selected[data-finger]:hover{transform:translateY(-2px);filter:brightness(1.15)}.key.selected[data-finger=left-pinky]:hover{background:#f472b6;border-color:#f9a8d4}.key.selected[data-finger=left-ring]:hover{background:#a78bfa;border-color:#c4b5fd}.key.selected[data-finger=left-middle]:hover{background:#60a5fa;border-color:#93c5fd}.key.selected[data-finger=left-index]:hover{background:#34d399;border-color:#6ee7b7}.key.selected[data-finger=right-index]:hover{background:#fbbf24;border-color:#fcd34d}.key.selected[data-finger=right-middle]:hover{background:#f87171;border-color:#fca5a5}.key.selected[data-finger=right-ring]:hover{background:#f472b6;border-color:#f9a8d4}.key.selected[data-finger=right-pinky]:hover{background:#a78bfa;border-color:#c4b5fd}@keyframes keyPressCorrect{0%{transform:scale(1);box-shadow:0 0 #10b981b3}50%{transform:scale(.95);box-shadow:0 0 0 8px #10b98100}to{transform:scale(1);box-shadow:0 0 #10b98100}}@keyframes keyPressError{0%{transform:scale(1) translate(0);box-shadow:0 0 #ef4444b3}25%{transform:scale(.95) translate(-2px);box-shadow:0 0 0 8px #ef444400}50%{transform:scale(.95) translate(2px)}75%{transform:scale(.95) translate(-2px)}to{transform:scale(1) translate(0);box-shadow:0 0 #ef444400}}.key.flash-correct{animation:keyPressCorrect .3s ease}.key.flash-error{animation:keyPressError .4s ease}.finger-btn{width:28px;border:none;border-radius:14px 14px 4px 4px;cursor:pointer;transition:all .15s ease;position:relative;display:flex;flex-direction:column;align-items:center;padding:0;overflow:visible}.finger-visual{width:100%;border-radius:14px 14px 4px 4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:0;transition:all .15s ease;opacity:.85}.finger-label{display:none}.finger-btn[data-finger=left-pinky] .finger-visual,.finger-btn[data-finger=right-pinky] .finger-visual{height:35px}.finger-btn[data-finger=left-ring] .finger-visual,.finger-btn[data-finger=right-ring] .finger-visual{height:45px}.finger-btn[data-finger=left-middle] .finger-visual,.finger-btn[data-finger=right-middle] .finger-visual{height:50px}.finger-btn[data-finger=left-index] .finger-visual,.finger-btn[data-finger=right-index] .finger-visual{height:42px}.finger-btn[data-finger=left-pinky] .finger-visual{background:#ec4899}.finger-btn[data-finger=left-ring] .finger-visual{background:#8b5cf6}.finger-btn[data-finger=left-middle] .finger-visual{background:#3b82f6}.finger-btn[data-finger=left-index] .finger-visual{background:#10b981}.finger-btn[data-finger=right-index] .finger-visual{background:#e2b714}.finger-btn[data-finger=right-middle] .finger-visual{background:#ef4444}.finger-btn[data-finger=right-ring] .finger-visual{background:#ec4899}.finger-btn[data-finger=right-pinky] .finger-visual{background:#8b5cf6}.finger-btn:hover{transform:translateY(-1px)}.finger-btn:hover .finger-visual{opacity:1}.finger-btn.active{transform:translateY(-2px)}.finger-btn.active .finger-visual{opacity:1;box-shadow:0 2px 8px #00000026}.finger-btn.active:after{content:"";position:absolute;top:-2px;right:-2px;width:8px;height:8px;background:#10b981;border:2px solid white;border-radius:50%;z-index:10;box-shadow:0 1px 3px #0003}.selected-keys{text-align:center;margin:24px 0;padding:20px 24px;background:#fff;border-radius:16px;border:1px solid #e8e8e8;font-size:.95em;box-shadow:0 2px 4px #00000005,0 1px 2px #0000000a}.selected-keys strong{color:#262626;font-weight:600}.main-layout{display:flex;min-height:100vh}.lessons-sidebar{width:380px;min-width:380px;height:100vh;background:#fff;transform:translate(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1),margin-left .4s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;position:sticky;top:0;will-change:transform;margin-left:-380px}body.dark-mode .lessons-sidebar{background:#18191a}.lessons-sidebar.open{transform:translate(0);margin-left:0}.lessons-sidebar-header{position:sticky;top:0;background:#fff;padding:24px;border-bottom:1px solid #e8e8e8;display:flex;justify-content:space-between;align-items:center;z-index:10}body.dark-mode .lessons-sidebar-header{background:#18191a;border-bottom-color:#2a2d32}.lessons-sidebar-header h3{font-size:1.5em;color:#1a1a1a;margin:0;display:flex;align-items:center;gap:12px}.lessons-sidebar-header h3:before{content:"📚";font-size:1.2em;line-height:1}body.dark-mode .lessons-sidebar-header h3{color:#e8e8e8}.sidebar-close{width:36px;height:36px;border:none;background:#f8f8f8;border-radius:8px;font-size:24px;color:#525252;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}.sidebar-close:hover{background:#e8e8e8;color:#1a1a1a}body.dark-mode .sidebar-close{background:#2a2d32;color:#a0a0a0}body.dark-mode .sidebar-close:hover{background:#3a3d42;color:#e8e8e8}.lessons-sidebar-content{padding:24px}.lessons-subtitle{color:#737373;font-size:.9em;margin-bottom:20px;text-align:center}body.dark-mode .lessons-subtitle{color:#888}.container{flex:1;min-width:0;transition:all .4s cubic-bezier(.4,0,.2,1)}.lessons-toggle{position:fixed;top:20px;left:20px;width:44px;height:44px;border-radius:50%;border:none;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:900;padding:10px;color:#2d3748}body.dark-mode .lessons-toggle{background:#2c2e31;color:#d1d0c5}.lessons-toggle:hover{background:#f5f5f5;transform:translateY(-1px) scale(1.05)}body.dark-mode .lessons-toggle:hover{background:#3a3c3f}.lessons-toggle:active{transform:translateY(0) scale(1)}.lessons-toggle svg{color:inherit}.lessons-toggle .toggle-text{display:none}.active-course-title{position:fixed;top:20px;left:72px;height:44px;padding:0 16px;border-radius:22px;background:#fff;display:flex;align-items:center;font-size:14px;font-weight:500;color:#2d3748;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:900;white-space:nowrap;box-shadow:0 2px 8px #0000000f}body.dark-mode .active-course-title{background:#2c2e31;color:#d1d0c5}.active-course-title.hidden{opacity:0;pointer-events:none}.lessons-toggle .progress-badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:#10b981;color:#fff;border-radius:50%;font-size:.65em;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid white}body.dark-mode .lessons-toggle .progress-badge{border-color:#2c2e31}body.focus-mode .lessons-toggle{opacity:.3}body.focus-mode .lessons-toggle:hover{opacity:1}.lessons-grid{display:flex;flex-direction:column;gap:16px}.lesson-card{padding:20px;background:#f8f8f8;border:2px solid #e8e8e8;border-radius:12px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}body.dark-mode .lesson-card{background:#1e2023;border-color:#2a2d32}.lesson-card:hover{border-color:#d0d0d0}body.dark-mode .lesson-card:hover{border-color:#4a4d52}.lesson-card.active{border-color:#e2b714;background:linear-gradient(135deg,#fffbeb,#fef3c7)}body.dark-mode .lesson-card.active{background:linear-gradient(135deg,#2a2415,#3a2f1a);border-color:#e2b714}.lesson-delete-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:all .2s ease;z-index:10}.lesson-delete-btn:hover{background:#ef4444;color:#fff;border-color:#ef4444;transform:scale(1.1)}body.dark-mode .lesson-delete-btn{background:#ef444433;border-color:#ef444466}body.dark-mode .lesson-delete-btn:hover{background:#ef4444;color:#fff;border-color:#ef4444}.lesson-mark-finished-btn{width:100%;padding:8px 12px;margin-top:12px;background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.3);border-radius:6px;font-size:.85em;font-weight:600;cursor:pointer;transition:all .2s ease}.lesson-mark-finished-btn:hover{background:#10b981;color:#fff;border-color:#10b981;transform:translateY(-1px)}body.dark-mode .lesson-mark-finished-btn{background:#10b98126;border-color:#10b98166}body.dark-mode .lesson-mark-finished-btn:hover{background:#10b981;color:#fff;border-color:#10b981}.lesson-completed-badge{width:100%;padding:8px 12px;margin-top:12px;background:#10b98126;color:#10b981;border:1px solid rgba(16,185,129,.3);border-radius:6px;font-size:.85em;font-weight:600;text-align:center;cursor:pointer;transition:all .2s ease}.lesson-completed-badge:hover{background:#ef44441a;color:#ef4444;border-color:#ef44444d;transform:translateY(-1px)}body.dark-mode .lesson-completed-badge{background:#10b98133;border-color:#10b98166}body.dark-mode .lesson-completed-badge:hover{background:#ef444426;border-color:#ef444466}.lesson-card.completed{opacity:.88}.lesson-card.completed:hover{opacity:1}.lesson-card-placeholder{border:2px dashed #d0d0d0!important;background:#fafafa!important}body.dark-mode .lesson-card-placeholder{border-color:#3a3d42!important;background:#1a1c1e!important}.lesson-card-placeholder .lesson-title,.lesson-card-placeholder .lesson-description{outline:none;transition:all .2s;cursor:text}.lesson-card-placeholder .lesson-title:hover,.lesson-card-placeholder .lesson-description:hover{background:#e2b71408;border-radius:4px}.lesson-card-placeholder .lesson-title:focus,.lesson-card-placeholder .lesson-description:focus{background:#e2b71414;border-radius:4px}body.dark-mode .lesson-card-placeholder .lesson-title:hover,body.dark-mode .lesson-card-placeholder .lesson-description:hover{background:#e2b7140d}body.dark-mode .lesson-card-placeholder .lesson-title:focus,body.dark-mode .lesson-card-placeholder .lesson-description:focus{background:#e2b7141a}.lesson-card-placeholder .lesson-title:empty:before,.lesson-card-placeholder .lesson-description:empty:before{content:attr(data-placeholder);color:#a0a0a0}.difficulty-cycle-badge{cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}.difficulty-cycle-badge:hover{transform:scale(1.05);opacity:.9}.difficulty-cycle-badge:active{transform:scale(.95)}.create-course-inline-btn{width:100%;margin-top:12px;padding:10px 16px;background:linear-gradient(135deg,#e2b714,#d1a513);color:#fff;border:none;border-radius:8px;font-size:.9em;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}.create-course-inline-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #e2b7144d}.lesson-card-number{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:#e8e8e8;color:#525252;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em}body.dark-mode .lesson-number{background:#2a2d32;color:#888}.lesson-card.active .lesson-number{background:#e2b714;color:#78350f}.lesson-card.completed .lesson-number{background:#10b981;color:#fff}.lesson-card.completed .lesson-number:before{content:"✓"}.lesson-header-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px}.lesson-title{font-size:1.15em;font-weight:700;color:#1a1a1a;flex:1}body.dark-mode .lesson-title{color:#e8e8e8}.lesson-description{font-size:.88em;color:#737373;margin-bottom:12px;line-height:1.4}body.dark-mode .lesson-description{color:#888}.lesson-keys-count{font-size:.75em;color:#525252;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}body.dark-mode .lesson-keys-count{color:#888}.lesson-keys{font-family:Monaco,Courier New,monospace;font-size:.8em;color:#525252;background:#fff;padding:10px 12px;border-radius:8px;margin-bottom:14px;line-height:1.6;word-spacing:2px}body.dark-mode .lesson-keys{background:#0f1012;color:#a0a0a0}.lesson-stats{display:flex;gap:12px;flex-wrap:wrap}.lesson-stat-item{display:flex;align-items:center;gap:6px;font-size:.85em;color:#525252;background:#fff;padding:6px 10px;border-radius:6px}body.dark-mode .lesson-stat-item{background:#0f1012;color:#a0a0a0}.stat-icon{font-size:1.1em;line-height:1}.stat-text{font-weight:600}.lesson-new-badge{font-size:.85em;color:#e2b714;font-weight:600;padding:8px 0;text-align:center}body.dark-mode .lesson-new-badge{color:#fde68a}.lesson-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:.75em;font-weight:600;margin-top:8px}.lesson-badge.in-progress{background:#fef3c7;color:#78350f}.lesson-badge.completed{background:#d1fae5;color:#064e3b}body.dark-mode .lesson-badge.completed{background:#065f46;color:#d1fae5}.lesson-badge.locked{background:#e8e8e8;color:#737373}body.dark-mode .lesson-badge.locked{background:#2a2d32;color:#888}.lesson-badge.difficulty-beginner{background:#d1fae5;color:#064e3b}body.dark-mode .lesson-badge.difficulty-beginner{background:#065f46;color:#d1fae5}.lesson-badge.difficulty-intermediate{background:#fef3c7;color:#78350f}body.dark-mode .lesson-badge.difficulty-intermediate{background:#3a2f1a;color:#fde68a}.lesson-badge.difficulty-advanced{background:#fecaca;color:#7f1d1d}body.dark-mode .lesson-badge.difficulty-advanced{background:#7f1d1d;color:#fecaca}@media(max-width:768px){.container{padding:24px 12px!important}.keyboard{padding:12px 8px;border-radius:10px;margin:10px -4px;width:calc(100% + 8px)}.keyboard-row{gap:4px;margin-bottom:4px}.key{min-width:30px;height:38px;font-size:11px;border-radius:6px}.main-layout{display:block}.lessons-sidebar{position:fixed;width:85%;max-width:320px;min-width:0;left:0;top:0;z-index:1000;transform:translate(-100%);margin-left:0}.lessons-sidebar.open{transform:translate(0);margin-left:0}.container{width:100%;max-width:100%}.lessons-sidebar.open:before{content:"";position:fixed;inset:0;background:#00000080;z-index:-1}.lessons-toggle{width:40px;height:40px;top:12px;left:12px}.active-course-title{top:12px;left:60px;height:40px;font-size:13px;padding:0 12px}.lessons-toggle .toggle-text{font-size:.65em}.lesson-card{padding:16px}.lessons-sidebar-header{padding:20px}.lessons-sidebar-content{padding:16px}.finger-groups{display:none}h1{font-size:1.75em!important;margin-bottom:4px!important}.subtitle{font-size:.85em!important;margin-bottom:12px!important}.stats-container{gap:6px!important;margin-bottom:8px!important}.stat-box{padding:6px 10px!important;min-width:65px!important}.stat-label{font-size:.6em!important}.stat-value{font-size:1.1em!important}.selected-keys{margin:12px 0!important;padding:12px 16px!important;font-size:.85em!important}#selectedKeysList{font-size:.7em!important;padding:6px 8px!important}.practice-area{margin-top:36px!important}.finger-groups-container{padding:12px!important;margin-bottom:12px!important}.top-right-buttons{gap:8px!important}.stats-btn{width:40px!important;height:40px!important;top:12px!important;right:60px!important}.settings-dropdown{top:12px!important;right:12px!important}.settings-btn{width:40px!important;height:40px!important}.target-text{font-size:1.5em!important;max-height:12em!important;padding:12px!important;margin-bottom:10px!important}#typingInput{font-size:1.1em!important;padding:8px 12px!important}.progress-bar-container{height:3px!important;margin-bottom:10px!important}.container{padding:12px!important}.control-section{margin-bottom:10px!important}.btn{padding:8px 16px!important;font-size:.9em!important}}@media(max-width:480px){.container{padding:16px 8px!important}.keyboard{padding:10px 6px;margin:8px -4px;width:calc(100% + 8px);border-radius:8px}.keyboard-row{gap:3px;margin-bottom:3px}.key{font-size:9px;min-width:22px;height:30px;border-radius:5px}h1{font-size:1.4em!important;margin-bottom:2px!important}.subtitle{font-size:.8em!important;margin-bottom:8px!important}.target-text{font-size:1.3em!important;padding:10px!important;margin-bottom:8px!important}#typingInput{font-size:1em!important;padding:6px 10px!important}.stat-box{min-width:55px!important;padding:5px 8px!important}.stat-label{font-size:.55em!important}.stat-value{font-size:1em!important}.selected-keys{margin:8px 0!important;padding:10px 12px!important;font-size:.8em!important}.btn{padding:6px 12px!important;font-size:.85em!important}.practice-area{margin-top:28px!important}.lessons-toggle{top:8px!important;left:8px!important}.stats-btn{top:8px!important;right:56px!important}.settings-dropdown{top:8px!important;right:8px!important}}.practice-area{margin-top:48px;padding:0;background:transparent;border-radius:0}.practice-area h2{color:#737373;margin-bottom:20px;font-size:.75em;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.7}.target-text{font-size:2.8em;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;margin-bottom:24px;transition:font-size .2s ease;padding:0 8px 0 2px;background:transparent;border-radius:0;line-height:1.75;max-height:25.2em;overflow-y:auto;overflow-x:hidden;letter-spacing:.01em;word-break:break-word;white-space:pre-wrap;text-align:left;color:#262626;font-weight:400;position:relative;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.08) transparent}.target-text::-webkit-scrollbar{width:6px}.target-text::-webkit-scrollbar-track{background:transparent}.target-text::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}.target-text::-webkit-scrollbar-thumb:hover{background:#0003}.target-text.font-small{font-size:1.8em}.target-text.font-medium{font-size:2.2em}.target-text.font-large{font-size:2.6em}.target-text.font-xlarge{font-size:3em}.target-text span{transition:all .15s ease}.target-text .correct{color:#2d3748;font-weight:400;opacity:1}.target-text .error{color:#ef4444;font-weight:400;background:#fef2f2;padding:0 2px;border-radius:2px}.target-text .current{background:transparent;color:#a0aec0;font-weight:400;opacity:.7;border-left:3px solid #2d3748;padding-left:2px;margin-left:-3px;border-radius:0;animation:blink-cursor 1.2s ease-in-out infinite}.target-text .upcoming{color:#a0aec0;font-weight:400;opacity:.7}.target-text .space-char{opacity:.4;font-size:.9em}.word-wrapper{display:inline-block}.error-typed{position:absolute;top:-.7em;left:50%;transform:translate(-50%);font-size:.6em;color:#ca4754;font-weight:600;opacity:.9;text-decoration:line-through}.target-text .incorrect{position:relative}@keyframes blink-cursor{0%,49%{border-left-color:#2d3748}50%,to{border-left-color:transparent}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.practice-area{cursor:text}.input-area{position:relative}.typing-input{position:fixed;top:-100px;left:-100px;opacity:0;pointer-events:none;width:1px;height:1px;border:none;padding:0}.typing-input:focus{outline:none}.stats{display:flex;gap:32px;margin-bottom:32px;padding:0;border:none;flex-wrap:wrap;align-items:center;opacity:.8}.stat-box{padding:0;background:transparent;border-radius:0;text-align:left;box-shadow:none;display:flex;align-items:baseline;gap:10px}.stat-label{color:#737373;font-size:.75em;margin-bottom:0;font-weight:500;text-transform:uppercase;letter-spacing:.08em}.stat-value{color:#262626;font-size:1em;font-weight:600;font-family:SF Mono,Monaco,monospace}.practice-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.practice-header h2{margin:0}.button-group{display:flex;gap:8px;justify-content:flex-end;margin:0;opacity:.4;transition:opacity .3s}.button-group:hover{opacity:1}.btn-generate,.btn-restart{padding:8px 16px;background:#fff;color:#525252;border:1.5px solid #e8e8e8;border-radius:10px;font-size:.8em;cursor:pointer;transition:all .15s ease;font-weight:500;box-shadow:0 1px 2px #00000008;display:flex;align-items:center;justify-content:center}.btn-restart{color:#737373}.btn-generate:hover,.btn-restart:hover{background:#f8f8f8;border-color:#d4d4d4;transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.btn-generate:disabled,.btn-restart:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}.settings-container{position:relative}.instructions{text-align:left;color:#cbd5e0;margin-top:12px;font-style:normal;font-size:.7em}.shortcuts{text-align:left;margin-top:6px;padding:0;background:transparent;border-radius:0;font-size:.7em;color:#cbd5e0}.shortcuts strong{color:#a0aec0;font-weight:500}.shortcut-key{display:inline-block;padding:2px 4px;background:#f7fafc;border:1px solid #e2e8f0;border-radius:2px;font-family:monospace;font-weight:400;margin:0 1px;box-shadow:none;font-size:.85em}.settings-panel{margin-bottom:12px;padding:15px 20px;background:#e8e8e8;border-radius:8px}.settings-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:center}.setting-item{display:flex;align-items:center;gap:8px}.setting-item.full-width{flex-basis:100%;width:100%}.setting-label{font-weight:600;color:#495057;font-size:.85em;white-space:nowrap}.setting-control{display:flex;align-items:center;gap:8px}.mode-toggle{display:flex;background:transparent;border-radius:6px;padding:0;gap:6px}.mode-toggle input[type=radio]{display:none}.mode-toggle label{padding:6px 14px;text-align:center;border-radius:4px;cursor:pointer;font-weight:600;font-size:.8em;transition:all .2s;color:#4b5563;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #d0d0d0}.mode-toggle input[type=radio]:checked+label{background:#fffbeb;color:#92400e;border-color:#e2b714;box-shadow:0 1px 3px #e2b7141a}.mode-toggle input[type=radio]:checked+label:hover{background:#fef9c3;color:#78350f;border-color:#d1a513}.slider-container{display:flex;align-items:center;gap:8px}.slider{width:100px;height:4px;border-radius:2px;background:#dee2e6;outline:none;-webkit-appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#2d3748;cursor:pointer}.slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#2d3748;cursor:pointer;border:none}.slider-value{min-width:30px;text-align:center;font-weight:600;color:#2d3748;font-size:.85em}.radio-group{display:flex;gap:6px}.radio-option{position:relative}.radio-option input[type=radio]{display:none}.radio-option label{display:block;padding:6px 12px;background:#fff;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;font-weight:600;font-size:.85em;color:#6c757d;transition:all .2s;-webkit-user-select:none;user-select:none}.radio-option input[type=radio]:checked+label{background:#fffbeb;color:#92400e;border-color:#e2b714;box-shadow:0 1px 3px #e2b7141a}.radio-option input[type=radio]:checked+label:hover{background:#fef9c3;color:#78350f;border-color:#d1a513}.toggle-option{display:flex;align-items:center;gap:8px}.toggle-switch{position:relative;display:inline-block;width:42px;height:22px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#e8e8e8;border:none;transition:background .3s;border-radius:11px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;transition:transform .3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background:#e2b714}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.toggle-label{cursor:pointer;font-size:.9em;font-weight:600;color:#495057}.progress-bar-container{width:100%;height:2px;background:#e9ecef;border-radius:0;overflow:hidden;margin-bottom:12px}.progress-bar{height:100%;background:#2d3748;transition:width .05s linear;border-radius:0}.timer-display{font-size:.9em;font-weight:500;color:#6c757d;text-align:left;margin-bottom:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.7}}@keyframes pulse-danger{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}body.focus-mode h1,body.focus-mode .subtitle,body.focus-mode .settings-panel,body.focus-mode .finger-selector,body.focus-mode .keyboard,body.focus-mode .selected-keys{display:none}body.focus-mode .container{padding:20px}body.focus-mode .practice-area{margin-top:0;padding:60px 0}body.focus-mode .practice-area h2{display:none}body.focus-mode .stats{margin-bottom:40px}.focus-toggle{position:fixed;top:20px;right:20px;padding:10px 18px;background:#fff;color:#2d3748;border:none;border-radius:24px;font-size:.85em;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:600;z-index:1000}.focus-toggle:hover{background:#f5f5f5;transform:translateY(-1px) scale(1.02)}.focus-toggle:active{transform:translateY(0) scale(1)}body.focus-mode .focus-toggle{background:#e8e8e8}body.focus-mode .focus-toggle:hover{background:#f5f5f5}.dark-mode-toggle{position:fixed;top:20px;left:20px;padding:10px 18px;background:#fff;color:#2d3748;border:none;border-radius:24px;font-size:.85em;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:600;z-index:1000}.dark-mode-toggle:hover{background:#f5f5f5;transform:translateY(-1px) scale(1.02)}.dark-mode-toggle:active{transform:translateY(0) scale(1)}body.dark-mode .focus-toggle{background:#2c2e31;color:#d1d0c5}body.dark-mode .focus-toggle:hover{background:#3a3c3f}body.dark-mode.focus-mode .focus-toggle{background:#3a3c3f;color:#d1d0c5}body.dark-mode.focus-mode .focus-toggle:hover{background:#4a4c4f}body.dark-mode .dark-mode-toggle{background:#2c2e31;color:#d1d0c5}body.dark-mode .dark-mode-toggle:hover{background:#3a3c3f}.settings-dropdown{position:fixed;top:20px;right:20px;z-index:1000}.settings-btn{padding:10px;background:#fff;color:#2d3748;border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.settings-btn:hover{background:#f5f5f5;transform:translateY(-1px) scale(1.05)}.settings-btn:active{transform:translateY(0) scale(1)}.settings-menu{position:absolute;top:54px;right:0;background:#fff;border-radius:16px;padding:20px;min-width:320px;max-width:400px;max-height:80vh;overflow-y:auto;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #0000000f,0 2px 6px #0000000a;border:1px solid #e8e8e8}.settings-menu.show{opacity:1;pointer-events:auto;transform:translateY(0)}.settings-menu-item{padding:10px 12px;border-radius:8px;transition:background .15s ease}.settings-menu-item:hover{background:#fafafa}.settings-menu-divider{height:1px;background:#e5e5e5;margin:12px 0}.reset-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:none;border:none;border-radius:8px;color:#dc2626;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}.reset-btn:hover{background:#fef2f2;color:#b91c1c}.reset-btn svg{flex-shrink:0}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;padding-bottom:12px;border-bottom:1px solid #e5e5e5}.settings-header h3{margin:0;font-size:15px;font-weight:600;color:#262626}.save-btn-dropdown{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#e2b714;color:#78350f;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;opacity:0;pointer-events:none}.save-btn-dropdown.visible{opacity:1;pointer-events:auto}.save-btn-dropdown:hover{background:#d1a513;color:#451a03;transform:translateY(-1px)}.save-btn-dropdown:active{transform:translateY(0)}.save-btn-dropdown svg{flex-shrink:0}.settings-section{margin-bottom:8px}.setting-item-dropdown{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:12px}.setting-label-dropdown{font-size:13px;font-weight:500;min-width:90px;flex-shrink:0}.toggle-switch-small{position:relative;width:42px;height:22px;flex-shrink:0}.toggle-switch-small input{opacity:0;width:0;height:0}.toggle-slider-small{position:absolute;cursor:pointer;inset:0;background-color:#e0e0e0;border:none;transition:background .3s;border-radius:11px}.toggle-slider-small:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;transition:transform .3s;border-radius:50%}.toggle-switch-small input:checked+.toggle-slider-small{background:#e2b714}.toggle-switch-small input:checked+.toggle-slider-small:before{transform:translate(20px)}.sound-cycle-btn{padding:6px 16px;background:#e2b7141a;border:1px solid rgba(226,183,20,.3);border-radius:6px;font-size:13px;font-weight:600;color:#d4a017;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.sound-cycle-btn:hover{background:#e2b71426;border-color:#e2b71466;transform:scale(1.02)}.sound-cycle-btn:active{transform:scale(.98)}body.dark-mode .sound-cycle-btn{background:#e2b71426;border-color:#e2b71466}body.dark-mode .sound-cycle-btn:hover{background:#e2b71433;border-color:#e2b71480}.settings-switch{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.settings-switch input[type=checkbox]{display:none}.settings-slider{position:relative;width:40px;height:22px;background:#e0e0e0;border-radius:11px;transition:background .3s}.settings-slider:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .3s}.settings-switch input[type=checkbox]:checked+.settings-slider{background:#e2b714}.settings-switch input[type=checkbox]:checked+.settings-slider:after{transform:translate(18px)}.settings-label{font-size:.9em;font-weight:500;color:#2d3748}body.dark-mode .settings-btn{background:#2c2e31;color:#d1d0c5}body.dark-mode .settings-btn:hover{background:#3a3c3f}body.dark-mode .settings-menu{background:#262626;border:1px solid #404040;box-shadow:0 4px 16px #00000080,0 2px 4px #0000004d}body.dark-mode .settings-menu-item:hover{background:#2a2a2a}body.dark-mode .settings-menu-divider{background:#404040}body.dark-mode .reset-btn{color:#f87171}body.dark-mode .reset-btn:hover{background:#3a1f1f;color:#fca5a5}body.dark-mode .settings-header{border-bottom-color:#404040}body.dark-mode .settings-header h3{color:#fafafa}body.dark-mode .save-btn-dropdown{background:#e2b714;color:#78350f}body.dark-mode .save-btn-dropdown:hover{background:#d1a513;color:#451a03}body.dark-mode .setting-label-dropdown{color:#d1d0c5}body.dark-mode .toggle-slider-small{background:#646669}body.dark-mode .toggle-switch-small input:checked+.toggle-slider-small{background:#e2b714}body.dark-mode .settings-slider{background:#646669}body.dark-mode .settings-slider:after{background:#d1d0c5}body.dark-mode .settings-label{color:#d1d0c5}.focus-hint{position:fixed;bottom:20px;right:20px;padding:6px 12px;background:#0000000d;color:#a0aec0;border-radius:4px;font-size:.7em;opacity:0;transition:opacity .3s;pointer-events:none;z-index:1000}body.focus-mode .focus-hint{opacity:1}.focus-hint.hidden{opacity:0!important}.focus-hint kbd{display:inline-block;padding:2px 6px;background:#fff;border:1px solid #e2e8f0;border-radius:3px;font-family:monospace;font-size:.9em;margin:0 2px}.completion-tooltip{position:fixed;padding:24px 32px;background:#fff;border:3px solid #e2b714;border-radius:16px;font-size:14px;font-weight:500;color:#2d3748;opacity:0;transform:translate(-50%) translateY(-50%) translateY(20px) scale(.9);transition:all .4s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:10000;box-shadow:0 16px 48px #e2b71433,0 8px 16px #00000026;white-space:nowrap;min-width:280px}.completion-tooltip.show{opacity:1;transform:translate(-50%) translateY(-50%) scale(1)}.completion-tooltip .stats-line{margin:4px 0;display:flex;gap:8px;align-items:center}.completion-tooltip .stat-label{color:#718096;font-size:13px}.completion-tooltip .stat-value{color:#e2b714;font-weight:600;font-size:15px}body.dark-mode .completion-tooltip{background:#2d3748;color:#d1d0c5;border-color:#e2b714}body.dark-mode .completion-tooltip .stat-label{color:#9ca3af}.typing-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;z-index:10;transition:opacity .3s ease;border-radius:8px}.typing-overlay.hidden{opacity:0;pointer-events:none}.overlay-content{display:flex;align-items:center;gap:12px;color:#666;font-size:1.1em;font-weight:500}.overlay-content svg{color:#666}.typing-area{position:relative}.stats-btn{padding:10px;background:#fff;color:#2d3748;border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:fixed;top:20px;right:80px;z-index:1000}.stats-btn:hover{background:#f5f5f5;transform:translateY(-1px) scale(1.05)}.stats-btn:active{transform:translateY(0) scale(1)}body.dark-mode .stats-btn{background:#2c2e31;color:#d1d0c5}body.dark-mode .stats-btn:hover{background:#3a3c3f}.stats-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.stats-modal.show{display:flex}.stats-content{background:#fff;border-radius:20px;padding:48px;max-width:680px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 24px 48px #0000001f,0 0 0 1px #0000000d;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}body.dark-mode .stats-content{background:#1a1b1e;color:#e8e8e8;box-shadow:0 24px 48px #0006,0 0 0 1px #ffffff1a}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding-bottom:0;border-bottom:none}.stats-header h2{margin:0;font-size:28px;font-weight:600;letter-spacing:-.02em;color:#1a1a1a}body.dark-mode .stats-header h2{color:#f5f5f5}.stats-close{background:none;border:none;font-size:24px;cursor:pointer;color:#999;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .15s ease;opacity:.6}.stats-close:hover{background:#0000000d;opacity:1;transform:scale(1.05)}body.dark-mode .stats-close:hover{background:#ffffff14;color:#f5f5f5}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin-bottom:48px}.stat-card{background:#00000005;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:24px 20px;text-align:center;transition:all .2s ease}.stat-card:hover{background:#00000008;border-color:#0000001a;transform:translateY(-2px)}body.dark-mode .stat-card{background:#ffffff08;border-color:#ffffff14}body.dark-mode .stat-card:hover{background:#ffffff0d;border-color:#ffffff1f}.stat-value{font-size:36px;font-weight:600;color:#1a1a1a;margin-bottom:6px;letter-spacing:-.02em}body.dark-mode .stat-value{color:#f5f5f5}.stat-label{font-size:12px;color:#737373;font-weight:500;text-transform:uppercase;letter-spacing:.06em}body.dark-mode .stat-label{color:#999}.stats-section{margin-bottom:40px}.stats-section h3{font-size:18px;font-weight:600;margin-bottom:20px;color:#1a1a1a;letter-spacing:-.01em}body.dark-mode .stats-section h3{color:#f5f5f5}.streaks-section{margin-bottom:40px;background:transparent;border-radius:0;padding:0;border:none}body.dark-mode .streaks-section{background:transparent;border:none}.streaks-header{text-align:left;margin-bottom:20px}.streaks-header h3{font-size:18px;font-weight:600;margin:0 0 4px;color:#1a1a1a;letter-spacing:-.01em}body.dark-mode .streaks-header h3{color:#f5f5f5}.streaks-subtitle{margin:0;font-size:13px;color:#737373;font-weight:400;opacity:.8}body.dark-mode .streaks-subtitle{color:#999}.streaks-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.streak-card{background:#00000005;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:24px 20px;text-align:center;transition:all .2s ease}.streak-card:hover{background:#00000008;border-color:#0000001a;transform:translateY(-2px)}body.dark-mode .streak-card{background:#ffffff08;border-color:#ffffff14}body.dark-mode .streak-card:hover{background:#ffffff0d;border-color:#ffffff1f}.streak-icon{font-size:36px;margin-bottom:10px;display:block;opacity:.85}.streak-value{font-size:32px;font-weight:600;color:#1a1a1a;margin-bottom:6px;letter-spacing:-.02em}body.dark-mode .streak-value{color:#f5f5f5}.streak-label{font-size:12px;color:#737373;font-weight:500;text-transform:uppercase;letter-spacing:.06em}body.dark-mode .streak-label{color:#999}.streak-message{margin-top:12px;font-size:13px;color:#92400e;font-style:italic}body.dark-mode .streak-message{color:#a16207}.error-keys-list{display:flex;flex-direction:column;gap:8px}.error-key-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8f8f8;border-radius:8px}body.dark-mode .error-key-item{background:#1e2023}.error-key-name{font-family:Monaco,Courier New,monospace;font-weight:600;font-size:18px;color:#e2b714}.error-key-count{font-size:16px;font-weight:600;color:#666}body.dark-mode .error-key-count{color:#888}.insight-card{background:#00000005;border:1px solid rgba(0,0,0,.08);border-left:3px solid rgba(45,55,72,.3);border-radius:12px;padding:18px 20px;margin-bottom:14px;transition:all .2s ease}.insight-card:hover{background:#00000008;border-left-color:#2d374880;transform:translate(2px)}body.dark-mode .insight-card{background:#ffffff08;border-color:#ffffff1a;border-left-color:#ffffff40}body.dark-mode .insight-card:hover{background:#ffffff0d;border-left-color:#fff6}.insight-card p{margin:0;color:#404040;font-size:14px;line-height:1.65;font-weight:400}body.dark-mode .insight-card p{color:#d4d4d4}.heatmap-subtitle{text-align:center;color:#737373;font-size:.9em;margin-bottom:20px}body.dark-mode .heatmap-subtitle{color:#888}.heatmap-keyboard{display:flex;flex-direction:column;gap:4px;padding:24px;background:#f8f8f8;border-radius:12px;margin-bottom:16px}body.dark-mode .heatmap-keyboard{background:#1e2023}.heatmap-row{display:flex;gap:4px;justify-content:center}.heatmap-key{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#e8e8e8;border:1px solid #d0d0d0;border-radius:6px;font-size:.75em;font-weight:600;color:#404040;transition:all .3s ease;position:relative}body.dark-mode .heatmap-key{background:#2a2d32;border-color:#3a3d42;color:#a0a0a0}.heatmap-key.heatmap-space{width:200px}.heatmap-key[data-error-level="1"]{background:#fef3c7;border-color:#fde68a;color:#78350f}.heatmap-key[data-error-level="2"]{background:#fde68a;border-color:#fcd34d;color:#78350f}.heatmap-key[data-error-level="3"]{background:#fbbf24;border-color:#f59e0b;color:#78350f}.heatmap-key[data-error-level="4"]{background:#fb923c;border-color:#f97316;color:#7c2d12}.heatmap-key[data-error-level="5"]{background:#f87171;border-color:#ef4444;color:#7f1d1d}.heatmap-key[data-error-level="6"]{background:#ef4444;border-color:#dc2626;color:#fff}.heatmap-key[data-error-level="7"]{background:#dc2626;border-color:#b91c1c;color:#fff;font-weight:700}body.dark-mode .heatmap-key[data-error-level="1"]{background:#fef3c7;border-color:#fde68a;color:#78350f}body.dark-mode .heatmap-key[data-error-level="2"]{background:#fde68a;border-color:#fcd34d;color:#78350f}body.dark-mode .heatmap-key[data-error-level="3"]{background:#fbbf24;border-color:#f59e0b;color:#78350f}body.dark-mode .heatmap-key[data-error-level="4"]{background:#fb923c;border-color:#f97316;color:#7c2d12}body.dark-mode .heatmap-key[data-error-level="5"]{background:#f87171;border-color:#ef4444;color:#7f1d1d}body.dark-mode .heatmap-key[data-error-level="6"]{background:#ef4444;border-color:#dc2626;color:#fff}body.dark-mode .heatmap-key[data-error-level="7"]{background:#dc2626;border-color:#b91c1c;color:#fff;font-weight:700}.heatmap-key:after{content:attr(data-error-count);position:absolute;bottom:2px;right:3px;font-size:.65em;font-weight:700;opacity:.7}.heatmap-legend{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}.legend-label{font-size:.85em;color:#737373}body.dark-mode .legend-label{color:#888}.legend-gradient{width:200px;height:20px;background:linear-gradient(to right,#e8e8e8,#fde68a,#fbbf24,#fb923c,#f87171,#ef4444,#dc2626);border-radius:10px;border:1px solid #d0d0d0}body.dark-mode .legend-gradient{background:linear-gradient(to right,#2a2d32,#fde68a,#fbbf24,#fb923c,#f87171,#ef4444,#dc2626);border-color:#3a3d42}.reset-stats-btn{width:100%;padding:12px;background:#ef4444;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background .2s;margin-top:16px}.reset-stats-btn:hover{background:#dc2626}.custom-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:none;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.custom-modal.show{display:flex}.modal-content{background:#fff;border-radius:16px;padding:0;max-width:440px;width:90%;box-shadow:0 20px 60px #0006;animation:modalFadeIn .3s ease;overflow:hidden}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-body{color:#2d3748;font-size:1em;line-height:1.6;padding:32px;text-align:center}.modal-header{background:linear-gradient(135deg,#e2b714,#d1a513);padding:24px 32px;text-align:center}.modal-title{font-size:1.5em;font-weight:700;color:#fff;margin:0 0 8px;text-shadow:0 1px 2px rgba(0,0,0,.1)}.modal-subtitle{font-size:.95em;color:#ffffffe6;margin:0}.modal-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.modal-info-item{background:#f8f8f8;border-radius:10px;padding:16px}body.dark-mode .modal-info-item{background:#1e2023}.modal-info-label{font-size:.75em;text-transform:uppercase;letter-spacing:.5px;color:#737373;font-weight:600;margin-bottom:6px}body.dark-mode .modal-info-label{color:#888}.modal-info-value{font-size:1.1em;font-weight:600;color:#1a1a1a}body.dark-mode .modal-info-value{color:#e8e8e8}.modal-message{font-size:.95em;color:#525252;margin-top:20px;padding-top:20px;border-top:1px solid #e8e8e8}body.dark-mode .modal-message{color:#a0a0a0;border-top-color:#2a2d32}.modal-btn{width:calc(100% - 64px);margin:0 32px 32px;padding:14px 24px;background:#e2b714;color:#fff;border:none;border-radius:10px;font-size:1em;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.3px}.modal-btn:hover{background:#d1a513;transform:translateY(-1px);box-shadow:0 4px 12px #e2b7144d}.modal-btn:active{transform:translateY(0)}body.dark-mode{background:#1a1a1a;color:#e5e5e5}body.dark-mode h1{color:#fafafa}body.dark-mode .subtitle{color:#a3a3a3}body.dark-mode .settings-panel{background:#262626;border:1px solid #404040}body.dark-mode .finger-selector{background:#262626;border:1px solid #404040;box-shadow:none}body.dark-mode .setting-label,body.dark-mode .hand-label{color:#a3a3a3}body.dark-mode .mode-toggle label{background:#262626;color:#a3a3a3;border-color:#404040}body.dark-mode .mode-toggle label:hover{background:#2a2a2a;color:#e5e5e5;border-color:#525252}body.dark-mode .mode-toggle input:checked+label{background:#2a2a2a;color:#fbbf24;border-color:#e2b714}body.dark-mode .mode-toggle input:checked+label:hover{background:#333;color:#fcd34d;border-color:#e2b714}body.dark-mode .radio-option label{background:#262626;color:#a3a3a3;border-color:#404040}body.dark-mode .radio-option label:hover{background:#2a2a2a;color:#e5e5e5;border-color:#525252}body.dark-mode .radio-option input:checked+label{background:#e2b714;color:#fff;border-color:#e2b714}body.dark-mode .radio-option input:checked+label:hover{background:#f0c520;border-color:#f0c520}body.dark-mode .toggle-slider{background-color:#525252}body.dark-mode .toggle-slider:before{background-color:#e5e5e5}body.dark-mode input:checked+.toggle-slider{background-color:#e2b714}body.dark-mode input:checked+.toggle-slider:before{background-color:#fff}body.dark-mode .slider{background:#2c2e31}body.dark-mode .slider::-webkit-slider-thumb{background:#e2b714}body.dark-mode .slider::-moz-range-thumb{background:#e2b714}body.dark-mode .slider-value{color:#d1d0c5;background:#2c2e31;border-color:#646669}body.dark-mode .finger-btn{background:#2c2e31;color:#646669;border-color:#646669}body.dark-mode .finger-btn:hover{background:#646669;border-color:#646669;color:#d1d0c5;transform:translateY(-1px);box-shadow:0 3px 8px #0006}body.dark-mode .finger-btn.active{color:#fff}body.dark-mode .finger-btn.active:hover{transform:translateY(-1px)}body.dark-mode .selected-keys{background:#262626;border:1px solid #404040;box-shadow:none}body.dark-mode .selected-keys strong{color:#fafafa}body.dark-mode .selected-keys-list{color:#a3a3a3}body.dark-mode .key-chip{background:#333;color:#e5e5e5;border-color:#525252}body.dark-mode .keyboard{background:#262626;border:1px solid #404040;box-shadow:none}body.dark-mode .key{background:#333;color:#a3a3a3;border-color:#525252}body.dark-mode .key:hover{background:#3a3a3a;color:#e5e5e5;border-color:#737373;transform:translateY(-1px)}body.dark-mode .key.selected[data-finger]:hover{transform:translateY(-2px);filter:brightness(1.15)}body.dark-mode .key.selected[data-finger=left-pinky]:hover{background:#f472b6;border-color:#f9a8d4}body.dark-mode .key.selected[data-finger=left-ring]:hover{background:#a78bfa;border-color:#c4b5fd}body.dark-mode .key.selected[data-finger=left-middle]:hover{background:#60a5fa;border-color:#93c5fd}body.dark-mode .key.selected[data-finger=left-index]:hover{background:#34d399;border-color:#6ee7b7}body.dark-mode .key.selected[data-finger=right-index]:hover{background:#fbbf24;border-color:#fcd34d}body.dark-mode .key.selected[data-finger=right-middle]:hover{background:#f87171;border-color:#fca5a5}body.dark-mode .key.selected[data-finger=right-ring]:hover{background:#f472b6;border-color:#f9a8d4}body.dark-mode .key.selected[data-finger=right-pinky]:hover{background:#a78bfa;border-color:#c4b5fd}body.dark-mode .key.disabled{background:#2c2e31;color:#3a3a3d}body.dark-mode .key.disabled:hover{transform:none}body.dark-mode .typing-area{background:#2c2e31;border:none}body.dark-mode .progress-bar-container{background:#2c2e31}body.dark-mode .progress-bar{transition:width .05s linear;background:#646669}body.dark-mode .target-text{color:#737373}body.dark-mode .target-text .correct{color:#e5e5e5}body.dark-mode .target-text .incorrect{color:#f87171;background:#f8717126}body.dark-mode .target-text .upcoming{color:#737373;opacity:1}body.dark-mode .target-text .current{color:#737373;opacity:1;background:transparent;font-weight:400;border-left-color:#e2b714;animation:blink-cursor-dark 1.2s ease-in-out infinite}@keyframes blink-cursor-dark{0%,49%{border-left-color:#e2b714}50%,to{border-left-color:transparent}}body.dark-mode .typing-input{background:#2c2e31;color:#d1d0c5;border:none}body.dark-mode .stats{background:transparent;border:none}body.dark-mode .stats h3{color:#d1d0c5}body.dark-mode .stat-item{color:#a3a3a3}body.dark-mode .stat-value{color:#fafafa}body.dark-mode .stat-label{color:#a3a3a3}body.dark-mode .restart-btn{background:#e2b714;color:#fff;border-color:#e2b714}body.dark-mode .restart-btn:hover{background:#c29a12;border-color:#c29a12}body.dark-mode .btn-generate,body.dark-mode .btn-restart{background:#262626;color:#a3a3a3;border-color:#404040;box-shadow:none}body.dark-mode .btn-generate:hover,body.dark-mode .btn-restart:hover{background:#2a2a2a;border-color:#525252;color:#e5e5e5;transform:translateY(-1px);box-shadow:0 2px 4px #0000004d}body.dark-mode .btn-generate:disabled,body.dark-mode .btn-restart:disabled{opacity:.3;color:#3a3a3d}body.dark-mode .instructions,body.dark-mode .shortcuts,body.dark-mode .shortcuts strong{color:#646669}body.dark-mode .shortcut-key{background:#2c2e31;border-color:#646669;color:#d1d0c5}body.dark-mode .focus-hint{background:#00000080;color:#646669}body.dark-mode .focus-hint kbd{background:#2c2e31;border-color:#646669;color:#d1d0c5}body.dark-mode .typing-overlay{background:#323437cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}body.dark-mode .overlay-content{color:#d1d0c5}body.dark-mode .overlay-content svg{color:#d1d0c5}body.dark-mode .modal-content{background:#2c2e31}body.dark-mode .modal-body{color:#d1d0c5}body.dark-mode .key.home-row:after{background:#646669}body.dark-mode .key.home-row.selected:after{background:#d1d0c5}