/* Highlighted phrases: heading color and a faint accent rule. nowrap keeps each one a single box. */
.content-frame [data-scramble=""] {
  color: var(--text-heading);
  white-space: nowrap;
  display: inline-block;
  text-decoration: underline 1px color-mix(in srgb, var(--accent) 60%, transparent);
  text-underline-offset: 0.2em;
}
[data-scramble="hover"] {
  display: inline-block;
}

/* While decoding, the real text keeps its place unpainted and the garble sits on top of it. */
.is-scrambling {
  -webkit-text-fill-color: transparent;
  position: relative;
}
.is-scrambling::after {
  content: attr(data-s);
  content: attr(data-s) / "";
  -webkit-text-fill-color: currentColor;
  position: absolute;
  inset: 0;
  /* A garbled line can run wider or wrap differently from the real one; never let it spill onto its neighbours. */
  clip-path: inset(-0.25em 0 -0.25em -0.12em);
}

/* Phones: let long highlights wrap, so they do not push a line over. */
@media (max-width: 639px) {
  p [data-scramble],
  li [data-scramble] {
    white-space: normal !important;
    display: inline !important;
  }
}