.audio-word.is-playing {
  border-radius: 0.16em;
  color: var(--ink);
  background: rgba(73, 103, 89, 0.075);
  box-shadow: inset 0 -0.08em var(--accent, var(--water));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.audio-word.is-playing rt {
  color: var(--ink);
}

.rule-card > button.audio-segment-button {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  cursor: pointer;
  touch-action: manipulation;
}

.audio-segment-button svg {
  width: 18px;
  height: 18px;
}

.rule-card > button.audio-segment-button:hover {
  background: var(--card);
}

.rule-card > button.audio-segment-button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.audio-segment-button:focus-visible {
  outline: 2px solid var(--accent, var(--water));
  outline-offset: 3px;
}

.audio-segment-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.passage-card--audio {
  position: relative;
}

.passage-card--audio .passage-content {
  padding-right: 3.5rem;
}

button.audio-segment-button--small {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--theme-muted, #737373);
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

.audio-segment-button--small:hover,
.audio-segment-button--small[aria-pressed="true"] {
  color: var(--theme-text, #333);
}

.audio-segment-button--small svg {
  width: 1.125rem;
  height: 1.125rem;
}

.rule-card > button.audio-segment-button[hidden],
.audio-segment-button--small[hidden] {
  display: none;
}

@media print {
  .rule-card > button.audio-segment-button,
  button.audio-segment-button--small {
    display: none;
  }
}