.study-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
#phonetics-view{max-width:1050px;margin:auto;color:#405d49}
.phon-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:30px 0}
.phon-hero h1{font-size:clamp(28px,5vw,42px);margin:18px 0}
.phon-hero p{line-height:1.8;color:#748369}
.phon-mascot{display:inline-block;font-size:52px;text-align:center;flex-shrink:0}
.phon-mascot small{display:block;font-size:22px;color:#b5a16c}
.phon-overview,.phon-quiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:24px 0}
.phon-overview>span{font-size:14px;color:#748369}
.phon-practice-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.phon-practice-controls label{display:flex;flex-direction:column;gap:7px;font-size:13px}.phon-practice-controls select{font:inherit;color:inherit;padding:10px;border:1px solid #dce4d2;border-radius:10px;background:#fffdf7;max-width:100%}.phon-practice-controls .primary-button{width:auto;min-width:140px}
.phon-filters{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0}
.phon-filters button,.phon-card,.phon-answers button{font:inherit;color:inherit;border:1px solid #dce4d2;background:#fffdf7;border-radius:14px;cursor:pointer}
.phon-filters button{padding:11px 14px}.phon-filters small{margin-left:8px;opacity:.65}
.phon-filters button[aria-pressed=true],.phon-card.selected{background:#e8efdc;border-color:#789675}
.phon-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.phon-group-section{margin:22px 0;padding:24px;background:#f1f3e9;border:1px solid #dce4d2;border-radius:22px}
.phon-group-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.phon-group-heading>div{min-width:0}.phon-group-heading h2{margin:0;font-size:22px;line-height:1.5}.phon-group-heading p{margin:8px 0 0;color:#748369;font-size:13px;line-height:1.8}.phon-group-count{flex-shrink:0;padding:6px 12px;border:1px solid #dce4d2;border-radius:99px;background:#fffdf7;font-size:13px;white-space:nowrap}
.phon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:155px;padding:16px 8px}
.phon-card:hover{border-color:#789675;transform:translateY(-2px)}
.phon-symbol{font-family:Arial,"Helvetica Neue",sans-serif;font-size:34px;line-height:1.4}
.phon-card strong{font-size:16px}.phon-card small{font-size:12px;color:#748369}
.phon-detail{background:#f0f3e8;border:1px solid #dce4d2;border-radius:20px;padding:24px;margin:24px 0;scroll-margin-top:20px}
.phon-detail-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.phon-detail-top .subtle-button{margin-left:auto}
.phon-detail p{line-height:1.8}.phon-example{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:#fffdf7;padding:18px;border-radius:12px}
.phon-example strong{font-size:24px}.phon-example span{font-size:15px}.phon-example small{display:block;color:#748369;margin-top:8px}
.phon-contrast{margin-bottom:0}.phon-contrast button{font:inherit;border:0;background:none;text-decoration:underline;color:#405d49;cursor:pointer;padding:8px}
.phon-note{font-size:13px;color:#748369;line-height:1.9;margin:24px 0}
.phon-quiz,.phon-result{max-width:760px;margin:30px auto;background:#fffdf7;border:1px solid #dce4d2;border-radius:24px;padding:28px;text-align:center}
.phon-quiz h2,.phon-result h2{font-size:clamp(21px,4vw,28px);line-height:1.7}.phon-quiz p,.phon-result p{line-height:1.8}
.phon-listen{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px auto;padding:24px 38px;border:0;border-radius:20px;background:#e8efdc;color:#405d49;font:inherit;font-size:32px;cursor:pointer}.phon-listen span{font-size:18px}
.phon-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.phon-answers button{padding:22px;font-family:Arial,sans-serif;font-size:32px}
#phonetics-view button:focus-visible{outline:3px solid #789675;outline-offset:4px}#phonetics-view button:disabled{opacity:.5;cursor:default}
.phon-answers .correct:disabled{background:#e1edd5;border-color:#789675;opacity:1}.phon-answers .incorrect:disabled{background:#fbebe2;border-color:#b57c65;opacity:1}
#phon-answer-feedback{min-height:28px;line-height:1.7}#phon-answer-feedback p{margin:12px 0}#phonetics-status{text-align:center;color:#966446;min-height:26px;line-height:1.8;margin:24px 0}
.phon-review-list{margin:24px 0}.phon-review-list>div{display:flex;align-items:center;gap:18px;text-align:left;padding:16px 0;border-bottom:1px solid #dce4d2}.phon-review-list strong{font-size:24px}.phon-review-list span{flex:1}.phon-review-list small{display:block;color:#966446;margin-top:6px}
@media(max-width:850px){.phon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.study-tools{grid-template-columns:1fr}.phon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.phon-card{min-height:135px}.phon-symbol{font-size:28px}.phon-hero{gap:8px}.phon-mascot{font-size:35px}.phon-quiz,.phon-result,.phon-detail{padding:18px}.phon-review-list>div{gap:10px;flex-wrap:wrap}.phon-review-list .secondary-button{padding:10px}.phon-overview .primary-button{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.phon-card:hover{transform:none}}
@media(max-width:600px){.phon-group-section{padding:16px;margin:18px 0;border-radius:18px}.phon-group-heading{gap:10px;margin-bottom:16px}.phon-group-heading h2{font-size:20px}.phon-group-count{padding:5px 9px}.phon-group-section .phon-card{min-height:125px;padding:14px 5px}}

/* A persistent native dialog keeps keyboard focus contained while changing sounds. */
#phonetics-detail{width:min(760px,calc(100% - 24px));max-width:760px;max-height:90vh;max-height:90dvh;margin:auto;padding:0;border:1px solid #dce4d2;border-radius:24px;background:#fffdf7;color:#405d49;overflow:auto;overscroll-behavior:contain}
#phonetics-detail::backdrop{background:#253b35a6;backdrop-filter:blur(3px)}
.phon-dialog-shell{padding:28px}.phon-dialog-shell h2{margin:0;font-size:26px;line-height:1.5}.phon-dialog-shell h3{font-size:17px;margin:24px 0 12px}.phon-dialog-shell p{line-height:1.9}.phon-dialog-shell .phon-detail-top{align-items:flex-start;justify-content:space-between;gap:12px}.phon-dialog-shell .phon-detail-top>div{min-width:0}.phon-detail-category{font-size:13px;color:#748369;margin:10px 0 18px}
.phon-close{flex-shrink:0;width:40px;height:40px;border:1px solid #dce4d2;border-radius:50%;background:#f2f4e9;color:#405d49;font:inherit;font-size:25px;line-height:1}
.phon-single-play{display:flex;align-items:center;justify-content:center;gap:24px;width:100%;padding:22px;border:1px solid #cdddc1;border-radius:18px;background:#e9f0dd;color:#405d49;font:inherit}.phon-single-play .phon-symbol{font-size:48px}.phon-single-play>span:last-child{font-size:16px}
.phon-video{display:block;width:100%;aspect-ratio:16/9;max-height:46vh;max-height:46dvh;background:#263b35;border-radius:14px;object-fit:contain}
.phon-video-error{padding:10px 14px;margin-top:10px;background:#fbebe2;border-radius:12px;font-size:14px}.phon-video-error p{margin:4px 0 12px}.phon-dialog-shell a,.phon-note a{color:#557c62;text-underline-offset:3px}.phon-video-error a{display:inline-block;margin:10px 0}
.phon-contrast-actions{display:flex;gap:10px;flex-wrap:wrap}.phon-dialog-shell .secondary-button{width:auto}.phon-dialog-shell .phon-example{border:1px solid #dce4d2}.phon-dialog-shell .phon-example .secondary-button{margin:0}.phon-dialog-shell .phon-note{margin-bottom:12px}.phon-dialog-shell [role=status]{font-size:13px;line-height:1.8;color:#966446;min-height:24px}.phon-dialog-shell button:focus-visible{outline:3px solid #789675;outline-offset:3px}
@media(max-width:600px){.phon-practice-controls{width:100%}.phon-practice-controls label{width:100%}.phon-practice-controls .primary-button{width:100%}.phon-dialog-shell{padding:20px}.phon-dialog-shell h2{font-size:24px}.phon-single-play{gap:16px;padding:16px}.phon-single-play .phon-symbol{font-size:40px}.phon-video{max-height:35vh;max-height:35dvh}.phon-dialog-shell .phon-example{padding:14px}}