.story-caption-surface {
  position: absolute; z-index: 1; transform-origin: 0 0; pointer-events: none;
  /* Keep the speaker cue visible when it is anchored near a character's face. */
  overflow: visible; color: #fffef7;
}
.story-caption-panel {
  position: absolute; left: 32px; width: 1216px; border-radius: 20px;
  background: rgba(6, 10, 16, .88); overflow: hidden; box-sizing: border-box;
}
.story-caption-panel[hidden] { display: none !important; }
.story-caption-surface.is-blind .story-caption-speaker { min-width: 0; }
.story-caption-speaker {
  /* The cue is a small sound mark beside the speaker's mouth.  Keep the
     speaker name in the DOM for accessibility, but never turn it into a
     large floating card over the video. */
  position: absolute; left: 36px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; min-width: 0; min-height: 0; padding: 0; border-radius: 0;
  color: var(--speaker-color, #58d7c6); background: transparent; border: 0; box-shadow: none;
  font: 0/0 sans-serif; white-space: nowrap;
  transform: scale(var(--speaker-pill-scale, 1)); transform-origin: left center;
}
.story-caption-speaker-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.story-caption-meter {
  position: relative; display: block;
  width: 46px; height: 42px; flex: 0 0 46px;
  color: #ffd16b;
  opacity: calc(.36 + var(--speaker-level, 1) * .64);
  transform: scaleX(var(--cue-direction, 1));
  transform-origin: center;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.75));
}
.story-caption-meter i {
  position: absolute; left: 9px; top: 19px; display: block;
  width: 20px; height: 4px; border-radius: 3px;
  background: currentColor; outline: 1px solid #674323;
  transform-origin: left center; opacity: .96;
}
.story-caption-meter i:nth-child(1) {
  --cue-angle: -25deg; top: 9px; width: 20px; transform: rotate(var(--cue-angle)) scaleX(.75);
}
.story-caption-meter i:nth-child(2) { width: 26px; }
.story-caption-meter i:nth-child(3) {
  --cue-angle: 25deg; top: 29px; width: 20px; transform: rotate(var(--cue-angle)) scaleX(.75);
}
.story-caption-surface.is-playing.has-audible-speech .story-caption-meter i {
  animation: storyCaptionMouthStroke 620ms ease-in-out infinite alternate;
}
.story-caption-surface.is-playing.has-audible-speech .story-caption-meter i:nth-child(2) { animation-delay: -200ms; }
.story-caption-surface.is-playing.has-audible-speech .story-caption-meter i:nth-child(3) { animation-delay: -400ms; }
@keyframes storyCaptionMouthStroke {
  from { transform: translateX(0) rotate(var(--cue-angle, 0deg)) scaleX(.75); }
  to { transform: translateX(2px) rotate(var(--cue-angle, 0deg)) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .story-caption-surface.is-playing .story-caption-meter i { animation: none; }
}
.story-caption-english {
  position: absolute; left: 26px; top: 24px; width: 1164px;
  font-family: Arial, sans-serif; font-weight: 700; line-height: 52px;
  color: #fffef7; text-align: left; letter-spacing: normal;
}
.story-caption-chinese {
  position: absolute; left: 26px; width: 1164px;
  font: 400 28px/34px "Microsoft YaHei", sans-serif;
  color: #f5dc89; text-align: left; letter-spacing: normal;
}
.story-blind-toggle {
  position: absolute; top: 12px; right: 60px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 10px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.34); color: #fff;
  background: rgba(8,10,16,.8); backdrop-filter: blur(8px);
  font: 700 13px/1 "Microsoft YaHei", sans-serif; cursor: pointer;
}
.story-blind-toggle svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.story-blind-toggle:hover, .story-blind-toggle[aria-pressed="true"] {
  color: #fff7cb; border-color: #ffe27a; background: rgba(41,37,15,.92);
}
.story-blind-toggle:focus-visible { outline: 3px solid #58d7c6; outline-offset: 3px; }
.has-external-story-captions .family-story-fullscreen { z-index: 5; }
[data-course-preview] .story-blind-toggle { right: 12px; min-height: 34px; }
@media (max-width: 760px) {
  .family-story-video-wrap .story-blind-toggle { right: 130px; min-height: 40px; padding: 0 7px; gap: 4px; font-size: 12px; }
  .story-blind-toggle svg { width: 16px; height: 16px; }
  .family-story-video-wrap.has-external-story-captions:fullscreen .family-story-fullscreen-controls {
    grid-template-columns: 30px 31px minmax(40px, 1fr) 31px 72px;
    gap: 6px; padding: 8px;
  }
  .has-external-story-captions .family-story-fullscreen-controls span { min-width: 0; font-size: 11px; }
  .has-external-story-captions .family-story-fullscreen-controls input { min-width: 0; }
  .has-external-story-captions .family-story-fullscreen-volume { min-width: 0; gap: 4px; }
  .has-external-story-captions .family-story-fullscreen-volume button { flex: 0 0 28px; width: 28px; }
  .has-external-story-captions .family-story-fullscreen-volume input { width: 0; flex: 1 1 0; }
}