@keyframes builder-fade-in {
  0% {
    opacity:0
  }
  to {
    opacity:1
  }

}
@keyframes builder-slide-up {
  0% {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }

}
@keyframes builder-zoom-in {
  0% {
    opacity:0;
    transform:scale(.95)
  }
  to {
    opacity:1;
    transform:scale(1)
  }

}
.builder-anim-fade-in {
  animation:.6s ease-out both builder-fade-in
}
.builder-anim-slide-up {
  animation:.6s ease-out both builder-slide-up
}
.builder-anim-zoom-in {
  animation:.6s ease-out both builder-zoom-in
}
@keyframes builder-marquee-left {
  0% {
    transform:translate(0)
  }
  to {
    transform:translate(-50%)
  }

}
@keyframes builder-marquee-right {
  0% {
    transform:translate(-50%)
  }
  to {
    transform:translate(0)
  }

}
.editor-shell {
  --ed-bg-canvas:#e7e8ef;
  --ed-bg-panel:#fcfcfe;
  --ed-bg-card:#fff;
  --ed-ink:#181822;
  --ed-ink-2:#5a5b6b;
  --ed-ink-3:#9899a9;
  --ed-line:#e4e5ec;
  --ed-accent:#2151f5;
  --ed-accent-soft:#ebf0ff;
  --ed-accent-ink:#1638b8;
  --ed-el:#7c3aed;
  --ed-el-soft:#f3edfe;
  --ed-drop:#0ea371;
  --ed-drop-soft:#e6f7f0;
  --ed-shadow-card:0 1px 2px #1818220d, 0 4px 14px #1818220d;
  --ed-shadow-lift:0 6px 24px #18182229;
  --background:#fff;
  --foreground:#181822;
  --card:#fff;
  --card-foreground:#181822;
  --popover:#fff;
  --popover-foreground:#181822;
  --primary:#2151f5;
  --primary-foreground:#fff;
  --secondary:#e7e8ef;
  --secondary-foreground:#181822;
  --muted:#f3f4f8;
  --muted-foreground:#5a5b6b;
  --accent:#ebf0ff;
  --accent-foreground:#1638b8;
  --destructive:#d94a6c;
  --destructive-foreground:#fff;
  --border:#e4e5ec;
  --input:#e4e5ec;
  --ring:#2151f5;
  --sidebar:#fcfcfe;
  --sidebar-foreground:#181822;
  --sidebar-border:#e4e5ec;
  --lightningcss-light:initial;
  --lightningcss-dark: ;
  color-scheme:light;
  color:var(--ed-ink);
  font-family:Inter,system-ui,sans-serif
}
.builder-canvas {
  --lightningcss-light:initial;
  --lightningcss-dark: ;
  color-scheme:light;
  color:#0a0a0a;
  --background:#fff;
  --foreground:#0b0b0b;
  --card:#fff;
  --card-foreground:#0b0b0b;
  --popover:#fff;
  --popover-foreground:#0b0b0b;
  --muted:#f5f5f5;
  --muted-foreground:#555;
  --accent:#f5f5f5;
  --accent-foreground:#0b0b0b;
  --border:#e4e4e4;
  --input:#e4e4e4;
  background:#fff
}
@supports (color:lab(0% 0 0)) {
  .builder-canvas {
    --background:lab(100% 0 0);
    --foreground:lab(3.04863% 0 0);
    --card:lab(100% 0 0);
    --card-foreground:lab(3.04863% 0 0);
    --popover:lab(100% 0 0);
    --popover-foreground:lab(3.04863% 0 0);
    --muted:lab(96.52% -.0000298023 .0000119209);
    --muted-foreground:lab(36.2% 0 .00000596046);
    --accent:lab(96.52% -.0000298023 .0000119209);
    --accent-foreground:lab(3.04863% 0 0);
    --border:lab(90.72% .0000298023 -.0000119209);
    --input:lab(90.72% .0000298023 -.0000119209)
  }

}
.editor-stage {
  background-color:var(--ed-bg-canvas);
  background-image:radial-gradient(circle,#cdcfdc 1px,#0000 1px);
  background-size:22px 22px
}
.builder-container-outline {
  outline-offset:0;
  outline:2px solid #0000;
  transition:outline-color .14s;
  position:relative
}
.builder-container-outline[data-root=true]:hover:not(:has(.builder-container-outline:hover,.builder-element-outline:hover)) {
  outline-color:var(--ed-accent)
}
.builder-container-outline[data-root=true][data-selected=true] {
  outline-color:var(--ed-accent)
}
.builder-container-outline:not([data-root=true]):before {
  content:"";
  border:2px solid var(--ed-accent);
  opacity:0;
  pointer-events:none;
  border-radius:4px;
  transition:opacity .14s;
  position:absolute;
  inset:-36px 0 -12px
}
.builder-section-hit-area {
  z-index:12;
  opacity:0;
  cursor:pointer;
  background:0 0;
  border:0;
  margin:0;
  padding:0;
  display:block;
  position:absolute
}
.builder-section-hit-area-top {
  height:36px;
  top:-36px;
  left:0;
  right:0
}
.builder-section-hit-area-bottom {
  height:12px;
  bottom:-12px;
  left:0;
  right:0
}
.builder-section-hit-area-left {
  width:8px;
  top:0;
  bottom:0;
  left:-8px
}
.builder-section-hit-area-right {
  width:8px;
  top:0;
  bottom:0;
  right:-8px
}
.builder-container-outline:not([data-root=true])[data-selected=true]:before {
  opacity:1
}
.builder-container-outline:not([data-root=true]):hover:not(:has(.builder-container-outline:hover,.builder-element-outline:hover)):before {
  opacity:1
}
.builder-element-outline {
  outline-offset:3px;
  border-radius:6px;
  outline:1.5px dashed #0000;
  transition:outline-color .12s,background-color .12s;
  position:relative
}
.builder-element-outline:hover,.builder-element-outline[data-selected=true] {
  outline-color:var(--ed-el);
  background-color:#7c3aed08
}
.builder-e-badge,.builder-c-toolbar,.builder-e-toolbar {
  letter-spacing:normal;
  line-height:1.2;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif!important
}
.builder-container-outline>.builder-c-toolbar {
  opacity:0;
  pointer-events:none;
  transition:opacity .16s,transform .16s;
  transform:translateY(-4px)
}
:is(.builder-container-outline:hover:not(:has(.builder-container-outline:hover,.builder-element-outline:hover))>.builder-c-toolbar,.builder-container-outline[data-selected=true]>.builder-c-toolbar) {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}
.builder-element-outline>.builder-e-toolbar,.builder-element-outline>.builder-e-badge,.builder-container-outline>.builder-e-badge {
  opacity:0;
  pointer-events:none;
  transition:opacity .12s
}
:is(.builder-element-outline:hover:not(:has(.builder-container-outline:hover,.builder-element-outline:hover))>.builder-e-toolbar,.builder-element-outline:hover:not(:has(.builder-container-outline:hover,.builder-element-outline:hover))>.builder-e-badge,.builder-container-outline:hover:not(:has(.builder-container-outline:hover,.builder-element-outline:hover))>.builder-e-badge,.builder-element-outline[data-selected=true]>.builder-e-toolbar,.builder-element-outline[data-selected=true]>.builder-e-badge,.builder-container-outline[data-selected=true]>.builder-e-badge) {
  opacity:1;
  pointer-events:auto
}
.builder-container-outline[data-root=true]:has(.builder-element-outline:hover):not(:has(.builder-container-outline .builder-element-outline:hover)) {
  outline-color:var(--ed-accent)
}
.builder-container-outline:not([data-root=true]):has(.builder-element-outline:hover):not(:has(.builder-container-outline .builder-element-outline:hover)):before {
  opacity:1
}
.builder-container-outline:has(.builder-element-outline:hover):not(:has(.builder-container-outline .builder-element-outline:hover))>.builder-c-toolbar {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}
.builder-container-outline:has(.builder-element-outline:hover):not(:has(.builder-container-outline .builder-element-outline:hover))>.builder-e-badge {
  opacity:1;
  pointer-events:auto
}
.builder-container-empty {
  border:2px dashed var(--ed-line);
  min-height:120px;
  color:var(--ed-ink-3);
  background:radial-gradient(circle at 1px 1px,#18182214 1px,#0000 0) 0 0/14px 14px,#fafafc;
  border-radius:14px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:32px;
  font-size:13px;
  font-weight:500;
  transition:border-color .16s,background-color .16s;
  display:flex
}
.builder-container-empty .builder-empty-plus {
  background:var(--ed-accent);
  color:#fff;
  border-radius:999px;
  flex-shrink:0;
  place-items:center;
  width:44px;
  height:44px;
  display:inline-grid;
  box-shadow:0 6px 20px -6px #2151f58c
}
.builder-container-droppable[data-over=true] {
  border-color:var(--ed-drop);
  background:radial-gradient(circle at 1px 1px,#0ea37124 1px,transparent 0) 0 0 / 14px 14px,var(--ed-drop-soft);
  color:var(--ed-drop)
}
.builder-drop-indicator {
  background:var(--ed-accent);
  border-radius:2px;
  height:2px;
  margin:4px 0;
  box-shadow:0 0 0 3px #2151f526
}
.builder-drag-overlay {
  color:var(--ed-ink);
  box-shadow:var(--ed-shadow-lift);
  background:#fff;
  border:1px solid #cdd5f5;
  border-radius:12px;
  padding:10px 14px;
  font-size:13px;
  font-weight:600
}
.inspector-compact button[role=combobox],.inspector-compact [data-slot=select-trigger] {
  height:1.75rem!important;
  min-height:1.75rem!important;
  padding:0 .5rem!important;
  font-size:11px!important;
  line-height:1!important
}
.inspector-compact [data-slot=select-trigger] svg {
  width:12px;
  height:12px
}
.inspector-compact input:not([type=color]):not([type=checkbox]):not([type=radio]),.inspector-compact textarea {
  font-size:11px!important
}
.inspector-compact input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=number]) {
  height:1.75rem!important;
  padding:0 .5rem!important
}
.inspector-compact textarea {
  min-height:3.5rem!important;
  padding:.375rem .5rem!important
}
.inspector-compact button:not([role=combobox]):not([data-slot=select-trigger]) {
  font-size:11px
}
.inspector-compact [data-slot=select-item] {
  padding-top:.25rem;
  padding-bottom:.25rem;
  font-size:11px
}
.inspector-compact label {
  font-size:10px
}
.builder-rich-text>:first-child {
  margin-top:0
}
.builder-rich-text>:last-child {
  margin-bottom:0
}
.builder-rich-text p {
  margin:0 0 .75em
}
.builder-rich-text h1,.builder-rich-text h2,.builder-rich-text h3,.builder-rich-text h4,.builder-rich-text h5,.builder-rich-text h6 {
  margin:.5em 0 .35em;
  font-weight:600;
  line-height:1.2
}
.builder-rich-text h2 {
  font-size:1.5em
}
.builder-rich-text h3 {
  font-size:1.25em
}
.builder-rich-text ul {
  margin:0 0 .75em;
  padding-left:1.4em;
  list-style:outside
}
.builder-rich-text ol {
  margin:0 0 .75em;
  padding-left:1.4em;
  list-style:decimal
}
.builder-rich-text li {
  margin:.15em 0
}
.builder-rich-text blockquote {
  opacity:.85;
  border-left:3px solid #7f7f7f59;
  margin:0 0 .75em;
  padding-left:.85em
}
.builder-rich-text a {
  color:inherit;
  text-decoration:underline
}
.builder-rich-text strong {
  font-weight:700
}
.builder-rich-text em {
  font-style:italic
}
.builder-rich-text u {
  text-decoration:underline
}
.builder-rich-text s {
  text-decoration:line-through
}
@keyframes builder-shimmer {
  0% {
    transform:translate(-100%)
  }
  to {
    transform:translate(100%)
  }

}
.react-flow {
  --xy-edge-stroke-default:#b1b1b7;
  --xy-edge-stroke-width-default:1;
  --xy-edge-stroke-selected-default:#555;
  --xy-connectionline-stroke-default:#b1b1b7;
  --xy-connectionline-stroke-width-default:1;
  --xy-attribution-background-color-default:#ffffff80;
  --xy-minimap-background-color-default:#fff;
  --xy-minimap-mask-background-color-default:#f0f0f099;
  --xy-minimap-mask-stroke-color-default:transparent;
  --xy-minimap-mask-stroke-width-default:1;
  --xy-minimap-node-background-color-default:#e2e2e2;
  --xy-minimap-node-stroke-color-default:transparent;
  --xy-minimap-node-stroke-width-default:2;
  --xy-background-color-default:transparent;
  --xy-background-pattern-dots-color-default:#91919a;
  --xy-background-pattern-lines-color-default:#eee;
  --xy-background-pattern-cross-color-default:#e2e2e2;
  background-color:var(--xy-background-color,var(--xy-background-color-default));
  --xy-node-color-default:inherit;
  --xy-node-border-default:1px solid #1a192b;
  --xy-node-background-color-default:#fff;
  --xy-node-group-background-color-default:#f0f0f040;
  --xy-node-boxshadow-hover-default:0 1px 4px 1px #00000014;
  --xy-node-boxshadow-selected-default:0 0 0 .5px #1a192b;
  --xy-node-border-radius-default:3px;
  --xy-handle-background-color-default:#1a192b;
  --xy-handle-border-color-default:#fff;
  --xy-selection-background-color-default:#0059dc14;
  --xy-selection-border-default:1px dotted #0059dccc;
  --xy-controls-button-background-color-default:#fefefe;
  --xy-controls-button-background-color-hover-default:#f4f4f4;
  --xy-controls-button-color-default:inherit;
  --xy-controls-button-color-hover-default:inherit;
  --xy-controls-button-border-color-default:#eee;
  --xy-controls-box-shadow-default:0 0 2px 1px #00000014;
  --xy-edge-label-background-color-default:#fff;
  --xy-edge-label-color-default:inherit;
  --xy-resize-background-color-default:#3367d9;
  direction:ltr
}
.react-flow.dark {
  --xy-edge-stroke-default:#3e3e3e;
  --xy-edge-stroke-width-default:1;
  --xy-edge-stroke-selected-default:#727272;
  --xy-connectionline-stroke-default:#b1b1b7;
  --xy-connectionline-stroke-width-default:1;
  --xy-attribution-background-color-default:#96969640;
  --xy-minimap-background-color-default:#141414;
  --xy-minimap-mask-background-color-default:#3c3c3c99;
  --xy-minimap-mask-stroke-color-default:transparent;
  --xy-minimap-mask-stroke-width-default:1;
  --xy-minimap-node-background-color-default:#2b2b2b;
  --xy-minimap-node-stroke-color-default:transparent;
  --xy-minimap-node-stroke-width-default:2;
  --xy-background-color-default:#141414;
  --xy-background-pattern-dots-color-default:#555;
  --xy-background-pattern-lines-color-default:#333;
  --xy-background-pattern-cross-color-default:#333;
  --xy-node-color-default:#f8f8f8;
  --xy-node-border-default:1px solid #3c3c3c;
  --xy-node-background-color-default:#1e1e1e;
  --xy-node-group-background-color-default:#f0f0f040;
  --xy-node-boxshadow-hover-default:0 1px 4px 1px #ffffff14;
  --xy-node-boxshadow-selected-default:0 0 0 .5px #999;
  --xy-handle-background-color-default:#bebebe;
  --xy-handle-border-color-default:#1e1e1e;
  --xy-selection-background-color-default:#c8c8dc14;
  --xy-selection-border-default:1px dotted #c8c8dccc;
  --xy-controls-button-background-color-default:#2b2b2b;
  --xy-controls-button-background-color-hover-default:#3e3e3e;
  --xy-controls-button-color-default:#f8f8f8;
  --xy-controls-button-color-hover-default:#fff;
  --xy-controls-button-border-color-default:#5b5b5b;
  --xy-controls-box-shadow-default:0 0 2px 1px #00000014;
  --xy-edge-label-background-color-default:#141414;
  --xy-edge-label-color-default:#f8f8f8
}
.react-flow__background {
  background-color:var(--xy-background-color-props,var(--xy-background-color,var(--xy-background-color-default)));
  pointer-events:none;
  z-index:-1
}
.react-flow__container {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0
}
.react-flow__pane {
  z-index:1;
  touch-action:none
}
.react-flow__pane.draggable {
  cursor:grab
}
.react-flow__pane.dragging {
  cursor:grabbing
}
.react-flow__pane.selection {
  cursor:pointer
}
.react-flow__viewport {
  transform-origin:0 0;
  z-index:2;
  pointer-events:none
}
.react-flow__renderer {
  z-index:4
}
.react-flow__selection {
  z-index:6
}
.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible {
  outline:none
}
.react-flow__edge-path {
  stroke:var(--xy-edge-stroke,var(--xy-edge-stroke-default));
  stroke-width:var(--xy-edge-stroke-width,var(--xy-edge-stroke-width-default));
  fill:none
}
.react-flow__connection-path {
  stroke:var(--xy-connectionline-stroke,var(--xy-connectionline-stroke-default));
  stroke-width:var(--xy-connectionline-stroke-width,var(--xy-connectionline-stroke-width-default));
  fill:none
}
.react-flow .react-flow__edges {
  position:absolute
}
.react-flow .react-flow__edges svg {
  pointer-events:none;
  position:absolute;
  overflow:visible
}
.react-flow__edge {
  pointer-events:visibleStroke
}
.react-flow__edge.selectable {
  cursor:pointer
}
.react-flow__edge.animated path {
  stroke-dasharray:5;
  animation:.5s linear infinite dashdraw
}
.react-flow__edge.animated path.react-flow__edge-interaction {
  stroke-dasharray:none;
  animation:none
}
.react-flow__edge.inactive {
  pointer-events:none
}
.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible {
  outline:none
}
.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path {
  stroke:var(--xy-edge-stroke-selected,var(--xy-edge-stroke-selected-default))
}
.react-flow__edge-textwrapper {
  pointer-events:all
}
.react-flow__edge .react-flow__edge-text {
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none
}
.react-flow__arrowhead polyline {
  stroke:var(--xy-edge-stroke,var(--xy-edge-stroke-default))
}
.react-flow__arrowhead polyline.arrowclosed {
  fill:var(--xy-edge-stroke,var(--xy-edge-stroke-default))
}
.react-flow__connection {
  pointer-events:none
}
.react-flow__connection .animated {
  stroke-dasharray:5;
  animation:.5s linear infinite dashdraw
}
svg.react-flow__connectionline {
  z-index:1001;
  position:absolute;
  overflow:visible
}
.react-flow__nodes {
  pointer-events:none;
  transform-origin:0 0
}
.react-flow__node {
  -webkit-user-select:none;
  user-select:none;
  pointer-events:all;
  transform-origin:0 0;
  box-sizing:border-box;
  cursor:default;
  position:absolute
}
.react-flow__node.selectable {
  cursor:pointer
}
.react-flow__node.draggable {
  cursor:grab;
  pointer-events:all
}
.react-flow__node.draggable.dragging {
  cursor:grabbing
}
.react-flow__nodesselection {
  z-index:3;
  transform-origin:0 0;
  pointer-events:none
}
.react-flow__nodesselection-rect {
  pointer-events:all;
  cursor:grab;
  position:absolute
}
.react-flow__handle {
  pointer-events:none;
  background-color:var(--xy-handle-background-color,var(--xy-handle-background-color-default));
  border:1px solid var(--xy-handle-border-color,var(--xy-handle-border-color-default));
  border-radius:100%;
  width:6px;
  min-width:5px;
  height:6px;
  min-height:5px;
  position:absolute
}
.react-flow__handle.connectingfrom {
  pointer-events:all
}
.react-flow__handle.connectionindicator {
  pointer-events:all;
  cursor:crosshair
}
.react-flow__handle-bottom {
  top:auto;
  bottom:0;
  left:50%;
  transform:translate(-50%,50%)
}
.react-flow__handle-top {
  top:0;
  left:50%;
  transform:translate(-50%,-50%)
}
.react-flow__handle-left {
  top:50%;
  left:0;
  transform:translate(-50%,-50%)
}
.react-flow__handle-right {
  top:50%;
  right:0;
  transform:translate(50%,-50%)
}
.react-flow__edgeupdater {
  cursor:move;
  pointer-events:all
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events:none
}
.react-flow__panel {
  z-index:5;
  margin:15px;
  position:absolute
}
.react-flow__panel.top {
  top:0
}
.react-flow__panel.bottom {
  bottom:0
}
.react-flow__panel.top.center,.react-flow__panel.bottom.center {
  left:50%;
  transform:translate(-15px)translate(-50%)
}
.react-flow__panel.left {
  left:0
}
.react-flow__panel.right {
  right:0
}
.react-flow__panel.left.center,.react-flow__panel.right.center {
  top:50%;
  transform:translateY(-15px)translateY(-50%)
}
.react-flow__attribution {
  background:var(--xy-attribution-background-color,var(--xy-attribution-background-color-default));
  margin:0;
  padding:2px 3px;
  font-size:10px
}
.react-flow__attribution a {
  color:#999;
  text-decoration:none
}
@keyframes dashdraw {
  0% {
    stroke-dashoffset:10px
  }

}
.react-flow__edgelabel-renderer {
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0
}
.react-flow__viewport-portal {
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0
}
.react-flow__minimap {
  background:var(--xy-minimap-background-color-props,var(--xy-minimap-background-color,var(--xy-minimap-background-color-default)))
}
.react-flow__minimap-svg {
  display:block
}
.react-flow__minimap-mask {
  fill:var(--xy-minimap-mask-background-color-props,var(--xy-minimap-mask-background-color,var(--xy-minimap-mask-background-color-default)));
  stroke:var(--xy-minimap-mask-stroke-color-props,var(--xy-minimap-mask-stroke-color,var(--xy-minimap-mask-stroke-color-default)));
  stroke-width:var(--xy-minimap-mask-stroke-width-props,var(--xy-minimap-mask-stroke-width,var(--xy-minimap-mask-stroke-width-default)))
}
.react-flow__minimap-node {
  fill:var(--xy-minimap-node-background-color-props,var(--xy-minimap-node-background-color,var(--xy-minimap-node-background-color-default)));
  stroke:var(--xy-minimap-node-stroke-color-props,var(--xy-minimap-node-stroke-color,var(--xy-minimap-node-stroke-color-default)));
  stroke-width:var(--xy-minimap-node-stroke-width-props,var(--xy-minimap-node-stroke-width,var(--xy-minimap-node-stroke-width-default)))
}
.react-flow__background-pattern.dots {
  fill:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-dots-color-default)))
}
.react-flow__background-pattern.lines {
  stroke:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-lines-color-default)))
}
.react-flow__background-pattern.cross {
  stroke:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-cross-color-default)))
}
.react-flow__controls {
  box-shadow:var(--xy-controls-box-shadow,var(--xy-controls-box-shadow-default));
  flex-direction:column;
  display:flex
}
.react-flow__controls.horizontal {
  flex-direction:row
}
.react-flow__controls-button {
  background:var(--xy-controls-button-background-color,var(--xy-controls-button-background-color-default));
  border:none;
  border-bottom:1px solid var(--xy-controls-button-border-color-props,var(--xy-controls-button-border-color,var(--xy-controls-button-border-color-default)));
  width:26px;
  height:26px;
  color:var(--xy-controls-button-color-props,var(--xy-controls-button-color,var(--xy-controls-button-color-default)));
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  justify-content:center;
  align-items:center;
  padding:4px;
  display:flex
}
.react-flow__controls-button svg {
  fill:currentColor;
  width:100%;
  max-width:12px;
  max-height:12px
}
.react-flow__edge.updating .react-flow__edge-path {
  stroke:#777
}
.react-flow__edge-text {
  font-size:10px
}
.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible {
  outline:none
}
.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group {
  border-radius:var(--xy-node-border-radius,var(--xy-node-border-radius-default));
  width:150px;
  color:var(--xy-node-color,var(--xy-node-color-default));
  text-align:center;
  border:var(--xy-node-border,var(--xy-node-border-default));
  background-color:var(--xy-node-background-color,var(--xy-node-background-color-default));
  padding:10px;
  font-size:12px
}
.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover {
  box-shadow:var(--xy-node-boxshadow-hover,var(--xy-node-boxshadow-hover-default))
}
.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible {
  box-shadow:var(--xy-node-boxshadow-selected,var(--xy-node-boxshadow-selected-default))
}
.react-flow__node-group {
  background-color:var(--xy-node-group-background-color,var(--xy-node-group-background-color-default))
}
.react-flow__nodesselection-rect,.react-flow__selection {
  background:var(--xy-selection-background-color,var(--xy-selection-background-color-default));
  border:var(--xy-selection-border,var(--xy-selection-border-default))
}
.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible {
  outline:none
}
.react-flow__controls-button:hover {
  background:var(--xy-controls-button-background-color-hover-props,var(--xy-controls-button-background-color-hover,var(--xy-controls-button-background-color-hover-default)));
  color:var(--xy-controls-button-color-hover-props,var(--xy-controls-button-color-hover,var(--xy-controls-button-color-hover-default)))
}
.react-flow__controls-button:disabled {
  pointer-events:none
}
.react-flow__controls-button:disabled svg {
  fill-opacity:.4
}
.react-flow__controls-button:last-child {
  border-bottom:none
}
.react-flow__controls.horizontal .react-flow__controls-button {
  border-bottom:none;
  border-right:1px solid var(--xy-controls-button-border-color-props,var(--xy-controls-button-border-color,var(--xy-controls-button-border-color-default)))
}
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
  border-right:none
}
.react-flow__resize-control {
  position:absolute
}
.react-flow__resize-control.left,.react-flow__resize-control.right {
  cursor:ew-resize
}
.react-flow__resize-control.top,.react-flow__resize-control.bottom {
  cursor:ns-resize
}
.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right {
  cursor:nwse-resize
}
.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right {
  cursor:nesw-resize
}
.react-flow__resize-control.handle {
  background-color:var(--xy-resize-background-color,var(--xy-resize-background-color-default));
  border:1px solid #fff;
  border-radius:1px;
  width:5px;
  height:5px;
  translate:-50% -50%
}
.react-flow__resize-control.handle.left {
  top:50%;
  left:0
}
.react-flow__resize-control.handle.right {
  top:50%;
  left:100%
}
.react-flow__resize-control.handle.top {
  top:0;
  left:50%
}
.react-flow__resize-control.handle.bottom {
  top:100%;
  left:50%
}
.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left {
  left:0
}
.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right {
  left:100%
}
.react-flow__resize-control.line {
  border-color:var(--xy-resize-background-color,var(--xy-resize-background-color-default));
  border-style:solid;
  border-width:0
}
.react-flow__resize-control.line.left,.react-flow__resize-control.line.right {
  width:1px;
  height:100%;
  top:0;
  transform:translate(-50%)
}
.react-flow__resize-control.line.left {
  border-left-width:1px;
  left:0
}
.react-flow__resize-control.line.right {
  border-right-width:1px;
  left:100%
}
.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom {
  width:100%;
  height:1px;
  left:0;
  transform:translateY(-50%)
}
.react-flow__resize-control.line.top {
  border-top-width:1px;
  top:0
}
.react-flow__resize-control.line.bottom {
  border-bottom-width:1px;
  top:100%
}
.react-flow__edge-textbg {
  fill:var(--xy-edge-label-background-color,var(--xy-edge-label-background-color-default))
}
.react-flow__edge-text {
  fill:var(--xy-edge-label-color,var(--xy-edge-label-color-default))
}