.write-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}.write-btns{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.write-canvas-wrap{position:relative;width:300px;height:300px}.write-canvas-wrap svg.write-ghost{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;pointer-events:none}.write-canvas-wrap canvas{position:absolute;inset:0;z-index:4;width:100%;height:100%;cursor:crosshair;touch-action:none}
.write-canvas-bg{position:relative;width:300px;height:300px;overflow:hidden;border:1px solid var(--ink);border-radius:var(--r-s);background:var(--bg2);box-shadow:var(--shadow-m)}
.write-info,.write-stroke-count{color:var(--ink3);font-size:12px;font-weight:500;text-align:center}.write-success{color:var(--good);font-size:15px;font-weight:750;animation:popIn .3s var(--ease)}.write-hint{color:var(--ink3);font-size:11px;font-style:italic}
.stroke-credit{position:absolute;right:7px;bottom:5px;z-index:8;padding:2px 4px;border-radius:2px;background:color-mix(in srgb,var(--bg2) 84%,transparent);color:var(--ink3);font-size:8px;font-weight:600;line-height:1;text-decoration:none;opacity:.68}.stroke-credit:hover{color:var(--ink);opacity:1}

/* ===== FREE WRITE ===== */
.freewrite-instruction{max-width:42ch;color:var(--ink2);font-size:13px;text-align:center}
.freewrite-meter{width:min(320px,100%)}.freewrite-meter-label{margin-bottom:8px;color:var(--ink3);font-size:11px;font-weight:650;text-align:center}.freewrite-meter-bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}.freewrite-meter-bar{height:8px;border-radius:99px;background:var(--border2);transition:background .2s,transform .2s}.freewrite-meter-bar.is-drawn{background:var(--ink3)}.freewrite-meter-bar.is-correct{background:var(--good);transform:scaleY(1.15)}.freewrite-meter-bar.is-wrong{background:var(--bad);transform:scaleY(1.15)}
.freewrite-board{position:relative;width:min(320px,100%);aspect-ratio:1;overflow:hidden;border:1px solid var(--ink);border-radius:var(--r-s);background-color:var(--bg2);background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:50% 50%;background-position:center;box-shadow:var(--shadow-m);transition:border-color .2s,box-shadow .2s}.freewrite-board.is-correct{border-color:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}.freewrite-board.is-wrong{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent)}
.freewrite-board canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;transition:opacity .25s}.freewrite-board.is-answer canvas{opacity:.16}.freewrite-answer-layer{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}.freewrite-answer-layer path{fill:none;stroke:#2e9fe6;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.freewrite-controls,.freewrite-assess{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap}
.vocab-freewrite-crumb{display:flex;justify-content:center;gap:5px}.vocab-freewrite-crumb span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:var(--r-s);background:var(--bg3);color:var(--ink3);font-family:var(--font-jp);font-size:15px;font-weight:700}.vocab-freewrite-crumb span.is-current{border-color:var(--accent);background:var(--accent);color:#fff}.vocab-freewrite-crumb span.is-done{border-color:var(--good);background:var(--good-bg);color:var(--good)}.vocab-freewrite-crumb span.is-wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.freewrite-verdict{width:min(320px,100%);padding:10px 14px;border:1px solid currentColor;border-radius:var(--r-s);font-size:13px;font-weight:750;text-align:center}.freewrite-verdict[hidden]{display:none}.freewrite-verdict.is-correct{background:color-mix(in srgb,var(--good) 10%,var(--surface));color:var(--good)}.freewrite-verdict.is-wrong{background:color-mix(in srgb,var(--bad) 10%,var(--surface));color:var(--bad)}
.freewrite-result{width:min(320px,100%);padding:var(--s4);border-top:1px solid var(--border);text-align:center}
.freewrite-result[hidden]{display:none}.freewrite-result>span{display:block;color:var(--ink3);font-size:11px}.freewrite-result>strong{display:block;margin:8px 0 14px;font-family:var(--font-jp);font-size:72px;font-weight:500;line-height:1}