.path-trace{
 display:grid;justify-items:center;gap:6px;width:min(100%,290px);min-width:0;
}
.path-trace-surface{
 display:block;width:min(100%,clamp(160px,38dvh,266px));height:auto;aspect-ratio:1;
 border:2px solid #acb89b;border-radius:16px;background:#fffdf6;
 box-shadow:inset 0 0 0 3px #f4f2e4;
 touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair;
}
.path-trace-surface[role="img"]{cursor:default;touch-action:auto}
.path-trace-surface *{pointer-events:none}
.path-trace-surface:focus-visible,.path-trace-tool:focus-visible{
 outline:3px solid #45738a;outline-offset:2px;
}
.trace-ruling line{stroke:#d8ddcb;stroke-width:.5;stroke-dasharray:2 2}
.trace-ruling .trace-baseline{stroke:#a5b699;stroke-width:.8;stroke-dasharray:none}
.trace-lane,.trace-centre,.trace-ink,.trace-attempt,.trace-demonstration,.trace-sample-line{
 fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.trace-lane{stroke:#d8e0cb;stroke-width:9}
.trace-centre{stroke:#879a78;stroke-width:.85;stroke-dasharray:1.6 2.4}
.trace-lane.trace-point{fill:#d8e0cb;stroke-width:3}
.trace-centre.trace-point{fill:#879a78;stroke:none}
.trace-ink{stroke:#285c54;stroke-width:3.3}
.trace-attempt{stroke:#986431;stroke-width:3.3}
.trace-ink.trace-point{fill:#285c54;stroke:none}
.trace-attempt.trace-point{fill:#986431;stroke:none}
.trace-cue circle,.trace-demo-tip{fill:#427758;stroke:#fffaf0;stroke-width:.9}
.trace-cue polyline{fill:none;stroke:#346446;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.path-trace[data-correction] .trace-current .trace-cue circle{fill:#8c592d}
.path-trace[data-correction] .trace-current .trace-cue polyline{stroke:#70441f}
.trace-cursor{fill:#fff9e7;stroke:#355c86;stroke-width:1.1}
.trace-demonstration{stroke:#63855d;stroke-width:3}
.trace-demonstration.trace-point{fill:#63855d}
.trace-number{font:bold 6px system-ui;fill:#375637}
.path-trace[data-demo] .trace-cue{opacity:.9}
.path-trace[data-demo] .trace-current{visibility:hidden}
.path-trace[data-demo] .trace-user-ink{opacity:.25}
.path-trace-tools{display:flex;align-items:center;justify-content:center;gap:5px;max-width:100%}
.path-trace-tool{display:grid;place-items:center;width:44px;height:44px;padding:8px;border:1px solid #bdc9ae;
 border-radius:12px;background:#f6f7e9;color:#3c614b}
.path-trace-tool:disabled{opacity:.36}
.path-trace-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.path-trace-steps{display:flex;gap:3px;margin-right:4px}
.path-trace-steps span{width:9px;height:6px;border-radius:4px;background:#d5ddca}
.path-trace-steps .trace-step-now{background:#83a174}
.path-trace-steps .trace-step-done{background:#446e50}
.path-letter-sample{display:inline-block;width:1em;height:1.17em;vertical-align:middle;overflow:visible}
.trace-sample-line{stroke:currentColor;stroke-width:5.1}
.trace-sample-line.trace-point{fill:currentColor;stroke-width:0}
.path-trace-keys{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.path-trace[data-keys] .path-trace-keys{
 position:static;clip-path:none;width:auto;height:auto;white-space:normal;
 color:#46584a;text-align:center;font-size:13px;line-height:1.3;
}
@media(pointer:coarse){
 .path-trace-surface{width:min(100%,clamp(190px,48dvh,286px))}
}
@media(max-height:480px) and (min-width:530px){
 .path-trace{gap:3px}.path-trace-surface{width:min(100%,clamp(130px,48dvh,190px))}
}