/* Finger tracing */
.ft-chars { font: 700 1.75rem/1.3 var(--cjk-ja, var(--cjk)); letter-spacing: .2em; margin: 0; }
.ft-demo .ft-show { width: 10rem; height: 10rem; background: #fff; border: 2px solid var(--edge); border-radius: .75rem; }
.ft-show .ft-anim { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: ft-draw 1s ease-in-out forwards; animation-delay: calc(var(--i) * .9s + .3s); }
.ft-num, .ft-cur-num { font: 700 .5rem/1 var(--f-m); fill: var(--sky); }
.ft-cur-num { font-size: .625rem; fill: #2E6FD8; }
@keyframes ft-draw { to { stroke-dashoffset: 0; } }
.ft-play { display: grid; gap: .5rem; justify-items: center; }
.ft-box { width: min(88vw, calc(100dvh - 15.625rem), 32.5rem); aspect-ratio: 1; background: #fff; border: 2.5px solid var(--ink); border-radius: .875rem; touch-action: none; }
.ft-svg { width: 100%; height: 100%; display: block; touch-action: none; }
.ft-guide { stroke: #D5DDEB; stroke-width: .6; stroke-dasharray: 2 2; fill: none; }
.ft-model { fill: none; stroke: #E3E8F1; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ft-model.cur { stroke: #C5D3EA; }
.ft-start { fill: #2E6FD8; }
.ft-done { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.ft-ink { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.ft-hint { fill: none; stroke: #2E6FD8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: ft-draw .9s ease-in-out forwards; animation-delay: calc(var(--i) * .7s); }
.ft-msg { margin: 0; min-height: 1.4em; font: 600 1.125rem/1.3 var(--f-b), var(--cjk); text-align: center; }
.ft-actions { display: flex; justify-content: center; padding: .375rem; }
@media (prefers-reduced-motion: reduce) {
  .ft-show .ft-anim, .ft-hint { animation: none; stroke-dashoffset: 0; }
}