/* The supplied brush has a compact 28px outline and a lower-left tip hotspot. */
.heading-stroke-trigger,.heading-stroke-trigger *,.tracing-canvas{cursor:url('/cursors/hanja-brush-gray-28-v4.svg') 2 29,url('/cursors/hanja-brush-gray-28-v4.png') 2 29,crosshair}
html.tracing-open,html.tracing-open body{overflow:hidden;overscroll-behavior:none}
.tracing-dialog{--tracing-size:min(400px,85vw);--tracing-paper:#FFFFFF;--tracing-ink:#1C1917;--tracing-guide-ink:#dce2de;--tracing-complete:var(--brand);position:fixed;inset:0;height:fit-content;width:calc(var(--tracing-size) + 34px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px);margin:auto;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 80px #1C191733;line-height:1.5}
[data-theme="dark"] .tracing-dialog{--tracing-paper:var(--canvas);--tracing-ink:var(--ink);--tracing-guide-ink:#56675c;--tracing-complete:var(--green)}
.tracing-dialog:not([open]){display:none}
.tracing-dialog::backdrop{background:#1C191770}
.tracing-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.tracing-heading{display:flex;align-items:center;flex-wrap:wrap;flex:1;min-width:0;gap:4px 12px}
.tracing-header h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;font-size:1.125rem;font-weight:500;line-height:1.3}
.tracing-character{font-family:var(--hanja-font);font-size:1.65rem;color:var(--accent-ink)}
.tracing-close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-8px;border-radius:8px;color:var(--muted)}
.tracing-stage{position:relative;width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--tracing-paper);box-shadow:inset 0 0 0 1px var(--line);touch-action:none;user-select:none;-webkit-user-select:none}
.tracing-guide,.tracing-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.tracing-guide{pointer-events:none;color:var(--tracing-ink)}
.tracing-guide .original-stroke-svg{display:block;width:100%;height:100%;overflow:hidden}
.tracing-dialog .tracing-guide path[fill='#c3c6c4']{fill:var(--tracing-guide-ink)}
.tracing-dialog .tracing-guide path[fill='#111']{fill:currentColor}
.tracing-dialog .tracing-guide path[stroke='#111']{stroke:currentColor}
.tracing-canvas{z-index:1;touch-action:none;user-select:none;-webkit-user-select:none}
.tracing-dialog[data-tracing-mode='playback'] .tracing-canvas{cursor:default}
.tracing-status{flex:1 1 5.5rem;min-width:0;margin:0;color:var(--muted);font-size:.875rem;text-align:right;font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:anywhere}
.tracing-status:empty{display:none}
.tracing-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(44px,3rem),1fr));gap:8px;margin-top:12px}
.tracing-actions button{display:grid;place-items:center;min-width:0;min-height:44px;padding:10px 4px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--accent-ink);font-size:.9375rem;line-height:1.4;touch-action:manipulation}
.tracing-actions [data-tracing-action='write']{color:var(--accent-ink)}
.tracing-brush-icon{fill:currentColor;stroke:none}
.tracing-speed{color:var(--accent-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tracing-dialog[data-tracing-mode='playback'] [data-tracing-action='play'],.tracing-actions [data-tracing-action='write'][aria-pressed='true']{background:var(--brand);color:#fff}
@media(max-width:480px){.tracing-dialog{width:calc(var(--tracing-size) + 26px);padding:12px}.tracing-actions{column-gap:6px}}
@media(hover:hover) and (pointer:fine){.tracing-close:hover{background:var(--soft)}.tracing-actions button:not(:disabled):hover{background:var(--soft)}.tracing-dialog[data-tracing-mode='playback'] [data-tracing-action='play']:not(:disabled):hover,.tracing-actions [data-tracing-action='write'][aria-pressed='true']:not(:disabled):hover{background:var(--brand-hover)}}