/* Image-to-code background translation. Loaded last to own the background cascade. */
html {
  background: #fff !important;
}

body {
  background:
    radial-gradient(ellipse 38% 31% at 56% 0%, #dfe5ff 0%, #eef1ff 42%, rgba(250, 250, 255, .72) 67%, transparent 84%),
    radial-gradient(ellipse 37% 48% at 0% 78%, rgba(226, 235, 255, .8) 0%, rgba(241, 246, 255, .72) 48%, rgba(252, 253, 255, .45) 72%, transparent 87%),
    radial-gradient(ellipse 39% 48% at 100% 72%, rgba(238, 232, 255, .78) 0%, rgba(247, 243, 255, .7) 48%, rgba(254, 252, 255, .46) 73%, transparent 88%),
    #fff !important;
  background-attachment: fixed !important;
}

body::before {
  display: block !important;
  content: "" !important;
  position: fixed !important;
  inset: -3% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 34% 24% at 55% -2%, rgba(188, 201, 255, .22) 0%, transparent 76%),
    radial-gradient(ellipse 32% 38% at -3% 75%, rgba(176, 205, 255, .16) 0%, transparent 79%),
    radial-gradient(ellipse 34% 40% at 103% 70%, rgba(207, 190, 255, .15) 0%, transparent 80%) !important;
  filter: none !important;
  opacity: 1 !important;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  animation: ambient-main-breathe 18s ease-in-out infinite alternate !important;
}

body::after {
  display: block !important;
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse 44% 23% at 58% 108%, rgba(215, 205, 255, .18) 0%, rgba(234, 237, 255, .1) 48%, transparent 82%) !important;
  filter: none !important;
  opacity: .9 !important;
  transform-origin: 50% 100%;
  will-change: opacity, transform;
  animation: ambient-floor-breathe 22s ease-in-out infinite alternate !important;
}

.ambient {
  display: none !important;
}

.app-shell {
  position: relative;
  z-index: auto;
  background: transparent;
}

@keyframes ambient-main-breathe {
  0% { opacity: .72; transform: translate3d(-2px, 1px, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(5px, -3px, 0) scale(1.018); }
}

@keyframes ambient-floor-breathe {
  0% { opacity: .65; transform: translateY(2px) scale(1); }
  100% { opacity: .9; transform: translateY(-3px) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
    transform: none !important;
  }
}