.writing-page{width:min(1120px,100% - 32px)}.writing-heading{margin-bottom:14px}.writing-practice{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);align-items:start;gap:12px;display:grid}.writing-workspace,.writing-side-panel>section,.writing-related-links{border:1px solid var(--line);background:var(--panel);border-radius:12px}.writing-workspace{padding:14px}.writing-progress-row{justify-content:space-between;align-items:end;gap:14px;display:flex}.writing-progress-row strong{font-size:.92rem;display:block}.writing-progress-row>span{color:var(--brand-dark);font-size:.78rem;font-weight:800}.writing-progress-track{background:#e7ece9;border-radius:999px;height:6px;margin:8px 0 12px;overflow:hidden}.writing-progress-track span{border-radius:inherit;background:var(--brand);height:100%;display:block}.writing-mode-tabs{border:1px solid var(--line);background:#f6f9f7;border-radius:10px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:min(520px,100%);margin:0 auto 8px;padding:4px;display:grid}.writing-mode-tabs button{min-height:34px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:7px;font-size:.74rem;font-weight:760}.writing-mode-tabs button.is-active{color:var(--brand-dark);background:#fff;box-shadow:0 1px 4px #14322a14}.writing-stroke-stage{aspect-ratio:1;background:linear-gradient(90deg,#0000 calc(50% - .5px),#dce5e1 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),linear-gradient(#0000 calc(50% - .5px),#dce5e1 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),linear-gradient(45deg,#0000 calc(50% - .5px),#edf1ef calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),linear-gradient(-45deg,#0000 calc(50% - .5px),#edf1ef calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),#fff;border:1px solid #cdd8d3;border-radius:10px;width:min(520px,100%);margin:0 auto;position:relative;overflow:hidden}.writing-hanzi-target{touch-action:none;width:100%;height:100%}.writing-hanzi-target svg,.writing-hanzi-target canvas{display:block;width:100%!important;height:100%!important}.writing-stage-status{color:var(--muted);background:#fffffff0;border-radius:7px;padding:5px 8px;font-size:.68rem;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #14322a14}.writing-stage-status.is-error{color:#8a382f}.writing-feedback-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(520px,100%);margin:8px auto 0;display:grid}.writing-feedback-row span{border:1px solid var(--line);color:var(--muted);border-radius:8px;justify-content:center;align-items:baseline;gap:4px;padding:7px 8px;font-size:.67rem;display:flex}.writing-feedback-row strong{color:var(--ink);font-size:.78rem}.writing-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:min(520px,100%);margin:8px auto 0;display:grid}.writing-controls .button{border:1px solid var(--line);cursor:pointer;width:100%}.writing-tool-note,.writing-complete-message{width:min(520px,100%);color:var(--muted);margin:8px auto 0;font-size:.7rem;line-height:1.45}.writing-complete-message{color:var(--brand-dark);background:var(--brand-soft);border:1px solid #9fcfc4;border-radius:8px;padding:7px 9px;font-weight:720}.writing-side-panel{gap:8px;display:grid}.writing-side-panel>section,.writing-related-links{padding:11px 12px}.writing-current-card>strong{color:var(--ink);margin:4px 0 2px;font-family:Noto Sans SC,Microsoft YaHei,sans-serif;font-size:3.2rem;line-height:1;display:block}.writing-current-card>small{color:var(--muted);font-size:.7rem}.writing-practiced-state{color:var(--brand-dark);background:var(--brand-soft);border-radius:999px;margin-top:7px;padding:3px 6px;font-size:.64rem;font-weight:760;display:inline-block}.writing-side-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.writing-side-heading h2{margin:0;font-size:.82rem}.writing-side-heading a,.writing-side-heading button{color:var(--brand-dark);cursor:pointer;background:0 0;border:0;padding:0;font-size:.66rem;font-weight:720;text-decoration:none}.writing-related ul{gap:4px;margin:8px 0 0;padding:0;list-style:none;display:grid}.writing-related li a{background:#f8faf9;border-radius:8px;grid-template-columns:minmax(50px,auto) 1fr;gap:9px;padding:6px 7px;text-decoration:none;display:grid}.writing-related li a:hover{background:var(--brand-soft)}.writing-related strong{font-size:.8rem}.writing-related span,.writing-related>p{color:var(--muted);font-size:.7rem}.writing-character-picker>div:last-child{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:8px;display:grid}.writing-character-picker>div:last-child button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:7px;min-height:34px;font-family:Noto Sans SC,Microsoft YaHei,sans-serif;font-size:.8rem;position:relative}.writing-character-picker>div:last-child button:hover,.writing-character-picker>div:last-child button.is-current{background:var(--brand-soft);border-color:#9fcfc4}.writing-character-picker>div:last-child button.is-complete:after{content:"";background:var(--brand);border-radius:50%;width:5px;height:5px;position:absolute;top:3px;right:3px}.writing-related-links{flex-wrap:wrap;gap:6px;display:flex}.writing-related-links a{border:1px solid var(--line);color:var(--brand-dark);border-radius:8px;padding:5px 8px;font-size:.68rem;font-weight:720;text-decoration:none}@media (max-width:840px){.writing-practice{grid-template-columns:1fr}.writing-side-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.writing-character-picker,.writing-related-links{grid-column:1/-1}}@media (max-width:620px){.writing-page{width:min(100% - 20px,1120px)}.writing-workspace{padding:10px}.writing-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.writing-feedback-row,.writing-side-panel{grid-template-columns:1fr}.writing-character-picker,.writing-related-links{grid-column:auto}.writing-character-picker>div:last-child{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.writing-mode-tabs button,.writing-controls .button{transition:none}}