/* v3.7.277: More visible active-paragraph highlight for TTS.

   The v3.7.233 style used var(--code-bg) which is var(--code-bg) in light
   mode (pale yellow) and #2a2620 in dark mode. The dark-mode value
   is nearly identical to the dark page background, making the
   highlight effectively invisible (only the 4px red border showed).

   New approach:
     --tts-active-bg variable explicitly defined for both themes,
     distinctly contrasting against page background in each.
     Border bumped from 4px to 5px.
     Added subtle box-shadow for depth lift.
     Added border-radius on right side for visual interest.

   Red border accent kept via var(--accent) so the highlight still
   reads as the site's brand color. */
:root {
  --tts-active-bg: #fff4c4;   /* warm amber, like a highlighter mark */
}
html[data-theme="dark"] {
  --tts-active-bg: #3d3520;   /* warm amber-brown, distinctly lighter than dark page */
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --tts-active-bg: #3d3520;
  }
}
.wtpp-tts-active-paragraph {
  background: var(--tts-active-bg, var(--warn-95)) !important;
  border-left: 5px solid var(--accent, var(--red)) !important;
  box-shadow: 0 1px 3px var(--ov-black-06) !important;
  padding-left: 18px !important;
  padding-right: 12px !important;
  margin-left: -22px !important;
  margin-right: -12px !important;
  border-radius: 0 6px 6px 0 !important;
  transition: background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}