.read-along { --read-base:#354b40; --read-ink:#14744d; }
.read-word { display:inline-block; }
.read-along[data-read-state="playing"] .read-word,
.read-along[data-read-state="paused"] .read-word,
.read-along[data-read-state="ended"] .read-word {
  color:var(--read-base);
  background-image:linear-gradient(90deg,var(--read-ink) 0%,var(--read-ink) var(--read-fill,0%),var(--read-base) var(--read-fill,0%),var(--read-base) 100%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.read-word.read-current {
  text-decoration:underline;
  text-decoration-color:#80b79b;
  text-decoration-thickness:.09em;
  text-underline-offset:.17em;
}
.read-gap {
  display:inline-block;
  border-radius:4px;
  background:linear-gradient(90deg,var(--read-ink) var(--read-fill,0%),transparent var(--read-fill,0%)) bottom / 100% 2px no-repeat;
}
.read-gap.read-current { outline:2px solid #80b79b; outline-offset:2px; }
@media (forced-colors:active) {
  .read-along .read-word { background:none!important; -webkit-text-fill-color:currentColor!important; color:CanvasText!important; }
  .read-word.read-current { outline:1px solid Highlight; text-decoration-color:Highlight; }
  .read-gap.read-current { outline-color:Highlight; }
}