.tracing-example{flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0;display:flex}.tracing-example-stage{aspect-ratio:420/250;flex:none;width:min(100%,15rem)}.tracing-example figcaption{color:var(--ink);flex:13rem;margin:0;font-size:.9375rem;line-height:1.5}.tracing-example-svg,.tracing-result-svg,.tracing-svg{width:100%;height:auto;display:block}.tracing-example-box,.tracing-result-box{fill:var(--card);stroke:var(--line);stroke-width:2px}.tracing-fingertip{fill:var(--ink-math);fill-opacity:.2;stroke:var(--ink-math);stroke-width:2px}.tracing-no-touch{color:var(--ink)}.tracing-setup-note{margin-top:6px}.tracing-band{fill:none;stroke:color-mix(in oklab, var(--accent) 14%, var(--card));stroke-linecap:round;stroke-linejoin:round}.tracing-line{fill:none;stroke:var(--control-border);stroke-width:1.6px}.tracing-start{fill:var(--ink)}.tracing-end{fill:var(--card);stroke:var(--ink);stroke-width:3px}.tracing-arrow{fill:none;stroke:var(--ink);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.tracing-ink,.tracing-ink-close{fill:none;stroke:var(--accent);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.tracing-ink-away{fill:none;stroke:var(--wrong-line);stroke-width:5.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 10}.tracing-done-mark circle{fill:var(--right-bg);stroke:var(--right-line);stroke-width:2px}.tracing-done-mark path{fill:none;stroke:var(--right-line);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.tracing-pen{display:none}.tracing-stage:focus-visible .tracing-pen,.tracing-stage[data-keys] .tracing-pen{display:inline}.tracing-pen circle:first-child{fill:none;stroke:var(--ink-blue);stroke-width:2.5px}.tracing-pen circle:last-child{fill:var(--ink-blue)}.tracing-round{gap:12px;display:grid}.tracing-round .board-top{min-height:44px}.tracing-round .board-top>p{color:var(--ink);margin:0;font-weight:600}.tracing-instruction{color:var(--ink);text-align:center;margin:0;font-size:1.0625rem;font-weight:650;line-height:1.4}.tracing-stage{border-radius:18px;outline:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,46rem,98svh + 12px);margin:0 auto;display:grid}.tracing-stage:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.tracing-box{gap:6px;min-width:0;display:grid}.tracing-box-label{color:var(--muted);text-align:center;margin:0;font-size:.875rem;font-weight:600;line-height:1.3}.tracing-svg{aspect-ratio:200/250;background:var(--card);border:2px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair;border-radius:16px}.tracing-stage[data-step=feedback] .tracing-svg{cursor:default}.tracing-box[data-in-hand] .tracing-svg{border:4px solid var(--accent)}.tracing-box[data-in-hand] .tracing-box-label{color:var(--ink);font-weight:750}.tracing-box[data-done] .tracing-svg{border-color:var(--right-line)}.tracing-stage[data-mode=single]{grid-template-columns:minmax(0,1fr);width:min(100%,26rem,49svh)}.tracing-stage[data-mode=single] .tracing-box[data-side="1"],.tracing-stage[data-mode=single] .tracing-box-label{display:none}.tracing-keys{text-align:center;margin:0}.tracing-feedback{width:min(100%,46rem);color:var(--ink);gap:6px;margin:0 auto;display:grid}.tracing-feedback p{margin:0;line-height:1.5}.tracing-feedback p:empty{display:none}.tracing-legend{color:var(--muted);flex-wrap:wrap;gap:4px 18px;font-size:.875rem;display:flex}.tracing-legend-item{align-items:center;gap:8px;display:inline-flex}.tracing-legend-item svg{flex:none;width:36px;height:12px}.tracing-legend-item .tracing-ink-close,.tracing-legend-item .tracing-ink-away{stroke-width:4.5px}.tracing-actions{flex-wrap:wrap;justify-content:flex-end;gap:12px;width:min(100%,46rem);margin:0 auto;display:flex}.tracing-actions .btn{min-height:52px}.tracing-drawings{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:14px;margin-top:8px;display:grid}.tracing-drawings:empty{display:none}.tracing-drawing{gap:6px;margin:0;display:grid}.tracing-drawing figcaption{color:var(--muted);font-size:.875rem;line-height:1.4}.tracing-error{margin-top:16px}@media (width<=650px){.tracing-example-stage{width:min(100%,13.9rem);max-height:132px}.tracing-round,.tracing-stage{gap:10px}.tracing-actions{justify-content:stretch}.tracing-actions .btn{flex:100%}}@media (forced-colors:active){.tracing-band{stroke:canvas}.tracing-line,.tracing-end,.tracing-arrow{stroke:canvastext}.tracing-start,.tracing-pen circle:last-child{fill:canvastext}.tracing-ink,.tracing-ink-close{stroke:highlight}.tracing-ink-away{stroke:graytext}.tracing-svg{border-color:canvastext}}