:root{--bg-body: #1a1a2e;--bg-panel: #16213e;--bg-key: #1a1a3a;--bg-key-hover: #2a2a5a;--bg-key-used: #2b2b31;--bg-punct: #12122a;--bg-subtitle: #2a2a4a;--bg-badge: #2a2a4a;--bg-char-active: #1a2a5a;--bg-level-bar: #2a2a4a;--bg-feedback-correct: #1a3a1a;--bg-feedback-wrong: #3a1a1a;--bg-target: #3a3a1a;--bg-error-item: #1a1a3a;--bg-modal-row: #1a1a3a;--bg-btn-hover: #2a2a4a;--bg-btn-secondary-hover: #2a1a1a;--bg-accent-soft: rgba(102, 126, 234, .12);--bg-stat-card: rgba(255, 255, 255, .035);--text-primary: #e0e0e0;--text-secondary: #888;--text-tertiary: #aaa;--text-dim: #777;--text-stat: #fff;--text-stat-label: #777;--text-level-label: #aaa;--text-bar: #aaa;--text-btn: #ccc;--text-btn-secondary: #888;--text-punct-label: #555;--text-vk-bottom: #888;--text-error-context: #888;--text-error-pinyin: #aaa;--border-key: #333;--border-punct: #2a2a4a;--border-btn: #444;--border-btn-secondary: #333;--border-modal-row: #2a2a4a;--border-wide: #2a2a4a;--border-panel: rgba(255, 255, 255, .07);--overlay: rgba(0, 0, 0, .6);--accent: #667eea;--accent-gradient: linear-gradient(135deg, #667eea, #764ba2);--correct: #44cc44;--error: #ff4444;--target: #ffcc00;--char-done: #44cc44;--char-error: #ff4444;--char-inactive: #555;--pinyin-active: #667eea;--pinyin-inactive: #555;--panel-shadow: 0 18px 45px rgba(4, 8, 24, .18)}[data-theme=light]{--bg-body: #f0f2f5;--bg-panel: #ffffff;--bg-key: #e8ecf1;--bg-key-hover: #d0d4e0;--bg-key-used: #dedede;--bg-punct: #e0e4ea;--bg-subtitle: #e0e0e0;--bg-badge: #e8ecf1;--bg-char-active: #e0e8ff;--bg-level-bar: #e0e0e0;--bg-feedback-correct: #e8f5e8;--bg-feedback-wrong: #f5e8e8;--bg-target: #fff8e0;--bg-error-item: #f5f5f5;--bg-modal-row: #f5f5f5;--bg-btn-hover: #e0e0e0;--bg-btn-secondary-hover: #f5e8e8;--bg-accent-soft: rgba(102, 126, 234, .1);--bg-stat-card: #f7f8fb;--text-primary: #333;--text-secondary: #666;--text-tertiary: #888;--text-dim: #999;--text-stat: #222;--text-stat-label: #888;--text-level-label: #888;--text-bar: #888;--text-btn: #666;--text-btn-secondary: #999;--text-punct-label: #888;--text-vk-bottom: #999;--text-error-context: #666;--text-error-pinyin: #888;--border-key: #ccc;--border-punct: #ccc;--border-btn: #ccc;--border-btn-secondary: #ddd;--border-modal-row: #e0e0e0;--border-wide: #ccc;--border-panel: rgba(32, 42, 68, .09);--overlay: rgba(0, 0, 0, .3);--char-inactive: #ccc;--pinyin-inactive: #ccc;--panel-shadow: 0 18px 45px rgba(47, 57, 89, .08)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans SC,sans-serif;background:var(--bg-body);color:var(--text-primary);min-height:100vh;transition:background .3s,color .3s}.app{display:flex;flex-direction:column;min-height:100vh;max-width:1360px;margin:0 auto;padding:0 20px}.app-header{display:flex;align-items:center;gap:14px;padding:14px 0 6px}.app-title{font-size:23px;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-subtitle{font-size:14px;color:var(--text-secondary);background:var(--bg-subtitle);padding:3px 12px;border-radius:10px}.header-right{margin-left:auto;display:flex;align-items:center;gap:10px}.theme-toggle{background:var(--bg-subtitle);border:1px solid var(--border-key);border-radius:8px;padding:6px 12px;color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all .2s;font-family:inherit}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.settings-menu{position:relative}.settings-trigger{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;color:var(--text-secondary);background:var(--bg-subtitle);border:1px solid var(--border-key);border-radius:8px;font:inherit;font-size:14px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}.settings-trigger:hover,.settings-trigger.active{color:var(--accent);border-color:var(--accent);background:var(--bg-accent-soft)}.settings-popover{position:absolute;top:calc(100% + 10px);right:0;z-index:10001;width:min(330px,calc(100vw - 24px));padding:16px;color:var(--text-primary);background:var(--bg-panel);border:1px solid var(--border-panel);border-radius:14px;box-shadow:0 22px 60px #04081857}.settings-popover-header{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 12px;border-bottom:1px solid var(--border-panel)}.settings-popover-header strong{font-size:15px}.settings-popover-header span{color:var(--text-dim);font-size:11px}.settings-options{display:flex;flex-direction:column;padding-top:4px}.setting-option{position:relative;display:flex;align-items:center;gap:14px;padding:11px 2px;cursor:pointer}.setting-option+.setting-option{border-top:1px solid var(--border-panel)}.setting-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}.setting-copy strong{font-size:14px;font-weight:600}.setting-copy small{color:var(--text-dim);font-size:11px;line-height:1.4}.setting-option input{position:absolute;width:1px;height:1px;opacity:0}.setting-switch{position:relative;width:38px;height:22px;flex-shrink:0;background:var(--bg-level-bar);border:1px solid var(--border-key);border-radius:999px;transition:background .2s,border-color .2s}.setting-switch:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;background:var(--text-tertiary);border-radius:50%;transition:transform .2s,background .2s}.setting-option input:checked+.setting-switch{background:var(--accent);border-color:var(--accent)}.setting-option input:checked+.setting-switch:after{background:#fff;transform:translate(16px)}.setting-option input:focus-visible+.setting-switch{outline:2px solid var(--accent);outline-offset:3px}.app-main{display:flex;flex:1;gap:24px;padding:10px 0 24px}.center-section{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}.top-area{display:flex;gap:18px;align-items:stretch}.question-panel{flex:1;background:var(--bg-panel);border:1px solid var(--border-panel);border-radius:18px;padding:22px 28px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;box-shadow:var(--panel-shadow);overflow:hidden;transition:background .3s,border-color .3s}.question-header{font-size:13px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;width:100%;margin-bottom:18px;display:flex;align-items:center;gap:8px}.question-progress{margin-left:auto;color:var(--text-dim);font-size:12px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}.type-badge{font-size:12px;color:var(--text-tertiary);color:var(--accent);background:var(--bg-accent-soft);padding:4px 12px;border-radius:999px;text-transform:none;letter-spacing:0}.question-main{display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;width:100%;margin-bottom:18px}.pinyin-display{font-size:42px;color:var(--accent);font-weight:600;letter-spacing:6px}.char-display{font-size:80px;font-weight:700;color:var(--text-stat);margin-top:10px}.syllables-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 6px;width:100%}.syllable-unit{display:inline-flex;min-width:58px;padding:7px 7px 8px;flex-direction:column;align-items:center;color:var(--char-inactive);border:1px solid transparent;border-radius:12px;transition:all .2s}.syllable-unit .char-unit{font-size:52px;font-weight:700;line-height:1.08;transition:color .2s}.syllable-unit.done{color:var(--char-done);opacity:.7}.syllable-unit.active{color:var(--text-stat);background:var(--bg-char-active);border-color:var(--accent);box-shadow:0 8px 26px #667eea33}.pinyin-unit{font-size:13px;color:var(--pinyin-inactive);margin-bottom:4px;text-align:center;line-height:1;transition:color .2s}.syllable-unit.active .pinyin-unit{color:var(--pinyin-active);font-weight:600}.syllable-unit.done .pinyin-unit{color:var(--char-done)}.key-sequence{width:100%;padding-top:18px;border-top:1px solid var(--border-panel)}.key-sequence-label{display:block;margin-bottom:10px;color:var(--text-dim);font-size:11px;text-align:center;letter-spacing:.12em}.keys-row{display:flex;gap:8px;margin-top:0;flex-wrap:wrap;justify-content:center}.key-chip{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border:1px solid var(--border-key);border-radius:9px;font-size:16px;font-weight:700;color:var(--text-tertiary);background:var(--bg-key);transition:all .15s;padding:0 6px}.key-chip.active{border-color:var(--accent);color:var(--accent);background:var(--bg-char-active);box-shadow:0 0 0 4px var(--bg-accent-soft)}.key-chip.done{<<<<<<< HEAD border-color: var(--text-secondary);color:var(--text-secondary);background:var(--bg-key-used);======= border-color: transparent;color:var(--text-dim);background:transparent;opacity:.55;>>>>>>> 0f3d764 (feat: 优化练习体验并添加显示设置)}.key-chip.error{border-color:var(--error);color:var(--error);background:var(--bg-feedback-wrong);animation:shake .3s ease-in-out}.key-chip.correct{border-color:var(--correct);color:var(--correct)}.key-chip.wrong{border-color:var(--error);color:var(--error)}.error-hint{margin-top:14px;font-size:18px;color:var(--error);font-weight:600}@keyframes pulse-slot{0%,to{box-shadow:0 0 8px #667eea33}50%{box-shadow:0 0 24px #667eea80}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.stats-panel{width:320px;flex-shrink:0;background:var(--bg-panel);border:1px solid var(--border-panel);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--panel-shadow);transition:background .3s,border-color .3s}.stats-header{font-size:13px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:0}.stats-primary{display:grid;grid-template-columns:minmax(0,.85fr) minmax(138px,1.15fr);gap:10px}.primary-stat{min-width:0;padding:10px;background:var(--bg-accent-soft);border:1px solid rgba(102,126,234,.16);border-radius:12px}.primary-stat-value{display:flex;align-items:baseline;gap:2px;min-height:35px;margin-top:4px;color:var(--accent);font-size:27px;font-weight:750;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}.primary-stat-value small,.stat-value small{color:var(--text-secondary);font-size:11px;font-weight:500;white-space:nowrap}.speed-stat .primary-stat-value{justify-content:space-between}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:0;align-items:start}.stat-item{display:flex;flex-direction:column;padding:6px 8px;border-bottom:1px solid var(--border-panel)}.stat-label{font-size:12px;color:var(--text-stat-label)}.stat-value{font-size:18px;font-weight:700;color:var(--text-stat);line-height:1.4;min-height:26px;font-variant-numeric:tabular-nums}.keystroke-summary .correct{color:var(--correct)}.keystroke-summary .error{color:var(--error)}.stat-divider{color:var(--text-dim)}.stat-num{font-variant-numeric:tabular-nums;min-width:4.5ch;display:inline-block}.stat-unit{font-size:12px;color:var(--text-secondary);font-weight:400;margin-left:1px}.stat-value.correct{color:var(--correct)}.stat-value.error{color:var(--error)}.level-section{padding:10px;margin-bottom:0;background:var(--bg-stat-card);border:1px solid var(--border-panel);border-radius:12px}.level-header{display:flex;align-items:center;gap:10px;margin-bottom:7px}.level-badge{background:var(--accent-gradient);color:#fff;font-size:12px;font-weight:600;padding:3px 12px;border-radius:10px}.level-label{font-size:15px;color:var(--text-level-label)}.level-bar-container{position:relative;height:10px;background:var(--bg-level-bar);border-radius:4px;overflow:hidden}.level-bar{height:100%;background:var(--accent-gradient);border-radius:4px;transition:width .5s ease}.level-bar-text{position:absolute;right:6px;top:-3px;font-size:10px;color:var(--text-bar)}.restart-btn{width:100%;padding:9px 7px;border:1px solid var(--border-btn);border-radius:8px;background:transparent;color:var(--text-btn);cursor:pointer;font-size:14px;transition:all .2s}.stats-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.restart-btn:hover{background:var(--bg-btn-hover);border-color:var(--accent);color:var(--accent)}.restart-btn.secondary{border-color:var(--border-btn-secondary);color:var(--text-btn-secondary);font-size:13px}.restart-btn.secondary:hover{border-color:#f64;color:#f64;background:var(--bg-btn-secondary-hover)}.virtual-keyboard{background:var(--bg-panel);border:1px solid var(--border-panel);border-radius:18px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--panel-shadow);transition:background .3s,border-color .3s}.keyboard-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.keyboard-title{color:var(--text-primary);font-size:14px;font-weight:650}.keyboard-hint{margin-left:10px;color:var(--text-dim);font-size:11px}.keyboard-target-label{padding:5px 10px;color:var(--text-secondary);background:var(--bg-accent-soft);border-radius:999px;font-size:12px}.keyboard-target-label strong{margin-left:4px;color:var(--accent);font-size:15px}.keyboard-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding:4px 0 6px;scrollbar-width:thin}.keyboard-layout{min-width:770px;width:max-content;margin:0 auto;display:flex;flex-direction:column;gap:7px}.vk-row{display:flex;gap:6px;justify-content:center}.vk-key{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:54px;border:1px solid var(--border-key);border-radius:10px;background:var(--bg-key);color:var(--text-primary);cursor:pointer;box-shadow:0 3px 0 var(--border-key);transition:transform .12s,border-color .12s,background .12s,box-shadow .12s;font-family:inherit;line-height:1}.vk-key:hover:not(.disabled){background:var(--bg-key-hover);border-color:var(--text-tertiary);transform:translateY(-1px)}.vk-key.disabled{opacity:.3;cursor:default;background:transparent;border-color:transparent}.vk-punct{width:48px!important;height:48px!important;border-color:var(--border-punct);background:var(--bg-punct)}.vk-punct .vk-key-top{font-size:18px}.vk-punct .vk-key-bottom{font-size:10px;color:var(--text-punct-label)}.vk-wide{width:100%!important;max-width:400px;height:40px;font-size:14px;color:var(--text-secondary);border-color:var(--border-wide)}.vk-row-space{justify-content:center}.vk-key.feedback-correct{<<<<<<< HEAD border-color: var(--text-secondary);color:var(--text-secondary);background:var(--bg-key-used);box-shadow:0 0 16px #80808059;======= border-color: var(--correct);background:var(--bg-feedback-correct);box-shadow:0 3px 0 var(--correct),0 0 18px #44cc444d;>>>>>>> 0f3d764 (feat: 优化练习体验并添加显示设置)}.vk-key.feedback-wrong{border-color:var(--error);background:var(--bg-feedback-wrong);box-shadow:0 3px 0 var(--error),0 0 18px #ff44444d;animation:shake .3s ease-in-out}.vk-key.target{border-color:var(--accent);background:var(--bg-accent-soft);box-shadow:0 3px 0 var(--accent),0 0 0 4px var(--bg-accent-soft)}.vk-key.used{<<<<<<< HEAD border-color: var(--text-secondary);color:var(--text-secondary);background:var(--bg-key-used);opacity:.6;======= opacity: .42;>>>>>>> 0f3d764 (feat: 优化练习体验并添加显示设置)}.vk-key-top{font-size:20px;font-weight:700}.vk-key-bottom{font-size:11px;color:var(--text-vk-bottom);margin-top:2px}@media(min-width:961px)and (max-height:760px){.app-header{padding-top:8px}.app-main{padding:4px 0 12px}.center-section{gap:10px}.question-panel{min-height:280px;padding-top:16px;padding-bottom:18px}.question-header,.question-main{margin-bottom:12px}.syllable-unit .char-unit{font-size:46px}.key-sequence{padding-top:12px}.virtual-keyboard{padding-top:10px;padding-bottom:11px;gap:7px}.vk-key{height:48px}.vk-punct{height:44px!important}.vk-wide{height:34px}}@media(max-width:960px){.top-area{flex-direction:column}.stats-panel{width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center}.stats-header,.level-section{grid-column:1 / -1}.stats-primary{grid-column:1 / -1;grid-template-columns:1fr 1fr}.stats-secondary,.stats-actions{grid-column:1 / -1}.restart-btn{align-self:stretch}}@media(max-width:640px){.app{padding:0 12px}.app-header{gap:8px}.app-title{font-size:19px}.app-subtitle{display:none}.theme-toggle{padding:6px 9px;font-size:12px}.settings-trigger{padding:6px 9px}.settings-trigger span:last-child{display:none}.settings-popover{position:fixed;top:54px;right:12px}.question-panel{min-height:350px;padding:20px 14px 24px}.syllable-unit{min-width:48px;padding:6px 4px}.syllable-unit .char-unit{font-size:42px}.stats-panel{display:flex;padding:18px}.keyboard-hint{display:none}.virtual-keyboard{padding:15px 12px 16px}.modal-content{padding:30px 20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.modal-content{background:var(--bg-panel);border-radius:18px;padding:44px 40px;max-width:580px;width:100%;max-height:80vh;overflow-y:auto;transition:background .3s}.modal-title{font-size:28px;font-weight:700;text-align:center;margin-bottom:28px;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-stats{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}.modal-stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-modal-row)}.modal-stat-label{font-size:16px;color:var(--text-dim)}.modal-stat-value{font-size:20px;font-weight:700;color:var(--text-stat)}.modal-stat-value.correct{color:var(--correct)}.modal-stat-value.error{color:var(--error)}.modal-errors{margin-bottom:28px}.modal-errors-title{font-size:18px;font-weight:600;color:#f64;margin-bottom:14px}.modal-errors-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto}.modal-error-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-error-item);border-radius:10px;font-size:15px}.error-char{font-size:24px;font-weight:700;color:#f44;width:34px;text-align:center}.error-pinyin{color:var(--text-error-pinyin);width:70px}.error-context{color:var(--text-error-context);font-size:12px;flex:1}.error-keys{color:var(--correct);font-size:12px}.error-pressed{color:var(--error);font-size:12px}.modal-actions{display:flex;justify-content:center;gap:12px}.modal-btn{padding:14px 48px;border:none;border-radius:12px;background:var(--accent-gradient);color:#fff;font-size:18px;font-weight:600;cursor:pointer;transition:opacity .2s}.modal-btn:hover{opacity:.85}.modal-btn-secondary{background:transparent;border:2px solid var(--border-modal-row, #3a3a5a);color:var(--text-secondary, #888)}.modal-btn-secondary:hover{background:var(--bg-modal-row, #1a1a3a);opacity:1}@media(max-width:640px){.modal-content{padding:30px 20px}}