.letter-practice-card{max-width:720px;margin-left:auto;margin-right:auto}
.letter-practice-card .row{margin:14px 0}
.letter-alphabet{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:5px;margin:18px 0}
.letter-alphabet button{min-height:42px;padding:6px 2px;border-radius:8px}
.letter-stage{margin:16px auto;max-width:320px}
.letter-stage-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.letter-stage-heading b{font-size:2rem}
.letter-trace-cell{position:relative;width:min(100%,300px);aspect-ratio:3/4;border:2px solid #bcd3ca;border-radius:12px;background:#fffdf7;margin:auto;overflow:hidden}
.letter-trace-cell .letter-svg{position:absolute;inset:0;width:100%;height:100%;stroke:#a8c2b8;stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.letter-trace-cell .letter-svg path{vector-effect:non-scaling-stroke;stroke-width:10px}
.stroke-badge{position:absolute;z-index:2;transform:translate(-50%,-50%);width:30px;height:30px;display:grid;place-items:center;border:2px solid #8c6c24;border-radius:50%;background:#fff4cf;color:#4c3a17;font-weight:800;font-size:16px;pointer-events:none}
.letter-trace-cell canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.letter-stroke-card{max-width:460px}
.letter-stroke-card svg{display:block;width:min(100%,280px);height:360px;margin:8px auto;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:7}
.letter-stroke-card .letter-backdrop{stroke:#d7e4de}
.letter-stroke-card .letter-animated{stroke:#1c5d5f;transition:stroke-dashoffset 1.4s linear}
@media(max-width:620px){.letter-alphabet{grid-template-columns:repeat(7,minmax(0,1fr))}.letter-trace-cell{width:min(100%,260px)}}
.update-notice{position:fixed;left:50%;bottom:calc(82px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:12;width:min(94vw,700px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:2px solid #d2ad45;border-radius:14px;background:#fff9e8;box-shadow:0 8px 30px #18343a35}
.update-notice button{flex:none}
@media(max-width:620px){.update-notice{flex-direction:column;align-items:stretch}.update-notice button{width:100%}}