.alphabet-page{background:linear-gradient(to bottom right,var(--color-light-bg),#fff);padding:60px 20px 80px;min-height:70vh}.alphabet-intro{background:linear-gradient(135deg,var(--accent-primary),var(--accent-primary-hover));color:var(--color-dark-text);padding:2.75rem 2.5rem 3rem;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);max-width:900px;margin:0 auto 1.75rem;text-align:center}.alphabet-intro h1{font-size:2.1rem;margin:0 0 1.25rem;line-height:1.25}.alphabet-intro p{max-width:38rem;margin:0 auto;line-height:1.75;font-size:1.05rem}.alphabet-player{max-width:900px;margin:0 auto 1.5rem;display:flex;flex-direction:column;align-items:center;gap:0.65rem;text-align:center}.alphabet-play-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;min-width:11rem;padding:0.7rem 1.35rem;border:none;border-radius:999px;background:var(--accent-primary,#c45c6a);color:#fff;font-weight:700;font-size:1rem;letter-spacing:0.01em;cursor:pointer;box-shadow:0 3px 12px rgba(154,61,78,0.28);transition:transform 0.15s ease,box-shadow 0.15s ease,background 0.15s ease}.alphabet-play-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(154,61,78,0.34);background:var(--accent-primary-hover,#a84858)}.alphabet-play-btn:focus-visible{outline:3px solid rgba(154,61,78,0.45);outline-offset:3px}.alphabet-play-btn.is-playing{background:#3d4a58;box-shadow:0 3px 12px rgba(45,62,80,0.28)}.alphabet-play-btn .bi{font-size:1.15rem;line-height:1}.alphabet-player-status{margin:0;font-size:0.92rem;max-width:28rem}.alphabet-back{max-width:1000px;margin:1.75rem auto 0}.alphabet-letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:0.85rem;max-width:1000px;margin:0 auto}@media (min-width:640px){.alphabet-letter-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}}.alphabet-letter-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.2rem;min-height:5.25rem;padding:0.85rem 0.5rem;background:#fff;border-left:6px solid var(--accent-primary);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,0.06);transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease,background 0.2s ease}.alphabet-letter-glyph{font-size:1.85rem;font-weight:700;line-height:1.15;color:var(--color-dark-text,#2c2c2c)}.alphabet-letter-lower{font-size:0.95rem;font-weight:600;color:var(--color-link,#8a3d4e)}.alphabet-letter-card.is-focused{transform:translateY(-6px) scale(1.06);border-left-color:#3d4a58;background:linear-gradient(160deg,#fff8f6 0%,#fff 55%);box-shadow:0 10px 28px rgba(154,61,78,0.22);z-index:1}.alphabet-letter-card.is-focused .alphabet-letter-glyph{color:#9a3d4e}.alphabet-letter-card.is-played{opacity:0.72}@media (prefers-reduced-motion:reduce){.alphabet-letter-card,.alphabet-play-btn{transition:none}.alphabet-letter-card.is-focused{transform:none;outline:3px solid #9a3d4e;outline-offset:2px}}