.alphabet-banner{background:#67448c;color:white;text-align:center;padding:11px 16px;font-size:.86rem;font-weight:800}.alphabet-hero{padding:30px 0}.alphabet-hero h1{font-size:clamp(2.2rem,6vw,3.4rem)}.alphabet-section{padding-top:25px}.alphabet-panel{max-width:850px;margin:auto;text-align:center}.alphabet-picker{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px;margin-bottom:22px}.alphabet-picker button{position:relative;min-height:44px;border:2px solid #e0cbed;border-radius:11px;background:#fff;color:#7a52a1;font-size:1.15rem;font-weight:900;touch-action:manipulation}.alphabet-picker button.letter-finished{background:#eef7e5;border-color:#a6c688}.alphabet-picker button[aria-pressed=true]{background:#885abb;color:white;border-color:#885abb;box-shadow:0 0 0 2px #e4d5f1}.alphabet-top{display:flex;justify-content:space-between;align-items:center;max-width:470px;margin:0 auto;gap:12px}.alphabet-top img{width:55px;height:55px;border-radius:17px;object-fit:cover}.alphabet-top h2{font-size:1.8rem}.alphabet-top h2 span{color:#8553b2}.alphabet-arrow{display:grid;place-items:center;width:50px;height:50px;background:#eee1fb;color:#885abb;border-radius:15px;font-size:2rem;font-weight:900}.alphabet-steps{display:flex;justify-content:center;gap:8px;margin:14px 0}.alphabet-steps span{display:grid;place-items:center;width:33px;height:33px;border:2px solid #e2d3ed;border-radius:11px;font-weight:900;color:#ad95c0;background:#faf7fc}.alphabet-steps .current{background:#885abb;color:white;border-color:#885abb}.alphabet-steps .complete{background:#dceecb;color:#4d7933;border-color:#a3c487}.alphabet-instruction{font-weight:900;color:#78509e;margin:12px 0 16px}.alphabet-board{width:min(100%,470px);aspect-ratio:1;margin:auto;border:2px solid #e5d7ef;border-radius:28px;background:#fffdf8;touch-action:none;user-select:none;cursor:crosshair;overflow:hidden}.alphabet-board svg{display:block;width:100%;height:100%;pointer-events:none}.alphabet-road{fill:none;stroke:#ede4f5;stroke-width:14;stroke-linecap:round;stroke-linejoin:round}.alphabet-dashes{fill:none;stroke:#bfa5d4;stroke-width:1.6;stroke-dasharray:1 4;stroke-linecap:round}.alphabet-ink{fill:none;stroke:#9462bd;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}#alphabet-halo{fill:#e6d2f7;opacity:.9}#alphabet-target{fill:#885abb;stroke:white;stroke-width:1.2}#alphabet-target-number{font:700 4.5px Arial,sans-serif;fill:white}.alphabet-board.finished{background:#f6ffed;border-color:#b6d398}.finished .alphabet-ink{stroke:#7aa858}.alphabet-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:15px}.alphabet-panel .feedback{min-height:3em;margin-top:18px}.alphabet-panel [hidden]{display:none!important}.alphabet-note{font-size:.86rem;margin-top:18px}.alphabet-board:focus-visible{outline:3px solid #efa34c;outline-offset:4px}@media(max-width:800px){.alphabet-picker{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(max-width:520px){.alphabet-panel{padding:16px}.alphabet-picker{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.alphabet-hero h1{font-size:2.3rem}.alphabet-instruction{font-size:.92rem}.alphabet-board{border-radius:20px}}@media(max-width:360px){.alphabet-picker{grid-template-columns:repeat(5,minmax(0,1fr))}}

.alphabet-stage{display:inline-flex;margin-bottom:22px;font-weight:900}