/* 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 */
.ks-app-host .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;
}
.ks-app-host .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;
}
.ks-app-host .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;
}
.ks-app-host .react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.ks-app-host .react-flow__pane {
  z-index: 1;
}
.ks-app-host .react-flow__pane.draggable {
    cursor: grab;
  }
.ks-app-host .react-flow__pane.dragging {
    cursor: grabbing;
  }
.ks-app-host .react-flow__pane.selection {
    cursor: pointer;
  }
.ks-app-host .react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.ks-app-host .react-flow__renderer {
  z-index: 4;
}
.ks-app-host .react-flow__selection {
  z-index: 6;
}
.ks-app-host .react-flow__nodesselection-rect:focus,
.ks-app-host .react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.ks-app-host .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;
}
.ks-app-host .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;
}
.ks-app-host .react-flow .react-flow__edges {
  position: absolute;
}
.ks-app-host .react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.ks-app-host .react-flow__edge {
  pointer-events: visibleStroke;
}
.ks-app-host .react-flow__edge.selectable {
    cursor: pointer;
  }
.ks-app-host .react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.ks-app-host .react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.ks-app-host .react-flow__edge.inactive {
    pointer-events: none;
  }
.ks-app-host .react-flow__edge.selected,
  .ks-app-host .react-flow__edge:focus,
  .ks-app-host .react-flow__edge:focus-visible {
    outline: none;
  }
.ks-app-host .react-flow__edge.selected .react-flow__edge-path,
  .ks-app-host .react-flow__edge.selectable:focus .react-flow__edge-path,
  .ks-app-host .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.ks-app-host .react-flow__edge-textwrapper {
    pointer-events: all;
  }
.ks-app-host .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 */
.ks-app-host .react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.ks-app-host .react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.ks-app-host .react-flow__connection {
  pointer-events: none;
}
.ks-app-host .react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.ks-app-host svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.ks-app-host .react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.ks-app-host .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;
}
.ks-app-host .react-flow__node.selectable {
    cursor: pointer;
  }
.ks-app-host .react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.ks-app-host .react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.ks-app-host .react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.ks-app-host .react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.ks-app-host .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%;
}
.ks-app-host .react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.ks-app-host .react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.ks-app-host .react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.ks-app-host .react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.ks-app-host .react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.ks-app-host .react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.ks-app-host .react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.ks-app-host .react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.ks-app-host .react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.ks-app-host .react-flow__panel.top {
    top: 0;
  }
.ks-app-host .react-flow__panel.bottom {
    bottom: 0;
  }
.ks-app-host .react-flow__panel.top.center, .ks-app-host .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.ks-app-host .react-flow__panel.left {
    left: 0;
  }
.ks-app-host .react-flow__panel.right {
    right: 0;
  }
.ks-app-host .react-flow__panel.left.center, .ks-app-host .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.ks-app-host .react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.ks-app-host .react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.ks-app-host .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;
}
.ks-app-host .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;
}
.ks-app-host .react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.ks-app-host .react-flow__minimap-svg {
    display: block;
  }
.ks-app-host .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))
    );
  }
.ks-app-host .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))
    );
  }
.ks-app-host .react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.ks-app-host .react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.ks-app-host .react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.ks-app-host .react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.ks-app-host .react-flow__controls.horizontal {
    flex-direction: row;
  }
.ks-app-host .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;
  }
.ks-app-host .react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.ks-app-host .react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.ks-app-host .react-flow__edge-text {
    font-size: 10px;
  }
.ks-app-host .react-flow__node.selectable:focus,
  .ks-app-host .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.ks-app-host .react-flow__node-input,
.ks-app-host .react-flow__node-default,
.ks-app-host .react-flow__node-output,
.ks-app-host .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));
}
.ks-app-host .react-flow__node-input.selectable:hover, .ks-app-host .react-flow__node-default.selectable:hover, .ks-app-host .react-flow__node-output.selectable:hover, .ks-app-host .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.ks-app-host .react-flow__node-input.selectable.selected,
    .ks-app-host .react-flow__node-input.selectable:focus,
    .ks-app-host .react-flow__node-input.selectable:focus-visible,
    .ks-app-host .react-flow__node-default.selectable.selected,
    .ks-app-host .react-flow__node-default.selectable:focus,
    .ks-app-host .react-flow__node-default.selectable:focus-visible,
    .ks-app-host .react-flow__node-output.selectable.selected,
    .ks-app-host .react-flow__node-output.selectable:focus,
    .ks-app-host .react-flow__node-output.selectable:focus-visible,
    .ks-app-host .react-flow__node-group.selectable.selected,
    .ks-app-host .react-flow__node-group.selectable:focus,
    .ks-app-host .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.ks-app-host .react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.ks-app-host .react-flow__nodesselection-rect,
.ks-app-host .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));
}
.ks-app-host .react-flow__nodesselection-rect:focus,
  .ks-app-host .react-flow__nodesselection-rect:focus-visible,
  .ks-app-host .react-flow__selection:focus,
  .ks-app-host .react-flow__selection:focus-visible {
    outline: none;
  }
.ks-app-host .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))
      );
    }
.ks-app-host .react-flow__controls-button:disabled {
      pointer-events: none;
    }
.ks-app-host .react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.ks-app-host .react-flow__controls-button:last-child {
    border-bottom: none;
  }
.ks-app-host .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))
      );
  }
.ks-app-host .react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.ks-app-host .react-flow__resize-control {
  position: absolute;
}
.ks-app-host .react-flow__resize-control.left,
.ks-app-host .react-flow__resize-control.right {
  cursor: ew-resize;
}
.ks-app-host .react-flow__resize-control.top,
.ks-app-host .react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.ks-app-host .react-flow__resize-control.top.left,
.ks-app-host .react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.ks-app-host .react-flow__resize-control.bottom.left,
.ks-app-host .react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.ks-app-host .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%;
}
.ks-app-host .react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.ks-app-host .react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.ks-app-host .react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.ks-app-host .react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.ks-app-host .react-flow__resize-control.handle.top.left {
  left: 0;
}
.ks-app-host .react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.ks-app-host .react-flow__resize-control.handle.top.right {
  left: 100%;
}
.ks-app-host .react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.ks-app-host .react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.ks-app-host .react-flow__resize-control.line.left,
.ks-app-host .react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.ks-app-host .react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.ks-app-host .react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.ks-app-host .react-flow__resize-control.line.top,
.ks-app-host .react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.ks-app-host .react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.ks-app-host .react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.ks-app-host .react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.ks-app-host .react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}


/* src/editor/styles/global.css */
.ks-app-host {
  --prim-color-neutral-0: #ffffff;
  --prim-color-neutral-50: #fafafa;
  --prim-color-neutral-100: #f5f5f5;
  --prim-color-neutral-200: #e5e5e5;
  --prim-color-neutral-300: #d4d4d4;
  --prim-color-neutral-400: #a3a3a3;
  --prim-color-neutral-500: #737373;
  --prim-color-neutral-600: #525252;
  --prim-color-neutral-700: #404040;
  --prim-color-neutral-800: #262626;
  --prim-color-neutral-900: #171717;
  --prim-color-neutral-950: #0a0a0a;
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-tertiary: rgba(255, 255, 255, 0.30);
  --color-text-disabled: rgba(255, 255, 255, 0.20);
  --color-text-on-bright-primary: #000000;
  --color-text-on-bright-secondary: rgba(0, 0, 0, 0.60);
  --color-text-on-bright-tertiary: rgba(0, 0, 0, 0.30);
  --color-text-on-bright-disabled: rgba(0, 0, 0, 0.10);
  --color-icon-primary: var(--color-text-primary);
  --color-icon-secondary: var(--color-text-secondary);
  --color-icon-tertiary: var(--color-text-tertiary);
  --color-icon-disabled: var(--color-text-disabled);
  --color-background-canvas: #0d0d0d;
  --color-background-base: #191919;
  --color-background-elevated: #242424;
  --color-background-floating: #333333;
  --color-border-subtle: #333333;
  --color-border-default: #404040;
  --color-border-strong: #737373;
  --color-brand-primary: #d4ff48;
  --color-brand-primary-light: #dfff78;
  --color-brand-primary-soft: #6a7f24;
  --color-brand-primary-hover: #c5f038;
  --color-accent-blue-default: #5b9eff;
  --color-accent-blue-soft: rgba(91, 158, 255, 0.18);
  --color-accent-green-default: #4ade80;
  --color-accent-green-soft: rgba(74, 222, 128, 0.18);
  --color-accent-orange-default: #ffb056;
  --color-accent-orange-soft: rgba(255, 176, 86, 0.18);
  --color-accent-purple-default: #cc9bfa;
  --color-accent-purple-soft: rgba(204, 155, 250, 0.18);
  --color-accent-error-default: #ff6b6b;
  --color-accent-error-soft: rgba(255, 107, 107, 0.18);
  --color-status-success: #4ade80;
  --color-status-warning: #ffd24a;
  --color-status-warning-text: #1a1500;
  --color-status-error: #ff6b6b;
  --color-status-amber: #ffb056;
  --color-overlay-modal: rgba(0, 0, 0, 0.50);
  --color-overlay-focus: rgba(212, 255, 72, 0.30);
  --color-divider-strong: rgba(255, 255, 255, 0.15);
  --color-divider-default: rgba(255, 255, 255, 0.10);
  --color-divider-subtle: rgba(255, 255, 255, 0.05);
  --color-interaction-hover: rgba(255, 255, 255, 0.05);
  --color-interaction-selected-brand: rgba(212, 255, 72, 0.10);
  --color-interaction-selected-neutral: rgba(255, 255, 255, 0.10);
  --color-interaction-disabled: rgba(255, 255, 255, 0.04);
  --color-interaction-error: rgba(255, 107, 107, 0.10);
  --color-interaction-error-strong: rgba(255, 107, 107, 0.20);
  --motion-duration-instant: 120ms;
  --motion-duration-fast: 200ms;
  --motion-duration-base: 150ms;
  --motion-duration-smooth: 190ms;
  --motion-duration-panel: 220ms;
  --motion-duration-switch: 240ms;
  --motion-ease-standard: ease;
  --motion-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --motion-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --motion-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.14);
  --motion-shadow-active: 0 1px 6px rgba(0, 0, 0, 0.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;
  --font-sans:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    system-ui,
    sans-serif;
  --font-mono:
    "Fira Mono",
    "JetBrains Mono",
    "SF Mono",
    Menlo,
    ui-monospace,
    monospace;
  --z-base: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-top: 9999;
  --ks-bg: var(--color-background-canvas);
  --ks-bg-grad-1: var(--color-background-base);
  --ks-bg-grad-2: var(--color-background-canvas);
  --ks-panel: var(--color-background-elevated);
  --ks-panel-solid: var(--color-background-elevated);
  --ks-panel-elev: var(--color-background-elevated);
  --ks-surface-warm: var(--color-background-floating);
  --ks-surface-cool: var(--color-background-floating);
  --ks-surface-glass: var(--color-background-elevated);
  --ks-overlay-scrim: var(--color-overlay-modal);
  --ks-border: var(--color-border-default);
  --ks-border-soft: var(--color-border-subtle);
  --ks-border-strong: var(--color-brand-primary);
  --ks-border-cyan: var(--color-divider-default);
  --ks-text: var(--color-text-primary);
  --ks-text-soft: var(--color-text-secondary);
  --ks-text-dim: var(--color-text-tertiary);
  --ks-text-faint: var(--color-text-disabled);
  --ks-amber: var(--color-brand-primary);
  --ks-amber-glow: var(--color-brand-primary-light);
  --ks-amber-soft: var(--color-interaction-selected-brand);
  --ks-cyan: var(--color-accent-blue-default);
  --ks-magenta: var(--color-accent-purple-default);
  --ks-rose: var(--color-accent-error-default);
  --ks-mint: var(--color-accent-green-default);
  --ks-perfect: var(--color-status-warning);
  --ks-great: var(--color-status-success);
  --ks-good: var(--color-accent-blue-default);
  --ks-miss: var(--color-status-error);
  --ks-font-ui: var(--font-sans);
  --ks-font-display: var(--font-sans);
  --ks-font-cn:
    "PingFang SC",
    "Noto Sans SC",
    var(--font-sans);
  --ks-font-mono: var(--font-mono);
  --ks-space-1: 4px;
  --ks-space-2: 8px;
  --ks-space-3: 12px;
  --ks-space-4: 16px;
  --ks-space-5: 24px;
  --ks-space-6: 32px;
  --ks-space-7: 48px;
  --ks-radius-xs: var(--radius-sm);
  --ks-radius-sm: var(--radius-md);
  --ks-radius-md: var(--radius-md);
  --ks-radius-lg: var(--radius-lg);
  --ks-radius-xl: var(--radius-xl);
  --ks-radius-pill: var(--radius-pill);
  --ks-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.20);
  --ks-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.30);
  --ks-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.40), 0 16px 40px rgba(0, 0, 0, 0.45);
  --ks-shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ks-shadow-glow-amber: 0 0 0 2px rgba(212, 255, 72, 0.20), 0 4px 16px rgba(212, 255, 72, 0.15);
  --ks-shadow-glow-cyan: 0 0 0 2px rgba(91, 158, 255, 0.20), 0 4px 16px rgba(91, 158, 255, 0.15);
  --ks-glass-blur: none;
  --ks-glass-blur-strong: none;
  --ks-ease: var(--motion-ease-standard);
  --ks-ease-in: var(--motion-ease-in);
  --ks-dur-fast: var(--motion-duration-instant);
  --ks-dur-mid: var(--motion-duration-base);
  --ks-dur-slow: var(--motion-duration-switch);
  --ks-canvas: var(--color-background-canvas);
  --ks-canvas-grid: none;
  --ks-canvas-grid-size: 0;
  --ks-canvas-noise-alpha: 0;
  --ks-bg-blend: normal;
  --ks-bg-drift: transparent;
}
.ni-bgm-volume {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill, 9999px);
  outline: none;
  cursor: pointer;
}
.ni-bgm-volume:disabled {
  cursor: default;
  opacity: 0.5;
}
.ni-bgm-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #1683ff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.ni-bgm-volume::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: var(--radius-pill, 9999px);
  background: rgba(255, 255, 255, 0.3);
}
.ni-bgm-volume::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-pill, 9999px);
  background: #1683ff;
}
.ni-bgm-volume::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #1683ff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}
:where(.ks-app-host:not(.ks-app-host-slot), .ks-app-host *) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.ks-app-host {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.ks-app-host:not(.ks-app-host-slot) {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html.ks-app-standalone,
body.ks-app-standalone {
  --color-background-canvas: #0d0d0d;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-background-canvas);
  background-attachment: fixed;
}
html.ks-app-standalone:has(.ga-root.is-pane-center .ga-main[data-production-empty]),
body.ks-app-standalone:has(.ga-root.is-pane-center .ga-main[data-production-empty]) {
  background: transparent;
}
.ks-app-host:not(.ks-app-host-slot) {
  position: relative;
  z-index: 1;
  background: var(--color-background-canvas);
}
.ks-app-host:not(.ks-app-host-slot):has(.ga-root.is-pane-center .ga-main[data-production-empty]) {
  background: transparent;
}
:where(.ks-app-host button) {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    background var(--motion-duration-instant) var(--motion-ease-standard),
    color var(--motion-duration-instant) var(--motion-ease-standard),
    border-color var(--motion-duration-instant) var(--motion-ease-standard);
}
:where(.ks-app-host button:hover:not(:disabled)) {
  background: var(--color-interaction-hover);
  color: var(--color-text-primary);
}
:where(.ks-app-host button:active:not(:disabled)) {
  background: var(--color-interaction-selected-neutral);
}
:where(.ks-app-host button:disabled) {
  opacity: 0.42;
  cursor: not-allowed;
}
:where(.ks-app-host input, .ks-app-host textarea, .ks-app-host select) {
  font-family: inherit;
  font-size: inherit;
  color: var(--color-text-primary);
  background: var(--color-background-base);
  border: 1px solid var(--color-border-default);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--motion-duration-instant) var(--motion-ease-standard);
}
:where(.ks-app-host input:focus, .ks-app-host textarea:focus, .ks-app-host select:focus) {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 2px var(--color-overlay-focus);
}
:where(.ks-app-host textarea) {
  resize: vertical;
}
.ks-app-host ::placeholder {
  color: var(--color-text-disabled);
  opacity: 1;
}
.ks-app-host .ga-root::selection {
  background: rgba(212, 255, 72, 0.25);
  color: var(--color-text-primary);
}
.ks-app-host ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ks-app-host ::-webkit-scrollbar-track {
  background: transparent;
}
.ks-app-host ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ks-app-host ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.20);
  background-clip: padding-box;
}
.ks-mono {
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.ks-cn {
  font-family: var(--ks-font-cn);
}
.ks-display {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.ks-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.ks-dim {
  color: var(--color-text-secondary);
}
.ks-faint {
  color: var(--color-text-tertiary);
}
.ks-glass,
.ks-surface {
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.ks-glass-strong {
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--ks-shadow-lift);
}
.ks-surface-warm {
  background: var(--color-background-floating);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
.ks-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
}
.ks-section-title::before {
  content: none;
}
.ks-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  transition: background var(--motion-duration-instant) var(--motion-ease-standard), color var(--motion-duration-instant) var(--motion-ease-standard);
}
.ks-row:hover {
  background: var(--color-interaction-hover);
  color: var(--color-text-primary);
}
.ks-row.ks-row-active {
  background: var(--color-interaction-selected-brand);
  color: var(--color-brand-primary);
  border-color: rgba(212, 255, 72, 0.35);
}
.ks-caret::after {
  content: "\258d";
  margin-left: 2px;
  color: var(--color-brand-primary);
  animation: ks-blink 720ms step-end infinite;
}
@keyframes ks-blink {
  50% {
    opacity: 0;
  }
}
@keyframes ks-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px currentColor);
  }
  50% {
    filter: drop-shadow(0 0 12px currentColor);
  }
}
.ks-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  background: var(--color-background-floating);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}
.ks-pill-primary {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-on-bright-primary);
}
.ks-forge-chat-pending-spinner {
  animation: none !important;
}
.ks-forge-chat-tail-caret {
  animation: none !important;
}
.ks-caret::after {
  animation: none !important;
}
.ks-ph-strip {
  animation: none !important;
}
.ks-cue.ks-cue-editor.phase-window {
  animation: none !important;
}
.ks-sg-btn-play.is-playing {
  animation: none !important;
}
/*# sourceMappingURL=index.css.map */