@goplasmatic/datalogic-ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,1987 @@
+/* this gets exported as style.css and can be used for the default theming */
+/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
+.react-flow {
+  direction: ltr;
+
+  --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: rgba(255, 255, 255, 0.5);
+
+  --xy-minimap-background-color-default: #fff;
+  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
+  --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: rgba(240, 240, 240, 0.25);
+  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  --xy-node-boxshadow-selected-default: 0 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: rgba(0, 89, 220, 0.08);
+  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
+
+  --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 rgba(0, 0, 0, 0.08);
+
+  --xy-edge-label-background-color-default: #ffffff;
+  --xy-edge-label-color-default: inherit;
+  --xy-resize-background-color-default: #3367d9;
+}
+.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: rgba(150, 150, 150, 0.25);
+
+  --xy-minimap-background-color-default: #141414;
+  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
+  --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: #777;
+  --xy-background-pattern-lines-color-default: #777;
+  --xy-background-pattern-cross-color-default: #777;
+  --xy-node-color-default: #f8f8f8;
+  --xy-node-border-default: 1px solid #3c3c3c;
+  --xy-node-background-color-default: #1e1e1e;
+  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
+  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
+  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
+
+  --xy-handle-background-color-default: #bebebe;
+  --xy-handle-border-color-default: #1e1e1e;
+
+  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
+  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
+
+  --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 rgba(0, 0, 0, 0.08);
+
+  --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 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.react-flow__pane {
+  z-index: 1;
+}
+.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 {
+    overflow: visible;
+    position: absolute;
+    pointer-events: none;
+  }
+.react-flow__edge {
+  pointer-events: visibleStroke;
+}
+.react-flow__edge.selectable {
+    cursor: pointer;
+  }
+.react-flow__edge.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+.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;
+       -moz-user-select: none;
+            user-select: none;
+  }
+/* Arrowhead marker styles - use CSS custom properties as default */
+.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: dashdraw 0.5s linear infinite;
+  }
+svg.react-flow__connectionline {
+  z-index: 1001;
+  overflow: visible;
+  position: absolute;
+}
+.react-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+.react-flow__node {
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  cursor: default;
+}
+.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: left top;
+  pointer-events: none;
+}
+.react-flow__nodesselection-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+  }
+.react-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+  width: 6px;
+  height: 6px;
+  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%;
+}
+.react-flow__handle.connectingfrom {
+    pointer-events: all;
+  }
+.react-flow__handle.connectionindicator {
+    pointer-events: all;
+    cursor: crosshair;
+  }
+.react-flow__handle-bottom {
+    top: auto;
+    left: 50%;
+    bottom: 0;
+    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 {
+  position: absolute;
+  z-index: 5;
+  margin: 15px;
+}
+.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: translateX(-15px) translateX(-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 {
+  font-size: 10px;
+  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
+  padding: 2px 3px;
+  margin: 0;
+}
+.react-flow__attribution a {
+    text-decoration: none;
+    color: #999;
+  }
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+.react-flow__edgelabel-renderer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  left: 0;
+  top: 0;
+}
+.react-flow__viewport-portal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.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 {
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
+}
+.react-flow__controls.horizontal {
+    flex-direction: row;
+  }
+.react-flow__controls-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 26px;
+    width: 26px;
+    padding: 4px;
+    border: none;
+    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
+    border-bottom: 1px solid
+      var(
+        --xy-controls-button-border-color-props,
+        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
+      );
+    color: var(
+      --xy-controls-button-color-props,
+      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
+    );
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+.react-flow__controls-button svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+      fill: currentColor;
+    }
+.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 {
+  padding: 10px;
+  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
+  width: 150px;
+  font-size: 12px;
+  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));
+}
+.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: 0.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;
+}
+/* handle styles */
+.react-flow__resize-control.handle {
+  width: 5px;
+  height: 5px;
+  border: 1px solid #fff;
+  border-radius: 1px;
+  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
+  translate: -50% -50%;
+}
+.react-flow__resize-control.handle.left {
+  left: 0;
+  top: 50%;
+}
+.react-flow__resize-control.handle.right {
+  left: 100%;
+  top: 50%;
+}
+.react-flow__resize-control.handle.top {
+  left: 50%;
+  top: 0;
+}
+.react-flow__resize-control.handle.bottom {
+  left: 50%;
+  top: 100%;
+}
+.react-flow__resize-control.handle.top.left {
+  left: 0;
+}
+.react-flow__resize-control.handle.bottom.left {
+  left: 0;
+}
+.react-flow__resize-control.handle.top.right {
+  left: 100%;
+}
+.react-flow__resize-control.handle.bottom.right {
+  left: 100%;
+}
+/* line styles */
+.react-flow__resize-control.line {
+  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
+  border-width: 0;
+  border-style: solid;
+}
+.react-flow__resize-control.line.left,
+.react-flow__resize-control.line.right {
+  width: 1px;
+  transform: translate(-50%, 0);
+  top: 0;
+  height: 100%;
+}
+.react-flow__resize-control.line.left {
+  left: 0;
+  border-left-width: 1px;
+}
+.react-flow__resize-control.line.right {
+  left: 100%;
+  border-right-width: 1px;
+}
+.react-flow__resize-control.line.top,
+.react-flow__resize-control.line.bottom {
+  height: 1px;
+  transform: translate(0, -50%);
+  left: 0;
+  width: 100%;
+}
+.react-flow__resize-control.line.top {
+  top: 0;
+  border-top-width: 1px;
+}
+.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));
+}
+.debugger-controls {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  pointer-events: auto;
+}
+
+.debugger-controls-inner {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px var(--node-shadow);
+  backdrop-filter: blur(8px);
+}
+
+/* Bug icon indicator */
+.debugger-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent-amber);
+}
+
+/* Navigation buttons */
+.debugger-buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.debugger-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s, transform 0.1s;
+}
+
+.debugger-btn:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.debugger-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.debugger-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.debugger-btn-primary {
+  width: 36px;
+  height: 36px;
+  background: var(--accent-blue);
+  color: white;
+}
+
+.debugger-btn-primary:hover:not(:disabled) {
+  background: var(--accent-blue-hover);
+  color: white;
+}
+
+/* Step counter */
+.debugger-step-counter {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 13px;
+  min-width: 60px;
+  justify-content: center;
+}
+
+.step-current {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.step-separator {
+  color: var(--text-muted);
+  margin: 0 2px;
+}
+
+.step-total {
+  color: var(--text-secondary);
+}
+
+/* Speed control */
+.debugger-speed {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.speed-label {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.speed-slider {
+  width: 80px;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--bg-tertiary);
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.speed-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: var(--accent-blue);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+
+.speed-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+.speed-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: var(--accent-blue);
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .debugger-controls-inner {
+  background: rgba(31, 41, 55, 0.95);
+  border-color: var(--border-light);
+}
+
+[data-theme="dark"] .debugger-btn {
+  background: rgba(55, 65, 81, 0.8);
+}
+
+[data-theme="dark"] .debugger-btn:hover:not(:disabled) {
+  background: rgba(75, 85, 99, 0.9);
+}
+
+[data-theme="dark"] .speed-slider {
+  background: rgba(75, 85, 99, 0.8);
+}
+/* Base node styles - shared across all node types */
+.logic-node {
+  border-radius: 8px;
+  border: 2px solid;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  /* Width is set via inline style from layout calculations */
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: 0 2px 6px var(--node-shadow);
+  transition: box-shadow 0.2s, transform 0.1s;
+}
+
+.logic-node:hover {
+  box-shadow: 0 4px 12px var(--node-shadow-hover);
+}
+
+.logic-node.selected {
+  box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
+}
+
+/* Legacy class support - these now use .logic-node */
+.operator-node,
+.variable-node,
+.literal-node {
+  border-radius: 8px;
+  border: 2px solid;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  /* Width is set via inline style from layout calculations */
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: 0 2px 6px var(--node-shadow);
+  transition: box-shadow 0.2s, transform 0.1s;
+}
+
+.operator-node:hover,
+.variable-node:hover,
+.literal-node:hover {
+  box-shadow: 0 4px 12px var(--node-shadow-hover);
+}
+
+.operator-node.selected,
+.variable-node.selected,
+.literal-node.selected {
+  box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
+}
+
+/* Operator Node */
+.operator-node {
+  background: var(--node-bg) !important;
+}
+
+.operator-node-header {
+  padding: 6px 12px;
+  border-radius: 6px 6px 0 0;
+  color: white;
+  font-weight: 600;
+  text-align: center;
+}
+
+.operator-label {
+  font-size: 16px;
+  letter-spacing: 0.5px;
+}
+
+/* Header content with collapse toggle */
+.operator-header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.operator-header-content .operator-label {
+  flex: 1;
+  text-align: center;
+}
+
+.collapse-toggle {
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 10px;
+  cursor: pointer;
+  padding: 2px 6px;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+  flex-shrink: 0;
+}
+
+.collapse-toggle:hover {
+  opacity: 1;
+}
+
+/* Cell collapse toggle (for vertical cell nodes) */
+.cell-collapse-toggle {
+  background: transparent;
+  border: none;
+  color: var(--text-tertiary);
+  font-size: 10px;
+  cursor: pointer;
+  padding: 2px 4px;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.cell-collapse-toggle:hover {
+  opacity: 1;
+  color: var(--text-primary);
+}
+
+/* Collapsed summary in vertical cell row */
+.collapsed-summary {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--bg-hover);
+  padding: 2px 6px;
+  border-radius: 3px;
+  flex: 1;
+}
+
+.collapsed-summary .arg-icon {
+  font-size: 11px;
+}
+
+.collapsed-summary .arg-label {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+/* Expression text for collapsed nodes */
+.expression-text {
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 12px;
+  color: var(--text-primary);
+  padding: 4px 8px;
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+/* Inline expression for unary operators with simple args */
+.expression-text.inline-expression {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.collapsed-body {
+  padding: 8px;
+}
+
+/* Argument summaries for collapsed view */
+.arg-summaries {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.arg-summary-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 4px;
+  font-size: 12px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+}
+
+.arg-icon {
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+.arg-label {
+  font-family: 'SF Mono', 'Consolas', monospace;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Collapsed operator node */
+.operator-node.collapsed {
+  min-height: auto;
+}
+
+.operator-node.collapsed .operator-node-body {
+  padding: 8px;
+}
+
+.operator-node-body {
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.operator-category {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.operator-children-count {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Variable Node */
+.variable-node {
+  background: var(--node-bg) !important;
+  padding: 8px 12px;
+  position: relative;
+}
+
+.variable-node-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.variable-operator {
+  font-weight: 700;
+  font-size: 12px;
+}
+
+.variable-path {
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.variable-default {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border-light);
+  font-size: 11px;
+  display: flex;
+  gap: 4px;
+}
+
+.variable-default-label {
+  color: var(--text-muted);
+}
+
+.variable-default-value {
+  font-family: 'SF Mono', 'Consolas', monospace;
+  color: var(--text-tertiary);
+}
+
+/* Literal Node */
+.literal-node {
+  background: var(--node-bg) !important;
+  padding: 8px 12px;
+  position: relative;
+}
+
+.literal-node-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.literal-type-icon {
+  font-weight: 700;
+  font-size: 14px;
+  width: 18px;
+  text-align: center;
+}
+
+.literal-value {
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 13px;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+/* ReactFlow Handle styles */
+.react-flow__handle {
+  width: 10px;
+  height: 10px;
+  border: 2px solid white;
+}
+
+[data-theme="dark"] .react-flow__handle {
+  border-color: var(--bg-primary);
+}
+
+.react-flow__handle-top {
+  top: -6px;
+}
+
+.react-flow__handle-bottom {
+  bottom: -6px;
+}
+
+.react-flow__handle-right {
+  right: -6px;
+}
+
+.react-flow__handle-left {
+  left: -6px;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+}
+
+/* Ensure left handles are centered on simple nodes */
+.literal-node .react-flow__handle-left,
+.variable-node .react-flow__handle-left {
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+}
+
+/* Decision Node */
+.decision-node {
+  background: var(--node-bg) !important;
+  border-radius: 8px;
+  border: 2px solid;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  /* Width is set via inline style from layout calculations */
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: 0 2px 6px var(--node-shadow);
+  transition: box-shadow 0.2s, transform 0.1s;
+  position: relative;
+}
+
+.decision-node:hover {
+  box-shadow: 0 4px 12px var(--node-shadow-hover);
+}
+
+.decision-node.selected {
+  box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
+}
+
+.decision-node-header {
+  padding: 6px 12px;
+  border-radius: 6px 6px 0 0;
+  color: white;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.decision-node-title {
+  font-size: 16px;
+  letter-spacing: 0.5px;
+}
+
+.decision-node-body {
+  padding: 0;
+}
+
+/* Decision rows - each row is 32px height */
+.decision-row {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 32px;
+  gap: 6px;
+  border-bottom: 1px solid var(--border-light);
+  position: relative;
+}
+
+.decision-row:last-child {
+  border-bottom: none;
+}
+
+.decision-row-branch {
+  padding-left: 20px;
+}
+
+.decision-row-label {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: lowercase;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.decision-row-content {
+  flex: 1;
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 12px;
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  padding: 4px 8px;
+  border-radius: 4px;
+  word-break: break-word;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Decision node handles are positioned at node level via inline styles */
+
+/* Decision node input handle */
+.decision-node .react-flow__handle[data-handleid="left"] {
+  left: -6px;
+  top: 50%;
+}
+
+/* Edge styles */
+.react-flow__edge-path {
+  stroke-width: 2;
+}
+
+/* Custom edge styles for decision branches */
+.react-flow__edge.yes-edge .react-flow__edge-path {
+  stroke: #22C55E;
+}
+
+.react-flow__edge.no-edge .react-flow__edge-path {
+  stroke: #EF4444;
+}
+
+/* Vertical Cell Node */
+.vertical-cell-node {
+  background: var(--node-bg) !important;
+  border-radius: 8px;
+  border: 2px solid;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  /* Width is set via inline style from layout calculations */
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: 0 2px 6px var(--node-shadow);
+  transition: box-shadow 0.2s, transform 0.1s;
+}
+
+.vertical-cell-node:hover {
+  box-shadow: 0 4px 12px var(--node-shadow-hover);
+}
+
+.vertical-cell-node.selected {
+  box-shadow: 0 0 0 2px var(--accent-blue), 0 4px 12px var(--node-shadow-hover);
+}
+
+.vertical-cell-header {
+  padding: 4px 10px;
+  border-radius: 6px 6px 0 0;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vertical-cell-header .vertical-cell-label {
+  flex: 1;
+}
+
+.vertical-cell-header .collapse-toggle {
+  margin-left: auto;
+}
+
+.vertical-cell-icon {
+  font-size: 16px;
+}
+
+.vertical-cell-label {
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: 0.5px;
+}
+
+.vertical-cell-body {
+  padding: 4px 0;
+}
+
+.vertical-cell-row {
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
+/* Handle positioned inside cell row */
+.vertical-cell-row .cell-handle {
+  position: absolute;
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Condition handle - upper position for if/then cells */
+.vertical-cell-row .cell-handle.condition-handle {
+  top: 30%;
+}
+
+/* Then/Yes handle - lower position for if/then cells */
+.vertical-cell-row .cell-handle.then-handle {
+  top: 70%;
+}
+
+.vertical-cell-row:last-child {
+  border-bottom: none;
+}
+
+.vertical-cell-row-then {
+  padding-left: 24px;
+}
+
+.vertical-cell-row-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.vertical-cell-row-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.vertical-cell-inline {
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 12px;
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+/* Branch expression text in vertical cells */
+.branch-expression {
+  flex: 1;
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 3px;
+  border-left: 2px solid #94a3b8;
+}
+
+[data-theme="dark"] .branch-expression {
+  background: var(--bg-hover);
+  border-left-color: #64748b;
+}
+
+/* Header right section for result badge and collapse toggle */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+/* Result Badge Styles */
+.result-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-weight: 500;
+  max-width: 120px;
+  overflow: hidden;
+  position: relative;
+  cursor: default;
+}
+
+.result-badge.compact {
+  padding: 1px 6px;
+  font-size: 10px;
+  max-width: 80px;
+}
+
+.result-badge .result-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Result popover for complex values */
+.result-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--debug-popover-bg);
+  color: var(--debug-popover-text);
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 11px;
+  z-index: 1000;
+  box-shadow: 0 4px 12px var(--debug-popover-shadow);
+  min-width: 150px;
+  max-width: 300px;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.result-popover pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: 'SF Mono', 'Consolas', monospace;
+}
+
+.result-popover.error {
+  background: var(--debug-popover-error-bg);
+  color: var(--debug-value-false);
+}
+
+.result-badge.truthy {
+  background: var(--success-bg);
+  color: var(--success-text);
+  border: 1px solid var(--success-border);
+}
+
+.result-badge.falsy {
+  background: var(--error-bg);
+  color: var(--error-text);
+  border: 1px solid var(--error-border);
+}
+
+.result-badge.boolean.truthy {
+  background: var(--success-bg);
+  color: var(--success-text);
+}
+
+.result-badge.boolean.falsy {
+  background: var(--error-bg);
+  color: var(--error-text);
+}
+
+.result-badge.number {
+  background: var(--accent-blue-light);
+  color: var(--accent-blue);
+  border: 1px solid var(--accent-blue);
+}
+
+.result-badge.string {
+  background: var(--warning-bg);
+  color: var(--warning-text);
+  border: 1px solid var(--warning-border);
+}
+
+.result-badge.null,
+.result-badge.undefined {
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+  border: 1px solid var(--border-primary);
+}
+
+.result-badge.array,
+.result-badge.object {
+  background: #e0e7ff;
+  color: #4f46e5;
+  border: 1px solid #c7d2fe;
+}
+
+[data-theme="dark"] .result-badge.array,
+[data-theme="dark"] .result-badge.object {
+  background: #312e81;
+  color: #a5b4fc;
+  border-color: #4338ca;
+}
+
+.result-badge.error {
+  background: var(--error-bg);
+  color: var(--error-text);
+  border: 1px solid var(--error-border);
+}
+
+.result-badge .result-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  background: var(--error-text);
+  color: white;
+  border-radius: 50%;
+  font-size: 9px;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+/* Result badge container in nodes */
+.node-result-container {
+  padding: 4px 8px;
+  border-top: 1px solid var(--border-light);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* Variable and Literal result positioning */
+.variable-result,
+.literal-result {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* Expression Syntax Highlighting */
+.expr-operator {
+  color: #cf222e;
+  font-weight: 600;
+}
+
+.expr-keyword {
+  color: #8250df;
+  font-weight: 600;
+}
+
+.expr-comparison {
+  color: #0550ae;
+  font-weight: 500;
+}
+
+.expr-arithmetic {
+  color: #0550ae;
+}
+
+.expr-unary {
+  color: #cf222e;
+  font-weight: 500;
+}
+
+.expr-function {
+  color: #8250df;
+}
+
+.expr-string {
+  color: #0a3069;
+}
+
+.expr-number {
+  color: #0550ae;
+}
+
+.expr-boolean {
+  color: #cf222e;
+}
+
+.expr-null {
+  color: #6e7781;
+  font-style: italic;
+}
+
+.expr-variable {
+  color: #953800;
+}
+
+.expr-bracket {
+  color: #24292f;
+}
+
+.expr-punctuation {
+  color: #24292f;
+}
+
+/* Dark mode expression syntax */
+[data-theme="dark"] .expr-operator {
+  color: #ff7b72;
+}
+
+[data-theme="dark"] .expr-keyword {
+  color: #d2a8ff;
+}
+
+[data-theme="dark"] .expr-comparison {
+  color: #79c0ff;
+}
+
+[data-theme="dark"] .expr-arithmetic {
+  color: #79c0ff;
+}
+
+[data-theme="dark"] .expr-unary {
+  color: #ff7b72;
+}
+
+[data-theme="dark"] .expr-function {
+  color: #d2a8ff;
+}
+
+[data-theme="dark"] .expr-string {
+  color: #a5d6ff;
+}
+
+[data-theme="dark"] .expr-number {
+  color: #79c0ff;
+}
+
+[data-theme="dark"] .expr-boolean {
+  color: #ff7b72;
+}
+
+[data-theme="dark"] .expr-null {
+  color: #8b949e;
+}
+
+[data-theme="dark"] .expr-variable {
+  color: #ffa657;
+}
+
+[data-theme="dark"] .expr-bracket {
+  color: #c9d1d9;
+}
+
+[data-theme="dark"] .expr-punctuation {
+  color: #c9d1d9;
+}
+
+/* ============================================
+   Debugger State Styles
+   ============================================ */
+
+/* CSS Variables for debug colors */
+:root {
+  --debug-current-color: #F59E0B;
+  --debug-current-glow: rgba(245, 158, 11, 0.4);
+  --debug-executed-color: #10B981;
+  --debug-executed-border: rgba(16, 185, 129, 0.6);
+  --debug-pending-opacity: 0.5;
+}
+
+[data-theme="dark"] {
+  --debug-current-glow: rgba(245, 158, 11, 0.5);
+  --debug-executed-border: rgba(16, 185, 129, 0.8);
+}
+
+/* Current step - pulsing highlight */
+.logic-node.debug-current,
+.operator-node.debug-current,
+.variable-node.debug-current,
+.literal-node.debug-current,
+.vertical-cell-node.debug-current,
+.decision-node.debug-current {
+  box-shadow: 0 0 0 3px var(--debug-current-color),
+              0 0 20px var(--debug-current-glow) !important;
+  animation: debug-pulse 1.5s ease-in-out infinite;
+}
+
+/* Ensure debug-current node wrapper is above all other nodes */
+.react-flow__node:has(.debug-current) {
+  z-index: 1000 !important;
+}
+
+@keyframes debug-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 3px var(--debug-current-color),
+                0 0 15px var(--debug-current-glow);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--debug-current-color),
+                0 0 25px var(--debug-current-glow);
+  }
+}
+
+/* Executed nodes - path trail with green border */
+.logic-node.debug-executed,
+.operator-node.debug-executed,
+.variable-node.debug-executed,
+.literal-node.debug-executed,
+.vertical-cell-node.debug-executed,
+.decision-node.debug-executed {
+  border-color: var(--debug-executed-color) !important;
+  box-shadow: 0 0 0 1px var(--debug-executed-border);
+}
+
+/* Pending nodes - slightly faded */
+.logic-node.debug-pending,
+.operator-node.debug-pending,
+.variable-node.debug-pending,
+.literal-node.debug-pending,
+.vertical-cell-node.debug-pending,
+.decision-node.debug-pending {
+  opacity: var(--debug-pending-opacity);
+}
+
+/* On path - ancestors of current node (but not current itself) */
+.logic-node.debug-on-path,
+.operator-node.debug-on-path,
+.variable-node.debug-on-path,
+.literal-node.debug-on-path,
+.vertical-cell-node.debug-on-path,
+.decision-node.debug-on-path {
+  border-color: var(--debug-current-color) !important;
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
+}
+
+/* ============================================
+   Debug Info Bubble Styles
+   ============================================ */
+
+.debug-info-bubble {
+  position: absolute;
+  background: var(--debug-popover-bg);
+  color: var(--debug-popover-text);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 11px;
+  z-index: 9999;
+  box-shadow: 0 4px 16px var(--debug-popover-shadow);
+  min-width: 180px;
+  max-width: 280px;
+  pointer-events: auto;
+}
+
+.debug-info-bubble.debug-info-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+.debug-info-bubble.debug-info-right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+.debug-info-bubble.debug-info-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+/* Arrow indicator - pointer-events: none to not block interactions */
+.debug-info-bubble.debug-info-top::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-color: var(--debug-popover-bg);
+  pointer-events: none;
+}
+
+.debug-info-bubble.debug-info-right::after {
+  content: '';
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-color: var(--debug-popover-bg);
+  pointer-events: none;
+}
+
+.debug-info-bubble.debug-info-bottom::after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-bottom-color: var(--debug-popover-bg);
+  pointer-events: none;
+}
+
+.debug-info-bubble.error {
+  background: var(--debug-popover-error-bg);
+}
+
+.debug-info-bubble.error::after {
+  border-top-color: var(--debug-popover-error-bg);
+}
+
+.debug-info-iteration {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--debug-iteration-color);
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--debug-border-color);
+}
+
+.debug-info-section {
+  margin-bottom: 8px;
+}
+
+.debug-info-section:last-child {
+  margin-bottom: 0;
+}
+
+.debug-info-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--debug-label-color);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+}
+
+.debug-info-value {
+  margin: 0;
+  padding: 4px 6px;
+  background: var(--debug-popover-value-bg);
+  border-radius: 4px;
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 10px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 100px;
+  overflow: auto;
+}
+
+/* Custom scrollbar styling */
+.debug-info-value::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.debug-info-value::-webkit-scrollbar-track {
+  background: var(--debug-popover-value-bg);
+  border-radius: 3px;
+}
+
+.debug-info-value::-webkit-scrollbar-thumb {
+  background: var(--debug-label-color);
+  border-radius: 3px;
+  opacity: 0.5;
+}
+
+.debug-info-value::-webkit-scrollbar-thumb:hover {
+  opacity: 0.7;
+}
+
+.debug-info-error {
+  color: var(--debug-value-false);
+}
+
+.debug-info-result {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Color-coded value classes (no type badges) */
+.debug-value-boolean-true {
+  color: var(--debug-value-true);
+}
+
+.debug-value-boolean-false {
+  color: var(--debug-value-false);
+}
+
+.debug-value-number {
+  color: var(--debug-value-number);
+}
+
+.debug-value-string {
+  color: var(--debug-value-string);
+}
+
+.debug-value-array,
+.debug-value-object {
+  color: var(--debug-value-array);
+}
+
+.debug-value-null,
+.debug-value-undefined {
+  color: var(--debug-value-null);
+}
+
+.debug-info-simple-value {
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* JSON Syntax Highlighting */
+.json-syntax-key {
+  color: var(--syntax-key);
+}
+
+.json-syntax-string {
+  color: var(--debug-value-string);
+}
+
+.json-syntax-number {
+  color: var(--debug-value-number);
+}
+
+.json-syntax-boolean-true {
+  color: var(--debug-value-true);
+}
+
+.json-syntax-boolean-false {
+  color: var(--debug-value-false);
+}
+
+.json-syntax-null {
+  color: var(--debug-value-null);
+}
+
+.json-syntax-punctuation {
+  color: var(--syntax-punctuation);
+}
+.logic-editor {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: var(--bg-tertiary);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.logic-editor .react-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.logic-editor-empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: var(--text-tertiary);
+  pointer-events: none;
+}
+
+.logic-editor-empty p {
+  margin: 0;
+  font-size: 16px;
+}
+
+.logic-editor-empty-hint {
+  margin-top: 8px !important;
+  font-size: 13px !important;
+  color: var(--text-muted);
+}
+
+/* ReactFlow overrides */
+.logic-editor .react-flow__controls {
+  box-shadow: 0 2px 8px var(--node-shadow);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.logic-editor .react-flow__controls-button {
+  background: var(--bg-secondary);
+  border: none;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-secondary);
+  fill: var(--text-secondary);
+}
+
+.logic-editor .react-flow__controls-button:hover {
+  background: var(--bg-hover);
+}
+
+.logic-editor .react-flow__controls-button:last-child {
+  border-bottom: none;
+}
+
+.logic-editor .react-flow__controls-button svg {
+  fill: var(--text-secondary);
+}
+
+.logic-editor .react-flow__edge-path {
+  stroke: #b1b1b7;
+  stroke-width: 2;
+}
+
+.logic-editor .react-flow__edge.selected .react-flow__edge-path {
+  stroke: var(--accent-blue);
+  stroke-width: 3;
+}
+
+/* Dark mode edge colors */
+[data-theme="dark"] .logic-editor .react-flow__edge-path {
+  stroke: #6b7280;
+}
+
+/* Background pattern for dark mode */
+[data-theme="dark"] .logic-editor .react-flow__background {
+  background: var(--bg-tertiary);
+}
+
+/* Attribution removal - only if you have a paid license */
+.logic-editor .react-flow__attribution {
+  display: none;
+}