/* Trace: a fountain pen line on squared paper. */
:root{--bg:#f3eedd;--fg:#1c2550;--ink:#2a46c9;--wash:#cdd7fb;--sq:#fffdf6;--edge:#1c255066;--done:#1d8554;--done-wash:#cfead8;--btn:#1c2550;--btn-fg:#f3eedd;--go:#d5412f;--go-fg:#fff;--focus:#1c2550}
body{background-image:linear-gradient(#2a46c91c 1px,transparent 1px),linear-gradient(90deg,#2a46c91c 1px,transparent 1px);background-size:22px 22px}
.hint{font-weight:700}
#board{display:block;width:min(100cqw,calc(100cqh*var(--w)/var(--h)),calc(var(--w)*92px));aspect-ratio:var(--w)/var(--h);touch-action:none;cursor:crosshair}
.sq{fill:var(--sq);stroke:var(--edge);stroke-width:.025}
.sq.on{fill:var(--wash)}
.ink{fill:none;stroke:var(--ink);stroke-width:.3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.dot{fill:var(--ink);pointer-events:none}
.nib{fill:var(--sq);stroke:var(--ink);stroke-width:.1;pointer-events:none}
#board.done .sq.on{fill:var(--done-wash)}
#board.done .ink{stroke:var(--done)}
#board.done .dot{fill:var(--done)}
#board.done .nib{stroke:var(--done)}