/* Isolated illustration styling. Page layout, copy and controls belong upstream. */
.experience-art {
  position: relative;
  width: 100%;
  aspect-ratio: var(--experience-aspect, 6 / 5);
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}
.experience-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* A quiet CSS ornament survives unavailable Canvas / disabled JavaScript. */
.experience-art::before {
  content: "";
  position: absolute;
  inset: 20% 18%;
  border: 1px solid rgba(95, 212, 208, .12);
  border-radius: 49% 51% 40% 60% / 60% 42% 58% 40%;
  transform: rotate(-18deg);
  background: radial-gradient(ellipse at 35% 40%, rgba(95, 212, 208, .045), transparent 67%);
  box-shadow: inset 0 0 32px rgba(95, 212, 208, .025);
  pointer-events: none;
}
.experience-art::after {
  content: "";
  position: absolute;
  inset: 28% 23%;
  border-top: 1px solid rgba(204, 161, 105, .14);
  border-bottom: 1px solid rgba(95, 212, 208, .08);
  transform: rotate(22deg);
  pointer-events: none;
}
.experience-art--ready::before,
.experience-art--ready::after {
  display: none;
}
.experience-art--fallback::before,
.experience-art--fallback::after {
  display: block;
}
.experience-canvas[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .experience-art,
  .experience-art::before,
  .experience-art::after,
  .experience-canvas {
    animation: none !important;
    transition: none !important;
  }
}
html[data-motion="paused"] .experience-art,
html[data-motion="paused"] .experience-art::before,
html[data-motion="paused"] .experience-art::after,
html[data-motion="paused"] .experience-canvas {
  animation: none !important;
  transition: none !important;
}