.first-letters{box-sizing:border-box;width:min(92vw,440px);max-height:92dvh;overflow:auto;padding:24px;border:0;border-radius:26px;background:#fffaf0;color:#29203c;box-shadow:0 16px 60px #21153655;text-align:center;font-family:inherit}
.first-letters::backdrop{background:#241d3e88;backdrop-filter:blur(4px)}
.first-letters h2{font-size:clamp(21px,5vw,29px);margin:0 0 8px}.first-letters .practice-note{font-size:14px;margin:0 0 20px;color:#655b70}
.practice-word,.practice-keys{display:flex;justify-content:center;gap:12px;margin:16px 0}.practice-word span{display:grid;place-items:center;width:64px;height:76px;border-radius:15px;background:#ede5fa;border-bottom:4px solid #c0a2db;font-size:38px;font-weight:800}
.first-letters button{font:inherit;font-weight:700;color:inherit;border:2px solid #d9c4ea;border-radius:14px;background:white;min-width:48px;min-height:48px;padding:10px 14px;touch-action:manipulation;cursor:pointer}.practice-keys button{font-size:26px;min-width:64px;min-height:64px}.first-letters button:focus-visible{outline:3px solid #7145b8;outline-offset:3px}.first-letters button.used{text-decoration:line-through;text-decoration-thickness:3px;opacity:.55}.first-letters button:disabled{cursor:default}.practice-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.practice-actions [data-do=continue]{background:#6b3eb2;color:white;border-color:#6b3eb2}.practice-feedback{height:24px;line-height:24px;margin:8px 0;color:#674b8c;font-weight:700}.practice-demo{opacity:.6;animation:letter-demo 1.5s ease-in-out both}.practice-point{box-shadow:0 0 0 5px #f2cd63}
@keyframes letter-demo{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-3px);opacity:1}}
@media(prefers-reduced-motion:reduce){.practice-demo{animation:none;opacity:.6}}
@media(max-height:400px){.first-letters{padding:12px}.practice-word,.practice-keys{margin:8px}.practice-word span{height:48px;font-size:30px}.practice-keys button{min-height:48px}.first-letters .practice-note{margin-bottom:6px}}