/* Decorative material only. The parent controls placement, background and dimensions.
   Set --braid-art-opacity to soften it; --braid-art-ratio changes the wrapper ratio.
   The default is transparent over ivory. No fonts, images or remote dependencies. */
.braid-art {
  position: relative;
  width: 100%;
  aspect-ratio: var(--braid-art-ratio, 3 / 2);
  isolation: isolate;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
  opacity: var(--braid-art-opacity, 1);
}
.braid-art__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.braid-art__light {
  opacity: .24;
  animation: braid-material-breathe 9s ease-in-out infinite alternate;
  transition: opacity 220ms ease;
}
.braid-art[data-engaged="true"] .braid-art__light { opacity: .68; animation: none; }
.braid-art[data-paused="true"] .braid-art__light { animation-play-state: paused; }
.braid-art[data-variant="horizon"] { --braid-art-ratio: 3 / 2; }
@keyframes braid-material-breathe { from { opacity: .17; } to { opacity: .29; } }
@media (prefers-reduced-motion: reduce) {
  .braid-art__light { animation: none !important; transition: none !important; opacity: .24 !important; }
}