.callout-with-teaser { width: min(100%, 850px); }
.homepage-teaser { text-align: left; }
.homepage-teaser .teaser-disclosure { color: var(--muted); text-align: center; font: .9rem/1.5 Arial, sans-serif; }
.homepage-teaser .animation-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem; }
.homepage-teaser .animation-controls button { min-height: 44px; }
.homepage-teaser .motion-choice { display: none; justify-content: center; align-items: center; gap: .5rem; margin-top: .8rem; font: .8rem/1.4 Arial, sans-serif; }
.homepage-teaser .motion-choice input { flex: none; min-height: 0; width: auto; margin: 0; }
.homepage-teaser #teaser-status { text-align: center; color: var(--muted); font: .8rem/1.5 Arial, sans-serif; }
.homepage-teaser .sample-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; margin: 1rem 0; }
.homepage-teaser .sample-stage figure { margin: 0; min-width: 0; }
.homepage-teaser .sample-stage svg { display: block; width: 100%; }
.homepage-teaser .sample-stage figcaption { text-align: center; }
.homepage-teaser svg .mouth, .homepage-teaser svg .arm { animation: none; transform-origin: 0 0; transform-box: view-box; }
.homepage-teaser .teaser-seek input { min-height: 20px; border: 0; padding: 0; background: transparent; }
.homepage-teaser .teaser-tagline { text-align: center; color: var(--purple); font: italic 1.5rem/1.2 Georgia, serif; }
.homepage-teaser .teaser-context { margin-top: .5rem; padding-block: .6rem; font: .85rem/1.5 Arial, sans-serif; color: var(--muted); }
.homepage-teaser summary { cursor: pointer; text-align: center; }
.full-clip-label { margin: 1.2rem 0 0; color: var(--purple); font: .85rem/1.4 Arial, sans-serif; }
@media (prefers-reduced-motion: reduce) { .homepage-teaser .motion-choice { display: flex; } }