svg[data-strokesvg]>g[data-strokesvg=strokes]>*{--time:.7s;--gap:.7s;--delay:.5s;animation:drawStroke var(--time)linear forwards calc(var(--i)*var(--gap) + var(--delay));stroke-dasharray:3333;stroke-dashoffset:3333px}@keyframes drawStroke{to{stroke-dashoffset:0}}svg[data-strokesvg]{--shadow:#e0e0e0;--stroke:#333}.kana-stroke-container{justify-content:center;align-items:center;width:100%;max-width:300px;min-height:300px;margin:0 auto;display:flex;position:relative}.kana-stroke-container svg{width:100%;height:auto;min-height:250px;max-height:300px;display:block}.kana-stroke-loading{color:#64748b;justify-content:center;align-items:center;min-height:200px;display:flex}.kana-stroke-loading-spinner{border:3px solid #e2e8f0;border-top-color:#8b5cf6;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.kana-stroke-error{text-align:center;color:#64748b;padding:2rem;font-size:.875rem}.kana-stroke-replay{color:#475569;cursor:pointer;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.kana-stroke-replay:hover{color:#334155;background:#e2e8f0;border-color:#cbd5e1}.kana-stroke-replay:active{transform:scale(.98)}.kana-stroke-replay svg{width:1rem;height:1rem}