/* V273.10 Pronunciation Lab component layout. Visual styling inherits the established ESL/site theme. */
.pronunciation-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
.pronunciation-note{margin:.2rem 0 0;line-height:1.5}
.pronunciation-section{margin-top:2rem}
.sound-card,.quiz-card{padding:1rem}
.pattern-group-heading p,.sound-card p{margin:0;line-height:1.55}
.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.85rem}
.sound-card{display:grid;gap:.85rem}
.alphabet-card .sound-card-head{display:flex;gap:.85rem;align-items:flex-start}
.alphabet-letter{display:grid;place-items:center;min-width:62px;height:62px;padding:0 .5rem;border-radius:16px;font-size:2.2rem;font-weight:950;border:1px solid var(--line,var(--site-border,currentColor))}
.sound-card-copy{display:grid;gap:.2rem}
.sound-card-copy .lead{font-weight:800}
.ipa{font-family:"Noto Sans",Arial,sans-serif;font-weight:800;white-space:nowrap}
.sound-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:.75rem .85rem;line-height:1}
.audio-button.is-playing{outline:3px solid currentColor;outline-offset:2px}
.pronunciation-tools{display:grid;gap:.8rem;margin-bottom:1rem}
.pronunciation-tools input[type=search]{max-width:420px;padding:.8rem 1rem;color:inherit;font:inherit;background:inherit}
.section-jump{display:flex;gap:.45rem;flex-wrap:wrap}
.section-jump a{padding:.55rem .7rem;border-radius:999px;border:1px solid var(--line,var(--site-border,currentColor));text-decoration:none;color:inherit;font-size:.9rem}
.pattern-group{scroll-margin-top:90px;margin-top:1.7rem}
.pattern-group-heading{max-width:980px;margin-bottom:.85rem}
.pattern-group-heading h3{margin-bottom:.25rem}
.pattern-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.85rem}
.pattern-title-row{display:flex;justify-content:space-between;gap:.8rem;align-items:center}
.pattern-mark{font-size:1.35rem;font-weight:900}
.pattern-ipa{font-weight:800}
.support-line,.tip-box,.example-chip{background:var(--surface-soft,var(--card-alt,transparent))}
.support-line{padding:.55rem .7rem;border-radius:10px}
.tip-box{padding:.7rem .8rem;border-radius:11px;line-height:1.45}
.example-chip-row{display:flex;gap:.45rem;flex-wrap:wrap}
.example-chip{display:inline-flex;flex-direction:column;padding:.45rem .6rem;border-radius:10px}
.example-chip small{margin-top:.12rem}
.sound-card[hidden]{display:none!important}
.no-search-results{padding:1rem;border:1px dashed var(--line,var(--site-border,currentColor));border-radius:12px}
.quiz-section{padding-bottom:2rem}
.pronunciation-quiz{display:grid;gap:.9rem}
.quiz-card h3{font-size:1rem;margin:.1rem 0 .8rem}
.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.quiz-option{padding:.65rem .75rem;border:1px solid var(--line,var(--site-border,currentColor));border-radius:10px;background:inherit;color:inherit;text-align:left;cursor:pointer;font:inherit}
.quiz-option.correct{border-width:2px;border-color:var(--success,var(--ok,currentColor));font-weight:800}
.quiz-option.wrong{border-width:2px;border-color:var(--danger,var(--error,currentColor))}
.quiz-score{padding:1rem;border-radius:14px;background:var(--surface-soft,var(--card-alt,transparent));font-weight:900}
@media(max-width:980px){.pronunciation-hero{grid-template-columns:1fr}}
@media(max-width:700px){.quiz-options,.pattern-grid,.alphabet-grid{grid-template-columns:1fr}.sound-actions button{flex:0 0 auto}.pronunciation-tools input[type=search]{max-width:none;width:100%}.alphabet-card .sound-card-head{align-items:center}.alphabet-letter{min-width:56px;height:56px;font-size:2rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}