body[data-activity=writing]{--activity-accent:#b86517;--activity-light:#fff0d3;--activity-edge:#f0bb70;background-color:#fff3de}.character-groups{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.character-groups button{padding:12px 21px;border:2px solid #efc98d;background:#fffdf4;border-radius:25px;font-size:16px}.character-groups button[aria-pressed=true]{background:#bd671b;color:white;border-color:#bd671b;box-shadow:0 3px 0 #985015}.character-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:25px}.character-picker button{background:white;border:3px solid #f1d5a3;border-radius:18px;padding:8px 16px;font-size:40px;font-family:system-ui,sans-serif;position:relative;box-shadow:0 4px 0 #ead19e}.character-picker button[aria-pressed=true]{background:#fff0a6;border-color:#e7ae40}.character-picker button .done{position:absolute;right:7px;top:4px;font-size:15px;color:#137d5e}.writing-layout{display:grid;grid-template-columns:280px 1fr;gap:24px}.word-card{background:#dff2e6;border:3px solid white;border-radius:25px;box-shadow:0 6px 0 #9ed2b4;padding:24px;text-align:center;display:flex;align-items:center;flex-direction:column;align-self:start}.word-illustration{font-size:59px;min-height:80px;line-height:1.3}.word-big{font-family:system-ui,sans-serif;font-size:94px;line-height:1.3;color:#235745}.word-pinyin{font-size:19px;color:#41665a;letter-spacing:1px}.word-card h2{font-size:25px;margin:13px 0 4px}.word-card p{font-size:15px;line-height:1.9}.word-count{color:#597361;font-size:13px!important;margin:19px 0 0}.word-tip{margin-top:14px;border-top:1px dashed #a7c9ae;padding-top:15px;font-size:14px;color:#466653;line-height:1.9}.writing-work{background:#fffef9;border:3px solid #edc77e;border-radius:25px;padding:24px;box-shadow:0 6px 0 #e9bd61;min-width:0}.writing-modes{display:flex;gap:8px;margin-bottom:20px}.writing-modes button{flex:1;background:#f5eedf;border:2px solid #ecdbbb;border-radius:14px;padding:12px 8px;font-weight:700;font-size:16px}.writing-modes button[aria-pressed=true]{background:#087f77;border-color:#087f77;color:white;box-shadow:0 3px 0 #075e59}.writing-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.writing-topline h2{font-size:20px;margin:0 0 14px}#strokeProgress{font-size:13px;white-space:nowrap;color:#577181}.board-wrap{position:relative;width:min(100%,400px);aspect-ratio:1;background:#fffdfa;border:3px solid #eab56c;border-radius:15px;overflow:hidden;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none}.writing-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.writing-grid path{stroke:#e6c39e;stroke-width:1.5;fill:none;stroke-dasharray:6 6}.writing-grid .diagonals{stroke:#efe2cf;stroke-width:1}#hanziBoard{position:absolute;inset:0;touch-action:none}#hanziBoard svg{display:block}.start-overlay{position:absolute;inset:0;pointer-events:none;overflow:visible}#freeBoard{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.writing-controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:18px}.writing-controls button{font-size:14px;min-height:47px;padding:11px 17px}.writing-finish{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}.stroke-sequence{margin-top:29px}.stroke-cards{display:flex;gap:13px;flex-wrap:wrap}.stroke-card{border:2px solid #ecc895;border-radius:15px;background:#fffdf6;padding:9px;min-width:100px;flex:0 0 auto}.stroke-card svg{display:block;width:92px;height:92px}.stroke-card span{display:block;text-align:center;font-size:13px;color:#735637;margin-top:5px}#writingStars{font-size:13px;color:#775821;font-weight:600}.writing-card{--card-edge:#e9ad65;--card-base:#fff3e1;--card-ink:#996024;--art-base:#ffd38f}.writing-card .card-art{font-family:system-ui,sans-serif;font-size:69px;font-weight:700;letter-spacing:12px}.together-card{grid-column:1/-1;flex-direction:row;align-items:center;gap:22px;padding:20px 28px}.together-card p{flex:1;margin:0}.together-card h2{white-space:nowrap}dialog a{color:#08776f}@media(max-width:800px){.writing-layout{grid-template-columns:210px 1fr;gap:16px}.word-card{padding:18px}.writing-work{padding:20px 16px}.writing-modes button{font-size:14px}.together-card{flex-wrap:wrap}.together-card h2{white-space:normal}}@media(max-width:620px){.writing-layout{grid-template-columns:1fr;gap:16px}.word-card{display:grid;grid-template-columns:75px 1fr auto;gap:4px 12px;text-align:left;padding:15px 18px}.word-illustration{font-size:35px;min-height:0;grid-column:3;grid-row:1/3;align-self:center}.word-big{font-size:61px;grid-column:1;grid-row:1/3;text-align:center}.word-pinyin{font-size:14px;grid-column:2;grid-row:1}.word-card h2{font-size:20px;grid-column:2;grid-row:2;margin:0}.word-card p#wordSentence{grid-column:1/4;margin:5px 0}.word-card .quiet{grid-column:1/3;justify-self:start}.word-count{grid-column:3;margin:0!important}.word-tip{grid-column:1/4;padding-top:9px;margin-top:6px;font-size:12px}.character-groups{gap:7px}.character-groups button{padding:10px 13px;font-size:13px}.character-picker{gap:8px;margin-bottom:20px}.character-picker button{font-size:31px;padding:9px 2px;border-width:2px;border-radius:13px}.writing-modes{gap:6px}.writing-modes button{padding:12px 3px;font-size:13px}.writing-topline h2{font-size:16px}.writing-work{border-width:2px;padding:17px 12px}.writing-controls{gap:7px}.writing-controls button{font-size:12px;padding:10px 12px}.writing-finish button{font-size:14px}.stroke-cards{gap:8px}.stroke-card{min-width:76px;padding:6px}.stroke-card svg{width:72px;height:72px}.together-card{display:flex;gap:12px;padding:19px}.together-card p{flex-basis:100%}.writing-card .card-art{font-size:42px;letter-spacing:8px}#writingStars{font-size:11px}}

/* Larger stroke examples keep the numbers and arrowheads readable. */
.stroke-card svg{width:116px;height:116px}.stroke-guide{pointer-events:none}.stroke-cards{gap:12px}@media(max-width:620px){.stroke-card svg{width:102px;height:102px}.stroke-card{padding:6px}.stroke-cards{gap:8px}}

.basics-writing-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;background:#fff0ac;border:2px solid white;border-radius:18px;padding:16px 20px;margin-bottom:22px;font-size:16px}.basics-writing-bar a{color:#086a5e}.writing-aids{margin:0 0 16px}.writing-aids label{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.6}.writing-aids input{width:22px;height:22px;accent-color:#087f77;flex-shrink:0}.writing-layout.reference-hidden{grid-template-columns:1fr}.writing-layout [hidden],.writing-aids [hidden],.basics-writing-bar[hidden],#strokeSequence[hidden]{display:none!important}.writing-finish{flex-wrap:wrap}.writing-topline{flex-wrap:wrap}.writing-modes{flex-wrap:wrap}.writing-modes button{min-width:85px}.writing-modes button,.writing-controls button,.word-tip{font-size:14px}.word-count,#strokeProgress,#writingStars{font-size:14px!important}
#wordIcon .lesson-meaning-art{display:block;width:150px;height:112px;object-fit:contain;margin:auto;border-radius:16px}