.mouth-plate{display:block;position:relative;aspect-ratio:1;isolation:isolate;min-width:0;overflow:hidden;background:#fcf8f1;border-radius:9px}.mouth-plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.ipa-layout #ipa-detail{grid-template-columns:minmax(150px,30%) 1fr}.ipa-layout #ipa-detail>.mouth-plate,.ipa-layout .ipa-motion{grid-column:1;grid-row:2/span 2;align-self:center;width:100%}.ipa-motion{gap:.3rem}.ipa-motion .mouth-plate{flex:1}.ipa-motion .mouth-plate+span{flex:none}.at-profile .mouth-plate{width:min(65%,245px)}.at-profile .mouth-plate>img{max-height:none}.at-profile>.mouth-plate{font-size:0}.course-panels .mouth-plate,.course-panels .organ-plate,.course-panels .word-plate{width:100%;height:clamp(145px,17vw,210px);background-color:#fcf8f1;border-radius:8px}.organ-plate{object-fit:contain;padding:.55rem}.word-plate{display:flex;align-items:center;justify-content:center;gap:.2em;background:url('assets/articulation/card.webp') center/contain no-repeat}.word-plate i{font:italic 1.8rem Georgia,serif;color:#254e49}.word-plate .strong-beat{font-weight:bold;color:#94361e}.shelf-art{object-fit:contain;aspect-ratio:480/380;display:block}.shelf-spines img.shelf-art{width:100%;margin-top:12px}.at-field{background:url('assets/articulation/vowel-grid.png') center/100% 100% no-repeat}.at-plot canvas{width:100%;display:block;height:auto}.demo-event .trace-bitmap{width:100%;height:85%;display:block;opacity:.65}.demo-event.demo-current .trace-bitmap{opacity:1;filter:contrast(1.5)}@media(max-width:580px){.ipa-layout #ipa-detail{grid-template-columns:minmax(94px,36%) 1fr}.course-panels .mouth-plate,.course-panels .organ-plate,.course-panels .word-plate{grid-column:1;grid-row:span 2;height:105px}.ipa-layout #ipa-detail>.ipa-motion:has(.mouth-plate:nth-of-type(3)){grid-column:1/-1;grid-row:auto;max-width:300px}.word-plate i{font-size:1.1rem}}
.mouth-plate .gap-phase{opacity:0}
@media(prefers-reduced-motion:no-preference){
 .contact-phase.Trill{animation:contact-phase .55s steps(1) infinite}.gap-phase.Trill{animation:gap-phase .55s steps(1) infinite}
 .contact-phase.Tap,.contact-phase.Affricate{animation:contact-phase 1s steps(1) 1}
 .gap-phase.Tap,.gap-phase.Affricate{animation:gap-phase 1s steps(1) 1}
}
@keyframes contact-phase{0%,78%{opacity:1}38%{opacity:0}}
@keyframes gap-phase{0%,78%{opacity:0}38%{opacity:1}}
.lesson-contrast{margin:1rem 0;padding:1rem;background:var(--shelf-paper);border-radius:10px;color:var(--shelf-ink);text-align:center}.lesson-contrast strong,.contrast-pair span{font:2rem Georgia,serif}.lesson-contrast em{color:#773611;font-weight:bold}.contrast-pair{display:flex;justify-content:center;gap:clamp(1.4rem,6vw,5rem)}.contrast-pair small,.lesson-contrast figcaption{display:block;font:1rem/1.4 "Segoe UI",sans-serif;margin:.3rem}.contrast-join{font-size:1.3rem}.reading-specimen{margin:1rem 0}.course-panels .d-detail{display:block;width:100%;height:clamp(145px,17vw,210px);object-fit:contain;background:#fcf8f1;border-radius:8px}.course-clip{display:flex;align-items:center;gap:.5rem}.d-gesture .course-clip{margin-top:.6rem}@media(max-width:580px){.course-panels .d-detail{height:110px;grid-row:span 2}.d-gesture .course-clip{grid-column:2}}