:root{font-family:DM Sans,Noto Sans SC,-apple-system,BlinkMacSystemFont,sans-serif;color:#26342f;background:#f6f4ef;font-synthesis:none;text-rendering:optimizeLegibility;font-smooth:always;font-weight:400}*{box-sizing:border-box}body{margin:0;min-width:800px;min-height:100vh}button{font:inherit}.app-shell{min-height:100vh;padding:22px 34px 18px;max-width:1600px;margin:auto}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e5dd;padding:0 3px 17px}.brand{display:flex;align-items:center;gap:11px;width:28%}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#d9e9de;color:#406c54;font-size:22px;font-weight:700}.brand strong,.brand small{display:block}.brand strong{font-size:15px;letter-spacing:.04em}.brand small{font-size:10px;color:#9a9e97;margin-top:2px}.lesson-title{text-align:center;display:flex;align-items:baseline;gap:11px}.lesson-title strong{font-size:17px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#999c94}.lesson-progress{font-size:11px;color:#879289}.date-chip{width:28%;text-align:right;color:#8a9089;font-size:11px}.work-area{display:grid;grid-template-columns:minmax(650px,1fr) 260px;gap:34px;padding-top:22px;align-items:center;min-height:calc(100vh - 120px)}.practice-side{min-width:0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:0 3px 25px}.section-heading h1{font-size:21px;letter-spacing:.04em;margin:7px 0 0;font-weight:600}.page-indicator{font-size:22px;font-weight:600;color:#538166}.page-indicator span{font-size:11px;color:#8b928a;font-weight:400}.row-label{display:flex;align-items:center;gap:10px;color:#a0a199;font-size:10px;letter-spacing:.06em;margin:0 0 9px}.row-label i{width:25px;height:1px;background:#d5d4cd}.grid-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;width:100%}.cell{width:100%;aspect-ratio:1;border:1px solid #e2e0d8;border-radius:5px;overflow:hidden;touch-action:none;background:#fffefa}.cell.active{border:2px solid #83a990;box-shadow:0 0 0 3px #dfece3}.cell-bg{fill:#fffefa}.grid-line{fill:none;stroke:#e8e6df;stroke-width:.7;stroke-dasharray:2 2}.guide{font-family:Noto Sans SC,sans-serif;font-size:60px;fill:#d0d1cc;-webkit-user-select:none;user-select:none}.ink{fill:none;stroke:#374941;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.draft{stroke:#73967c}.cell-hint{fill:#a2aaa1;font-size:5px}.controls{display:flex;justify-content:space-between;align-items:center;margin:22px 2px 0}.input-status{color:#55715d;font-size:11px}.input-status small{color:#a4a69f;font-size:10px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#71a27e;margin-right:7px}.action-buttons{display:flex;gap:8px}.action-buttons button{height:36px;padding:0 14px;border:1px solid #dfdfd7;border-radius:8px;background:#fffefa;color:#68736b;font-size:11px;cursor:pointer}.action-buttons button:disabled{opacity:.45}.action-buttons .primary{background:#547b60;color:#fff;border-color:#547b60;padding:0 17px}.primary span{margin-left:9px}.footnote{text-align:right;margin:13px 3px;color:#a6a69e;font-size:9px}.right-rail{align-self:center;display:flex;flex-direction:column;gap:12px}.animation-card,.tip-card,.progress-card{background:#fffefa;border:1px solid #eae8e0;border-radius:14px}.animation-card{text-align:center;padding:14px 12px 11px}.animation-label{font-size:10px;color:#858e85;letter-spacing:.06em}.animated-character{position:relative;width:130px;height:130px;margin:8px auto 4px;display:grid;place-items:center;background:linear-gradient(90deg,transparent calc(50% - .5px),#eceae3 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#eceae3 50%,transparent calc(50% + .5px))}.animated-character span{font-family:Noto Sans SC,sans-serif;position:absolute;font-size:92px;color:#d5d6d0;line-height:1}.animated-character svg{position:absolute;width:94px;height:94px}.demo-stroke{fill:none;stroke:#62866b;stroke-width:5;stroke-linecap:round;stroke-dasharray:180;stroke-dashoffset:180;animation:draw 1.2s ease forwards}.s1{animation-delay:1.2s}.s2{animation-delay:2.4s}.s3{animation-delay:3.6s}.animated-character svg{animation:loop 5s infinite}.animation-card small{font-size:9px;color:#b1afa7}@keyframes draw{to{stroke-dashoffset:0}}@keyframes loop{0%,96%,to{opacity:1}98%{opacity:.3}}.tip-card{display:flex;gap:10px;padding:13px 14px}.tip-icon{color:#bfaa6c;font-size:17px}.tip-card strong{font-size:11px}.tip-card p{font-size:10px;line-height:1.7;color:#90958d;margin:5px 0 0}.progress-card{padding:13px 14px}.progress-head{display:flex;justify-content:space-between;font-size:10px;color:#737e74}.progress-head strong{font-size:10px;color:#587c61}.progress-track{height:5px;border-radius:5px;background:#eeede7;margin:11px 0 8px;overflow:hidden}.progress-track i{display:block;height:100%;background:#85a98c;border-radius:5px}.progress-card small{font-size:9px;color:#a3a49c}@media (max-width:1000px){.app-shell{padding:14px 18px}.work-area{grid-template-columns:minmax(600px,1fr) 215px;gap:18px}.grid-row{gap:4px}.animated-character{width:110px;height:110px}}@media (orientation:portrait){.app-shell:before{content:"请将 iPad 横向放置以开始练习";position:fixed;top:0;right:0;bottom:0;left:0;background:#f6f4ef;z-index:10;display:grid;place-items:center;font-size:18px;color:#52745a}.app-shell:before{display:none}}@media (max-height:650px){.app-shell{padding-top:10px}.work-area{padding-top:12px;min-height:calc(100vh - 85px)}.section-heading{margin-bottom:14px}.right-rail{gap:8px}.animation-card{padding:8px}.animated-character{width:95px;height:95px}.animated-character span{font-size:70px}.animated-character svg{width:75px;height:75px}}.cell-container{min-width:0}.cell-container .cell{display:block}.work-area{align-items:start;min-height:0;padding-top:28px}.practice-animation{display:flex;flex-direction:column;align-items:center;margin-bottom:28px}.practice-animation .animation-card{width:224px;padding:14px 12px 10px}.stroke-preview{width:148px;height:148px;margin:8px auto;background:linear-gradient(90deg,transparent calc(50% - .5px),#eceae3 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#eceae3 50%,transparent calc(50% + .5px))}.stroke-preview svg{display:block}.stroke-attribution{display:block;margin-top:5px;color:#9a9e94;font-size:9px;text-decoration:none}.stroke-attribution:hover{text-decoration:underline}.right-rail{align-self:end;margin-bottom:35px}.writing-status{margin-top:12px;min-height:28px;font-size:20px;font-weight:500;line-height:28px;color:#547b60;text-align:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:none}.grid-row,.grid-row *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.guide-shape{fill:#d0d1cc;pointer-events:none}.writing-status.is-error{color:#b35742}.action-buttons .primary:disabled{cursor:not-allowed;opacity:.45}.practice-side .controls{margin:0 2px;gap:12px}.practice-side .footnote{margin:8px 3px 16px}.input-status,.footnote{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.work-area{display:block;max-width:1240px;padding-top:64px;min-height:0}.practice-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);gap:36px;align-items:start;margin-bottom:28px}.info-panel{min-width:0;user-select:none;-webkit-user-select:none}.lesson-overview{display:flex;flex-direction:column;gap:14px}.lesson-overview .brand{width:auto}.lesson-overview .lesson-title{justify-content:flex-start;flex-wrap:wrap;text-align:left;gap:8px}.lesson-overview .date-chip{width:auto;text-align:left}.info-panel .section-heading{flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 16px}.info-panel .section-heading h1{font-size:20px}.info-panel .page-indicator{white-space:nowrap}.info-panel .controls{flex-direction:column;align-items:flex-start;gap:14px;margin:0}.info-panel .input-status small{display:block;margin-top:5px}.info-panel .footnote{text-align:left;line-height:1.8;margin:12px 0 0}.practice-dashboard .practice-animation{margin:0;min-width:0}.practice-dashboard .writing-status{max-width:100%;overflow-wrap:anywhere}.practice-dashboard .right-rail{align-self:start;margin:0;gap:14px}.practice-dashboard .tip-card,.practice-dashboard .progress-card{padding:18px}.practice-dashboard .tip-card p{font-size:12px;line-height:1.8}.practice-dashboard .tip-card strong{font-size:13px}.practice-dashboard .progress-head,.practice-dashboard .progress-head strong{font-size:12px}.practice-dashboard .progress-card small{font-size:11px;line-height:1.8}@media (max-width:1100px){.practice-dashboard{grid-template-columns:minmax(0,1fr) 224px minmax(0,1fr);gap:24px}.info-panel .section-heading h1{font-size:18px}.info-panel .action-buttons{flex-wrap:wrap;gap:6px}.info-panel .action-buttons button{padding:0 11px}.practice-dashboard .tip-card,.practice-dashboard .progress-card{padding:14px}}@media (max-height:700px){.work-area{padding-top:20px}.practice-dashboard{margin-bottom:20px}}html,body,#root,#root *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.character-details{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:10px;color:#547b60;font-size:18px;pointer-events:none}.character-details strong{font-size:22px}.character-search{padding:16px 18px;border:1px solid #eae8e0;border-radius:14px;background:#fffefa}.character-search label{display:block;font-size:14px;margin-bottom:10px}.search-controls{display:flex;gap:8px}.search-controls input{width:100%;min-width:0;font:inherit;font-size:16px;padding:10px;border:1px solid #dfdfd7;border-radius:8px}#root .character-search input{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}.search-controls button,.return-lesson{font:inherit;font-size:13px;border:0;border-radius:8px;padding:8px 14px;white-space:nowrap;background:#547b60;color:#fff}.search-controls button:disabled{opacity:.5}.search-message{font-size:11px;line-height:1.6;color:#879289;margin-top:8px}.return-lesson{margin-top:8px;background:#e8eee7;color:#547b60}.back-calendar{border:0;background:transparent;color:#547b60;padding:0;margin:0 0 16px;font:inherit;font-size:13px;cursor:pointer}.search-actions{display:flex;gap:8px;flex-wrap:wrap}.generate-copybook{font:inherit;font-size:13px;border:0;border-radius:8px;padding:8px 14px;background:#547b60;color:#fff;margin-top:8px}.save-status{font-size:12px;line-height:1.7;color:#a36b36;margin-top:8px}.save-status:empty{display:none}.save-status button{margin-left:8px}.writing-history{border-top:1px solid #e2e0d8;margin-top:56px;padding-top:24px;padding-bottom:32px}.history-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.history-heading h2,.day-summary h2{font-size:20px;margin:0}.history-heading span{font-size:13px;color:#8a9089}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:16px;margin-top:18px}.history-item{margin:0;max-width:145px}.history-item svg{display:block;width:100%;border:1px solid #e2e0d8;border-radius:6px}.history-item figcaption{font-size:11px;color:#8a9089;line-height:1.6;margin-top:6px;text-align:center}.empty-state{color:#8a9089;font-size:13px;line-height:1.8}.calendar-home{max-width:1100px;margin:auto;padding:42px 32px}.home-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.home-header h1{font-size:28px;margin:8px 0}.home-header p{color:#8a9089;font-size:14px}.continue-button{border:0;border-radius:12px;padding:16px 28px;font-size:17px;background:#547b60;color:#fff;cursor:pointer}.calendar-card,.day-summary{padding:24px;background:#fffefa;border:1px solid #eae8e0;border-radius:16px}.month-heading{display:flex;align-items:center;justify-content:space-between}.month-heading h2{font-size:22px}.month-heading button{background:#f1f2eb;border:0;border-radius:8px;padding:10px 18px;font-size:18px;color:#547b60}.calendar-legend{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#8a9089;margin-bottom:24px}.legend-green,.legend-yellow{display:inline-block;width:10px;height:10px;border-radius:50%;background:#9dc1a2;margin-left:12px}.legend-yellow{background:#ecd48a}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.weekday{text-align:center;font-size:13px;color:#8a9089;padding:8px}.calendar-day{min-height:68px;background:#f7f6f1;border:2px solid transparent;border-radius:10px;color:#46564b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}.calendar-day strong{font-size:19px;font-weight:500}.calendar-day small{font-size:11px;min-height:13px}.calendar-day.practiced{background:#f5e8ba}.calendar-day.completed{background:#cee3ce}.calendar-day.selected{border-color:#547b60}.day-summary{margin-top:20px}.day-summary p{color:#8a9089;font-size:14px}.day-characters{display:flex;gap:12px;flex-wrap:wrap}.day-characters button{display:flex;align-items:center;gap:14px;border:1px solid #dfdfd7;border-radius:10px;padding:12px 18px;background:#f6f7ef;color:#547b60;font-size:30px}.day-characters small{font-size:12px}.history-heading button,.writing-history>button,.writing-history p button{border:1px solid #dfdfd7;border-radius:8px;padding:8px 12px;background:#fffefa;color:#547b60;font-size:12px}.course-link{margin-left:20px}.history-day-tabs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.history-day-tabs button{border:1px solid #dfdfd7;border-radius:8px;padding:8px 16px;background:#fffefa;color:#547b60;font-size:22px}.history-day-tabs button.active{background:#d9e9de;border-color:#83a990}.back-calendar{font-size:17px;font-weight:600;padding:10px 16px;background:#e3eee3;border:1px solid #b8cebb;border-radius:9px;margin-bottom:18px}.course-link{margin-left:10px}.course-picker{width:100%}.course-selects{display:flex;gap:10px}.course-selects label{min-width:0;flex:1;font-size:13px;color:#738477}.course-selects label:last-child{flex:1.5}.course-selects select{display:block;width:100%;font:inherit;font-size:15px;padding:10px 6px;border:1px solid #d6ded2;border-radius:8px;background:#fffefa;color:#314c3b;margin-top:6px;min-height:42px}.confirm-course{font:inherit;font-size:14px;padding:9px 16px;border:0;border-radius:8px;background:#547b60;color:#fff;margin-top:10px}.course-picker p{font-size:11px;color:#8a9089;line-height:1.6;margin:8px 0 0}.course-picker button:disabled{opacity:.5}.course-completed{color:#547b60;line-height:1.7;font-size:15px;margin-top:12px}.course-completed:empty{display:none}.plan-error{padding:16px;text-align:center;background:#f5e8ba;color:#785524}