:root{font-family:Arial,Helvetica,sans-serif;color:#222;background:#f5f5f5}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f5f5f5;color:#222;line-height:1.55}button,textarea,select{font:inherit}.page-shell{max-width:860px;margin:0 auto;padding:14px 24px 56px}.hero{margin-bottom:18px}.eyebrow{margin:0 0 2px;color:#64748b;font-size:11px;font-weight:600;letter-spacing:.08em}.title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.hero h1{margin:0;color:#4b5563;font-size:22px;font-weight:600;line-height:1.3}.hero>p:last-child{max-width:620px;margin:1px 0 0;color:#7b8491;font-size:12px;line-height:1.45}.header-actions{display:flex;align-items:center;gap:7px}select{height:31px;padding:0 6px;border:1px solid #bcd7eb;border-radius:8px;background:#fff;color:#3672a7;font-size:12px;font-weight:600}.composer,.practice,.offline-panel{padding:12px;background:#fff;border:1px solid #e0e0e0;border-radius:12px}.section-heading h2,.progress-row h2{margin:0;color:#4b5563;font-size:17px;font-weight:600;line-height:1.35}.section-heading p{margin:1px 0 10px;color:#7b8491;font-size:12px;line-height:1.45}textarea{display:block;width:100%;min-height:110px;resize:vertical;padding:10px 12px;color:#222;border:1px solid #d2d6dc;border-radius:8px;outline:0;background:#fff;font-family:Arial,"Microsoft YaHei",sans-serif;font-size:20px;line-height:1.65}textarea:focus{border-color:#7bb6e0;box-shadow:0 0 0 2px rgb(125 181 224 / 22%)}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}.hint{margin:0;color:#7b8491;font-size:12px}button{border:1px solid #bcd7eb;border-radius:8px;padding:7px 13px;cursor:pointer;color:#3672a7;background:#eef7ff;font-size:13px;font-weight:600}button:hover{background:#e0f0ff;border-color:#3a8fd0}button:disabled{cursor:not-allowed;opacity:.5}.offline-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}.offline-panel h2{margin:0;color:#4b5563;font-size:15px;font-weight:600;line-height:1.35}.offline-panel p{margin:1px 0 0;color:#7b8491;font-size:12px;line-height:1.45}.offline-panel button{flex:0 0 auto}.practice{margin-top:14px}.progress-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.progress-row h2{font-size:15px}.counter{color:#64748b;font-size:12px;font-weight:600;white-space:nowrap}.sentence{max-width:650px;margin-top:8px;font-family:"Microsoft YaHei",Arial,sans-serif;font-size:27px;line-height:1.55;letter-spacing:.05em}.hanzi{display:inline-block;min-width:.9em;padding:0 2px;border-radius:4px;transition:color .16s,background .16s}.hanzi.is-current{color:#245f8f;background:#e5f2fc;box-shadow:inset 0 -2px #3a8fd0}.hanzi.is-done{color:#23905a}.canvas-card{max-width:520px;margin:13px auto 0;padding:10px 10px 6px;border:1px solid #e0e0e0;border-radius:12px;background:#fcfcfc;text-align:center}.current-label{min-height:20px;margin:0;color:#64748b;font-size:13px;font-weight:600}.character-target{width:min(78vw,390px);height:min(78vw,390px);max-height:390px;margin:0 auto;touch-action:none}.writer-message{min-height:23px;margin:0;color:#64748b;font-size:13px}.writer-message.success{color:#23905a}.writer-message.error{color:#a33d34}.controls{display:flex;justify-content:center;gap:8px;margin-top:12px}.controls button{min-width:116px}.secondary{background:#fff}.offline-note{margin:10px 0 0;text-align:center;color:#7b8491;font-size:11px}.license-footer{margin:20px 0 0;color:#7b8491;font-size:11px;line-height:1.45;text-align:center}.license-footer a{color:#4c7da8;text-decoration:none}.license-footer a:hover{text-decoration:underline}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:600px){.page-shell{padding:12px 12px 38px}.composer-footer,.offline-panel{align-items:stretch;flex-direction:column}.composer-footer button,.offline-panel button{width:100%}.sentence{font-size:24px}.controls button{min-width:0;flex:1;padding:8px 5px}.canvas-card{padding:8px 4px}.character-target{width:min(88vw,390px);height:min(88vw,390px)}}

.settings-button{width:31px;height:31px;padding:0;font-size:17px;line-height:1}.settings-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgb(15 23 42 / .36)}.settings-modal[hidden]{display:none}.settings-box{width:min(100%,440px);padding:16px;background:#fff;border:1px solid #d8dee6;border-radius:14px;box-shadow:0 18px 48px rgb(15 23 42 / .25)}.settings-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-title-row h2{margin:0;color:#4b5563;font-size:18px}.settings-close{padding:0;border:0;background:transparent;color:#64748b;font-size:27px;font-weight:400;line-height:1}.settings-close:hover{background:transparent;color:#222}.toggle-control{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:11px 0;border-top:1px solid #edf0f3;color:#4b5563;font-size:14px}.toggle-control input{position:absolute;opacity:0}.toggle-control i{position:relative;width:38px;height:22px;border-radius:20px;background:#cbd5e1;transition:background .15s}.toggle-control i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}.toggle-control input:checked+i{background:#5695c6}.toggle-control input:checked+i::after{transform:translateX(16px)}.settings-subtitle{margin-top:8px;padding-top:12px;border-top:1px solid #edf0f3;color:#64748b;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.settings-offline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}.settings-offline p{margin:0;color:#7b8491;font-size:12px;line-height:1.45}.settings-offline button{flex:0 0 auto}.settings-offline button[data-action="remove"]{border-color:#e5b9b4;color:#a33d34;background:#fff7f6}.settings-offline button[data-action="remove"]:hover{background:#fdebea}html.dark{background:#17212e;color:#e6edf5}html.dark body{background:#17212e;color:#e6edf5}html.dark .hero h1,html.dark .section-heading h2,html.dark .progress-row h2{color:#e6edf5}html.dark .hero>p:last-child,html.dark .section-heading p,html.dark .hint,html.dark .offline-note,html.dark .license-footer,html.dark .writer-message{color:#aebccc}html.dark .composer,html.dark .practice,html.dark .canvas-card,html.dark .settings-box{background:#202d3d;border-color:#3d4d60}html.dark textarea{background:#17212e;border-color:#4a5b70;color:#eef4fb}html.dark select,html.dark .secondary{background:#263548;color:#b8daf7;border-color:#557a9e}html.dark button{background:#263f57;color:#b8daf7;border-color:#557a9e}html.dark button:hover{background:#314e69}html.dark .sentence .is-current{background:#294b69;color:#bee3ff}html.dark .settings-title-row h2,html.dark .toggle-control{color:#e6edf5}html.dark .settings-close{color:#b7c3d3}html.dark .settings-subtitle,html.dark .settings-offline p{color:#aebccc}html.dark .toggle-control,html.dark .settings-subtitle{border-color:#3d4d60}html.dark .settings-modal{background:rgb(3 8 15 / .7)}@media(max-width:600px){.settings-offline{align-items:stretch;flex-direction:column}.settings-offline button{width:100%}}
button:not(.settings-close){height:32px}.header-actions select{height:32px}.header-actions .settings-button{width:32px;height:32px}.settings-close{height:auto}.settings-offline #offline-status.is-ready{color:#23905a;font-size:13px;font-weight:600}html.dark .settings-offline #offline-status.is-ready{color:#63c88d}