/* Demo page layout for this entry. Not part of the pattern. */
.xf-demo { width: min(360px, 100%); display: grid; gap: 8px; }
.xf-head { display: flex; justify-content: space-between; align-items: center; }
.xf-head h1 { font-size: 15px; font-weight: 650; }
.crossfade-pause { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--demo-mute); cursor: pointer; }
.crossfade-pause input { accent-color: var(--demo-accent); }
.crossfade { border-radius: 12px; overflow: clip; }
.crossfade:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 3px; }
.xf-frame { position: relative; margin: 0; aspect-ratio: 16 / 10; }
.xf-frame svg { display: block; width: 100%; height: 100%; }
.xf-frame figcaption { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgb(0 0 0 / .55); color: #fff; font-size: 13px; font-weight: 600; }