/*! bg-state {"__theme":"dark","--bg-color":{"type":"token","value":"surface-accent-bold"},"--bg-grid-color":{"type":"color","value":"#f8b719"},"--bg-grid-opacity":{"type":"range","value":0.63},"--bg-grid-size":{"type":"range","value":28},"--bg-glow-a-color":{"type":"brand","value":"y"},"--bg-glow-a-opacity":{"type":"range","value":0.21},"--bg-glow-a-size":{"type":"range","value":1660},"--bg-glow-a-x":{"type":"range","value":-27},"--bg-glow-a-y":{"type":"range","value":-13},"--bg-glow-b-color":{"type":"brand","value":"r"},"--bg-glow-b-opacity":{"type":"range","value":0.11},"--bg-glow-b-size":{"type":"range","value":660},"--bg-glow-b-x":{"type":"range","value":-38},"--bg-glow-b-y":{"type":"range","value":25},"--bg-glow-c-color":{"type":"brand","value":"b"},"--bg-glow-c-opacity":{"type":"range","value":0.12},"--bg-glow-c-size":{"type":"range","value":900},"--bg-glow-c-x":{"type":"range","value":43},"--bg-glow-c-y":{"type":"range","value":-14},"--bg-vignette-color":{"type":"token","value":"surface-accent-subtle"},"--bg-vignette-opacity":{"type":"range","value":0}} */
.bg[data-state="features-define"] {
  background-color: var(--semantic-color-surface-accent-bold);
  --bg-state-theme: dark;
}
.bg[data-state="features-define"] .bg__grid {
  opacity: 0.63;
  background-image: radial-gradient(circle, #f8b719 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center center;
}
.bg[data-state="features-define"] .bg__glow--a {
  opacity: 0.21;
  width: 1660px; height: 1660px;
  background: radial-gradient(circle, var(--primitive-color-brand-accent-500) 0%, transparent 65%);
  transform: translate(-50%, -50%) translate(calc(-27 * var(--vw)), calc(-13 * var(--vh)));
}
.bg[data-state="features-define"] .bg__glow--b {
  opacity: 0.11;
  width: 660px; height: 660px;
  background: radial-gradient(circle, var(--primitive-color-brand-secondary-500) 0%, transparent 65%);
  transform: translate(-50%, -50%) translate(calc(-38 * var(--vw)), calc(25 * var(--vh)));
}
.bg[data-state="features-define"] .bg__glow--c {
  opacity: 0.12;
  width: 900px; height: 900px;
  background: radial-gradient(circle, var(--primitive-color-brand-primary-500) 0%, transparent 65%);
  transform: translate(-50%, -50%) translate(calc(43 * var(--vw)), calc(-14 * var(--vh)));
}
.bg[data-state="features-define"] .bg__vignette {
  opacity: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 35%, var(--semantic-color-surface-accent-subtle) 100%);
}