/*! bg-state {"__theme":"light","--bg-color":{"type":"token","value":"surface-neutral-subtle"},"--bg-grid-color":{"type":"color","value":"#FFFFFF"},"--bg-grid-opacity":{"type":"range","value":0.69},"--bg-grid-size":{"type":"range","value":28},"--bg-glow-a-color":{"type":"brand","value":"r"},"--bg-glow-a-opacity":{"type":"range","value":0},"--bg-glow-a-size":{"type":"range","value":900},"--bg-glow-a-x":{"type":"range","value":0},"--bg-glow-a-y":{"type":"range","value":0},"--bg-glow-b-color":{"type":"brand","value":"b"},"--bg-glow-b-opacity":{"type":"range","value":0},"--bg-glow-b-size":{"type":"range","value":1060},"--bg-glow-b-x":{"type":"range","value":0},"--bg-glow-b-y":{"type":"range","value":0},"--bg-glow-c-color":{"type":"brand","value":"y"},"--bg-glow-c-opacity":{"type":"range","value":0},"--bg-glow-c-size":{"type":"range","value":800},"--bg-glow-c-x":{"type":"range","value":0},"--bg-glow-c-y":{"type":"range","value":0},"--bg-vignette-color":{"type":"token","value":"contrast-light"},"--bg-vignette-opacity":{"type":"range","value":0}} */
.bg[data-state="arc"] {
  background-color: var(--semantic-color-surface-neutral-subtle);
  --bg-state-theme: light;
}
.bg[data-state="arc"] .bg__grid {
  opacity: 0.69;
  background-image: radial-gradient(circle, #545454 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center center;
}
.bg[data-state="arc"] .bg__glow--a {
  opacity: 0;
  width: 900px; height: 900px;
  background: radial-gradient(circle, var(--primitive-color-brand-secondary-500) 0%, transparent 65%);
  transform: translate(-50%, -50%) translate(calc(0 * var(--vw)), calc(0 * var(--vh)));
}
.bg[data-state="arc"] .bg__glow--b {
  opacity: 0;
  width: 1060px; height: 1060px;
  background: radial-gradient(circle, var(--primitive-color-brand-primary-500) 0%, transparent 65%);
  transform: translate(-50%, -50%) translate(calc(0 * var(--vw)), calc(0 * var(--vh)));
}
.bg[data-state="arc"] .bg__glow--c {
  opacity: 0;
  width: 800px; height: 800px;
  background: radial-gradient(circle, var(--primitive-color-brand-accent-500) 0%, transparent 65%);
  transform: translate(-50%, -50%) translate(calc(0 * var(--vw)), calc(0 * var(--vh)));
}
.bg[data-state="arc"] .bg__vignette {
  opacity: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 35%, var(--semantic-color-contrast-light) 100%);
}