.reader-follow-frame {
  position: fixed;
  width: 1px;
  height: 1px;
  left: -9999px;
  top: -9999px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.narration-controls #reader-follow-start {
  color: #fffaf0;
  background: #a84f3f;
  border-color: #a84f3f;
  box-shadow: 0 5px 14px #7a382b2e;
}

.narration-controls #reader-follow-start:hover:not(:disabled) {
  color: #fffaf0;
  background: #8f3f33;
}

.narration-controls #reader-follow-start.is-live {
  animation: reader-follow-pulse 1.25s ease-in-out infinite;
}

@keyframes reader-follow-pulse {
  50% { box-shadow: 0 0 0 5px #a84f3f24; transform: translateY(-1px); }
}

.reader-follow-inline {
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 10px;
  padding-top: 8px;
  border-top: 1px solid #b5874838;
  color: #39281d99;
  font-size: 9px;
  line-height: 1.45;
}

.reader-follow-inline.is-visible { display: grid; }
.reader-follow-inline strong { color: #536a49; white-space: nowrap; }
.reader-follow-inline p { margin: 0; min-width: 0; }
.reader-follow-inline .reader-follow-caption {
  grid-column: 1 / -1;
  color: #39281db3;
  white-space: normal;
}

.reader-follow-languages {
  display: inline-flex;
  gap: 3px;
  padding: 2px;
  border: 1px solid #5b714c42;
  border-radius: 999px;
  background: #fffbf169;
}

.narration-controls .reader-follow-languages button {
  min-height: 24px;
  padding: 4px 8px;
  border: 0;
  font-size: 8px;
  box-shadow: none;
}

.narration-controls .reader-follow-languages button.is-active {
  color: #fffaf0;
  background: #758d66;
}

.word-unit .reader-follow-grade {
  display: none;
  grid-row: 4;
  min-height: 13px;
  margin-top: 1px;
  border-radius: 999px;
  padding: 1px 5px;
  font: 800 8px/12px "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: .02em;
  text-transform: lowercase;
}

.word-unit .reader-follow-grade:not(:empty) { display: block; }
.word-unit.reader-follow-pass .reader-follow-grade { color: #496344; background: #e6f0e3; }
.word-unit.reader-follow-retry .reader-follow-grade { color: #9f4034; background: #f8ded9; }
.word-unit.reader-follow-unknown .reader-follow-grade { color: #82652d; background: #f7ecd1; }

.word-unit.reader-follow-reviewing {
  position: relative;
  z-index: 3;
  border-radius: 8px;
  background: #fff2cf;
  box-shadow: 0 0 0 4px #c5964e2e, 0 8px 18px #6e48261f;
  transform: translateY(-2px);
}

.word-unit.reader-follow-reviewing .word { color: #9d4939; }

@media (width >= 1500px) {
  .reader-follow-inline { font-size: 11px; }
  .word-unit .reader-follow-grade { min-height: 16px; font-size: 10px; line-height: 15px; }
}

@media (width <= 900px) {
  .reader-follow-inline { grid-template-columns: 1fr; }
  .reader-follow-languages { justify-self: start; }
  .word-unit .reader-follow-grade { font-size: 7px; padding-inline: 4px; }
}