.sl-tool-hero-art-host {
  position: relative;
  isolation: isolate;
}

.sl-tool-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--color-primary-500, #864ffe);
}

.sl-tool-hero-art::before,
.sl-tool-hero-art::after {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
}

.sl-tool-hero-art::before {
  top: 40px;
  left: -120px;
  width: clamp(260px, 34vw, 480px);
  height: clamp(260px, 34vw, 480px);
  background: radial-gradient(circle, rgba(134, 79, 254, 0.14) 0%, rgba(131, 231, 238, 0.08) 45%, rgba(242, 245, 250, 0) 72%);
  filter: blur(24px);
}

.sl-tool-hero-art::after {
  width: clamp(280px, 42vw, 620px);
  height: clamp(280px, 42vw, 620px);
  right: max(-240px, -16vw);
  top: 20px;
  background: radial-gradient(circle, rgba(134, 79, 254, 0.12) 0%, rgba(198, 245, 111, 0.08) 50%, rgba(242, 245, 250, 0) 72%);
  filter: blur(28px);
}