@layer components {
  /* A frame's shape until it loads. It stays hidden for its first slow duration, so a fast frame never flashes one. */
  .skeleton {
    animation:
      skeleton-appear 1ms var(--duration-slow) backwards,
      pulse 1.6s ease-in-out var(--duration-slow) infinite;
    background-color: var(--color-ink-light);
    border-radius: 99rem;
    display: block;
  }

  /* As tall as the line of text it stands for. */
  .skeleton--line {
    block-size: 0.8em;
    inline-size: var(--skeleton-size, 100%);
    margin-block: calc((1lh - 0.8em) / 2);
    max-inline-size: 100%;

    & + & {
      --skeleton-size: 60%;
    }
  }

  .skeleton--circle {
    aspect-ratio: 1;
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: var(--skeleton-size, 1.5em);
  }
}