*{box-sizing:border-box}body{margin:0;background:#f6f8f2;color:#2f4a28;font-family:"Noto Sans SC",system-ui,sans-serif}.workbook{max-width:1120px;margin:28px auto;padding:0 24px 40px}.back-link{color:#426837}.workbook-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0}.workbook-heading h1{font-size:34px;margin:0 0 8px}.workbook-heading p{margin:0}.workbook-heading a{color:#426837;white-space:nowrap}.workbook-tools{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#f6f8f2f5;padding:12px 0;border-bottom:1px solid #dce4d5}.workbook-tools button,.workbook-tools select{font:inherit;font-size:18px;border:1px solid #c9d6c3;border-radius:22px;padding:10px 16px;background:white;color:#2f4a28;min-height:46px}.workbook-tools label{display:flex;align-items:center;gap:8px}.workbook-tools button{cursor:pointer}.workbook-tools button[aria-pressed=true]{background:#538047;color:white}.workbook-tools button:disabled{opacity:.45;cursor:default}.workbook-tools :focus-visible,.back-link:focus-visible{outline:3px solid #e8737a;outline-offset:3px}#workbook-status{font-size:15px;min-height:1.5em;color:#58704f}.paper{position:relative;max-width:900px;margin:auto;background:white;box-shadow:0 4px 24px #2f4a2814}.paper img{display:block;width:100%;height:auto}.paper canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.paper.is-drawing canvas{pointer-events:auto;touch-action:none;cursor:crosshair}@media(max-width:600px){.workbook{padding:0 12px 24px;margin-top:18px}.workbook-heading{align-items:flex-start;flex-direction:column;gap:12px}.workbook-heading h1{font-size:28px}.workbook-tools{gap:6px}.workbook-tools button,.workbook-tools select{font-size:16px;padding:8px 11px}.workbook-tools label{flex-basis:100%}}@media print{@page{size:A4;margin:0}body{background:white}body>header,body>footer,.back-link,.workbook-heading,.workbook-tools,#workbook-status,noscript{display:none!important}.workbook{margin:0;padding:0;max-width:none}.paper{width:210mm;max-width:none;height:297mm;margin:0;box-shadow:none}.paper img{width:100%;height:100%;object-fit:contain}.paper canvas{display:none!important}}
.stroke-learning{margin:22px 0;padding:24px;background:white;border:1px solid #dce4d5;border-radius:20px}.stroke-learning[hidden]{display:none}.stroke-demo-row{display:flex;align-items:center;gap:28px}.stroke-learning h2{font-size:24px;margin:12px 0}.stroke-grid{flex:none;width:max-content;background-color:#fffdf8;background-image:linear-gradient(to right,transparent calc(50% - .5px),#e2d9ce 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),#e2d9ce 50%,transparent calc(50% + .5px));border:1px solid #d5deca;border-radius:8px;line-height:0;touch-action:none}.stroke-learning button,.example-actions button,#example-close{border:1px solid #c9d6c3;border-radius:24px;background:#f6f8f2;color:#2f4a28;padding:12px 20px;font:inherit;cursor:pointer;min-height:46px}.related-characters{display:flex;flex-wrap:wrap;gap:12px}.related-characters button{font-family:KaiTi,"Kaiti SC",serif;font-size:42px;min-width:76px;border-radius:14px;background:#fdeceb}.stroke-learning button:focus-visible,dialog button:focus-visible{outline:3px solid #e8737a;outline-offset:3px}#example-dialog{max-width:min(560px,calc(100vw - 24px));width:500px;border:1px solid #c9d6c3;border-radius:22px;padding:24px;color:#2f4a28}#example-dialog::backdrop{background:#17231388}.example-heading{display:flex;justify-content:space-between;align-items:center}.example-heading h2{font-size:42px;margin:0}#example-writer{margin:20px auto}.example-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.example-actions button:disabled{opacity:.5}@media(max-width:600px){.stroke-learning{padding:16px}.stroke-demo-row{flex-direction:column;align-items:flex-start;gap:12px}.related-characters{gap:8px}.related-characters button{min-width:62px;padding:8px 12px}.stroke-learning h2{font-size:22px}#example-dialog{padding:16px}}@media print{.stroke-learning,#example-dialog{display:none!important}}