/* 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: #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: 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;
  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 {
    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));
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "SF Mono", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    /* Deep space background — OKLCH */
    --background: 0.12 0.02 260;
    --foreground: 0.93 0.01 260;

    --card: 0.16 0.02 260;
    --card-foreground: 0.93 0.01 260;

    --popover: 0.15 0.02 260;
    --popover-foreground: 0.93 0.01 260;

    /* Cyan primary */
    --primary: 0.65 0.15 255;
    --primary-foreground: 0.12 0.02 260;

    --secondary: 0.2 0.03 260;
    --secondary-foreground: 0.85 0.015 260;

    --muted: 0.2 0.03 260;
    --muted-foreground: 0.6 0.08 260;

    /* Teal accent */
    --accent: 0.75 0.18 185;
    --accent-foreground: 0.12 0.02 260;

    --destructive: 0.55 0.2 25;
    --destructive-foreground: 0.97 0.01 25;

    --border: 0.3 0.06 260;
    --input: 0.22 0.04 260;
    --ring: 0.65 0.15 255;

    --success: 0.65 0.18 145;
    --warning: 0.75 0.15 80;

    --radius: 0.75rem;

    /* ── ARC shortcut column (air-gap system) ─────────────────────── */
    /* Air gap: the space beyond the panel's outer neon glow where the
       shortcut column floats. Shortcut buttons are ~2in grabbable chips. */
    --arc-gap: 0.16rem; /* gap between panel glow edge and column */
    --arc-slot-w: 3.2rem; /* turret slot width  (~2in grabbable)   */
    --arc-slot-h: 3.2rem; /* turret slot height                     */
    --arc-slot-pitch: 0.55rem; /* vertical rhythm between slots          */
    --arc-slot-inset: 0.45rem; /* in/out turret depth offset             */

    /* Per-shortcut selection light — see-through when off, bright when on */
    --arc-light: 0.8 0.17 195; /* ON: hot cyan, luminous core            */
    --arc-light-off: 0.52 0.07 195; /* OFF: dim, see-through                */
    --arc-light-halo: 0 0 6px; /* tight halo, no bloom post (Quest-safe) */

    /* ── Pinned ARC light/edge hex values (consumed as literals by the
       Three.js/WebGL rendering code, which cannot resolve CSS vars) ── */
    /* Unified cyan — ONE value for BOTH the panel edge glow AND the
       docked selector light. Replaces the old split (#00FFFF edge /
       #00E5FF light) so the docked light no longer blends into the edge. */
    --arc-cyan-unified: #00f0ff;
    /* Glowing neon red — un-docked selector light. Replaces magenta
       #E040FB. High-chroma red/cyan complement reads as a glowing neon
       red in VR against the dark space background. */
    --arc-red-undocked: #ff2a3c;

    /* Recall / Select-all control — neon red, matches --arc-red-undocked  */
    --arc-recall: 0.6 0.23 25; /* ON: glowing neon red recall light        */
    --arc-recall-off: 0.45 0.09 25; /* OFF: dim neon red recall light        */

    /* Glossy button sheen — replaces the flat #1E5A66 top-highlight band
       that cut through label text. A soft vertical specular gradient that
       fades to transparent by ~35% of button height, never crossing the
       label midpoint. Literal hex consumed by the Three.js mesh (WebGL
       cannot resolve CSS vars). */
    --arc-btn-sheen: #3fd8e6; /* soft cyan specular, opacity ~0.22          */

    /* ── GUEST MODE panel (read-only) ───────────────────────────────── */
    /* Distinct violet identity so the guest panel is visually unambiguous
       against the editor panel's cyan. Mirrors the editor's smoked-glass
       + glow-border language but with a violet accent hue. Editor tokens
       above are untouched. */
    --guest-accent: 0.64 0.19 295; /* violet accent — guest primary hue   */
    --guest-accent-foreground: 0.12 0.02 260;
    --guest-surface: rgba(24, 14, 44, 0.92); /* violet-tinted smoked glass */
    --guest-surface-soft: rgba(24, 14, 44, 0.6); /* 0.6 uniform opacity    */
    --guest-border: 0.5 0.16 295; /* dim violet border                    */
    /* Pinned guest glow hex — consumed as literals by the Three.js/WebGL
       rendering code (cannot resolve CSS vars). Violet complement to the
       editor's unified cyan #00F0FF. */
    --guest-glow: #a855f7; /* guest panel edge glow (matches world violet) */
    --guest-glow-core: #c084fc; /* luminous core / GUEST MODE header      */
    --guest-btn-sheen: #c084fc; /* soft violet specular on guest buttons  */

    /* ── GUEST DOCKING STATION (violet identity, own instance) ──────── */
    /* The guest panel's own docking station — a compact dock on the right
       side of the guest panel using the same side-chip pattern as the
       admin dock (Law 28.9b) but tinted violet so it reads as the guest's
       dock, never the editor's cyan column. Renders only tools whose
       'Allow in guest panel' toggle is enabled. */
    --guest-dock-slot-bg: rgba(28, 16, 52, 0.92); /* violet smoked chip    */
    --guest-dock-border: 0.5 0.16 295; /* dim violet chip border          */
    --guest-dock-light: 0.72 0.19 295; /* ON: hot violet selection light  */
    --guest-dock-light-off: 0.5 0.08 295; /* OFF: dim, see-through        */
    --guest-dock-label: 0.85 0.06 295; /* chip label text                 */
    --guest-dock-empty: 0.58 0.1 295; /* empty-state guide text           */
    --guest-dock-sheen: #c084fc; /* violet specular on guest dock chips   */

    /* ── TOOLS TAB (ARC Vault admin surface, cyan language) ─────────── */
    /* Admin management surface listing each tool (EXIT/TELEPORT/CONSOLE)
       with an 'Allow in guest panel' toggle. Reuses the ARC holo/cyan
       language of the SYSTEM MAP tab — no new palette family. The allow
       toggle uses the violet guest identity because it governs guest
       visibility. */
    --tools-row-bg: 0.15 0.02 260; /* tool row surface (near --card)     */
    --tools-row-border: 0.3 0.06 260; /* resting row border               */
    --tools-row-hover: 0.68 0.15 255; /* cyan hover affordance            */
    --tools-name: 0.93 0.01 260; /* tool name text                        */
    --tools-desc: 0.6 0.08 260; /* tool domain / muted description        */
    --tools-empty: 0.6 0.08 260; /* empty-state guide text                */

    /* ── ARC VAULT TAB BAR (registry-driven, fully readable) ───────── */
    /* Reusable segmented tab control. Labels never truncate — the bar
       wraps / scrolls instead. Active tab gets a cyan accent + soft glow
       pill; inactive tabs are dim, readable, and lift on hover. */
    --tabbar-bg: 0.13 0.02 260; /* recessed track behind the tabs        */
    --tabbar-border: 0.28 0.05 260; /* track border                       */
    --tab-inactive: 0.68 0.04 260; /* inactive label text (readable)      */
    --tab-hover: 0.93 0.01 260; /* label brightens on hover              */
    --tab-active: 0.65 0.15 255; /* cyan active accent                    */
    --tab-active-bg: 0.2 0.05 260; /* active tab surface                  */
    --tab-active-soft: 0.65 0.15 255 / 0.12; /* cyan wash behind active  */

    /* ── ROLE TOGGLES (Guest vs User) ───────────────────────────────── */
    /* Two visually distinct, clearly-labeled per-role switches. Guest
       uses the violet identity (what leaks into guest mode); User uses
       the cyan admin identity. Each carries a visible role label so you
       always know who is being allowed. */
    --role-guest-on: 0.64 0.19 295; /* violet — guest allowed             */
    --role-guest-off: 0.45 0.07 295; /* dim violet — guest not allowed    */
    --role-user-on: 0.65 0.15 255; /* cyan — user allowed                 */
    --role-user-off: 0.45 0.05 260; /* dim — user not allowed             */
    --role-label: 0.78 0.04 260; /* role label text (Guest / User)       */

    /* Font families */
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", monospace;

    /* Space background colour used in Tailwind bg-space-bg */
    --space-bg: #050508;

    /* Cloud preset colours */
    --cloud-white: 0.92 0.01 260;
    --cloud-grey: 0.55 0.02 260;
    --cloud-stormy: 0.35 0.03 250;
    --cloud-custom: 0.65 0.15 255;

    /* Procedural cloud tokens */
    --cloud-max-particles: 500;
    --cloud-cluster-spread: 0.35;
    --cloud-depth-scale: 1.0;
    --cloud-noise-frequency: 2.5;
    --cloud-noise-amplitude: 0.6;

    /* ── TERRAIN height color ramp (low → high) ─────────────────────── */
    /* Walkable 256x256 terrain colored by height and steepness. The ramp
       runs water → sand → grass → rock → peak. These OKLCH tokens document
       the ramp for the UI; the WebGL/Three.js shader consumes the pinned
       hex literals below (WebGL cannot resolve CSS vars — documented
       exception). Steep slopes lerp toward the rock tint regardless of
       height so cliff faces read as rock even in lowlands. */
    --terrain-water: 0.34 0.09 235; /* deep water, lowest */
    --terrain-sand: 0.72 0.06 75; /* sandy shoreline near water level */
    --terrain-grass: 0.55 0.12 135; /* green lowlands */
    --terrain-grass-high: 0.45 0.11 135; /* deeper meadow on mid slopes */
    --terrain-rock: 0.5 0.04 60; /* rocky high slopes */
    --terrain-peak: 0.78 0.03 80; /* pale rock / snow, highest */
    /* Steepness-based rock tint — lerp target for steep cliff faces */
    --terrain-steep: 0.45 0.03 50; /* desaturated rock grey for steep slopes */
    /* Pinned hex literals consumed by the terrain vertex/fragment shader */
    --terrain-water-hex: #2e5e8c;
    --terrain-sand-hex: #d8c79a;
    --terrain-grass-hex: #6fa84f;
    --terrain-grass-high-hex: #4e7d3a;
    --terrain-rock-hex: #8a7f6e;
    --terrain-peak-hex: #cfc7b8;
    --terrain-steep-hex: #6b6257;

    /* ── SYSTEM MAP (ARCVAULT tab) ─────────────────────────────────── */
    /* Boxes-and-connections diagram of the whole app, grouped into five
       labeled clusters. Status color-coding: green active, grey planned,
       struck-through removed. Tokens extend the existing dark holo/cyan
       language — no new palette family. */
    --map-group-label: 0.62 0.07 260; /* uppercase letter-spaced group title */
    --map-node-bg: 0.16 0.02 260; /* box surface (matches --card)      */
    --map-node-border: 0.32 0.06 260; /* resting box border              */
    --map-node-hover-border: 0.68 0.15 255; /* cyan click affordance      */
    --map-node-shadow: 0 0 0 1px oklch(var(--map-node-border));
    --map-edge: 0.42 0.06 260; /* connection line between boxes       */
    --map-edge-hover: 0.68 0.15 255; /* line brightens on hover         */
    --map-panel-bg: 0.1 0.02 260; /* detail panel surface (near void)  */
    --map-panel-border: 0.3 0.06 260;
    --map-active: 0.72 0.17 150; /* green — system is built & running */
    --map-active-soft: 0.72 0.17 150 / 0.14; /* green box accent wash   */
    --map-planned: 0.55 0.02 260; /* grey — planned, not built yet     */
    --map-planned-soft: 0.55 0.02 260 / 0.12;
    --map-removed: 0.52 0.11 20; /* dim red — removed, struck-through */
    --map-removed-soft: 0.52 0.11 20 / 0.1;
    --map-status-text: 0.93 0.01 260; /* status pill label text        */
  }

  * {
    border-color: oklch(var(--border));
  }

  body {
    background-color: oklch(var(--background));
    color: oklch(var(--foreground));
    overflow-x: hidden;
    overflow-y: auto;
    font-family: var(--font-body);
  }

  html {
    scroll-behavior: smooth;
  }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1\/4 {
  bottom: 25%;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\/4 {
  left: 25%;
}
.left-2 {
  left: 0.5rem;
}
.right-0 {
  right: 0px;
}
.right-1\/4 {
  right: 25%;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/4 {
  top: 25%;
}
.top-12 {
  top: 3rem;
}
.top-2 {
  top: 0.5rem;
}
.top-3 {
  top: 0.75rem;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-40 {
  max-height: 10rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-96 {
  width: 24rem;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-x-1 {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize {
  resize: both;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r-2 {
  border-right-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-blue-500\/40 {
  border-color: rgb(59 130 246 / 0.4);
}
.border-border {
  border-color: var(--border);
}
.border-current {
  border-color: currentColor;
}
.border-cyan-400\/15 {
  border-color: rgb(34 211 238 / 0.15);
}
.border-cyan-400\/30 {
  border-color: rgb(34 211 238 / 0.3);
}
.border-cyan-400\/50 {
  border-color: rgb(34 211 238 / 0.5);
}
.border-cyan-400\/60 {
  border-color: rgb(34 211 238 / 0.6);
}
.border-gray-500\/40 {
  border-color: rgb(107 114 128 / 0.4);
}
.border-green-400\/60 {
  border-color: rgb(74 222 128 / 0.6);
}
.border-green-500\/40 {
  border-color: rgb(34 197 94 / 0.4);
}
.border-muted {
  border-color: var(--muted);
}
.border-neon-cyan {
  --tw-border-opacity: 1;
  border-color: rgb(0 212 200 / var(--tw-border-opacity, 1));
}
.border-neon-cyan\/60 {
  border-color: rgb(0 212 200 / 0.6);
}
.border-orange-400\/50 {
  border-color: rgb(251 146 60 / 0.5);
}
.border-primary {
  border-color: var(--primary);
}
.border-purple-400\/60 {
  border-color: rgb(192 132 252 / 0.6);
}
.border-red-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}
.border-red-400\/50 {
  border-color: rgb(248 113 113 / 0.5);
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-red-500\/50 {
  border-color: rgb(239 68 68 / 0.5);
}
.border-red-500\/60 {
  border-color: rgb(239 68 68 / 0.6);
}
.border-red-700\/60 {
  border-color: rgb(185 28 28 / 0.6);
}
.border-teal-400\/60 {
  border-color: rgb(45 212 191 / 0.6);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-yellow-400\/40 {
  border-color: rgb(250 204 21 / 0.4);
}
.border-yellow-400\/60 {
  border-color: rgb(250 204 21 / 0.6);
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-background {
  background-color: var(--background);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}
.bg-cyan-400\/10 {
  background-color: rgb(34 211 238 / 0.1);
}
.bg-cyan-400\/20 {
  background-color: rgb(34 211 238 / 0.2);
}
.bg-cyan-400\/5 {
  background-color: rgb(34 211 238 / 0.05);
}
.bg-destructive {
  background-color: var(--destructive);
}
.bg-gray-500\/20 {
  background-color: rgb(107 114 128 / 0.2);
}
.bg-green-400\/10 {
  background-color: rgb(74 222 128 / 0.1);
}
.bg-green-400\/5 {
  background-color: rgb(74 222 128 / 0.05);
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-neon-cyan\/10 {
  background-color: rgb(0 212 200 / 0.1);
}
.bg-neon-cyan\/5 {
  background-color: rgb(0 212 200 / 0.05);
}
.bg-orange-400\/10 {
  background-color: rgb(251 146 60 / 0.1);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-purple-400\/10 {
  background-color: rgb(192 132 252 / 0.1);
}
.bg-purple-400\/5 {
  background-color: rgb(192 132 252 / 0.05);
}
.bg-red-400\/10 {
  background-color: rgb(248 113 113 / 0.1);
}
.bg-red-900\/10 {
  background-color: rgb(127 29 29 / 0.1);
}
.bg-red-900\/15 {
  background-color: rgb(127 29 29 / 0.15);
}
.bg-red-900\/20 {
  background-color: rgb(127 29 29 / 0.2);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-space-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(5 5 8 / var(--tw-bg-opacity, 1));
}
.bg-teal-400\/10 {
  background-color: rgb(45 212 191 / 0.1);
}
.bg-teal-400\/5 {
  background-color: rgb(45 212 191 / 0.05);
}
.bg-transparent {
  background-color: transparent;
}
.bg-void {
  --tw-bg-opacity: 1;
  background-color: rgb(5 5 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400\/10 {
  background-color: rgb(250 204 21 / 0.1);
}
.bg-yellow-400\/5 {
  background-color: rgb(250 204 21 / 0.05);
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.text-center {
  text-align: center;
}
.font-display {
  font-family: Inter, system-ui, sans-serif;
}
.font-mono {
  font-family: "SF Mono", monospace;
}
.font-orbitron {
  font-family: Orbitron, system-ui, sans-serif;
}
.font-rajdhani {
  font-family: Rajdhani, system-ui, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.uppercase {
  text-transform: uppercase;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.35em\] {
  letter-spacing: 0.35em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent {
  color: var(--accent);
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.text-cyan-300\/80 {
  color: rgb(103 232 249 / 0.8);
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-400\/40 {
  color: rgb(34 211 238 / 0.4);
}
.text-cyan-400\/45 {
  color: rgb(34 211 238 / 0.45);
}
.text-cyan-400\/50 {
  color: rgb(34 211 238 / 0.5);
}
.text-cyan-400\/60 {
  color: rgb(34 211 238 / 0.6);
}
.text-cyan-400\/80 {
  color: rgb(34 211 238 / 0.8);
}
.text-destructive {
  color: var(--destructive);
}
.text-destructive-foreground {
  color: var(--destructive-foreground);
}
.text-foreground {
  color: var(--foreground);
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  color: var(--muted-foreground);
}
.text-neon-cyan {
  --tw-text-opacity: 1;
  color: rgb(0 212 200 / var(--tw-text-opacity, 1));
}
.text-neon-cyan\/20 {
  color: rgb(0 212 200 / 0.2);
}
.text-neon-cyan\/30 {
  color: rgb(0 212 200 / 0.3);
}
.text-neon-cyan\/40 {
  color: rgb(0 212 200 / 0.4);
}
.text-neon-cyan\/60 {
  color: rgb(0 212 200 / 0.6);
}
.text-neon-cyan\/80 {
  color: rgb(0 212 200 / 0.8);
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-primary {
  color: var(--primary);
}
.text-primary-foreground {
  color: var(--primary-foreground);
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-300\/70 {
  color: rgb(252 165 165 / 0.7);
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-400\/70 {
  color: rgb(248 113 113 / 0.7);
}
.text-red-400\/80 {
  color: rgb(248 113 113 / 0.8);
}
.text-secondary-foreground {
  color: var(--secondary-foreground);
}
.text-teal-300 {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-yellow-300\/70 {
  color: rgb(253 224 71 / 0.7);
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.accent-cyan-400 {
  accent-color: #22d3ee;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.\!running {
  animation-play-state: running !important;
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
/* Violet glow text — GUEST MODE header / guide line */
/* Violet smoked-glass panel surface (0.6 uniform opacity) */
/* Violet neon button — guest Exit / Teleport actions */
/* ── TERRAIN control styling (GROUND tab TERRAIN sub-section) ────── */
/* Reuses the existing ARC holo/cyan language — no new design system.
     A compact vertical ramp swatch previews the height color ramp; the
     brush mode buttons reuse the shader-toggle-row + toggle-pill pattern. */
/* Height ramp preview — vertical gradient swatch of the 5-stop ramp */
/* Brush mode chip — raise (white) / lower (black) paint indicator */
.terrain-brush-chip.raise {
    background: #ffffff;
  }
.terrain-brush-chip.lower {
    background: #050508;
  }
/* ── SYSTEM MAP (ARCVAULT SYSTEM MAP tab) ───────────────────────── */
/* React Flow boxes-and-connections diagram. Boxes carry a status class
     (map-active / map-planned / map-removed) that drives the accent wash,
     border tint, and status pill. All surfaces consume OKLCH tokens. */
/* Group label — uppercase, letter-spaced, dim cyan */
.map-group-label {
    color: oklch(var(--map-group-label));
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
/* Base node (box) — rounded, subtle border, click affordance */
.map-node {
    background: oklch(var(--map-node-bg));
    border: 1px solid oklch(var(--map-node-border));
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s
      ease;
  }
.map-node:hover {
    border-color: oklch(var(--map-node-hover-border));
    box-shadow: 0 0 0 1px oklch(var(--map-node-hover-border)), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
  }
.map-node:focus-visible {
    outline: 2px solid oklch(var(--map-node-hover-border));
    outline-offset: 2px;
  }
/* Node title — display font, clear hierarchy */
.map-node-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }
/* Node one-line description — plain language, dim body text */
.map-node-desc {
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.4;
    color: oklch(var(--muted-foreground));
  }
/* Status pill — color-coded, reads at a glance */
.map-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(var(--map-status-text));
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
  }
.map-status-pill::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
  }
/* ACTIVE — green wash + green border tint + green pill */
.map-active {
    background: linear-gradient(
      180deg,
      oklch(var(--map-active-soft)),
      oklch(var(--map-node-bg))
    );
    border-color: oklch(var(--map-active) / 0.55);
  }
.map-active .map-status-pill {
    background: oklch(var(--map-active-soft));
    color: oklch(var(--map-active));
  }
/* PLANNED — grey wash + grey pill */
.map-planned {
    background: linear-gradient(
      180deg,
      oklch(var(--map-planned-soft)),
      oklch(var(--map-node-bg))
    );
    border-color: oklch(var(--map-planned) / 0.5);
  }
.map-planned .map-status-pill {
    background: oklch(var(--map-planned-soft));
    color: oklch(var(--map-planned));
  }
/* REMOVED — dim red accent, struck-through title, muted body */
.map-removed {
    background: linear-gradient(
      180deg,
      oklch(var(--map-removed-soft)),
      oklch(var(--map-node-bg))
    );
    border-color: oklch(var(--map-removed) / 0.45);
    border-style: dashed;
  }
.map-removed .map-node-title {
    color: oklch(var(--muted-foreground));
    text-decoration: line-through;
    text-decoration-color: oklch(var(--map-removed));
  }
.map-removed .map-status-pill {
    background: oklch(var(--map-removed-soft));
    color: oklch(var(--map-removed));
    text-decoration: line-through;
    text-decoration-color: oklch(var(--map-removed));
  }
/* Detail panel — card with close action, floats over the map */
.map-detail-panel {
    background: oklch(var(--map-panel-bg));
    border: 1px solid oklch(var(--map-panel-border));
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0
      rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
.map-detail-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid oklch(var(--map-panel-border));
    color: oklch(var(--muted-foreground));
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
.map-detail-close:hover {
    color: oklch(var(--foreground));
    border-color: oklch(var(--map-node-hover-border));
    background: oklch(var(--map-node-hover-border) / 0.1);
  }
.map-detail-field {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: oklch(var(--muted-foreground));
  }
.map-detail-value {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: oklch(var(--foreground));
  }
/* ── TOOLS TAB (ARC Vault) ───────────────────────────────────────── */
/* Tool row — admin management card listing one tool with its name,
     domain, and an 'Allow in guest panel' toggle. Cyan holo language,
     mirrors the SYSTEM MAP node treatment. */
/* Tool row — spacious admin card. Left column carries the tool name +
     description; right column holds the two role toggles (Guest / User).
     Generous padding and a column gap keep everything legible. */
.tools-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: oklch(var(--tools-row-bg));
    border: 1px solid oklch(var(--tools-row-border));
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s
      ease;
  }
.tools-row:hover {
    border-color: oklch(var(--tools-row-hover));
    box-shadow: 0 0 0 1px oklch(var(--tools-row-hover)), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
  }
.tools-row:focus-within {
    outline: 2px solid oklch(var(--tools-row-hover));
    outline-offset: 2px;
  }
/* Text column — name on top, description below, both fully readable */
.tools-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
.tools-row-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--tools-name));
  }
.tools-row-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: oklch(var(--tools-desc));
  }
/* Role toggle cluster — two labeled switches, one per role */
.tools-roles {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
  }
/* Narrow screens: let the row stack so the text column never gets
     squeezed or clipped by the fixed-width role cluster. The two role
     toggles stay clearly labeled and visually distinct (Guest violet,
     User cyan) — they just move below the name/description. */
@media (max-width: 640px) {
    .tools-row {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
    }

    .tools-roles {
      flex-shrink: 1;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
  }
/* Single role switch: a visible role label (GUEST / USER) above a
     pill that flips between Allowed (filled + colored) and Allow (dim
     outline). Each role has its own accent hue so the two are never
     visually identical. */
.role-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
.role-toggle-label {
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(var(--role-label));
  }
.role-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 6.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid oklch(var(--role-user-off));
    color: oklch(var(--role-user-off));
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
/* GUEST switch — violet identity */
.role-toggle.guest .role-toggle-btn {
    border-color: oklch(var(--role-guest-off));
    color: oklch(var(--role-guest-off));
  }
.role-toggle.guest .role-toggle-btn.on {
    border-color: oklch(var(--role-guest-on) / 0.6);
    color: oklch(var(--role-guest-on));
    background: oklch(var(--role-guest-on) / 0.14);
    box-shadow: 0 0 8px oklch(var(--role-guest-on) / 0.3);
  }
.role-toggle.guest .role-toggle-btn.on:hover {
    border-color: oklch(var(--role-guest-on));
    box-shadow: 0 0 12px oklch(var(--role-guest-on) / 0.45);
  }
/* USER switch — cyan admin identity */
.role-toggle.user .role-toggle-btn {
    border-color: oklch(var(--role-user-off));
    color: oklch(var(--role-user-off));
  }
.role-toggle.user .role-toggle-btn.on {
    border-color: oklch(var(--role-user-on) / 0.6);
    color: oklch(var(--role-user-on));
    background: oklch(var(--role-user-on) / 0.14);
    box-shadow: 0 0 8px oklch(var(--role-user-on) / 0.3);
  }
.role-toggle.user .role-toggle-btn.on:hover {
    border-color: oklch(var(--role-user-on));
    box-shadow: 0 0 12px oklch(var(--role-user-on) / 0.45);
  }
.tools-empty {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: oklch(var(--tools-empty));
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed oklch(var(--tools-row-border));
    border-radius: 12px;
  }
/* ── ARC VAULT TAB BAR (registry-driven) ─────────────────────────── */
/* Reusable segmented control. Renders a registry of tabs; labels are
     never truncated — the bar wraps onto more lines or scrolls instead.
     Active tab: cyan accent pill with a soft glow. Inactive: dim but
     readable, lifts on hover. Smooth 0.2s transitions throughout. */
.arc-tabbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem;
    background: oklch(var(--tabbar-bg));
    border: 1px solid oklch(var(--tabbar-border));
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
.arc-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: oklch(var(--tab-inactive));
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    transition:
      color 0.2s ease, background 0.2s ease, border-color 0.2s ease,
      box-shadow 0.2s ease, transform 0.2s ease;
  }
.arc-tab:hover {
    color: oklch(var(--tab-hover));
    background: oklch(var(--tab-active-bg));
  }
.arc-tab:focus-visible {
    outline: 2px solid oklch(var(--tab-active));
    outline-offset: 2px;
  }
.arc-tab.active {
    color: oklch(var(--tab-active));
    background: oklch(var(--tab-active-soft));
    border-color: oklch(var(--tab-active) / 0.45);
    box-shadow: 0 0 0 1px oklch(var(--tab-active) / 0.25), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
  }
.arc-tab.active:hover {
    color: oklch(var(--tab-active));
    box-shadow: 0 0 0 1px oklch(var(--tab-active) / 0.4), 0 0 12px
      oklch(var(--tab-active) / 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
/* Optional small count badge (e.g. number of items in a tab) */
.arc-tab.active .arc-tab-badge {
    background: oklch(var(--tab-active) / 0.18);
    color: oklch(var(--tab-active));
  }
/* ── GUEST DOCKING STATION (violet identity) ─────────────────────── */
/* Compact dock on the right side of the guest panel. Same side-chip
     pattern as the admin dock (Law 28.9b) but violet-tinted and rendered
     only with guest-allowed tools. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono.woff2") format("woff2");
  font-display: swap;
}
/* ── Holographic card styles ─────────────────────────────────────── */
.holo-card {
  background: rgba(14, 20, 45, 0.85);
  border: 1px solid rgba(77, 159, 255, 0.4);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(77, 159, 255, 0.15), inset 0 1px 0
    rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.holo-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(77, 159, 255, 0.6),
    rgba(0, 212, 200, 0.4),
    transparent
  );
  pointer-events: none;
}
.holo-card:hover {
  border-color: rgba(77, 159, 255, 0.7);
  box-shadow: 0 0 24px rgba(77, 159, 255, 0.25), 0 0 60px
    rgba(0, 212, 200, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* ── Holographic panel (dialog/editor panels) ─────────────────────── */
.holo-panel {
  background: rgba(10, 16, 38, 0.92);
  border: 1px solid rgba(0, 212, 200, 0.35);
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0, 212, 200, 0.12), 0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* ── World number badge ───────────────────────────────────────────── */
.world-number {
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #4d9fff;
  text-shadow: 0 0 8px rgba(77, 159, 255, 0.9), 0 0 24px rgba(77, 159, 255, 0.5),
    0 0 48px rgba(77, 159, 255, 0.25);
  font-family: "SF Pro Display", "Inter", system-ui, monospace;
  transform: perspective(200px) rotateX(3deg);
  transform-origin: center bottom;
  display: block;
  text-align: center;
}
.world-number-2 {
  color: #00d4c8;
  text-shadow: 0 0 8px rgba(0, 212, 200, 0.9), 0 0 24px rgba(0, 212, 200, 0.5),
    0 0 48px rgba(0, 212, 200, 0.25);
}
.world-number-3 {
  color: #a855f7;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.9), 0 0 24px rgba(168, 85, 247, 0.5),
    0 0 48px rgba(168, 85, 247, 0.25);
}
.world-number-4 {
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.9), 0 0 24px rgba(34, 197, 94, 0.5),
    0 0 48px rgba(34, 197, 94, 0.25);
}
/* Cycle colours for worlds 5+ by reusing modular classes */
/* ── Neon button ─────────────────────────────────────────────────── */
.btn-neon {
  background: linear-gradient(
    135deg,
    rgba(77, 159, 255, 0.15),
    rgba(0, 212, 200, 0.1)
  );
  border: 1px solid rgba(77, 159, 255, 0.5);
  color: #4d9fff;
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-neon:hover {
  background: linear-gradient(
    135deg,
    rgba(77, 159, 255, 0.3),
    rgba(0, 212, 200, 0.2)
  );
  border-color: rgba(77, 159, 255, 0.9);
  box-shadow: 0 0 16px rgba(77, 159, 255, 0.4);
  color: #ffffff;
}
.btn-neon-danger {
  border-color: rgba(224, 80, 80, 0.5);
  color: #e05050;
}
.btn-neon-danger:hover {
  background: rgba(224, 80, 80, 0.15);
  border-color: rgba(224, 80, 80, 0.9);
  box-shadow: 0 0 16px rgba(224, 80, 80, 0.3);
  color: #ff8080;
}
/* ── Space background with subtle grid ───────────────────────────── */
.space-bg {
  background-color: #050508;
  background-image: radial-gradient(
      ellipse at 20% 20%,
      rgba(77, 159, 255, 0.04) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(0, 212, 200, 0.03) 0%,
      transparent 60%
    ), linear-gradient(rgba(77, 159, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 159, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
  min-height: 100vh;
}
/* ── Shader toggle rows ──────────────────────────────────────────── */
.shader-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(77, 159, 255, 0.06);
  border: 1px solid rgba(77, 159, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
}
.shader-toggle-row:hover {
  background: rgba(77, 159, 255, 0.12);
  border-color: rgba(77, 159, 255, 0.3);
}
.shader-toggle-row.active {
  background: rgba(77, 159, 255, 0.15);
  border-color: rgba(77, 159, 255, 0.5);
}
.toggle-pill {
  padding: 0.15rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  min-width: 40px;
  text-align: center;
}
.toggle-pill-on {
  background: rgba(77, 159, 255, 0.25);
  color: #4d9fff;
  border: 1px solid rgba(77, 159, 255, 0.6);
  box-shadow: 0 0 8px rgba(77, 159, 255, 0.3);
}
.toggle-pill-off {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ── Glow text headings ──────────────────────────────────────────── */
.glow-text-cyan {
  color: #4d9fff;
  text-shadow: 0 0 6px rgba(77, 159, 255, 0.8), 0 0 20px rgba(77, 159, 255, 0.4);
}
.glow-text-white {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 0 20px
    rgba(77, 159, 255, 0.2);
}
/* ── Scrollbar (dark, minimal) ───────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}
::-webkit-scrollbar-thumb {
  background: rgba(77, 159, 255, 0.3);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(77, 159, 255, 0.6);
}
/* ── Font utility classes ──────────────────────────────────────────── */
.font-orbitron {
  font-family: "Orbitron", system-ui, sans-serif;
}
.font-rajdhani {
  font-family: "Rajdhani", system-ui, sans-serif;
}
/* ── Neon glow text-shadow classes ───────────────────────────────── */
/* Cyan: luminous core + mid halo + outer bloom */
.neon-glow-cyan {
  text-shadow: 0 0 4px rgba(0, 212, 200, 1), 0 0 10px rgba(0, 212, 200, 0.95), 0
    0 20px rgba(0, 212, 200, 0.7), 0 0 40px rgba(0, 212, 200, 0.4), 0 0 80px
    rgba(0, 212, 200, 0.15);
}
/* Magenta: luminous core + mid halo + outer bloom */
.neon-glow-magenta {
  text-shadow: 0 0 4px rgba(224, 64, 251, 1), 0 0 10px rgba(224, 64, 251, 0.9),
    0 0 20px rgba(224, 64, 251, 0.65), 0 0 40px rgba(224, 64, 251, 0.35), 0 0
    80px rgba(224, 64, 251, 0.12);
}
/* ── 3D extruded heading glow — for "ARC VR" main title ──────────── */
/* Bright cyan core + deep teal offset shadow = extrude / depth illusion */
.neon-glow-3d {
  /* Core glow — sharp and bright */
  text-shadow:
    0 0 2px rgba(0, 212, 200, 1),
    0 0 8px rgba(0, 212, 200, 1),
    0 0 16px rgba(0, 212, 200, 0.85),
    /* Mid bloom */
    0 0 32px rgba(0, 212, 200, 0.55),
    0 0 64px rgba(0, 212, 200, 0.25),
    /* Depth shadow — offset downward-right in darker indigo/teal for 3D illusion */
    2px 3px 0 rgba(0, 80, 100, 0.9),
    3px 5px 0 rgba(0, 60, 80, 0.85),
    4px 7px 2px rgba(0, 40, 60, 0.7),
    5px 9px 6px rgba(0, 20, 40, 0.5),
    /* Outer purple halo for the two-tone contrast */
    0 0 90px rgba(120, 0, 180, 0.2),
    0 0 120px rgba(80, 0, 120, 0.12);
}
@keyframes scan-bar {
  0% {
    left: -4rem;
  }
  100% {
    left: 100%;
  }
}
@keyframes cloud-drift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(12px);
  }
}
@keyframes cloud-pulse {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1.0;
  }
}
/* ── Slider overrides ────────────────────────────────────────────── */
input[type="range"] {
  accent-color: #4d9fff;
  cursor: pointer;
}
/* Force Radix slider thumb to be large and grabbable */
[data-radix-slider-thumb] {
  width: 24px !important;
  height: 24px !important;
  background: #4d9fff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 8px rgba(77, 159, 255, 0.6) !important;
  cursor: grab !important;
}
[data-radix-slider-thumb]:active {
  cursor: grabbing !important;
  box-shadow: 0 0 16px rgba(77, 159, 255, 0.9) !important;
}
[data-radix-slider-track] {
  background: rgba(77, 159, 255, 0.2) !important;
}
[data-radix-slider-range] {
  background: #4d9fff !important;
}
/* ── GUEST MODE panel utilities ───────────────────────────────────── */
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.hover\:border-accent:hover {
  border-color: var(--accent);
}
.hover\:border-border:hover {
  border-color: var(--border);
}
.hover\:border-cyan-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(103 232 249 / var(--tw-border-opacity, 1));
}
.hover\:border-cyan-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.hover\:border-cyan-400\/50:hover {
  border-color: rgb(34 211 238 / 0.5);
}
.hover\:border-cyan-400\/80:hover {
  border-color: rgb(34 211 238 / 0.8);
}
.hover\:border-green-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.hover\:border-neon-cyan:hover {
  --tw-border-opacity: 1;
  border-color: rgb(0 212 200 / var(--tw-border-opacity, 1));
}
.hover\:border-orange-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}
.hover\:border-primary:hover {
  border-color: var(--primary);
}
.hover\:border-purple-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.hover\:border-red-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.hover\:border-red-400\/70:hover {
  border-color: rgb(248 113 113 / 0.7);
}
.hover\:border-red-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.hover\:border-red-500\/40:hover {
  border-color: rgb(239 68 68 / 0.4);
}
.hover\:border-teal-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(94 234 212 / var(--tw-border-opacity, 1));
}
.hover\:border-white\/40:hover {
  border-color: rgb(255 255 255 / 0.4);
}
.hover\:border-yellow-400\/70:hover {
  border-color: rgb(250 204 21 / 0.7);
}
.hover\:bg-accent:hover {
  background-color: var(--accent);
}
.hover\:bg-cyan-400\/10:hover {
  background-color: rgb(34 211 238 / 0.1);
}
.hover\:bg-cyan-400\/20:hover {
  background-color: rgb(34 211 238 / 0.2);
}
.hover\:bg-cyan-400\/5:hover {
  background-color: rgb(34 211 238 / 0.05);
}
.hover\:bg-green-400\/20:hover {
  background-color: rgb(74 222 128 / 0.2);
}
.hover\:bg-green-500\/10:hover {
  background-color: rgb(34 197 94 / 0.1);
}
.hover\:bg-neon-cyan\/10:hover {
  background-color: rgb(0 212 200 / 0.1);
}
.hover\:bg-neon-cyan\/15:hover {
  background-color: rgb(0 212 200 / 0.15);
}
.hover\:bg-neon-cyan\/20:hover {
  background-color: rgb(0 212 200 / 0.2);
}
.hover\:bg-orange-400\/20:hover {
  background-color: rgb(251 146 60 / 0.2);
}
.hover\:bg-purple-400\/20:hover {
  background-color: rgb(192 132 252 / 0.2);
}
.hover\:bg-red-400\/20:hover {
  background-color: rgb(248 113 113 / 0.2);
}
.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}
.hover\:bg-red-700\/20:hover {
  background-color: rgb(185 28 28 / 0.2);
}
.hover\:bg-red-900\/10:hover {
  background-color: rgb(127 29 29 / 0.1);
}
.hover\:bg-red-900\/30:hover {
  background-color: rgb(127 29 29 / 0.3);
}
.hover\:bg-red-900\/40:hover {
  background-color: rgb(127 29 29 / 0.4);
}
.hover\:bg-teal-400\/20:hover {
  background-color: rgb(45 212 191 / 0.2);
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-yellow-400\/10:hover {
  background-color: rgb(250 204 21 / 0.1);
}
.hover\:bg-yellow-400\/20:hover {
  background-color: rgb(250 204 21 / 0.2);
}
.hover\:text-accent:hover {
  color: var(--accent);
}
.hover\:text-accent-foreground:hover {
  color: var(--accent-foreground);
}
.hover\:text-cyan-400:hover {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: var(--foreground);
}
.hover\:text-muted-foreground:hover {
  color: var(--muted-foreground);
}
.hover\:text-neon-cyan\/60:hover {
  color: rgb(0 212 200 / 0.6);
}
.hover\:text-primary:hover {
  color: var(--primary);
}
.hover\:text-red-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-white\/90:hover {
  color: rgb(255 255 255 / 0.9);
}
.hover\:text-yellow-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.focus\:border-cyan-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.focus\:border-white\/40:focus {
  border-color: rgb(255 255 255 / 0.4);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-cyan-400\/40:focus {
  --tw-ring-color: rgb(34 211 238 / 0.4);
}
.focus-visible\:border-ring:focus-visible {
  border-color: var(--ring);
}
.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.dark\:border-input:is(.dark *) {
  border-color: var(--input);
}
@media (min-width: 768px) {

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) {

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}