/* 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  */

    /* ── 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;
}
.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-24 {
  height: 6rem;
}
.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-24 {
  width: 6rem;
}
.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);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.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;
}
.pb-\[calc\(0\.75rem\+env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}
.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-out {
  transition-timing-function: cubic-bezier(0, 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));
  }
}
.fade-out {
  --tw-exit-opacity: 0;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\!running {
  animation-play-state: running !important;
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
/* ── 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 {
    color: oklch(var(--tab-active)) !important;
    background: oklch(var(--tab-active-soft)) !important;
    border-color: oklch(var(--tab-active) / 0.45) !important;
    box-shadow: 0 0 0 1px oklch(var(--tab-active) / 0.25), inset 0 1px 0
      rgba(255, 255, 255, 0.06) !important;
  }
.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);
  }
.arc-tab.\!active:hover {
    color: oklch(var(--tab-active)) !important;
    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) !important;
  }
@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 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);
}
/* ── 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;
}
/* ── 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;
}
/* ── 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);
}
/* ── Hero emblem hand-off flare ───────────────────────────────────── */
/* Fires once when the intro animation hands off to the real 2D emblem
   (emblemHidden flips false). One continuous motion: a fast bright flash
   that peaks at the hand-off, eases down into a softer pulse, then settles
   back to the emblem's normal cyan. Purely additive — filter/drop-shadow
   only, so the element's layout box and measured centre never change.

   The hero emblem is the transparent-background mark
   (/assets/arc-icon-mark.png), so each drop-shadow follows the cyan mark's
   alpha silhouette — the rounded-square ring and the A, R and C — rather
   than the original asset's opaque black square tile. Two drop-shadows are
   layered per stop: a tight bright white-edged one over a wider cyan one,
   giving a cyan body with a bright white edge. */
@keyframes emblem-flare {
  0% {
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0))
      drop-shadow(0 0 0 rgba(0, 212, 200, 0));
  }
  6% {
    filter: brightness(2.4) saturate(1.35)
      drop-shadow(0 0 7px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 30px rgba(0, 212, 200, 0.9));
  }
  18% {
    filter: brightness(1.7) saturate(1.2)
      drop-shadow(0 0 5px rgba(255, 255, 255, 0.6))
      drop-shadow(0 0 22px rgba(0, 212, 200, 0.7));
  }
  42% {
    filter: brightness(1.35) saturate(1.1)
      drop-shadow(0 0 3px rgba(255, 255, 255, 0.35))
      drop-shadow(0 0 16px rgba(0, 212, 200, 0.55));
  }
  68% {
    filter: brightness(1.15) saturate(1.05)
      drop-shadow(0 0 2px rgba(255, 255, 255, 0.2))
      drop-shadow(0 0 11px rgba(0, 212, 200, 0.4));
  }
  100% {
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0))
      drop-shadow(0 0 0 rgba(0, 212, 200, 0));
  }
}
.emblem-flare {
  animation: emblem-flare 2.4s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  will-change: filter;
}
@media (prefers-reduced-motion: reduce) {
  .emblem-flare {
    animation: none;
  }
}
/* ── Repeating emblem pulse — single, quicker beat ────────────────── */
/* Used ONLY on repeating cycles (pulseCycle > 0). Reuses the existing
   `emblem-flare` keyframes (same easing, same stop percentages) at half
   the duration (~1.2s), and deliberately omits the `emblem-top-sweep`
   streak so the repeating pulse is ONE beat instead of two overlapping
   ones. The first hand-over (pulseCycle === 0) still uses `.emblem-flare`
   + `.emblem-top-sweep` unchanged. */
.emblem-flare-fast {
  animation: emblem-flare 1.2s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  will-change: filter;
}
@media (prefers-reduced-motion: reduce) {
  .emblem-flare-fast {
    animation: none;
  }
}
/* ── Hero emblem top-edge sweep (the frame's OWN top stroke) ──────── */
/* One-shot cyan glow pulse that travels left-to-right along the TOP edge
   of the emblem's baked-in rounded-square cyan ring. The ring is part of
   the emblem image (arc-icon-mark.png) — there is no DOM element for it —
   so the pulse is painted by the emblem element's OWN ::after pseudo-
   element and masked to the ring's top stroke. Nothing is layered on top
   of the frame's top line: the glow IS the frame's top edge lighting up.

   The mask is a thin horizontal band at the ring's top stroke (the mark's
   content is ~96.65% x 97.45% of the 96x96 frame, so the ring's top edge
   sits just inside the img's top edge). The streak translates from just
   off the left edge to just off the right edge, so it never extends beyond
   the emblem and never crosses a border. Transform/opacity only — no
   layout property is animated, so the emblem's box and measured centre are
   untouched. `both` fill leaves the streak parked off-screen at the end,
   so the one-shot never replays or lingers. */
@keyframes emblem-top-sweep {
  0% {
    transform: translateX(-110%);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateX(110%);
    opacity: 0;
  }
}
.emblem-top-sweep::after {
  content: "";
  position: absolute;
  top: 1.3%;
  left: 1.7%;
  right: 1.7%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 240, 255, 0) 0%,
    rgba(0, 240, 255, 0.85) 45%,
    #ffffff 50%,
    rgba(0, 240, 255, 0.85) 55%,
    rgba(0, 240, 255, 0) 100%
  );
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.9), 0 0 14px rgba(0, 240, 255, 0.55);
  /* Masked to the ring's top stroke: only the band over the frame's top
     edge shows, so the pulse reads as the frame's own top line glowing. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 0.6px,
    #000 1.4px,
    transparent 2px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 0.6px,
    #000 1.4px,
    transparent 2px
  );
  animation: emblem-top-sweep 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  will-change: transform, opacity;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .emblem-top-sweep::after {
    animation: none;
    opacity: 0;
  }
}
/* ── "ARC VR" wordmark pulse (synchronised with the emblem) ───────── */
/* One-shot glow lift on the wordmark that fires at the SAME instant as
   the emblem's hand-over pulse. The emblem's pulse is a one-shot CSS
   animation replayed by remounting the element; the wordmark rides the
   SAME `pulseCycle` state and is remounted in the same render, so both
   animations start together on every 30s cycle.

   The wordmark's cyan (#00e5ff) and its resting text-shadow are set
   inline on the <h1>, so this animation only layers a brightness lift
   and a stronger cyan glow on top, easing back to the resting look at
   100%. Filter/text-shadow only — no layout property is animated, so
   the heading's box and position never shift. `both` fill leaves it at
   the resting state at the end, so the one-shot never lingers. */
@keyframes arc-wordmark-pulse {
  0% {
    filter: brightness(1);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.9), 0 0 24px
      rgba(0, 229, 255, 0.5), 0 0 40px rgba(0, 229, 255, 0.3);
  }
  6% {
    filter: brightness(1.55);
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.95), 0 0 34px
      rgba(0, 229, 255, 0.95), 0 0 60px rgba(0, 229, 255, 0.6);
  }
  18% {
    filter: brightness(1.35);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.6), 0 0 28px
      rgba(0, 229, 255, 0.8), 0 0 50px rgba(0, 229, 255, 0.45);
  }
  42% {
    filter: brightness(1.18);
    text-shadow: 0 0 13px rgba(0, 229, 255, 0.9), 0 0 26px
      rgba(0, 229, 255, 0.6), 0 0 44px rgba(0, 229, 255, 0.35);
  }
  68% {
    filter: brightness(1.08);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.9), 0 0 25px
      rgba(0, 229, 255, 0.55), 0 0 42px rgba(0, 229, 255, 0.32);
  }
  100% {
    filter: brightness(1);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.9), 0 0 24px
      rgba(0, 229, 255, 0.5), 0 0 40px rgba(0, 229, 255, 0.3);
  }
}
.arc-wordmark-pulse {
  animation: arc-wordmark-pulse 2.4s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  will-change: filter;
}
@media (prefers-reduced-motion: reduce) {
  .arc-wordmark-pulse {
    animation: none;
  }
}
/* ── Repeating wordmark pulse — quicker beat, in sync with the emblem ── */
/* Used ONLY on repeating cycles (pulseCycle > 0). Reuses the existing
   `arc-wordmark-pulse` keyframes (same easing, same stop percentages) at
   half the duration (~1.2s) so it stays in sync with `.emblem-flare-fast`.
   The first hand-over (pulseCycle === 0) still uses `.arc-wordmark-pulse`
   unchanged. */
.arc-wordmark-pulse-fast {
  animation: arc-wordmark-pulse 1.2s cubic-bezier(0.16, 0.84, 0.3, 1) both;
  will-change: filter;
}
@media (prefers-reduced-motion: reduce) {
  .arc-wordmark-pulse-fast {
    animation: none;
  }
}
/* ── 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: 640px) {

  .sm\:inline {
    display: inline;
  }
}
@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;
}