@layer pages {
  .typography {
    & .format {
      margin-block-start: var(--space-16);
    }

    & pre {
      max-block-size: 28lh;
    }

    & code[data-format='text'] {
      font: var(--text-ui) / var(--leading-ui) var(--font-text);
    }

    & [data-state='stale'] pre {
      opacity: 0.5;
    }

    & [data-state='error'] .status {
      color: var(--color-danger);
    }

    @media (prefers-reduced-motion: no-preference) {
      & pre {
        transition: opacity var(--transition-state);
      }
    }
  }

  ::highlight(we-typography-change) {
    background-color: var(--color-cyan-soft);
  }
}