:root{--color-bg:#f5f4f0;--color-surface:#ffffff;--color-surface-alt:#f3f4f6;--color-primary:#3b82f6;--color-primary-hover:#2563eb;--color-primary-light:#eff6ff;--color-text:#1e1e2e;--color-text-muted:#6b7280;--color-border:#e5e7eb;--color-highlight:#fef08a;--color-correct:#bbf7d0;--color-wrong:#fecaca;--color-missed:#fde68a;--color-restore:#16a34a;--color-btn-bg:#ffffff;--color-zh-hover:#dbeafe;--color-zh-active:#bfdbfe;--color-en-hover:#fef9c3;--color-record-hover-bg:#fff1f2;--color-translation-bg:#eff6ff;--color-translation-text:#374151;--font-reading:Georgia,'Times New Roman',serif;--font-ui:system-ui,-apple-system,sans-serif;--radius:8px;--shadow:0 2px 10px rgba(0, 0, 0, 0.07)}[data-theme=dark]{--color-bg:#09090b;--color-surface:#18181b;--color-surface-alt:#27272a;--color-primary:#60a5fa;--color-primary-hover:#93c5fd;--color-primary-light:rgba(96, 165, 250, 0.1);--color-text:#fafafa;--color-text-muted:#a1a1aa;--color-border:rgba(255, 255, 255, 0.08);--color-highlight:rgba(250, 204, 21, 0.18);--color-correct:rgba(74, 222, 128, 0.18);--color-wrong:rgba(248, 113, 113, 0.18);--color-missed:rgba(251, 191, 36, 0.18);--color-restore:#4ade80;--color-btn-bg:#27272a;--color-zh-hover:rgba(96, 165, 250, 0.12);--color-zh-active:rgba(96, 165, 250, 0.24);--color-en-hover:rgba(250, 204, 21, 0.12);--color-record-hover-bg:rgba(239, 68, 68, 0.1);--color-translation-bg:rgba(96, 165, 250, 0.06);--color-translation-text:#d4d4d8;--shadow:0 1px 0 rgba(255, 255, 255, 0.06),0 4px 16px rgba(0, 0, 0, 0.5);color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}button{touch-action:manipulation}.theme-transition,.theme-transition *,.theme-transition ::after,.theme-transition ::before{transition:background-color .25s,border-color .25s,color .25s,fill .25s!important}.icon{display:inline-block;vertical-align:middle;flex-shrink:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:focus-visible,textarea:focus-visible{outline:rgba(59,130,246,.4) solid 3px;outline-offset:2px}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-ui);min-height:100vh;padding-bottom:4rem}.app-container{max-width:var(--reading-content-width,820px);margin:0 auto;padding:2.5rem 1.5rem}.app-header{position:relative;text-align:center;margin-bottom:2rem}.app-header h1{font-size:1.7rem;font-weight:700;letter-spacing:-.5px}.subtitle{color:var(--color-text-muted);margin-top:.5rem;font-size:.95rem}.btn-theme-toggle{position:absolute;top:0;right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-muted);box-shadow:var(--shadow);transition:color .15s,border-color .15s,background .15s}.btn-theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary)}#articleInput{width:100%;height:300px;padding:1.1rem 1.2rem;border:2px solid var(--color-border);border-radius:var(--radius);font-size:1rem;font-family:var(--font-ui);line-height:1.7;resize:vertical;background:var(--color-surface);color:var(--color-text);transition:border-color .2s}#articleInput:focus{outline:0;border-color:var(--color-primary)}.input-actions{display:flex;align-items:center;justify-content:space-between;margin-top:.8rem;gap:.8rem}.input-meta{display:flex;flex-direction:column;gap:.2rem}.input-hint{font-size:.85rem;color:var(--color-text-muted)}.restore-hint{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--color-restore);font-weight:500}.btn-clear{font-size:.78rem;color:var(--color-text-muted);background:0 0;border:1px solid var(--color-border);border-radius:4px;padding:.1rem .5rem;cursor:pointer;line-height:1.6}.btn-clear:hover{border-color:var(--color-text-muted);color:var(--color-text)}@media (max-width:640px){.app-container{padding:1.2rem 1rem}.reading-toolbar{align-items:stretch}.toolbar-controls{width:100%;margin-left:0;flex-direction:column}.btn-tool{justify-content:center;width:100%}.btn-toggle-row{width:100%}.toolbar-hint{width:100%;text-align:center}.article-body{padding:1.4rem 1.2rem}.input-actions{flex-direction:column;align-items:stretch}.btn-primary{width:100%;text-align:center}.settings-panel{right:auto;left:50%;transform:translateX(-50%);min-width:min(320px,calc(100vw - 2rem))}.settings-stepper button{width:2.75rem;height:2.75rem;font-size:1.2rem}.settings-email-wrapper{flex-direction:column;align-items:flex-start}.settings-email-input{width:100%}}.reading-toolbar{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:.65rem 1rem;box-shadow:var(--shadow);flex-wrap:wrap}.toolbar-controls{display:flex;gap:.5rem;margin-left:auto}.toolbar-hint{font-size:.82rem;color:var(--color-text-muted);white-space:nowrap}.article-body{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem 2.4rem;--reading-font-size:1.1rem;--reading-line-height:1.95;--reading-font-family:Georgia,"Times New Roman",serif;--reading-letter-spacing:0em}.paragraph-block{margin-bottom:1.6rem}.paragraph-block:last-child{margin-bottom:0}.paragraph-text{font-family:var(--reading-font-family);font-size:var(--reading-font-size);line-height:var(--reading-line-height);letter-spacing:var(--reading-letter-spacing);color:var(--color-text);user-select:text}.translation-area{display:none;margin-top:.7rem;padding:.85rem 1.1rem;background:var(--color-translation-bg);border-radius:6px;font-size:.95rem;line-height:1.75;color:var(--color-translation-text)}.article-body.show-translation .translation-area{display:block}.translation-loading{color:var(--color-text-muted);font-style:italic;font-size:.9rem}.record-area{display:none;margin-top:.7rem;align-items:center;gap:.7rem;flex-wrap:wrap}.article-body.show-record .record-area{display:flex}.speech-result{display:none;margin-top:.6rem;padding:.8rem 1rem;background:var(--color-surface-alt);border-radius:6px;border:1px solid var(--color-border);font-family:var(--font-reading);font-size:1rem;line-height:1.85;width:100%}.speech-result.visible{display:block}.speech-result .speech-result-label:first-child{margin-bottom:.45rem}.audio-playback{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border)}.audio-playback audio{height:32px;flex:1}.comparison-line{font-family:var(--font-reading);font-size:1rem;line-height:1.85}.speech-result-label{font-family:var(--font-ui);font-size:.8rem;color:var(--color-text-muted);margin-bottom:.5rem}.word-correct{background:var(--color-correct);border-radius:3px;padding:0 2px}.word-wrong{background:var(--color-wrong);border-radius:3px;padding:0 2px;text-decoration:underline wavy #ef4444}.word-missed{background:var(--color-missed);border-radius:3px;padding:0 2px}.en-sentence{border-radius:3px;transition:background .25s}@media (hover:hover) and (pointer:fine){.en-sentence.en-hover,.en-sentence:hover{background:var(--color-en-hover);cursor:default}}.en-sentence.sentence-highlight{background:var(--color-highlight)}.zh-sentence{cursor:pointer;border-radius:3px;padding:0 1px;transition:background .15s;display:inline}.zh-sentence:hover{background:var(--color-zh-hover)}@media (hover:hover) and (pointer:fine){.zh-sentence.zh-hover{background:var(--color-zh-hover)}}.zh-sentence.zh-active{background:var(--color-zh-active);font-weight:500}.btn-primary{background:var(--color-primary);color:#fff;border:none;padding:.65rem 1.6rem;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;font-family:var(--font-ui);transition:background .2s;white-space:nowrap}.btn-primary:hover{background:var(--color-primary-hover)}.btn-ghost{background:0 0;color:var(--color-text-muted);border:none;padding:.4rem .6rem;border-radius:6px;font-size:.88rem;cursor:pointer;font-family:var(--font-ui);transition:.15s;white-space:nowrap}.btn-ghost:hover{background:var(--color-border);color:var(--color-text)}.btn-tool{display:flex;align-items:center;gap:.35rem;background:var(--color-btn-bg);color:var(--color-text-muted);border:1px solid var(--color-border);padding:.4rem .85rem;border-radius:20px;font-size:.85rem;cursor:pointer;font-family:var(--font-ui);transition:.2s;white-space:nowrap}.btn-tool:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:0 0;color:var(--color-text-muted);border:none;padding:.4rem .25rem;border-radius:8px;font-size:.85rem;cursor:pointer;font-family:var(--font-ui);transition:color .15s,background .15s;white-space:nowrap}.btn-toggle-row:hover{background:var(--color-primary-light);color:var(--color-text)}.toggle-row-label{display:flex;align-items:center;gap:.35rem}.toggle-switch{position:relative;width:36px;height:20px;flex-shrink:0;background:var(--color-border);border-radius:999px;transition:background .2s}.toggle-switch-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}.btn-toggle-row[data-active=true] .toggle-switch{background:var(--color-primary)}.btn-toggle-row[data-active=true] .toggle-switch-thumb{transform:translateX(16px)}.btn-toggle-row[data-active=true]{color:var(--color-text)}.settings-wrapper{position:relative}.settings-panel{position:absolute;top:calc(100% + 8px);right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.18);padding:1rem 1.1rem;z-index:500;min-width:260px;display:flex;flex-direction:column;gap:.85rem}.settings-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;padding-bottom:.6rem;border-bottom:1px solid var(--color-border);font-size:.85rem;font-weight:600;color:var(--color-text)}.settings-panel-close{background:0 0;border:none;cursor:pointer;color:var(--color-text-muted);font-size:.85rem;padding:.2rem .5rem;border-radius:4px;line-height:1;transition:.15s}.settings-panel-close:hover{background:var(--color-border);color:var(--color-text)}.settings-backdrop{position:fixed;inset:0;z-index:499;background:0 0}.settings-row{display:flex;align-items:center;gap:.7rem}@media (max-width:640px){.settings-divider--desktop-only,.settings-group-label--desktop-only,.settings-row.settings-row--desktop-only{display:none}}.settings-label{font-size:.82rem;color:var(--color-text-muted);white-space:nowrap;width:4.5rem;flex-shrink:0}.settings-row--column{flex-direction:column;align-items:flex-start}.settings-row--column .settings-label{width:auto;display:flex;flex-direction:column;gap:.15rem}.settings-hint{font-size:.73rem;color:var(--color-text-muted);opacity:.7;white-space:normal}.settings-divider{border:none;border-top:1px solid var(--color-border);margin:.3rem 0}.settings-group-label{font-size:.72rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0}.settings-email-wrapper{display:flex;align-items:center;gap:.5rem;width:100%}.settings-email-input{flex:1;font-size:.82rem;padding:.3rem .5rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-btn-bg);color:var(--color-text);outline:0;box-sizing:border-box;min-width:0}.settings-email-input:focus{border-color:var(--color-accent,#4a9eff)}.settings-email-saved{font-size:.75rem;color:#4caf50;white-space:nowrap;flex-shrink:0}.settings-options{display:flex;gap:.4rem;flex-wrap:wrap}.settings-options button{font-size:.82rem;padding:.28rem .65rem;border-radius:20px;border:1px solid var(--color-border);cursor:pointer;background:var(--color-btn-bg);color:var(--color-text-muted);font-family:var(--font-ui);transition:.15s;white-space:nowrap}.settings-options button:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.settings-options button.settings-active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.settings-stepper{display:flex;align-items:center;gap:0;border:1px solid var(--color-border);border-radius:20px;overflow:hidden}.settings-stepper button{font-size:1rem;width:2rem;height:1.75rem;border:none;background:var(--color-btn-bg);color:var(--color-text);cursor:pointer;font-family:var(--font-ui);transition:background .15s;flex-shrink:0}.settings-stepper button:hover:not(:disabled){background:var(--color-primary-light);color:var(--color-primary)}.settings-stepper button:disabled{color:var(--color-border);cursor:not-allowed}.settings-stepper span{font-size:.82rem;color:var(--color-text);min-width:5rem;text-align:center;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);padding:0 .3rem;line-height:1.75rem;font-variant-numeric:tabular-nums}.btn-record{font-size:.85rem;padding:.38rem .85rem;border-radius:20px;border:1px solid var(--color-border);cursor:pointer;background:var(--color-btn-bg);color:var(--color-text-muted);font-family:var(--font-ui);transition:.2s}.btn-record:hover{background:var(--color-record-hover-bg);border-color:#ef4444;color:#ef4444}.btn-record.recording{background:#ef4444;color:#fff;border-color:#ef4444;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}.popup-phonetic{color:var(--color-text-muted);font-weight:400;font-size:.88em;font-style:italic;margin-left:.15em}.selection-popup{position:fixed;z-index:1000;background:var(--color-surface);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.14);border:1px solid var(--color-border);min-width:200px;max-width:300px;padding:1rem 1.1rem .9rem}.selection-popup--bottom{left:50%!important;top:auto!important;bottom:1.25rem;transform:translateX(-50%);min-width:280px;max-width:calc(100vw - 2rem);border-radius:16px;box-shadow:0 -2px 20px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.1)}.popup-close{position:absolute;top:.5rem;right:.6rem;background:0 0;border:none;cursor:pointer;color:var(--color-text-muted);font-size:.8rem;padding:.25rem .4rem;border-radius:4px;line-height:1;transition:.15s}.popup-close:hover{background:var(--color-border);color:var(--color-text)}.popup-word{font-family:var(--font-reading);font-size:1.05rem;font-weight:700;color:var(--color-primary);margin-bottom:.45rem;padding-right:1.4rem;word-break:break-word}.popup-translation{font-size:.92rem;color:var(--color-text);line-height:1.55;margin-bottom:.6rem}.popup-actions{display:flex;gap:.5rem;flex-wrap:wrap}.btn-save-note,.btn-speak{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;padding:.28rem .75rem;border-radius:20px;border:1px solid var(--color-border);cursor:pointer;background:var(--color-btn-bg);color:var(--color-text-muted);font-family:var(--font-ui);transition:.2s}.btn-save-note:hover,.btn-speak:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.btn-save-note:disabled{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary);cursor:default}mark.saved-word{background:rgba(251,146,60,.28);color:inherit;border-radius:2px;padding:0 1px;transition:background .2s}[data-theme=dark] mark.saved-word{background:rgba(251,146,60,.2)}.marks-hidden mark.saved-word{background:0 0}.note-mark-toggle{display:flex;align-items:center;gap:5px;margin-left:auto;margin-right:6px}.note-mark-toggle-label{font-size:.72rem;color:var(--color-text-muted);user-select:none}.note-mark-switch{position:relative;display:inline-block;width:30px;height:17px;background:var(--color-border);border-radius:999px;cursor:pointer;transition:background .2s;flex-shrink:0}.note-mark-switch::after{content:'';position:absolute;top:2.5px;left:2.5px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.note-mark-switch[aria-checked=true]{background:var(--color-primary)}.note-mark-switch[aria-checked=true]::after{transform:translateX(13px)}.note-fab{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:24px;width:48px;height:48px;border-radius:50%;background:var(--color-primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(59,130,246,.45);z-index:901;transition:transform .15s,box-shadow .15s,opacity .2s}.note-fab:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(59,130,246,.55)}.note-fab:active{transform:scale(.93)}.note-fab--hidden{opacity:0;pointer-events:none}.note-panel{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom,0px));right:24px;width:min(360px,calc(100vw - 48px));max-height:70vh;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.16);z-index:900;display:flex;flex-direction:column;transform-origin:bottom right;transform:scale(.75);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.34, 1.56, .64, 1),opacity .18s}.note-panel.is-open{transform:scale(1);opacity:1;pointer-events:auto}.note-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem .7rem;border-bottom:1px solid var(--color-border);flex-shrink:0}.note-panel-title{font-size:.88rem;font-weight:600;color:var(--color-text)}.note-panel-header-actions{display:flex;align-items:center;gap:.15rem}.note-panel-close,.note-panel-pin{background:0 0;border:none;cursor:pointer;color:var(--color-text-muted);padding:.2rem;border-radius:4px;line-height:1;transition:.15s;display:flex}.note-panel-close:hover,.note-panel-pin:hover{background:var(--color-border);color:var(--color-text)}.note-panel-pin[aria-pressed=true]{color:var(--color-primary);background:var(--color-primary-light)}.note-panel-hint{font-size:.74rem;color:var(--color-text-muted);padding:.35rem 1rem;background:var(--color-surface-alt);border-bottom:1px solid var(--color-border);flex-shrink:0}.note-list{flex:1;overflow-y:auto;padding:.5rem 0}.note-empty{padding:1.5rem 1rem;text-align:center;font-size:.83rem;color:var(--color-text-muted);line-height:1.6}.note-item{padding:.6rem 1rem;border-bottom:1px solid var(--color-border)}.note-item:last-child{border-bottom:none}.note-item-main{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.note-item-text{font-size:.92rem;font-weight:600;color:var(--color-primary);word-break:break-word;flex:1}.note-item-actions{display:flex;gap:.25rem;flex-shrink:0}.note-item-btn{background:0 0;border:none;cursor:pointer;color:var(--color-text-muted);padding:.25rem;border-radius:4px;line-height:1;display:flex;transition:.15s}.note-item-btn:hover{background:var(--color-primary-light);color:var(--color-primary)}.note-item-btn--delete:hover{background:#fee2e2;color:#ef4444}[data-theme=dark] .note-item-btn--delete:hover{background:rgba(239,68,68,.15);color:#f87171}.note-item-phonetic{font-size:.78rem;color:var(--color-text-muted);font-style:italic;font-weight:400;margin-left:.2em}.note-item-translation{font-size:.82rem;color:var(--color-text-muted);margin-top:.2rem;line-height:1.5}.note-panel-footer{display:flex;gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--color-border);flex-shrink:0}.btn-note-action{flex:1;font-size:.8rem;padding:.38rem .5rem;border-radius:8px;border:1px solid var(--color-border);cursor:pointer;background:var(--color-btn-bg);color:var(--color-text-muted);font-family:var(--font-ui);transition:.15s}.btn-note-action:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-note-clear:hover{border-color:#ef4444;color:#ef4444;background:#fee2e2}[data-theme=dark] .btn-note-clear:hover{background:rgba(239,68,68,.12);color:#f87171;border-color:#f87171}@media (max-width:640px){.note-panel-pin{display:none}}@media (hover:none){.btn-note-action:hover,.btn-note-clear:hover{background:var(--color-btn-bg);border-color:var(--color-border);color:var(--color-text-muted)}.note-item-btn--delete:hover,.note-item-btn:hover,.note-panel-close:hover{background:0 0;color:var(--color-text-muted)}.btn-save-note:hover,.btn-speak:hover{background:var(--color-btn-bg);border-color:var(--color-border);color:var(--color-text-muted)}.note-fab:hover{transform:none;box-shadow:0 4px 14px rgba(59,130,246,.45)}.btn-record:not(.recording):hover{background:var(--color-btn-bg);border-color:var(--color-border);color:var(--color-text-muted)}.btn-theme-toggle:hover{color:var(--color-text-muted);border-color:var(--color-border)}.btn-clear:hover{border-color:var(--color-border);color:var(--color-text-muted)}.btn-primary:hover{background:var(--color-primary)}.btn-ghost:hover{background:0 0;color:var(--color-text-muted)}.btn-tool:hover{background:var(--color-btn-bg);color:var(--color-text-muted);border-color:var(--color-border)}.btn-toggle-row:hover,.settings-panel-close:hover{background:0 0;color:var(--color-text-muted)}.settings-options button:hover{background:var(--color-btn-bg);color:var(--color-text-muted);border-color:var(--color-border)}.settings-stepper button:hover:not(:disabled){background:var(--color-btn-bg);color:var(--color-text)}.popup-close:hover{background:0 0;color:var(--color-text-muted)}.zh-sentence:hover{background:0 0}}.app-footer{margin-top:2rem;padding-top:.75rem;border-top:1px solid var(--color-border);text-align:center;font-size:.75rem;color:var(--color-text-muted);font-family:monospace}