:root,[data-theme=dark]{--bg-color: #2c2e31;--main-color: #e2b714;--sub-color: #a6a9ac;--sub-alt-color: #232527;--text-color: #d1d0c5;--error-color: #ca4754;--error-extra-color: #7e2a33;--caret-color: #e2b714;--card-hover-bg: #3a3c3f;--roundness: .5rem;--font: "Roboto Mono", "Monaco", "Menlo", "Ubuntu Mono", monospace}[data-theme=light]{--bg-color: #faf5e4;--main-color: #b8960c;--sub-color: #837d6e;--sub-alt-color: #f0e9d2;--text-color: #3c3a32;--error-color: #c93b3b;--error-extra-color: #a12e2e;--caret-color: #b8960c;--card-hover-bg: #e8e1c8}*{margin:0;padding:0;box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:var(--sub-color) transparent;font-size:18px}body{font-family:var(--font);background:var(--bg-color);color:var(--text-color);min-height:100vh;transition:background .3s,color .3s}a{color:var(--sub-color);text-decoration:none;transition:color .15s}a:hover{color:var(--text-color)}.app{max-width:min(80%,2000px);margin:0 auto;padding:0 2rem;min-height:100vh;display:flex;flex-direction:column}.site-footer{margin-top:auto;padding:1.5rem 0;text-align:center;font-size:.8rem;color:var(--sub-color)}.site-footer .beian-link{color:inherit;text-decoration:none;transition:color .2s}.site-footer .beian-link:hover{color:var(--text-color)}.nav-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 0}.nav-logo{display:flex;align-items:baseline;gap:.5rem;cursor:pointer;color:var(--text-color);text-decoration:none}.nav-logo-main{font-size:1.6rem;font-weight:700;letter-spacing:-.5px}.nav-logo-sub{font-size:.8rem;color:var(--sub-color)}.nav-right{display:flex;gap:1.25rem;align-items:center}.nav-links{display:flex;gap:1rem;align-items:center}.nav-links a{font-size:.9rem;color:var(--sub-color);padding:.25rem .5rem;border-radius:var(--roundness);transition:color .15s}.nav-links a:hover,.nav-links a.active{color:var(--text-color)}.theme-toggle{background:none;border:2px solid var(--sub-color);border-radius:var(--roundness);color:var(--sub-color);cursor:pointer;padding:.3rem .6rem;font-family:var(--font);font-size:.85rem;line-height:1;transition:color .15s,border-color .15s;display:flex;align-items:center;gap:.35rem}.theme-toggle:hover{color:var(--text-color);border-color:var(--text-color)}.locale-toggle{background:none;border:2px solid var(--sub-color);border-radius:var(--roundness);color:var(--sub-color);cursor:pointer;padding:.3rem .6rem;font-family:var(--font);font-size:.75rem;font-weight:600;line-height:1;transition:color .15s,border-color .15s}.locale-toggle:hover{color:var(--text-color);border-color:var(--text-color)}.center-container{display:flex;justify-content:center;align-items:center;flex:1}.document-list{flex:1;padding:1.5rem 0}.document-list-title{color:var(--sub-color);font-size:.9rem;letter-spacing:.05em}.document-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}.document-card{background:var(--sub-alt-color);border-radius:var(--roundness);padding:1.5rem;cursor:pointer;transition:background .15s,border-color .15s;border:2px solid transparent;display:flex;flex-direction:column}.document-card:hover{background:var(--card-hover-bg);border-color:var(--sub-color)}.document-card-new{animation:card-highlight 2.5s ease-out}@keyframes card-highlight{0%{transform:scale(1);border-color:var(--main-color);box-shadow:0 0 8px color-mix(in srgb,var(--main-color) 40%,transparent)}12%{transform:scale(1.03);border-color:var(--main-color);box-shadow:0 0 12px color-mix(in srgb,var(--main-color) 50%,transparent)}24%{transform:scale(1);border-color:var(--main-color);box-shadow:0 0 6px color-mix(in srgb,var(--main-color) 30%,transparent)}36%{transform:scale(1.03);border-color:var(--main-color);box-shadow:0 0 12px color-mix(in srgb,var(--main-color) 50%,transparent)}48%{transform:scale(1);border-color:var(--main-color);box-shadow:0 0 6px color-mix(in srgb,var(--main-color) 30%,transparent)}to{transform:scale(1);border-color:transparent;box-shadow:none}}.document-card-title{color:var(--text-color);font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.document-card-desc{color:var(--sub-color);font-size:.85rem;line-height:1.5;margin-bottom:.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.document-card-meta{color:var(--sub-color);font-size:.75rem;opacity:.7}.document-empty{color:var(--sub-color);text-align:center;padding:4rem 0;font-size:1.1rem}.practice-container{flex:1;display:flex;flex-direction:column;align-items:center;cursor:text;outline:none;padding:2rem 0;min-height:calc(100vh - 6rem)}.practice-top-bar{display:flex;justify-content:space-between;align-items:flex-start;width:100%;max-width:86%;flex-shrink:0}.doc-info{display:flex;flex-direction:column;gap:.3rem}.doc-title{font-size:1.25rem;font-weight:700;color:var(--main-color)}.doc-description{font-size:.8rem;color:var(--sub-color)}.practice-bottom-bar{position:fixed;bottom:1.5rem;display:flex;align-items:center;gap:.6rem}.toggle-group{display:inline-flex;align-items:stretch;background:var(--sub-alt-color, rgba(127, 127, 127, .12));border-radius:.5rem;padding:.15rem;gap:.15rem}.toggle-btn{background:transparent;border:none;color:var(--sub-color);padding:.25rem .75rem;border-radius:.4rem;cursor:pointer;font-family:inherit;font-size:.8rem;line-height:1;transition:color .15s,background .15s}.toggle-btn:hover{color:var(--text-color)}.toggle-btn.active{color:var(--bg-color);background:var(--main-color)}.toggle-btn.active:hover{color:var(--bg-color)}.stats-panel{display:flex;gap:3.5rem;flex-shrink:0}.practice-main{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:8rem}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:.8rem;color:var(--sub-color);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:2.25rem;font-weight:700;color:var(--main-color)}.hidden-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.words-wrapper{position:relative;width:100%;max-width:82%;height:calc(3.2rem * 7);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.4) 20%,black 40%,black 60%,rgba(0,0,0,.4) 80%,transparent);mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.4) 20%,black 40%,black 60%,rgba(0,0,0,.4) 80%,transparent)}.words-content{position:relative;transition:transform .25s ease-out}.words{font-size:1.6rem;line-height:2;white-space:pre-wrap;word-break:break-all;position:relative;color:var(--sub-color)}.line{min-height:3.2rem}.line-tips{font-size:.85rem;color:var(--sub-color);opacity:.55;line-height:1.6;padding-left:.2rem}.words .letter{display:inline;transition:color .1s}.words .letter.correct{color:var(--text-color)}.words .letter.incorrect{color:var(--error-color)}.words .letter.overflow{text-decoration:underline;text-decoration-color:var(--error-color)}.words .letter.newline-symbol,.words .letter.tab-symbol,.words .letter.space-symbol{opacity:.4}#caret{position:absolute;width:2.5px;height:2.1rem;background:var(--caret-color);border-radius:1px;animation:caretFlashSmooth 1s infinite;pointer-events:none;transition:left .1s ease-out,top .1s ease-out;z-index:10}#caret.typing{animation:none;opacity:1;transition:left 80ms ease-out,top 80ms ease-out}#caret.error{background:var(--error-color)}@keyframes caretFlashSmooth{0%,to{opacity:0}50%{opacity:1}}.hint{margin-top:2rem;color:var(--sub-color);font-size:.95rem}.result-container{flex:1;display:flex;justify-content:center;align-items:center;padding:2rem 0}.result-card{width:100%;max-width:640px}.result-title{text-align:center;color:var(--text-color);font-size:1.6rem;font-weight:700;margin-bottom:2.5rem}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2.5rem}.result-stat{text-align:center}.result-stat-label{font-size:.8rem;color:var(--sub-color);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem}.result-stat-value{font-size:2.25rem;font-weight:700;color:var(--main-color)}.result-stat-value .unit{font-size:.95rem;color:var(--sub-color);font-weight:400;margin-left:.25rem}.result-errors{margin-bottom:2rem}.result-errors-title{font-size:.95rem;color:var(--sub-color);margin-bottom:.85rem}.error-detail-list{display:flex;flex-direction:column;gap:.5rem}.error-detail-item{display:flex;align-items:center;gap:.5rem;font-size:.95rem}.error-detail-expected{background:var(--error-color);color:var(--bg-color);padding:.2rem .6rem;border-radius:var(--roundness);font-weight:600;min-width:2rem;text-align:center}.error-detail-sep{color:var(--sub-color)}.error-detail-actuals{display:flex;flex-wrap:wrap;gap:.3rem}.error-detail-actual{background:var(--sub-alt-color);color:var(--text-color);padding:.15rem .5rem;border-radius:3px;font-size:.85rem}.error-detail-compact{display:inline-flex;align-items:center;gap:.2rem;background:var(--sub-alt-color);border:1px solid var(--error-extra-color);border-radius:3px;padding:.15rem .4rem;font-size:.75rem}.error-detail-expected-sm{color:var(--error-color);font-weight:600}.error-detail-sep-sm,.error-detail-actual-sm{color:var(--sub-color)}.result-actions{display:flex;justify-content:center;gap:1rem;margin-top:2.5rem}.btn{padding:.8rem 2.25rem;border:none;border-radius:var(--roundness);font-family:var(--font);font-size:.95rem;cursor:pointer;transition:opacity .15s,background .15s}.btn:hover{opacity:.85}.btn-primary{background:var(--main-color);color:var(--bg-color);font-weight:600}.btn-secondary{background:var(--sub-alt-color);color:var(--text-color)}.btn-secondary:hover{background:var(--card-hover-bg)}.document-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem}.document-list-header .document-list-title{margin-bottom:0}.btn-sm{padding:.4rem 1rem;font-size:.85rem}.document-card-bottom{margin-top:auto;padding-top:.75rem}.document-card-actions{display:flex;gap:.5rem;opacity:0;justify-content:right;transition:opacity .15s}.document-card:hover .document-card-actions{opacity:1}.card-action-btn{background:none;border:1px solid var(--sub-color);border-radius:var(--roundness);color:var(--sub-color);font-family:var(--font);font-size:.7rem;padding:.2rem .5rem;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}.card-action-btn:hover{color:var(--text-color);border-color:var(--text-color)}.card-action-delete:hover,.card-action-delete.confirm{color:var(--error-color);border-color:var(--error-color)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:100}.modal-content{background:var(--bg-color);border:2px solid var(--sub-color);border-radius:var(--roundness);padding:2rem;width:90%;max-width:640px;max-height:85vh;overflow-y:auto}.modal-title{font-size:1.2rem;font-weight:600;color:var(--text-color);margin-bottom:1.5rem}.modal-actions{display:flex;gap:.75rem;margin-top:1.5rem}.form-group{margin-bottom:1rem}.form-label{display:block;font-size:.8rem;color:var(--sub-color);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em}.form-input,.form-textarea{width:100%;background:var(--sub-alt-color);border:2px solid transparent;border-radius:var(--roundness);color:var(--text-color);font-family:var(--font);font-size:.9rem;padding:.65rem .85rem;outline:none;transition:border-color .15s}.form-input:focus,.form-textarea:focus{border-color:var(--main-color)}.form-textarea{resize:vertical;min-height:120px;line-height:1.6}.history-page{flex:1;padding:1.5rem 0}.history-header{margin-bottom:1.75rem}.history-section-title{font-size:.85rem;color:var(--sub-color);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em}.history-error-summary{margin-bottom:2rem;padding:1.25rem;background:var(--sub-alt-color);border-radius:var(--roundness)}.history-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.history-section-header .history-section-title{margin-bottom:0}.error-practice-btn{background:transparent;border:1px solid var(--main-color);color:var(--main-color);padding:.25rem .85rem;border-radius:.4rem;cursor:pointer;font-family:inherit;font-size:.78rem;line-height:1;transition:background .15s,color .15s}.error-practice-btn:hover{background:var(--main-color);color:var(--bg-color)}.error-practice-btn-sm{padding:.15rem .6rem;font-size:.7rem;margin-left:auto}.error-count{font-size:.7rem;color:var(--sub-color);margin-left:.5rem}.history-list{display:flex;flex-direction:column;gap:.75rem}.history-item{position:relative;background:var(--sub-alt-color);border-radius:var(--roundness);padding:1.25rem 1.5rem;transition:background .15s}.history-item:hover{background:var(--card-hover-bg)}.history-item-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}.history-item-title{font-weight:600;color:var(--text-color);cursor:pointer;transition:color .15s}.history-item-title:hover{color:var(--main-color)}.history-item-date{font-size:.75rem;color:var(--sub-color);text-align:right;margin-top:.5rem}.history-item-stats{display:flex;gap:2rem;margin-bottom:.5rem}.history-stat{display:flex;align-items:baseline;gap:.35rem}.history-stat-label{font-size:.7rem;color:var(--sub-color);text-transform:uppercase}.history-stat-value{font-size:1rem;font-weight:600;color:var(--main-color)}.history-item-errors{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}.history-delete-btn{position:absolute;top:.75rem;right:.75rem;background:none;border:none;color:var(--sub-color);font-size:1.1rem;cursor:pointer;opacity:0;transition:opacity .15s,color .15s;line-height:1;padding:.2rem}.history-item:hover .history-delete-btn{opacity:1}.history-delete-btn:hover{color:var(--error-color)}.loading-spinner{width:2rem;height:2rem;border:2px solid var(--sub-alt-color);border-top-color:var(--main-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.keypress-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;min-height:3.2rem}.keypress-item.keypress-completed{opacity:.5}.keypress-item.keypress-active{background:var(--sub-alt-color);border-radius:var(--roundness);padding:.6rem 1rem;border:2px solid var(--main-color)}.keypress-item.keypress-pending{opacity:.6}.keypress-tips{color:var(--sub-color);font-size:.85rem;min-width:4rem}.keypress-keys{display:flex;align-items:center;gap:.15rem}.key-plus{color:var(--sub-color);font-size:.8rem;margin:0 .15rem}.key-badge{display:inline-block;background:var(--sub-alt-color);color:var(--text-color);padding:.3rem .65rem;border-radius:4px;font-family:var(--font);font-size:.85rem;font-weight:600;border:1px solid var(--sub-color);transition:all .1s}.key-badge.pressed{background:var(--main-color);color:var(--bg-color);border-color:var(--main-color);transform:translateY(2px)}.key-badge.correct{background:var(--text-color);color:var(--bg-color);border-color:var(--text-color);opacity:.6}.mode-toggle{display:flex;gap:0;border:1px solid var(--sub-color);border-radius:var(--roundness);overflow:hidden;width:fit-content}.mode-toggle-btn{background:none;border:none;color:var(--sub-color);font-family:var(--font);font-size:.8rem;padding:.35rem 1rem;cursor:pointer;transition:all .15s}.mode-toggle-btn.active{background:var(--main-color);color:var(--bg-color)}.mode-toggle-btn:hover:not(.active){color:var(--text-color)}.advanced-items{display:flex;flex-direction:column;gap:.75rem;margin-bottom:.75rem}.advanced-item{background:var(--sub-alt-color);border-radius:var(--roundness);padding:.85rem}.advanced-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.advanced-item-type{font-size:.7rem;color:var(--main-color);text-transform:uppercase;font-weight:600;letter-spacing:.05em}.advanced-item-body{display:flex;flex-direction:column;gap:.5rem}.form-input-sm{padding:.4rem .6rem;font-size:.8rem}.form-textarea-sm{min-height:60px;font-size:.8rem;padding:.4rem .6rem}.keypress-edit{display:flex;align-items:center;gap:.75rem}.keypress-edit-display{font-family:var(--font);font-size:.85rem;color:var(--text-color);font-weight:600;flex:1}.key-recorder{flex-shrink:0}.key-recorder-hint{color:var(--main-color);font-size:.85rem;font-weight:600;animation:caretFlashSmooth 1s infinite}.advanced-add-buttons{display:flex;gap:.5rem}.document-list-actions{display:flex;gap:.5rem;align-items:center}.category-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap}.speed-test-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;margin-bottom:1.25rem;background:var(--sub-alt-color);border-radius:var(--roundness);border:1px solid transparent;transition:border-color .15s}.speed-test-bar:hover{border-color:var(--sub-color)}.speed-test-info{display:flex;align-items:baseline;gap:.75rem}.speed-test-title{color:var(--main-color);font-weight:600;font-size:.9rem}.speed-test-desc{color:var(--sub-color);font-size:.75rem}.speed-test-actions{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.speed-test-toggle{display:flex;align-items:center;gap:.35rem;color:var(--sub-color);font-size:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.speed-test-toggle input[type=checkbox]{accent-color:var(--main-color);cursor:pointer}.speed-test-count{background:var(--bg-color);color:var(--text-color);border:1px solid var(--sub-alt-color);border-radius:.25rem;padding:.2rem .3rem;font-size:.75rem;cursor:pointer}.category-tags{display:flex;gap:.5rem;flex-wrap:wrap}.category-tag{display:inline-flex;align-items:center;gap:.3rem;background:var(--sub-alt-color);color:var(--sub-color);padding:.3rem .75rem;border-radius:var(--roundness);font-size:.8rem;cursor:pointer;transition:color .15s,background .15s;-webkit-user-select:none;user-select:none}.category-tag:hover{color:var(--text-color);background:var(--card-hover-bg)}.category-tag-arrow{font-size:.7rem;opacity:.6}.document-groups{display:flex;flex-direction:column;gap:1.5rem}.document-group-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.document-group-arrow{color:var(--sub-color);font-size:.8rem;width:1rem}.document-group-name{color:var(--sub-color);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.document-group-count{color:var(--sub-color);font-size:.7rem;opacity:.6;background:var(--sub-alt-color);padding:.1rem .4rem;border-radius:3px}.category-select{background:var(--sub-alt-color);border:1px solid var(--sub-color);border-radius:var(--roundness);color:var(--sub-color);font-family:var(--font);font-size:.65rem;padding:.15rem .3rem;cursor:pointer;outline:none;max-width:100px}.category-select:focus{border-color:var(--main-color)}.category-form{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}.category-form .form-input{flex:1}.category-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.category-list-item{display:flex;align-items:center;justify-content:space-between;background:var(--sub-alt-color);padding:.6rem .85rem;border-radius:var(--roundness)}.category-list-name{color:var(--text-color);font-size:.9rem}.category-list-actions{display:flex;gap:.4rem}.category-empty{color:var(--sub-color);font-size:.85rem;text-align:center;padding:1rem 0}.preset-section{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--sub-alt-color)}.preset-section-header{cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:1rem}.preset-section-title{color:var(--sub-color);font-size:.85rem;letter-spacing:.05em}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.preset-card{background:var(--sub-alt-color);border-radius:var(--roundness);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}.preset-card-title{color:var(--text-color);font-size:.95rem;font-weight:600}.preset-card-desc{color:var(--sub-color);font-size:.8rem;line-height:1.4}.preset-card-category{color:var(--main-color);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}.preset-card-bottom{margin-top:auto;padding-top:.75rem;display:flex;align-items:center;justify-content:space-between}.preset-card-actions{display:flex;gap:.5rem;opacity:0;margin-left:auto;transition:opacity .15s}.preset-card:hover .preset-card-actions{opacity:1}.preset-renamed-tip{font-size:.7rem;color:var(--main-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-sm{max-width:420px}.import-error-text,.import-confirm-text{color:var(--text-color);font-size:.9rem;line-height:1.5;margin-bottom:.5rem}