/* @xyflow/react/dist/style.css */
/* 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));
}

/* @mantine/core/styles/Input.css */
.m_6c018570 {
  position: relative;
  margin-top: var(--input-margin-top, 0rem);
  margin-bottom: var(--input-margin-bottom, 0rem);

  --input-height-xs: calc(1.875rem * var(--mantine-scale));
  --input-height-sm: calc(2.25rem * var(--mantine-scale));
  --input-height-md: calc(2.625rem * var(--mantine-scale));
  --input-height-lg: calc(3.125rem * var(--mantine-scale));
  --input-height-xl: calc(3.75rem * var(--mantine-scale));

  --input-padding-y-xs: calc(0.3125rem * var(--mantine-scale));
  --input-padding-y-sm: calc(0.375rem * var(--mantine-scale));
  --input-padding-y-md: calc(0.5rem * var(--mantine-scale));
  --input-padding-y-lg: calc(0.625rem * var(--mantine-scale));
  --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));

  --input-height: var(--input-height-sm);
  --input-radius: var(--mantine-radius-default);

  --input-cursor: text;
  --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
  --input-padding: calc(var(--input-height) / 3);
  --input-padding-inline-start: var(--input-padding);
  --input-padding-inline-end: var(--input-padding);
  --input-placeholder-color: var(--mantine-color-placeholder);
  --input-color: var(--mantine-color-text);
  --input-disabled-bg: var(--mantine-color-disabled);
  --input-disabled-color: var(--mantine-color-disabled-color);

  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))));

  --input-right-section-size: var(
    --input-right-section-width,
    calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)))
  );

  --input-size: var(--input-height);

  --section-y: calc(0.0625rem * var(--mantine-scale));
  --left-section-start: calc(0.0625rem * var(--mantine-scale));
  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);

  --right-section-end: calc(0.0625rem * var(--mantine-scale));
  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
}

  .m_6c018570[data-variant='unstyled'] {
    --input-padding: 0;
    --input-padding-y: 0;
    --input-padding-inline-start: 0;
    --input-padding-inline-end: 0;
  }

  .m_6c018570[data-pointer] {
    --input-cursor: pointer;
  }

  .m_6c018570[data-with-bottom-section] {
    --input-bottom-section-height: calc(1.75rem * var(--mantine-scale));
  }

  .m_6c018570[data-multiline] {
    --input-padding-y-xs: calc(0.28125rem * var(--mantine-scale));
    --input-padding-y-sm: calc(0.34375rem * var(--mantine-scale));
    --input-padding-y-md: calc(0.4375rem * var(--mantine-scale));
    --input-padding-y-lg: calc(0.59375rem * var(--mantine-scale));
    --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));

    --input-size: auto;
    --input-line-height: var(--mantine-line-height);
  }

  .m_6c018570[data-with-left-section] {
    --input-padding-inline-start: var(--input-left-section-size);
  }

  .m_6c018570[data-with-right-section] {
    --input-padding-inline-end: var(--input-right-section-size);
  }

  .m_6c018570[data-size='xs'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(2.5625rem * var(--mantine-scale));
      }

  .m_6c018570[data-size='sm'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(3.125rem * var(--mantine-scale));
      }

  .m_6c018570[data-size='md'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(3.75rem * var(--mantine-scale));
      }

  .m_6c018570[data-size='lg'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(4.5rem * var(--mantine-scale));
      }

  .m_6c018570[data-size='xl'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(5.5625rem * var(--mantine-scale));
      }

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
      --input-bd: var(--mantine-color-gray-4);
      --input-bg: var(--mantine-color-white);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='filled'] {
      --input-bd: transparent;
      --input-bg: var(--mantine-color-gray-1);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='unstyled'] {
      --input-bd: transparent;
      --input-bg: transparent;
      --input-bd-focus: transparent;
    }

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='default'] {
      --input-bd: var(--mantine-color-dark-4);
      --input-bg: var(--mantine-color-dark-6);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='filled'] {
      --input-bd: transparent;
      --input-bg: var(--mantine-color-dark-5);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='unstyled'] {
      --input-bd: transparent;
      --input-bg: transparent;
      --input-bd-focus: transparent;
    }

  [data-mantine-color-scheme] .m_6c018570[data-error]:not([data-variant='unstyled']) {
      --input-bd: var(--mantine-color-error);
    }

  [data-mantine-color-scheme] .m_6c018570[data-error] {

    --input-color: var(--mantine-color-error);
    --input-placeholder-color: var(--mantine-color-error);
    --input-section-color: var(--mantine-color-error);
}

  [data-mantine-color-scheme] .m_6c018570[data-success]:not([data-variant='unstyled']) {
      --input-bd: var(--mantine-color-success);
    }

  [data-mantine-color-scheme] .m_6c018570[data-success] {

    --input-section-color: var(--mantine-color-success);
}

  :where([dir="rtl"]) .m_6c018570 {
    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
}

  .m_6c018570[dir='ltr'] {
    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
  }

.m_8fb7ebe7 {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  resize: var(--input-resize, none);
  display: block;
  width: 100%;
  transition: border-color 100ms ease;

  text-align: var(--input-text-align, start);
  color: var(--input-color);
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
  background-color: var(--input-bg);
  font-family: var(--input-font-family, var(--mantine-font-family));
  height: var(--input-size);
  min-height: var(--input-height);
  line-height: var(--input-line-height);
  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));
  border-radius: var(--input-radius);
  padding-inline-start: var(--input-padding-inline-start);
  padding-inline-end: var(--input-padding-inline-end);
  padding-top: var(--input-padding-y, 0rem);
  padding-bottom: var(--input-padding-y, 0rem);
  cursor: var(--input-cursor);
  overflow: var(--input-overflow);
}

/* Used as data attribute in Textarea component, does not have associated prop on the Input component */

.m_8fb7ebe7[data-no-overflow] {
    --input-overflow: hidden;
  }

/* Used as data attribute in JsonInput component, does not have associated prop on the Input component */

.m_8fb7ebe7[data-monospace] {
    --input-font-family: var(--mantine-font-family-monospace);
    --_input-fz: calc(var(--input-fz) - calc(0.125rem * var(--mantine-scale)));
  }

.m_8fb7ebe7:focus,
  .m_8fb7ebe7:focus-within {
    outline: none;
    --input-bd: var(--input-bd-focus);
  }

.m_6c018570[data-error] .m_8fb7ebe7:focus, .m_6c018570[data-error] .m_8fb7ebe7:focus-within {
      --input-bd: var(--mantine-color-error);
    }

.m_6c018570[data-success] .m_8fb7ebe7:focus, .m_6c018570[data-success] .m_8fb7ebe7:focus-within {
      --input-bd: var(--mantine-color-success);
    }

.m_8fb7ebe7::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

.m_8fb7ebe7::-webkit-inner-spin-button,
  .m_8fb7ebe7::-webkit-outer-spin-button,
  .m_8fb7ebe7::-webkit-search-decoration,
  .m_8fb7ebe7::-webkit-search-cancel-button,
  .m_8fb7ebe7::-webkit-search-results-button,
  .m_8fb7ebe7::-webkit-search-results-decoration {
    appearance: none;
  }

.m_8fb7ebe7[type='number'] {
    -moz-appearance: textfield;
  }

.m_8fb7ebe7:disabled,
  .m_8fb7ebe7[data-disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-color);
  }

/* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */

.m_8fb7ebe7:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-color);
  }

.m_8fb7ebe7[readonly] {
    caret-color: transparent;
  }

[data-with-bottom-section] .m_8fb7ebe7 {
    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));
  }

.m_93f4ed57 {
  position: absolute;
  bottom: calc(0.0625rem * var(--mantine-scale));
  left: calc(0.0625rem * var(--mantine-scale));
  right: calc(0.0625rem * var(--mantine-scale));
  height: var(--input-bottom-section-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline: var(--input-padding);
  border-radius: 0 0 var(--input-radius) var(--input-radius);
  pointer-events: all;
  color: var(--mantine-color-dimmed);
  font-size: var(--input-fz, var(--mantine-font-size-sm));
}

.m_82577fc2 {
  pointer-events: var(--section-pointer-events);
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--section-start);
  inset-inline-end: var(--section-end);
  bottom: var(--section-y);
  top: var(--section-y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--section-size);
  border-radius: var(--section-border-radius);
  color: var(--input-section-color, var(--mantine-color-dimmed));
}

.m_82577fc2[data-position='right'] {
    --section-pointer-events: var(--input-right-section-pointer-events);
    --section-end: var(--right-section-end);
    --section-size: var(--input-right-section-size);
    --section-border-radius: var(--right-section-border-radius);
  }

.m_6c018570[data-size='xs'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(2.5625rem * var(--mantine-scale));
      }

.m_6c018570[data-size='sm'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(3.125rem * var(--mantine-scale));
      }

.m_6c018570[data-size='md'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(3.75rem * var(--mantine-scale));
      }

.m_6c018570[data-size='lg'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(4.5rem * var(--mantine-scale));
      }

.m_6c018570[data-size='xl'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(5.5625rem * var(--mantine-scale));
      }

.m_82577fc2[data-position='left'] {
    --section-pointer-events: var(--input-left-section-pointer-events);
    --section-start: var(--left-section-start);
    --section-size: var(--input-left-section-size);
    --section-border-radius: var(--left-section-border-radius);
  }

/* ----- Input.Placeholder ----- */
.m_88bacfd0 {
  color: var(--input-placeholder-color, var(--mantine-color-placeholder));
}
.m_6c018570[data-error] .m_88bacfd0 {
    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));
  }

/* ----- Input.Wrapper ----- */
.m_46b77525 {
  line-height: var(--mantine-line-height);
}

.m_8fdc1311 {
  display: inline-block;
  font-weight: var(--mantine-font-weight-medium);
  overflow-wrap: break-word;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--input-label-size, var(--mantine-font-size-sm));
}

.m_78a94662 {
  color: var(--input-asterisk-color, var(--mantine-color-error));
}

.m_8f816625,
.m_9d9d40e0,
.m_fe47ce59 {
  word-wrap: break-word;
  line-height: 1.2;
  display: block;
  margin: 0;
  padding: 0;
}

.m_8f816625 {
  color: var(--mantine-color-error);
  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
}

.m_9d9d40e0 {
  color: var(--mantine-color-success);
  font-size: var(--input-success-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
}

.m_fe47ce59 {
  color: var(--mantine-color-dimmed);
  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
}

/* web/src/tokens.css */
/* Shared color tokens for every web entry (app, public site, captures, embed)
 * and the docs node cards. Raw colors appear only in custom-property
 * definitions (`npm run check:colors`): components use these, the theme's
 * chrome roles (`--panel`, `--text`, …, set by Appearance.tsx), the brand's
 * `--tt-brand-*` tokens, or tokens they define for themselves. *//* Generated from brand/tokens.json. Platform identity only. */
.node-card-root {
  --tt-brand-ink: #1c1c1b;
  --tt-brand-paper: #fafaf7;
  --tt-brand-orange: #f0442e;
  --tt-brand-mint: #dcebdd;
  --tt-brand-lilac: #ded8f0;
  --tt-brand-muted: #64645f;
  --tt-brand-signal: #f0442e;
  --tt-brand-radius-control: 12px;
  --tt-brand-radius-panel: 28px;
}
.tt-brand-logo {
  display: block;
  flex: none;
  height: auto;
  max-width: 100%;
  color: inherit;
}
.tt-brand-logo--wordmark {
  width: 160px;
}
.tt-brand-logo--mark {
  width: 36px;
}
.node-card-root {
  /* State, themed: `--x` for text, borders and strokes; `--x-strong` for
   * filled surfaces under white text. */
  --danger: #e8776b;
  --danger-strong: #c4473a;
  --ok: #84cfa6;
  --ok-strong: #3fa66b;
  --warning: #e8b04b;
  --warning-strong: #c9932e;
  /* Selection and focus on design surfaces (Frame canvas, layers), and text
   * on a selection fill. */
  --selection: #8bb3ff;
  --selection-ink: #172135;
  /* Port and cable colors by type (`PORT_TYPES` in portTypes.ts reads these). */
  --port-audio: #72c9c1;
  --port-control: #e4b96b;
  --port-video: #7d9cf0;
  --port-midi: #e5636b;
  --port-any: #9a9a94;
  --port-signal: #9fc9c3;
  --port-data: #ded8f0;

  /* Fixed neutrals: on-color text, scrims and shadows. `-aN` is N/16 alpha
   * for black; white steps up from a faint hairline. */
  --white: #fff;
  --black: #000;
  --black-a1: #0001;
  --black-a2: #0002;
  --black-a3: #0003;
  --black-a4: #0004;
  --black-a5: #0005;
  --black-a6: #0006;
  --black-a7: #0007;
  --black-a8: #0008;
  --black-a9: #0009;
  --white-a1: #ffffff18;
  --white-a2: #ffffff22;
  --white-a3: #ffffff30;
  --white-a4: #ffffff38;
  --white-a5: #ffffff50;

  /* Public pages and captures: the brand's warm dark ramp around
   * `--tt-brand-ink` (#1c1c1b) and `--tt-brand-paper`. Fixed, not themed. */
  --stone-100: #f4f4ee;
  --stone-200: #d8d8cc;
  --stone-300: #c8c8ba;
  --stone-400: #b5b5a7;
  --stone-500: #9d9d90;
  --stone-600: #666659;
  --stone-650: #58584e;
  --stone-700: #494940;
  --stone-750: #41413b;
  --stone-800: #3d3d37;
  --stone-850: #30302b;
  --stone-875: #2b2b27;
  --stone-900: #262624;
  --stone-925: #222220;
  --stone-950: #191918;
  --stone-975: #141413;
  --stone-990: #111110;
  --coral: #ff8d73;
  --coral-soft: #ffd3c8;

  /* Community surfaces (feed, discussion, collaboration): a cool dark ramp
   * with one violet accent. Fixed, not themed. */
  --night-text: #eeedf5;
  --night-muted: #b8b6c8;
  --night-subtle: #a3a0b3;
  --night-800: #272732;
  --night-850: #24252e;
  --night-900: #1b1c24;
  --night-925: #16171d;
  --night-950: #14151b;
  --night-975: #111219;
  --night-990: #101116;
  --night-accent: #c2b2ff;
  --night-danger: #ffc1c9;
  --night-ok: #a3d5ba;
}
.node-card-root[data-scheme='light'] {
  --danger: #c4392f;
  --danger-strong: #b83a2e;
  --ok: #2f7a4f;
  --ok-strong: #2b7a48;
  --warning: #8a6512;
  --warning-strong: #9a6512;
  --selection: #3d6fd6;
  --selection-ink: #fff;
  --port-audio: #1f8a80;
  --port-control: #b07a12;
  --port-video: #3f63c8;
  --port-midi: #c9303b;
  --port-any: #73736d;
  --port-signal: #4b8b84;
  --port-data: #7a68c4;
}

/* web/src/styles.css */
.node-card-root {
  font-family:
    'DM Sans',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: var(--text);
  background: var(--ground);
  font-synthesis: none;
  font-size: 13px;
  --ground: #080808;
  --panel: #131313;
  --raised: #222222;
  --inset: #0b0b0b;
  --text: #fafaf7;
  --text-secondary: #d9d9d4;
  --muted: #b0b0a8;
  --border: #3b3b3b;
  --border-strong: #606060;
  --accent: #dedede;
  --accent-ink: #171717;
  --hover: color-mix(in srgb, var(--text) 7%, var(--panel));
  --wire: color-mix(in srgb, var(--text) 58%, var(--panel));
  --grid: #242424;
  /* Host UI density; portable Frames retain their authored dimensions. */
  --ui-control-height: 24px;
  --ui-control-padding: 3px 8px;
  --ui-gap: 4px;
  --ui-page-padding: 12px;
  --ui-panel-padding: 8px;
  --ui-dialog-padding: 12px;
  --ui-toolbar-height: 32px;
  /* Every menu, select list and context menu shares this tight spacing. */
  --ui-menu-padding: 3px;
  --ui-menu-item-padding: 3px 8px;
  --ui-menu-item-height: 24px;
  --app-header-height: 32px;
  --app-header-control-height: var(--ui-control-height);
  --transport-bar-height: 40px;
  --mono: 'SFMono-Regular', Consolas, monospace;
  color-scheme: dark;
}
@media (pointer: coarse) {
  .node-card-root {
    --ui-control-height: 44px;
    --ui-menu-item-height: 44px;
    --ui-toolbar-height: 52px;
    --app-header-height: 52px;
    --app-header-control-height: var(--ui-control-height);
    --transport-bar-height: 56px;
  }
}
.node-card-root[data-scheme='light'] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
.node-card-root {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
button {
  background: none;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
svg {
  flex-shrink: 0;
}
input[type='range'] {
  accent-color: var(--accent);
}
.app-shell {
  display: flex;
  min-height: 100dvh;
}
.sidebar {
  width: 222px;
  flex: none;
  background: var(--ground);
  border-right: 1px solid var(--border);
  padding: 16px 12px 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  overflow-y: auto;
}
.sidebar > * {
  flex-shrink: 0;
}
.brand {
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -1.7px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px;
  margin-bottom: 49px;
}
.sidebar-label {
  font: 9px var(--mono);
  letter-spacing: 1.6px;
  color: var(--muted);
  padding: 0 8px;
  margin-bottom: 13px;
}
.sidebar nav {
  display: grid;
  gap: 5px;
}
.nav-item {
  padding: 13px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  border-radius: 7px;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.nav-item.active {
  background: var(--raised);
  color: var(--text);
}
.nav-item:hover,
.sub-nav:hover,
.project-row:hover {
  background: var(--panel);
}
.nav-item > svg:last-child:not(:first-child) {
  margin-left: auto;
}
.nav-pill {
  margin-left: auto;
  background: var(--hover);
  border: 1px solid var(--border-strong);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}
.nav-count {
  margin-left: auto;
  color: var(--muted);
}
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 27px 10px 24px;
}
.project-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  padding: 11px 8px;
  border-radius: 5px;
}
.project-row svg {
  margin-left: auto;
}
.project-dot,
.status-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.sub-nav {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 11px;
  border-left: 1px solid var(--border);
  padding: 12px 15px;
  font-size: 11px;
  text-align: left;
}
.sub-nav > span {
  width: 15px;
  text-align: center;
}
.sidebar-bottom {
  margin-top: auto;
}
.little-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 12px 24px;
  color: var(--text-secondary);
}
.tiny-orbit {
  font-size: 35px;
  color: var(--text);
}
.little-note p {
  font-size: 11px;
  line-height: 1.7;
  margin: 0;
}
.little-note strong {
  font-weight: 500;
  color: var(--text);
}
.agent-link {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 7px;
  padding: 12px 9px;
  width: 100%;
  font-size: 10px;
  color: var(--text);
  margin-bottom: 24px;
}
.agent-link svg:last-child {
  margin-left: auto;
}
.local-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 20px 1px;
}
.avatar {
  border: 1px solid var(--border-strong);
  background: var(--raised);
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 12px;
}
.local-profile strong {
  font-size: 10px;
  font-weight: 500;
  display: block;
}
.local-profile small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}
.online-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: auto;
  margin-right: 5px;
}
.main-shell {
  margin-left: 222px;
  min-width: 0;
  flex: 1;
  padding-bottom: 93px;
}
.topbar {
  height: 72px;
  border-bottom: 1px solid var(--border);
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.breadcrumbs {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  min-width: 0;
}
.breadcrumbs strong {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-actions {
  display: flex;
  gap: var(--ui-gap);
  align-items: center;
}
.local-badge {
  display: flex;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 9px;
  margin-right: 12px;
  white-space: nowrap;
}
.local-badge span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: var(--ui-control-height);
  padding: var(--ui-control-padding);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--raised);
  color: var(--text);
  transition: background 0.15s;
}
.button:hover {
  background: var(--raised);
}
.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.button.primary:hover {
  background: var(--accent);
}
.button.secondary {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}
.button.secondary:hover {
  background: var(--raised);
}
.button.small {
  padding: 2px 6px;
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  border-radius: 5px;
  color: var(--text-secondary);
}
.icon-button:hover {
  background: var(--raised);
  color: var(--text);
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-secondary);
  padding: var(--ui-control-padding);
  border-radius: 4px;
}
.text-button:hover {
  background: var(--raised);
}
.danger {
  color: var(--danger);
}
.tool-divider {
  height: 18px;
  width: 1px;
  background: var(--raised);
  display: block;
  margin: 0 8px;
}
.workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 36px 30px;
  gap: 24px;
}
.eyebrow {
  font: 8px var(--mono);
  color: var(--text-secondary);
  letter-spacing: 1.6px;
  margin-bottom: 12px;
}
.toy-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 33px;
  font-weight: 500;
  letter-spacing: -1.4px;
  padding: 0;
  background: none;
  color: var(--text);
  border: 0;
  width: min(470px, 100%);
  margin-bottom: 11px;
}
.toy-title:focus {
  outline: 0;
  border-bottom: 1px solid var(--border-strong);
}
.project-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 9px;
}
.project-meta .status-dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
}
.heading-tools {
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 2px;
}
.workspace-panel {
  margin: 0 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 16px 70px var(--black-a2);
}
.workspace-toolbar {
  height: var(--ui-toolbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ui-panel-padding);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.view-tabs {
  display: flex;
  height: 100%;
  gap: 22px;
}
.view-tabs button {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  color: var(--text-secondary);
  font-size: 10px;
}
.view-tabs button.active {
  color: var(--text);
}
.view-tabs button.active:after {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  content: '';
  left: 0;
  right: 0;
}
.canvas-tools {
  display: flex;
  align-items: center;
  gap: var(--ui-gap);
}
.workspace-content {
  display: flex;
  height: clamp(420px, calc(100dvh - 330px), 780px);
}
.canvas-area {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--ground);
}
.canvas-breadcrumb {
  position: absolute;
  z-index: 4;
  top: 17px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: var(--text);
}
.canvas-breadcrumb > span:first-of-type {
  display: flex;
  align-items: center;
  gap: 7px;
}
.canvas-breadcrumb button {
  display: flex;
  align-items: center;
  gap: 5px;
  font:
    9px 'DM Sans',
    sans-serif;
  background: var(--raised);
  border-radius: 4px;
  padding: 6px;
}
.canvas-node-count {
  color: var(--muted);
  letter-spacing: 0;
}
.canvas-hint {
  position: absolute;
  bottom: 23px;
  left: 86px;
  right: 18px;
  display: flex;
  gap: 18px;
  font-size: 8px;
  color: var(--muted);
  pointer-events: none;
}
.react-flow__controls {
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: none !important;
  bottom: 16px !important;
  left: 14px !important;
}
.react-flow__controls-button {
  background: var(--raised) !important;
  border-bottom: 1px solid var(--border) !important;
  width: 24px !important;
  height: 24px !important;
  padding: 6px !important;
}
.react-flow__controls-button:last-child {
  border-bottom: 0 !important;
}
.react-flow__controls-button svg {
  fill: var(--text) !important;
}
.react-flow__attribution {
  background: var(--panel) !important;
  color: var(--muted) !important;
  font-size: 6px !important;
  padding: 2px 5px !important;
}
.react-flow__connection-path {
  stroke: var(--text);
  stroke-width: 2;
}
.react-flow__edge.selected .react-flow__edge-path {
  stroke: var(--text) !important;
  stroke-width: 3 !important;
}
.audio-node {
  width: 185px;
  min-height: 155px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 8px 25px var(--black-a3);
  color: var(--text);
  position: relative;
}
.audio-node.is-selected {
  border-color: var(--node-color);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--text) 6%, transparent),
    0 8px 25px var(--black-a3);
}
.audio-node header {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-bottom: 1px solid var(--border);
  background: var(--raised);
  border-radius: 8px 8px 0 0;
  font-size: 10px;
  font-weight: 600;
}
.audio-node header > svg {
  margin-left: auto;
  color: var(--text-secondary);
  opacity: 0.7;
}
.node-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--node-color);
}
.node-open {
  margin-left: auto;
  color: var(--node-color);
  padding: 0;
  height: 17px;
}
.node-body {
  padding: 8px 12px 8px;
}
.node-body > small {
  display: block;
  font: 6px var(--mono);
  letter-spacing: 1.3px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 5px;
}
.signal-graphic {
  width: 100%;
  height: 58px;
  margin: 7px 0 0;
  color: var(--node-color, var(--text-secondary));
}
.signal-graphic path {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.node-control-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 7px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.ports .input-port,
.ports .output-port {
  position: absolute;
  font: 5px var(--mono);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 3px;
}
.ports .input-port {
  left: 6px;
}
.ports .output-port {
  right: 6px;
}
.react-flow__handle {
  width: 8px !important;
  height: 8px !important;
  border: 2px solid var(--border) !important;
  background: var(--accent) !important;
  border-radius: 50%;
}
.input-port .react-flow__handle {
  left: -11px !important;
  top: 3px;
}
.output-port .react-flow__handle {
  right: -11px !important;
  top: 3px;
}
.inspector {
  width: 264px;
  flex: none;
  border-left: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.inspector-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 0;
  color: var(--text);
  font-size: 10px;
}
.inspector-title > svg {
  color: var(--text-secondary);
}
.inspector-title strong {
  font-weight: 600;
}
.inspector-title > span {
  margin-left: auto;
  font: 8px var(--mono);
  padding: 2px 5px;
  background: var(--raised);
  color: var(--text);
  border-radius: 3px;
}
.inspector-description {
  padding: 0 12px;
  margin: 11px 0 15px;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.7;
}
.control-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font: 6px var(--mono);
  letter-spacing: 0.7px;
  margin-top: 6px;
}
.inspector-bottom {
  padding: 16px 12px 8px;
  margin-top: auto;
}
.inspector-section-label {
  font: 7px var(--mono);
  letter-spacing: 1.1px;
  color: var(--muted);
  margin-bottom: 11px;
}
.engine-badge {
  display: flex;
  gap: 8px;
  align-items: center;
}
.engine-badge strong {
  font-size: 9px;
  font-weight: 500;
  display: block;
  color: var(--text);
}
.engine-badge small {
  font: 7px var(--mono);
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.engine-badge > svg {
  margin-left: auto;
  color: var(--muted);
}
.rust-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.inspector-bottom p {
  font-size: 8px;
  color: var(--muted);
  line-height: 1.8;
}
.muted {
  color: var(--text-secondary);
}
.transport {
  height: 70px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  position: fixed;
  left: 222px;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 34px;
  z-index: 9;
}
.play-button {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  flex: none;
}
.play-button.playing {
  background: var(--accent);
}
.transport-copy {
  min-width: 145px;
}
.transport-copy strong {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
}
.transport-copy span {
  display: block;
  color: var(--muted);
  font-size: 8px;
  margin-top: 5px;
}
.transport-source {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  gap: 4px;
}
.transport-source > span {
  font: 6px var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
}
.transport-source select {
  border: 0;
  background: none;
  color: var(--text);
  font-size: 9px;
  max-width: 240px;
  padding: 0 15px 0 0;
}
.output-meter {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  margin-left: 15px;
}
.output-meter i {
  display: block;
  width: 3px;
  height: 14px;
  background: var(--raised);
  border-radius: 1px;
}
.output-meter i.lit {
  background: var(--accent);
}
.output-meter i:nth-last-child(-n + 3).lit {
  background: var(--warning);
}
.monitor {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  margin-left: 10px;
}
.monitor input {
  width: 65px;
  height: 3px;
}
.monitor > span {
  font: 8px var(--mono);
  width: 25px;
}
.frame-mode {
  background: radial-gradient(
    ellipse at center,
    var(--raised),
    var(--panel) 80%
  );
  overflow: auto;
}
.frame-stage {
  padding: 30px 30px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  justify-content: center;
}
.frame-product {
  max-width: 100%;
  width: 650px;
  background: linear-gradient(135deg, var(--raised), var(--panel));
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  box-shadow:
    0 14px 38px var(--black-a4),
    inset 0 1px color-mix(in srgb, var(--text) 6%, transparent);
}
.frame-stage .tt-frame-viewport {
  overflow: visible;
}
.field-label {
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap);
  color: var(--text-secondary);
  font: 7px var(--mono);
  letter-spacing: 1px;
  margin: var(--ui-panel-padding) var(--ui-panel-padding);
}
.field-label input,
.field-label select {
  background: var(--ground);
  border: 1px solid var(--border);
  color: var(--text);
  font:
    10px 'DM Sans',
    sans-serif;
  border-radius: 4px;
  min-height: var(--ui-control-height);
  padding: var(--ui-control-padding);
  letter-spacing: 0;
  min-width: 0;
  width: 100%;
}
.widget-list {
  padding: 0 8px;
  display: grid;
  gap: 3px;
}
.widget-list button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  font-size: 9px;
  border-radius: 4px;
  text-align: left;
  overflow: hidden;
  color: var(--text-secondary);
}
.widget-list button.selected {
  background: var(--raised);
  color: var(--text);
}
.widget-list button > span {
  font-size: 12px;
  width: 15px;
  color: var(--text);
}
.widget-list small {
  margin-left: auto;
  color: var(--muted);
  font: 7px var(--mono);
}
.widget-properties {
  padding-top: 18px;
  margin-top: 15px;
  border-top: 1px solid var(--border);
}
.widget-properties > .inspector-section-label {
  margin: 0 19px;
}
.bounds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  padding: 0 19px;
}
.bounds-grid .field-label {
  margin: 5px 0 14px;
}
.widget-properties > .danger {
  margin: 0 12px 15px;
}
.source-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.source-json-preview {
  container-type: inline-size;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.source-json-content {
  height: 100%;
  min-width: 0;
}
.workspace-navigation {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.workspace-navigation .icon-button {
  width: 25px;
  height: var(--ui-control-height);
}
.source-json-changes {
  position: absolute;
  top: 9px;
  left: 12px;
  z-index: 2;
  padding: 6px 8px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 10px var(--mono);
}
@container (max-width: 360px) {
  .source-json-changes {
    top: 48px;
  }
}
.source-json-preview .toy-json-row[data-source-change='changed'] {
  background: color-mix(in srgb, var(--selection) 18%, transparent);
}
.source-json-preview .toy-json-row[data-source-change='added'] {
  background: color-mix(in srgb, var(--ok-strong) 18%, transparent);
}
.source-json-preview .toy-json-row[data-source-change='removed'] {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}
.source-json-preview .toy-json-row[data-source-change] {
  border-right: 3px solid var(--accent);
}
.source-json-context {
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: 0 2px 12px var(--black-a2);
}
.source-json-context nav {
  flex: 1;
  min-width: 0;
}
.source-json-context ol {
  display: flex;
  align-items: center;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: 0;
  padding: 0;
}
.source-json-context li {
  display: flex;
  align-items: center;
  flex: none;
  gap: 2px;
  color: var(--muted);
}
.source-json-context li button {
  padding: 5px 4px;
  border-radius: 3px;
  color: var(--text-secondary);
  font: 11px var(--mono);
  white-space: nowrap;
}
.source-json-context li button:hover,
.source-json-context li button[aria-current] {
  color: var(--text);
  background: var(--hover);
}
.source-json-context-actions {
  display: flex;
  flex: none;
  gap: 2px;
  border-left: 1px solid var(--border);
  padding-left: 4px;
}
.source-json-context-actions .icon-button {
  width: var(--ui-control-height);
  height: var(--ui-control-height);
}
.source-json-content.has-context .toy-json-viewer [role='tree'] {
  padding-bottom: 52px;
}
.source-json-preview .toy-json-row[data-source-selected] {
  box-shadow: inset 2px 0 var(--accent);
}
.source-json-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.platform-dialog.source-diagnostics-dialog {
  width: min(1100px, calc(100vw - 24px));
  max-width: none;
}
.source-diagnostics-layout {
  display: grid;
  grid-template-columns: minmax(200px, 30%) minmax(0, 1fr);
  height: min(65vh, 650px);
  gap: 12px;
}
.source-diagnostic-list,
.source-diagnostic-preview {
  overflow: auto;
  min-width: 0;
  min-height: 0;
}
.source-diagnostic-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.source-diagnostic-list > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
}
.source-diagnostic-list > button[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--hover);
}
.source-diagnostic-list code {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 10px;
}
.source-diagnostic-list small {
  color: var(--muted);
}
.source-diagnostic-preview {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.source-diagnostic-location {
  margin: 0;
  padding: 8px;
  font: 11px var(--mono);
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .source-diagnostics-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(110px, 30%) minmax(0, 1fr);
  }
}
.source-json-search {
  position: absolute;
  top: 48px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  width: min(430px, calc(100% - 24px));
  padding: 4px;
  gap: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: 0 6px 20px var(--black-a2);
}
.source-json-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--inset);
  color: var(--text);
  font-size: 12px;
}
.source-json-search .icon-button {
  flex: none;
  width: var(--ui-control-height);
  height: var(--ui-control-height);
}
.source-json-match-count {
  flex: none;
  padding: 0 3px;
  color: var(--text-secondary);
  font: 10px var(--mono);
  white-space: nowrap;
}
.source-json-preview .toy-json-node[data-highlight] > .toy-json-row::before {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.source-json-preview .toy-json-node[data-highlight] > .toy-json-row {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.source-json-controls {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  display: flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
}
.source-json-controls .icon-button {
  border-radius: 0;
}
.source-json-controls .icon-button:first-child {
  border-radius: 4px 0 0 4px;
}
.source-json-controls .icon-button:last-child {
  border-radius: 0 4px 4px 0;
}
.source-json-controls .icon-button + .icon-button {
  border-left: 1px solid var(--border);
}
.source-json-preview .toy-json-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  font-size: 12px;
  line-height: 1.7;
  --jv-indent: 20px;
}
.source-json-preview .toy-json-scrollarea {
  flex: 1;
  min-height: 0;
}
.source-loading {
  color: var(--muted);
  padding: 12px 0;
}
.gallery {
  padding: 49px 40px;
}
.gallery h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: 34px;
  letter-spacing: -1.3px;
  font-weight: 500;
  margin: 15px 0;
}
.gallery > p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.toy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 35px;
}
.toy-card {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.toy-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}
/* Card art tints: a glow fading to an edge, and the signal graphic's ink. */
.toy-card {
  --toy-art-glow: #493829;
  --toy-art-edge: var(--panel);
  --toy-art-ink: #e1b47e;
}
.toy-card.blue {
  --toy-art-glow: #1e3c43;
  --toy-art-edge: #1e292b;
  --toy-art-ink: #93c2d4;
}
.toy-card.purple {
  --toy-art-glow: #3c344a;
  --toy-art-edge: #29262d;
  --toy-art-ink: #b9a7d9;
}
.toy-art {
  height: 178px;
  background: radial-gradient(
    ellipse at center,
    var(--toy-art-glow),
    var(--toy-art-edge) 80%
  );
  position: relative;
  padding: 38px;
  color: var(--toy-art-ink);
}
.toy-art .signal-graphic {
  color: inherit;
  height: 90px;
}
.toy-card.green .toy-art {
  background: radial-gradient(
    ellipse at center,
    var(--hover),
    var(--panel) 80%
  );
  color: var(--text);
}
.toy-play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 50%;
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  display: grid;
  place-items: center;
}
.toy-card-body {
  padding: 16px;
}
.toy-card-body > small {
  font: 8px var(--mono);
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}
.toy-card h2 {
  font:
    500 23px 'DM Sans',
    sans-serif;
  letter-spacing: -0.6px;
  margin: 12px 0;
}
.toy-card p {
  font-size: 10px;
  line-height: 1.8;
  color: var(--text-secondary);
  min-height: 45px;
}
.toy-card-body > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text);
  margin-top: 22px;
}
.empty-library {
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  padding: 45px;
  text-align: center;
  margin-top: 35px;
  color: var(--text-secondary);
}
.empty-library h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}
.empty-library p {
  color: var(--text-secondary);
  font-size: 11px;
}
.empty-library .button {
  margin-top: 15px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal {
  width: 590px;
  max-width: 100%;
  max-height: 90dvh;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 25px 100px var(--black-a9);
  padding: var(--ui-dialog-padding);
}
.proposal-dialog {
  width: min(590px, calc(100vw - 32px));
}
.modal > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.modal h2 {
  font:
    500 22px 'DM Sans',
    sans-serif;
  letter-spacing: -0.5px;
  margin: 0;
}
.palette-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-strong);
  background: var(--ground);
  border-radius: 6px;
  padding: 12px;
  color: var(--text-secondary);
}
.palette-search input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 12px;
  outline: 0;
}
.palette-list {
  display: grid;
  gap: 4px;
  margin-top: 15px;
}
.palette-list > button {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px 9px;
}
.palette-list > button:hover {
  background: var(--raised);
  border-color: var(--border-strong);
}
.palette-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--raised);
  border-radius: 6px;
}
.palette-list strong {
  font-size: 12px;
  display: block;
  font-weight: 500;
}
.palette-list small {
  display: block;
  color: var(--text-secondary);
  font-size: 9px;
  margin-top: 5px;
}
.palette-category {
  font: 7px var(--mono);
  color: var(--muted);
  margin-left: auto;
}
.palette-list > button > svg {
  color: var(--text-secondary);
}
.modal-footnote {
  font-size: 9px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 15px;
  padding-top: 18px;
}
.modal-description {
  font-size: 11px;
  line-height: 1.9;
  color: var(--text-secondary);
}
.modal .field-label {
  margin: 23px 0;
}
.modal .field-label input {
  font: 10px var(--mono);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-gap);
  margin-top: 23px;
}
.proposal-code {
  width: 100%;
  height: 280px;
  resize: vertical;
  background: var(--ground);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 16px;
  color: var(--text);
  font: 10px/1.8 var(--mono);
  margin-top: 12px;
}
.proposal-result {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  background: var(--raised);
  padding: 12px;
  border-radius: 6px;
  font-size: 10px;
  margin-top: 12px;
}
.notice-toast,
.error-toast {
  position: fixed;
  z-index: 80;
  bottom: 92px;
  left: calc(50% + 100px);
  transform: translateX(-50%);
  background: var(--hover);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 10px 40px var(--black-a6);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text);
  max-width: min(650px, 90vw);
}
.error-toast {
  background: color-mix(in srgb, var(--danger) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  color: var(--text);
  bottom: 105px;
  white-space: pre-wrap;
  max-height: 45vh;
  overflow: auto;
  line-height: 1.7;
}
.error-toast > button {
  flex: none;
  color: var(--danger);
}
@media (min-width: 1600px) {
  .sidebar {
    width: 245px;
  }
  .main-shell {
    margin-left: 245px;
  }
  .transport {
    left: 245px;
  }
  .workspace-heading {
    padding-top: 43px;
    padding-bottom: 35px;
  }
  .workspace-content {
    height: calc(100dvh - 350px);
  }
  .inspector {
    width: 300px;
  }
  .topbar,
  .transport {
    padding-left: 42px;
    padding-right: 42px;
  }
  .workspace-panel {
    margin-left: 42px;
    margin-right: 42px;
  }
  .workspace-heading {
    padding-left: 44px;
    padding-right: 44px;
  }
  .inspector-description {
    padding: 0 26px;
  }
  .inspector-title {
    padding-left: 26px;
    padding-right: 26px;
  }
}
@media (max-width: 1150px) {
  .sidebar {
    width: 190px;
    padding: 30px 12px 0;
  }
  .brand {
    font-size: 25px;
    gap: 8px;
  }
  .main-shell {
    margin-left: 190px;
  }
  .transport {
    left: 190px;
    padding: 0 23px;
    gap: 10px;
  }
  .topbar {
    padding: 0 23px;
  }
  .workspace-heading {
    padding: 28px 24px;
  }
  .workspace-panel {
    margin: 0 23px;
  }
  .inspector {
    width: 220px;
  }
  .local-badge {
    display: none;
  }
  .transport-copy {
    min-width: 110px;
  }
  .transport-source select {
    max-width: 180px;
  }
  .output-meter {
    display: none;
  }
  .monitor input {
    width: 45px;
  }
  .heading-tools .button {
    font-size: 9px;
  }
  .toy-title {
    font-size: 29px;
  }
  .canvas-hint {
    gap: 9px;
    font-size: 6px;
  }
  .toy-grid {
    gap: 12px;
  }
  .gallery {
    padding: 35px 25px;
  }
  .toy-card-body {
    padding: 18px;
  }
  .toy-card h2 {
    font-size: 21px;
  }
  .palette-category {
    display: none;
  }
}
@media (max-width: 850px) {
  .sidebar {
    width: 64px;
    align-items: center;
    padding: 25px 5px;
  }
  .brand {
    padding: 0;
    margin-bottom: 35px;
  }
  .brand > span:last-child,
  .sidebar-label,
  .nav-item > span,
  .nav-item > svg:last-child:not(:first-child),
  .project-row,
  .sub-nav,
  .sidebar-divider,
  .little-note,
  .agent-link,
  .local-profile > div,
  .online-dot {
    display: none;
  }
  .nav-item {
    width: 44px;
    justify-content: center;
    padding: 13px;
  }
  .sidebar nav {
    gap: 9px;
  }
  .sidebar-bottom {
    width: 44px;
  }
  .local-profile {
    justify-content: center;
  }
  .main-shell {
    margin-left: 64px;
  }
  .transport {
    left: 64px;
  }
  .topbar {
    height: 62px;
  }
  .top-actions {
    gap: 5px;
  }
  .button {
    padding: 8px 10px;
  }
  .breadcrumbs {
    display: none;
  }
  .top-actions {
    margin-left: auto;
  }
  .workspace-heading {
    padding: 28px 20px;
    gap: 10px;
  }
  .eyebrow {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .toy-title {
    font-size: 27px;
  }
  .project-meta {
    font-size: 8px;
  }
  .heading-tools .button {
    font-size: 0;
    padding: 8px;
  }
  .heading-tools {
    margin-top: 12px;
  }
  .tool-divider {
    margin: 0 4px;
  }
  .workspace-panel {
    margin: 0 16px;
  }
  .inspector {
    width: 195px;
  }
  .inspector-description {
    font-size: 8px;
  }
  .workspace-toolbar {
    padding: 0 10px;
  }
  .canvas-tools {
    gap: 4px;
  }
  .canvas-tools > .text-button {
    font-size: 8px;
  }
  .canvas-tools .button {
    font-size: 9px;
  }
  .workspace-content {
    height: calc(100dvh - 306px);
    min-height: 400px;
  }
  .transport-copy {
    min-width: 100px;
  }
  .transport-source {
    max-width: 170px;
  }
  .transport-source select {
    max-width: 170px;
    font-size: 8px;
  }
  .monitor {
    margin-left: auto;
  }
  .monitor input {
    width: 40px;
  }
  .monitor > span {
    display: none;
  }
  .transport {
    padding: 0 18px;
  }
  .canvas-hint {
    display: none;
  }
  .view-tabs {
    gap: 15px;
  }
  .toy-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gallery h1 {
    font-size: 29px;
  }
  .frame-stage {
    padding: 20px 16px;
  }
  .notice-toast,
  .error-toast {
    left: calc(50% + 25px);
  }
}
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
  .main-shell {
    margin-left: 0;
    padding-bottom: 78px;
  }
  .transport {
    left: 0;
    height: 68px;
    gap: 9px;
    padding: 0 14px;
  }
  .topbar {
    padding: 0 14px;
  }
  .top-actions .button {
    font-size: 9px;
  }
  .top-actions .button:first-of-type {
    display: none;
  }
  .workspace-heading {
    padding: 24px 17px;
  }
  .heading-tools {
    gap: 0;
  }
  .heading-tools .button {
    display: none;
  }
  .toy-title {
    font-size: 26px;
    width: 220px;
  }
  .workspace-panel {
    margin: 0 12px;
  }
  .workspace-content {
    height: calc(100dvh - 310px);
    min-height: 470px;
    display: flex;
    flex-direction: column;
  }
  .canvas-area {
    min-height: 295px;
    flex: 1;
  }
  .inspector {
    width: 100%;
    height: 180px;
    min-height: 180px;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-bottom: 15px;
  }
  .inspector-title {
    padding-top: 12px;
  }
  .inspector-description {
    display: none;
  }
  .inspector-bottom {
    display: none;
  }
  .canvas-tools > .text-button {
    font-size: 0;
    padding: 5px;
  }
  .canvas-tools .button {
    font-size: 9px;
  }
  .view-tabs {
    gap: 13px;
  }
  .view-tabs button {
    font-size: 9px;
  }
  .transport-copy {
    min-width: 90px;
  }
  .transport-copy strong {
    font-size: 9px;
  }
  .transport-copy span {
    font-size: 7px;
  }
  .transport-source {
    margin-left: auto;
    max-width: 130px;
  }
  .transport-source select {
    max-width: 130px;
    font-size: 7px;
  }
  .monitor {
    display: none;
  }
  .play-button {
    width: 33px;
    height: 33px;
  }
  .frame-stage {
    padding: 18px;
    justify-content: center;
    min-height: 295px;
  }
  .frame-product {
    max-width: 100%;
  }
  .field-label {
    margin: 12px 16px;
  }
  .widget-list {
    display: flex;
    flex-wrap: wrap;
  }
  .widget-properties {
    margin-top: 5px;
  }
  .bounds-grid {
    display: flex;
    gap: 8px;
  }
  .bounds-grid label {
    max-width: 70px;
  }
  .gallery {
    padding: 30px 20px;
  }
  .gallery h1 {
    font-size: 29px;
  }
  .toy-grid {
    grid-template-columns: 1fr;
    margin-top: 25px;
    gap: 20px;
  }
  .toy-art {
    height: 160px;
  }
  .modal {
    padding: 18px;
  }
  .modal h2 {
    font-size: 19px;
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  .palette-list small {
    font-size: 8px;
    line-height: 1.5;
  }
  .notice-toast,
  .error-toast {
    left: 50%;
    bottom: 80px;
  }
  .project-meta {
    gap: 6px;
    font-size: 7px;
  }
  .workspace-heading .eyebrow {
    letter-spacing: 0.7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Compact editor: keep the graph and controls usable without sidebar text overflow. */
@media (min-width: 601px) and (max-width: 850px) {
  .nav-item {
    font-size: 0;
    gap: 0;
  }
  .workspace-content {
    flex-direction: column;
    min-height: 520px;
  }
  .canvas-area {
    min-height: 340px;
  }
  .inspector {
    width: 100%;
    height: 185px;
    min-height: 185px;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-bottom: 12px;
  }
  .inspector-description,
  .inspector-bottom {
    display: none;
  }
  .inspector-title {
    padding-top: 13px;
  }
  .widget-list {
    display: flex;
    flex-wrap: wrap;
  }
  .widget-properties {
    margin-top: 8px;
  }
  .bounds-grid {
    display: flex;
    gap: 8px;
  }
  .bounds-grid label {
    max-width: 90px;
  }
}
.react-flow {
  --xy-background-color: var(--ground);
  --xy-background-color-default: var(--ground);
}
.node-body > small {
  font-size: 7px;
}
.ports .input-port,
.ports .output-port {
  font-size: 6px;
}

.new-toy {
  width: calc(100% - 14px);
  margin: 0 7px 28px;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--border-strong);
  font-size: 11px;
}
.brand {
  margin-bottom: 27px;
}
@media (min-width: 601px) and (max-width: 850px) {
  .new-toy {
    width: 39px;
    padding: 9px;
    margin: 0 0 25px;
  }
  .new-toy span {
    display: none;
  }
}
.sub-nav > span:not(:first-child) {
  width: auto;
  text-align: left;
}
.node-select {
  display: grid;
  place-items: center;
  width: 14px;
  height: 16px;
  margin-left: -4px;
  padding: 0;
  border-radius: 3px;
}
.node-select[aria-pressed='true'] {
  outline: 1px solid var(--node-color);
}
.node-select:hover {
  background: var(--hover);
}
.node-select:focus-visible {
  outline-offset: 1px;
}
.media-library {
  width: min(900px, 94vw);
}
.media-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.media-results article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.media-preview {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}
.media-preview img,
.media-preview video {
  max-width: 100%;
  max-height: 300px;
}

/* packages/frame-runtime/src/styles.css */
/* Frame styles are scoped. Host chrome never supplies authored presentation. */
.tt-signal-meter {
  display: grid;
  gap: 4px;
  width: 100%;
  font-size: var(--tt-font-size, 11px);
  padding: 4px;
  box-sizing: border-box;
}
.tt-meter-channels {
  display: grid;
  gap: 2px;
  grid-auto-rows: min-content;
}
.tt-meter-lane {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  font-size: 10px;
  line-height: 12px;
  font-variant-numeric: tabular-nums;
}
.tt-meter-channels meter {
  width: 100%;
  height: 9px;
}
.tt-meter-expanded {
  max-height: 86px;
  overflow-y: auto;
}
.tt-meter-expand {
  justify-self: start;
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.tt-signal-meter output {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tt-clip-reset {
  color: #fc7777;
  font: inherit;
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
}
.tt-effective-value {
  font-variant-numeric: tabular-nums;
}
.tt-control-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px 6px;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.25;
  color: var(--tt-muted, currentColor);
  max-width: 100%;
}
.tt-control-owner {
  font: inherit;
}
.tt-control-feedback output + .tt-control-owner::before {
  content: '·';
  margin-right: 5px;
}
.tt-base-label {
  font-size: 9px;
}
.tt-slider .tt-control-feedback {
  grid-column: 1/-1;
  justify-content: flex-start;
}
.tt-frame-viewport {
  width: 100%;
  min-width: 0;
}
.tt-frame-board {
  position: relative;
  background: var(--tt-background, #202020);
  color: var(--tt-text, #ededed);
  border: 1px solid var(--tt-border, #454545);
  border-radius: var(--tt-radius, 8px);
  font-family: var(--tt-font, 'DM Sans', sans-serif);
  font-size: var(--tt-font-size, 14px);
  overflow: hidden;
  box-sizing: border-box;
}
.tt-widget {
  box-sizing: border-box;
  color: var(--tt-text);
  overflow: hidden;
}
.tt-frame-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.tt-frame-icon svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.tt-frame-text {
  font-family: var(--tt-font);
  font-size: var(--tt-font-size);
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  display: block;
  align-content: center;
  height: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A control hosted outside a Frame board (editor panels, previews) has no
 * board to set the theme variables, so it takes the host palette instead of
 * disappearing. Boards still win because they set the variables inline. */
:where(.tt-control:not(.tt-frame-board *)) {
  --tt-background: var(--panel, var(--ground, #141414));
  --tt-surface: var(--raised, #262626);
  --tt-text: var(--text, currentColor);
  --tt-muted: var(--muted, #a0a0a0);
  --tt-accent: var(--accent, #dedede);
  --tt-border: var(--border, #606060);
}
.tt-control {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--tt-font, inherit);
  color: var(--tt-text, currentColor);
}
.tt-control-label {
  font-size: var(--tt-font-size, 12px);
  color: var(--tt-text, currentColor);
  font-weight: inherit;
  letter-spacing: inherit;
  margin-bottom: 10px;
}
/* The knob's room between heading and value. The dial is the largest square
 * that fits, so resizing the component resizes the knob; an unsized host
 * (an editor panel) keeps the 72px basis. */
.tt-knob-slot {
  flex: 1 1 72px;
  min-height: 0;
  width: 100%;
  container-type: size;
  display: grid;
  place-items: center;
}
.tt-dial {
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
}
.tt-dial-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
  stroke-linecap: round;
}
.tt-dial-track,
.tt-dial-base {
  stroke-width: 4px;
}
.tt-dial-track,
.tt-dial-ghost-track {
  stroke: var(--tt-border, #454545);
}
.tt-dial-base,
.tt-dial-ghost {
  stroke: var(--tt-accent, #dedede);
}
.tt-dial-ghost-track {
  stroke-width: 1px;
  stroke-dasharray: 1 4;
}
.tt-dial-ghost {
  stroke-width: 2px;
  opacity: 0.65;
}
.tt-dial-effective {
  fill: var(--tt-text, #ededed);
  stroke: var(--tt-surface, #303030);
  stroke-width: 1px;
}
.tt-dial-zero {
  stroke: var(--tt-text, #ededed);
  stroke-width: 1.5px;
}
.tt-control[data-read-only] .tt-dial {
  cursor: default;
}
.tt-control[data-read-only] .tt-dial-base,
.tt-control[data-read-only] .tt-dial-face i {
  opacity: 0.45;
}
.tt-dial-face {
  position: absolute;
  /* Proportions of the 72-unit ring: the face scales with the dial. */
  inset: 13.9%;
  background: var(--tt-surface, #303030);
  border-radius: 50%;
  border: 1px solid var(--tt-border, #454545);
  box-shadow:
    inset 0 1px 1px #ffffff12,
    0 2px 4px #0002;
}
.tt-dial-face i {
  position: absolute;
  left: 50%;
  top: 9.6%;
  width: max(2px, 3.8%);
  height: 21%;
  translate: -50% 0;
  background: var(--tt-accent, #dedede);
  border-radius: 1px;
}
.tt-range {
  margin: 10px 0 0;
  width: 80%;
  height: 3px;
  cursor: ew-resize;
  accent-color: var(--tt-accent, currentColor);
}
.tt-knob:focus-within .tt-dial {
  outline: 2px solid var(--tt-accent, currentColor);
  outline-offset: 4px;
}
.tt-control-value {
  font:
    11px 'SFMono-Regular',
    Consolas,
    monospace;
  color: var(--tt-muted, currentColor);
  margin-top: 10px;
}
.tt-number-input {
  cursor: ns-resize;
  touch-action: none;
  font-variant-numeric: tabular-nums;
}
.tt-number-input[data-editing] {
  cursor: text;
  touch-action: auto;
}
.tt-number-input[data-scrubbing] {
  cursor: ns-resize;
  user-select: none;
}
.tt-number-input:disabled {
  cursor: default;
}
.tt-control-value .tt-control-number {
  width: 9ch;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: center;
}
.tt-control-number:hover,
.tt-control-number:focus-visible,
.tt-control-number[data-scrubbing] {
  border-color: var(--tt-border, currentColor);
  outline-color: var(--tt-accent, currentColor);
}
.tt-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
}
.tt-slider .tt-control-label {
  font-size: var(--tt-font-size, 12px);
  margin: 0;
  letter-spacing: 0;
}
.tt-slider .tt-control-value {
  margin: 0;
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
}
.tt-slider .tt-range {
  width: 100%;
  margin: 7px 0 0;
  grid-column: 1/-1;
}

.tt-control-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
  max-width: 100%;
}
.tt-control-heading .tt-control-label {
  margin-bottom: 0;
}
.tt-knob[data-size='xs'] {
  flex: none;
  width: 24px;
  height: 24px;
}
.tt-knob[data-size='xs'] > .tt-control-heading,
.tt-knob[data-size='xs'] > .tt-control-value,
.tt-knob[data-size='xs'] > .tt-control-feedback {
  display: none;
}
.tt-knob[data-size='xs']:focus-within .tt-dial {
  outline-offset: 0;
}
.tt-slider .tt-control-heading {
  justify-content: flex-start;
  margin: 0;
}
.tt-button-control {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
}
.tt-play-button {
  flex: 1;
  min-height: 32px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius, 6px);
  background: var(--tt-surface);
  color: var(--tt-text);
  font: inherit;
  cursor: pointer;
  touch-action: none;
}
.tt-play-button[data-active] {
  background: var(--tt-accent);
  color: var(--tt-background);
}
.tt-play-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.tt-play-button:focus-visible,
.tt-xy-surface:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: 2px;
}
.tt-button-state {
  text-align: center;
  font-size: 10px;
  opacity: 0.7;
}
.tt-xy-control {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tt-xy-surface {
  position: relative;
  flex: 1;
  min-height: 32px;
  display: block;
  border: 1px solid var(--tt-border);
  border-radius: 4px;
  background-color: var(--tt-surface);
  background-image:
    linear-gradient(to right, var(--tt-border) 1px, transparent 1px),
    linear-gradient(to top, var(--tt-border) 1px, transparent 1px);
  background-size: 25% 25%;
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}
.tt-xy-surface:disabled {
  opacity: 0.5;
  cursor: default;
}
.tt-xy-cross {
  position: absolute;
  background: var(--tt-accent);
  opacity: 0.35;
  pointer-events: none;
}
.tt-xy-cross.x {
  top: 0;
  bottom: 0;
  width: 1px;
}
.tt-xy-cross.y {
  left: 0;
  right: 0;
  height: 1px;
}
.tt-xy-point {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--tt-accent);
  background: var(--tt-accent);
  border-radius: 50%;
  transform: translate(-50%, 50%);
  pointer-events: none;
}
.tt-xy-axes {
  display: flex;
  gap: 8px;
  font-size: 10px;
}
.tt-xy-axes label {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.tt-xy-axes input {
  width: 100%;
  min-width: 0;
  accent-color: var(--tt-accent);
}
.tt-xy-axes output {
  font-variant-numeric: tabular-nums;
}

.tt-signal-inspector {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  font-size: 12px;
  color: inherit;
}
.tt-signal-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.tt-signal-tools label {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
}
.tt-signal-tools button,
.tt-signal-tools select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--tt-border, var(--border));
  border-radius: 5px;
  padding: 6px 8px;
}
.tt-signal-tools button[aria-pressed='true'] {
  background: var(--tt-surface, var(--hover));
  border-color: var(--tt-accent, var(--accent));
}
.tt-signal-plot {
  width: 100%;
  display: block;
}
.tt-plot-grid {
  stroke: var(--tt-screen-grid-major, var(--tt-border, var(--border)));
  stroke-width: 1;
}
.tt-plot-trace {
  stroke: var(--tt-screen-trace, var(--tt-accent, var(--accent)));
  stroke-width: 1.5;
}
.tt-signal-plot text {
  fill: currentColor;
  opacity: 0.6;
  font-size: 9px;
}
/* The inspector spectrum is a closed area, filled like a face's live layer. */
.tt-signal-plot[data-mode='spectrum'] .tt-plot-trace {
  fill: var(--tt-screen-trace, var(--tt-accent, var(--accent)));
  fill-opacity: 0.12;
}
.tt-signal-summary {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tt-signal-inspector small {
  opacity: 0.65;
}

/* Choices: `Type [ Morph ⌄ ]`, a label beside an outlined box like the
 * numeric fields; the chevron sits where a unit would and never takes the
 * click. Native select semantics throughout. */
.tt-choice-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  min-width: 0;
  font: inherit;
}
.tt-choice-control > label {
  font: inherit;
}
.tt-choice-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--tt-border, var(--border, #555));
  border-radius: 3px;
  color: var(--tt-text, inherit);
}
.tt-choice-box:hover {
  border-color: color-mix(
    in srgb,
    var(--tt-text, currentColor) 40%,
    var(--tt-border, transparent)
  );
}
.tt-choice-box:has(> select:focus-visible) {
  outline: 2px solid var(--tt-accent, currentColor);
  outline-offset: 1px;
}
.tt-choice-box:has(> select:disabled) {
  opacity: 0.5;
}
.tt-choice-box > select {
  flex: 1;
  min-width: 0;
  padding: 4px 18px 4px 5px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: 0;
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
  field-sizing: content;
}
.tt-choice-box > select:disabled {
  cursor: default;
}
.tt-choice-chevron {
  position: absolute;
  inset-inline-end: 5px;
  width: 9px;
  height: 9px;
  fill: none;
  stroke: var(--tt-muted, currentColor);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.tt-choice-box:hover > .tt-choice-chevron {
  stroke: var(--tt-text, currentColor);
}
/* A Frame control: the knob's heading above a full-width box. */
.tt-choice > .tt-choice-box {
  width: 100%;
}
.tt-choice > .tt-choice-box > select {
  padding: 6px 22px 6px 8px;
}
.tt-choice > .tt-choice-box > .tt-choice-chevron {
  inset-inline-end: 8px;
}
/* Customizable selects draw the open list in the Frame theme. */
@supports (appearance: base-select) {
  .tt-choice-box > select,
  .tt-choice-box > select::picker(select) {
    appearance: base-select;
  }
  .tt-choice-box > select {
    display: flex;
    align-items: center;
  }
  .tt-choice-box > select::picker-icon {
    display: none;
  }
  .tt-choice-box > select::picker(select) {
    margin-block: 2px;
    padding: 4px;
    border: 1px solid var(--tt-border, #555);
    border-radius: 6px;
    background: var(--tt-surface, #222);
    color: var(--tt-text, #eee);
    box-shadow: 0 8px 28px #0004;
    font-family: var(--tt-font, inherit);
    line-height: 1.5;
    text-align: start;
  }
  .tt-choice-box option {
    gap: 6px;
    padding: 6px 8px;
    border-radius: 3px;
  }
  .tt-choice-box option:is(:hover, :focus-visible, :checked) {
    background: color-mix(
      in srgb,
      var(--tt-text, currentColor) 10%,
      transparent
    );
    outline: 0;
  }
  .tt-choice-box option::checkmark {
    color: var(--tt-muted, currentColor);
  }
  .tt-choice-box optgroup {
    padding-block-start: 4px;
    color: var(--tt-muted, currentColor);
    font-size: 0.9em;
    font-weight: 600;
  }
  .tt-choice-box optgroup option {
    color: var(--tt-text, currentColor);
    font-size: calc(1em / 0.9);
    font-weight: 400;
  }
}

.tt-graphical-editor {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 11px;
}
/* Instrument screens: node faces, signal plots and the wavetable curve share
 * one flat screen inset in the panel. It follows the surrounding theme: the
 * screen is the background tinted toward the text colour, and grid, labels
 * and readouts are the text colour at lower strength, so light and dark
 * schemes (the app's and each Frame board's) both read. The trace is the
 * node's colour: a patch card's or inspector's --tt-node-color, else the
 * face's catalog colour (--tt-face-tone, set by FaceScreen), else the theme
 * accent. A theme's screenTrace or a widget accent sets --tt-screen-accent,
 * which overrides all of them. A Theme `screen` replaces the derived screen
 * and picks its own ink (theme.ts screenInk); screenGlow sets the halo. */
:where(.node-card-root, .tt-frame-board) {
  --tt-screen-text: var(--tt-text, var(--text, #ededed));
  --tt-screen-bg: color-mix(
    in srgb,
    var(--tt-background, var(--panel, #181818)) 95%,
    var(--tt-screen-text)
  );
  --tt-screen-edge: color-mix(in srgb, var(--tt-screen-text) 10%, transparent);
  --tt-screen-grid: color-mix(in srgb, var(--tt-screen-text) 5%, transparent);
  --tt-screen-grid-major: color-mix(
    in srgb,
    var(--tt-screen-text) 11%,
    transparent
  );
  --tt-screen-ink: color-mix(in srgb, var(--tt-screen-text) 55%, transparent);
  --tt-screen-muted: color-mix(in srgb, var(--tt-screen-text) 32%, transparent);
  --tt-screen-glow: 0.2;
}
/* A board starts its own faces fresh: no accent or node colour from a host
 * card it sits in. */
:where(.tt-frame-board) {
  --tt-screen-accent: initial;
  --tt-node-color: initial;
}
:where(.tt-face, .tt-signal-plot, .tt-curve-plot) {
  --tt-screen-trace: var(
    --tt-screen-accent,
    var(--tt-node-color, var(--tt-face-tone, var(--tt-accent, var(--accent))))
  );
  /* A second voice (a delay's right channel, alternate chorus voices): the
   * same hue, softer. */
  --tt-screen-alt: color-mix(in srgb, var(--tt-screen-trace) 55%, transparent);
  /* Text in the trace colour, pulled toward the text colour to stay legible
   * on light screens as well as dark. */
  --tt-screen-trace-text: color-mix(
    in srgb,
    var(--tt-screen-trace) 65%,
    var(--tt-screen-text)
  );
  --tt-screen-warn: var(--warning, #e8b04b);
  --tt-screen-ok: var(--ok, #84cfa6);
  --tt-screen-fill: 0.2;
  /* EQ band palette: eight hues at matched lightness; strokes mix toward the
   * text colour like every trace, so they hold on light screens too. */
  background: var(--tt-screen-bg);
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--tt-screen-edge);
  color: var(--tt-screen-ink);
}
.tt-graphical-plot {
  position: relative;
  display: block;
  width: 100%;
  flex: 1;
  min-height: 80px;
  max-height: 220px;
  overflow: hidden;
}
.tt-face-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: none;
  font-family: var(--tt-font, 'DM Sans', sans-serif);
  font-size: 9px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tt-face-grid line {
  stroke: var(--tt-screen-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.tt-face-grid line[data-major] {
  stroke: var(--tt-screen-grid-major);
}
.tt-face-labels text {
  fill: var(--tt-screen-ink);
}
.tt-face-labels .tt-face-caption {
  fill: var(--tt-screen-trace-text);
}
/* Zoom LOD (face/scheduler.ts sets data-lod): below 0.6 the axis labels are
 * illegible, so traces, grid and handles stay and the labels go. */
.tt-face:is([data-lod='mid'], [data-lod='far']) .tt-face-labels {
  display: none;
}
.tt-face-zone {
  fill: var(--tt-screen-muted);
  opacity: 0.12;
}
.tt-face-zone[data-tone='warn'] {
  fill: var(--tt-screen-warn);
  opacity: 0.07;
}
.tt-face-zone[data-tone='ok'] {
  fill: var(--tt-screen-ok);
  opacity: 0.16;
}
.tt-face-stop-trace {
  stop-color: var(--tt-screen-trace);
  stop-opacity: var(--tt-screen-fill);
}
.tt-face-stop-alt {
  stop-color: var(--tt-screen-alt);
  stop-opacity: var(--tt-screen-fill);
}
.tt-face-trace-group {
  --tt-ink: var(--tt-screen-trace);
}
.tt-face-trace-group[data-tone='alt'] {
  --tt-ink: var(--tt-screen-alt);
}
.tt-face-trace-group[data-tone='muted'] {
  --tt-ink: var(--tt-screen-muted);
}
.tt-face-trace-group[data-tone='warn'] {
  --tt-ink: var(--tt-screen-warn);
}
.tt-face-trace-group[data-tone='ok'] {
  --tt-ink: var(--tt-screen-ok);
}
.tt-face [data-tone='band1'] {
  --tt-ink: var(--tt-screen-band-1);
}
.tt-face [data-tone='band2'] {
  --tt-ink: var(--tt-screen-band-2);
}
.tt-face [data-tone='band3'] {
  --tt-ink: var(--tt-screen-band-3);
}
.tt-face [data-tone='band4'] {
  --tt-ink: var(--tt-screen-band-4);
}
.tt-face [data-tone='band5'] {
  --tt-ink: var(--tt-screen-band-5);
}
.tt-face [data-tone='band6'] {
  --tt-ink: var(--tt-screen-band-6);
}
.tt-face [data-tone='band7'] {
  --tt-ink: var(--tt-screen-band-7);
}
.tt-face [data-tone='band8'] {
  --tt-ink: var(--tt-screen-band-8);
}
/* Glow without filters: a soft translucent halo under a solid stroke.
 * Blur filters re-rasterise on every change and at every Patch zoom. */
.tt-face-glow {
  fill: none;
  stroke: var(--tt-ink);
  stroke-opacity: var(--tt-screen-glow);
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tt-face .tt-face-trace {
  fill: none;
  stroke: var(--tt-ink);
  /* Toward the text colour: a touch lighter on dark, deeper on light. */
  stroke: color-mix(in srgb, var(--tt-ink) 82%, var(--tt-screen-text));
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tt-face-trace-group[data-quiet] .tt-face-trace {
  stroke: var(--tt-ink);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}
.tt-face-marker line {
  stroke: var(--tt-screen-muted);
  stroke-dasharray: 2 3;
}
.tt-face-marker text {
  fill: var(--tt-screen-ink);
}
.tt-face-readout {
  fill: var(--tt-screen-text);
  fill-opacity: 0.92;
  paint-order: stroke;
  stroke: var(--tt-screen-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}
/* Live layer: the spectrum canvas sits behind the SVG; marks move without a
 * React render (face/LiveLayer.tsx). */
.tt-face-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tt-face-live-marks > * {
  --tt-ink: var(--tt-screen-trace);
}
.tt-face-live-marks > [data-tone='alt'] {
  --tt-ink: var(--tt-screen-alt);
}
.tt-face-live-marks > [data-tone='muted'] {
  --tt-ink: var(--tt-screen-muted);
}
.tt-face-live-marks > [data-tone='warn'] {
  --tt-ink: var(--tt-screen-warn);
}
.tt-face-live-marks > [data-tone='ok'] {
  --tt-ink: var(--tt-screen-ok);
}
.tt-face-live-dot {
  fill: var(--tt-screen-text);
  stroke: var(--tt-ink);
  stroke-width: 2px;
}
.tt-face-live-line {
  stroke: var(--tt-ink);
  stroke-width: 2.5px;
  stroke-linecap: round;
}
.tt-face-live-path {
  fill: none;
  stroke: var(--tt-ink);
  stroke-width: 3px;
  stroke-linecap: round;
}
.tt-face-live-text {
  fill: color-mix(in srgb, var(--tt-ink) 65%, var(--tt-screen-text));
  paint-order: stroke;
  stroke: var(--tt-screen-bg);
  stroke-width: 3px;
}
.tt-face-live-text[data-size='large'] {
  font-size: 16px;
  font-weight: 600;
}
.tt-face-live-text[data-size='headline'] {
  font-size: 28px;
  font-weight: 600;
}
.tt-face-live-text[data-size='value'] {
  font-size: 12px;
  font-weight: 500;
}
.tt-face-live-text[data-size='small'] {
  font-size: 8px;
}
/* The tuner's Scala import: one quiet inline button under the screen. */
.tt-scala-import {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.tt-scala-import button {
  min-height: 22px;
  padding: 2px 8px;
  color: inherit;
  background: var(--tt-surface, var(--raised, #303030));
  border: 1px solid var(--tt-border, var(--border, #454545));
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.tt-scala-import button:disabled {
  opacity: 0.5;
  cursor: default;
}
.tt-scala-import small {
  color: var(--tt-muted, var(--muted, #a0a0a0));
}
.tt-face-handle {
  --tt-ink: var(--tt-screen-trace);
  cursor: grab;
  outline: none;
  touch-action: none;
}
.tt-face-handle[data-tone='alt'] {
  --tt-ink: var(--tt-screen-alt);
}
.tt-face-handle[data-tone='muted'] {
  --tt-ink: var(--tt-screen-muted);
}
.tt-face-handle[data-tone='warn'] {
  --tt-ink: var(--tt-screen-warn);
}
.tt-face-hit {
  fill: transparent;
}
.tt-face-ring {
  fill: var(--tt-screen-bg);
  stroke: var(--tt-ink);
  stroke-width: 1.75px;
}
.tt-face-dot {
  fill: var(--tt-screen-text);
}
.tt-face-handle[data-hot] .tt-face-ring,
.tt-face-handle:focus-visible .tt-face-ring {
  fill: var(--tt-ink);
  fill-opacity: 0.25;
  stroke-width: 2.5px;
}
.tt-face-handle:focus-visible .tt-face-hit {
  fill: var(--tt-ink);
  fill-opacity: 0.12;
}
.tt-face-handle:active {
  cursor: grabbing;
}
.tt-face-handle[aria-disabled='true'] {
  opacity: 0.45;
  cursor: default;
}
/* Step grid (face/StepGridEditor.tsx): transparent cells over the drawn
 * steps; the focused cell gets a ring in the screen's ink. */
.tt-step-cell {
  fill: transparent;
  stroke: none;
  outline: none;
  cursor: pointer;
  touch-action: none;
}
.tt-step-cell:focus-visible,
.tt-step-cell[data-hot] {
  stroke: var(--tt-screen-text);
  stroke-width: 1.5px;
  stroke-opacity: 0.8;
}
[aria-disabled='true'] > [data-step-row] .tt-step-cell {
  cursor: default;
}
.tt-graphical-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tt-graphical-fields label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 3px;
  min-width: 80px;
  font-size: 10px;
}
.tt-graphical-fields input {
  color: inherit;
  background: transparent;
  border: 1px solid var(--tt-border, var(--border));
  border-radius: 3px;
  width: 65px;
  min-width: 0;
  font: inherit;
  padding: 4px;
}
/* A choice sits in the row like its numeric siblings: `Type [ Morph ⌄ ]`. */
.tt-graphical-fields .tt-choice-control {
  flex: 1;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 80px;
  font-size: 10px;
}
.tt-graphical-fields .tt-choice-control > label {
  display: inline;
  flex: none;
  min-width: 0;
}
.tt-graphical-fields .tt-choice-box > select {
  padding-block: 4px;
  padding-inline-start: 4px;
}
.tt-graphical-editor[data-model='tuner'] .tt-graphical-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 6px 10px;
}
.tt-graphical-editor[data-model='tuner'] .tt-graphical-fields > label,
.tt-graphical-editor[data-model='tuner'] .tt-choice-control {
  min-width: 0;
  justify-content: space-between;
  white-space: nowrap;
}
.tt-graphical-editor small {
  font-size: 9px;
  opacity: 0.65;
  line-height: 1.35;
}
.tt-frame-graphical {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tt-frame-graphical .tt-graphical-editor {
  flex: 1;
  min-height: 0;
}
.tt-frame-graphical > .tt-button-control {
  height: 38px;
  min-height: 38px;
  flex: none;
}
.tt-frame-graphical > .tt-button-control .tt-button-state {
  display: none;
}

.tt-plot-effective {
  stroke: var(--tt-screen-ink, var(--tt-text, var(--text)));
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  opacity: 0.65;
  pointer-events: none;
}
.tt-piano {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 100px;
  font-size: 11px;
}
.tt-piano-tools {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.tt-piano-tools button {
  background: var(--tt-surface);
  color: var(--tt-text);
  border: 1px solid var(--tt-border);
  border-radius: 4px;
  font: inherit;
  padding: 3px 6px;
}
.tt-piano-tools button[aria-pressed='true'] {
  background: var(--tt-accent);
  color: var(--tt-background);
}
.tt-piano-tools label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tt-piano-tools input {
  width: 90px;
  accent-color: var(--tt-accent);
}
.tt-piano-keys {
  display: flex;
  flex: 1;
  min-height: 65px;
  position: relative;
  isolation: isolate;
  touch-action: none;
}
.tt-piano-keys button {
  flex: 1;
  min-width: 0;
  padding: 0 0 4px;
  display: flex;
  align-items: end;
  justify-content: center;
  border: 1px solid #555;
  border-radius: 0 0 4px 4px;
  font: inherit;
  font-size: 9px;
  touch-action: none;
  user-select: none;
}
.tt-piano-keys .white {
  background: #f5f4ef;
  color: #202020;
  height: 100%;
}
.tt-piano-keys .black {
  background: #202020;
  color: #f5f4ef;
  height: 62%;
  margin-left: -1.3%;
  margin-right: -1.3%;
  z-index: 1;
  flex: 0.65;
}
.tt-piano-keys button[aria-pressed='true'] {
  background: var(--tt-accent);
  color: var(--tt-background);
}
.tt-piano-keys button[data-sustained] {
  box-shadow: inset 0 -5px var(--tt-accent);
}
.tt-piano-keys button:focus-visible,
.tt-piano:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: 2px;
}
.tt-piano small {
  font-size: 10px;
  opacity: 0.7;
}
.tt-frame-image {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tt-image-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 11px;
  opacity: 0.7;
  text-align: center;
}
.tt-segmented {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.tt-segmented [role='radiogroup'] {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.tt-segmented button {
  flex: 1;
  background: var(--tt-surface);
  color: var(--tt-text);
  border: 1px solid var(--tt-border);
  border-radius: 4px;
  padding: 7px;
  font: inherit;
  min-width: 40px;
}
.tt-segmented button[aria-checked='true'] {
  background: var(--tt-accent);
  color: var(--tt-background);
}
.tt-segmented output {
  font-size: 10px;
  opacity: 0.7;
}
.tt-tuner {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--tt-border, var(--border));
  border-radius: 6px;
}
.tt-tuner output {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.tt-tuner input {
  width: 80px;
}
.tt-tuner svg {
  width: 100%;
  height: 70px;
  font-size: 11px;
}
.tt-rect-slider {
  width: 100%;
  position: relative;
  flex: 1;
  min-width: 16px;
  min-height: 24px;
  overflow: hidden;
  border: 1px solid var(--tt-border);
  border-radius: 2px;
  background: var(--tt-surface);
  touch-action: none;
  cursor: crosshair;
}
.tt-rect-slider:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: 2px;
}
.tt-slider-fill,
.tt-slider-bar {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  left: 0;
}
.tt-slider-fill {
  width: calc(var(--tt-slider-at) * (100% - 4px));
  background: color-mix(in srgb, var(--tt-accent) 30%, transparent);
}
.tt-slider-bar {
  width: 4px;
  left: calc(var(--tt-slider-at) * (100% - 4px));
  background: var(--tt-accent);
}
.tt-rect-slider[data-vertical] .tt-slider-fill {
  top: auto;
  right: 0;
  width: auto;
  height: calc(var(--tt-slider-at) * (100% - 4px));
}
.tt-rect-slider[data-vertical] .tt-slider-bar {
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(var(--tt-slider-at) * (100% - 4px));
  width: auto;
  height: 4px;
}
.tt-rect-slider[aria-disabled='true'] {
  opacity: 0.6;
  cursor: default;
}
.tt-control.tt-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tt-button-checkbox .tt-play-button,
.tt-button-switch .tt-play-button {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  padding: 4px;
  border: 0;
}
.tt-check-box {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--tt-border);
  border-radius: 2px;
  background: var(--tt-surface);
  flex: none;
}
.tt-play-button[data-active] .tt-check-box {
  background: var(--tt-accent);
  color: var(--tt-background);
}
.tt-switch-track {
  display: flex;
  width: 44px;
  height: 24px;
  padding: 3px;
  border: 1px solid var(--tt-border);
  border-radius: 20px;
  background: var(--tt-surface);
  flex: none;
}
.tt-switch-track > span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tt-text);
}
.tt-play-button[data-active] .tt-switch-track {
  background: var(--tt-accent);
  justify-content: flex-end;
}
.tt-play-button[data-active] .tt-switch-track > span {
  background: var(--tt-background);
}
.tt-xy-joystick .tt-xy-surface {
  border-radius: 50%;
  aspect-ratio: 1;
  align-self: center;
  width: min(100%, 240px);
  background-image: radial-gradient(
    circle,
    transparent 24%,
    var(--tt-border) 25%,
    transparent 26%,
    transparent 49%,
    var(--tt-border) 50%,
    transparent 51%,
    transparent 74%,
    var(--tt-border) 75%,
    transparent 76%
  );
}
.tt-xy-joystick .tt-xy-point {
  width: 28px;
  height: 28px;
  border: 2px solid var(--tt-text);
  border-radius: 50%;
  background: var(--tt-accent);
  box-shadow: 0 2px 8px #0005;
}
.tt-signal-inspector.is-compact {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  box-sizing: border-box;
}
.tt-signal-inspector.is-compact .tt-signal-tools {
  gap: 4px;
}
.tt-signal-inspector.is-compact .tt-signal-tools select,
.tt-signal-inspector.is-compact .tt-signal-tools button {
  min-width: 0;
  font-size: 10px;
  min-height: 24px;
  padding: 3px 5px;
}
.tt-signal-inspector.is-compact .tt-signal-plot {
  flex: 1;
  min-height: 60px;
  height: 0;
  width: 100%;
}
.tt-spectrogram {
  display: block;
  background: #090b14;
}
.tt-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--tt-border);
  border-radius: 2px;
  background: var(--tt-background);
  overflow: hidden;
}
.tt-screen canvas {
  width: 100%;
  flex: 1;
  min-height: 0;
  height: 0;
  display: block;
  touch-action: none;
}
.tt-screen canvas:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: -3px;
}
.tt-screen canvas.tt-screen-tracking {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tt-screen-message {
  position: absolute;
  inset: 12px;
  display: grid;
  place-items: center;
  font-size: 11px;
  text-align: center;
  pointer-events: none;
}
.tt-screen-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border-top: 1px solid var(--tt-border);
  font-size: 10px;
}
.tt-screen-tools button {
  border: 1px solid var(--tt-border);
  padding: 3px 6px;
  border-radius: 2px;
}
.tt-screen-tools input {
  min-width: 0;
  flex: 1;
}
.tt-led {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.tt-led-lamp {
  flex: none;
  height: min(100%, 48px);
  aspect-ratio: 1;
  border: 1px solid rgb(0 0 0 / 0.45);
  background: color-mix(
    in srgb,
    var(--led-color) calc(var(--led-level) * 100%),
    var(--led-off)
  );
  box-shadow: 0 0 calc(var(--led-glow) * var(--led-level) * 14px)
    color-mix(in srgb, var(--led-color) 70%, transparent);
}
.tt-led.is-round .tt-led-lamp {
  border-radius: 50%;
}
.tt-led.is-square .tt-led-lamp {
  border-radius: 3px;
}
.tt-led.is-bar .tt-led-lamp {
  flex: 1;
  width: auto;
  aspect-ratio: auto;
  height: 40%;
  border-radius: 3px;
}
.tt-led-lamp.is-flash {
  animation-name: tt-led-flash;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
@keyframes tt-led-flash {
  from {
    background: var(--led-color);
    box-shadow: 0 0 14px var(--led-color);
  }
  to {
    background: var(--led-off);
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt-led-lamp.is-flash {
    animation-timing-function: steps(1, end);
  }
}
.tt-led-label {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tt-web {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--tt-border, rgb(127 127 127 / 0.35));
  border-radius: 6px;
}
.tt-web iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}
.tt-web-origin {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 11px;
  opacity: 0.8;
}
.tt-web-origin a {
  margin-left: auto;
  color: inherit;
}
.tt-web-gate {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  font-size: 12px;
}
.tt-web-gate button {
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* Node faces: paint, curve, switcher, readout. No animation, so reduced motion needs no override. */
.tt-paint,
.tt-curve,
.tt-switcher {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.tt-paint-area {
  position: relative;
  flex: 1;
  min-height: 0;
}
.tt-paint-area canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.tt-paint-area canvas:focus-visible,
.tt-curve-plot:focus-visible {
  outline: 2px solid var(--tt-accent, #dedede);
  outline-offset: -2px;
}
.tt-paint-cursor {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--tt-text, #ededed);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.tt-paint-area canvas:focus-visible + .tt-paint-cursor,
.tt-paint-cursor[data-drawing='true'] {
  opacity: 1;
}
.tt-paint-tools,
.tt-curve-tools,
.tt-curve-frames,
.tt-switcher-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px;
  font-size: 11px;
  background: var(--tt-surface, #262626);
  border-top: 1px solid var(--tt-border, #454545);
}
.tt-paint-tools label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tt-paint-tools input[type='range'] {
  width: 56px;
}
.tt-paint-tools button,
.tt-curve-tools button,
.tt-curve-frames button,
.tt-curve-frames select,
.tt-switcher-bar button,
.tt-switcher-bar select {
  min-height: 24px;
  padding: 2px 7px;
  color: var(--tt-text, #ededed);
  background: var(--tt-background, #202020);
  border: 1px solid var(--tt-border, #454545);
  border-radius: 4px;
  font: inherit;
}
.tt-paint-tools button[aria-pressed='true'],
.tt-curve-tools button[aria-pressed='true'] {
  background: var(--tt-accent, #dedede);
  color: var(--tt-background, #202020);
}
.tt-curve-frames label {
  display: flex;
  align-items: center;
  gap: 4px;
  font: inherit;
}
.tt-curve-frames :disabled,
.tt-curve-tools :disabled {
  opacity: 0.45;
  cursor: default;
}
.tt-graphical-editor > .tt-curve {
  height: auto;
  flex: 1 0 auto;
}
.tt-graphical-editor > .tt-curve > .tt-curve-plot {
  flex: 1 0 80px;
  min-height: 80px;
  max-height: 160px;
}
.tt-frame-graphical:has(.tt-curve) {
  overflow: auto;
}
.tt-curve-plot {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 0;
  touch-action: none;
  cursor: crosshair;
}
.tt-curve-axis {
  stroke: var(--tt-screen-grid-major);
  vector-effect: non-scaling-stroke;
}
.tt-curve-line {
  fill: none;
  stroke: var(--tt-screen-trace);
  stroke-width: 2;
}
.tt-curve-cursor {
  stroke: var(--tt-muted, #a0a0a0);
  stroke-dasharray: 3 3;
  opacity: 0;
}
.tt-curve-plot:focus-visible .tt-curve-cursor {
  opacity: 1;
}
.tt-curve-divider {
  width: 1px;
  align-self: stretch;
  background: var(--tt-border, #454545);
}
.tt-curve-note {
  font-size: 10px;
  color: var(--tt-muted, #a0a0a0);
  padding: 0 4px 4px;
}
.tt-switcher-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 4px;
  padding: 4px;
}
.tt-switcher-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: var(--tt-text, #ededed);
  border: 3px solid var(--tt-border, #454545);
  border-radius: 4px;
  cursor: pointer;
}
.tt-switcher-tile[data-tally='program'] {
  border-color: #e0352b;
}
.tt-switcher-tile[data-tally='preview'] {
  border-color: #33a852;
}
.tt-switcher-tile:focus-visible {
  outline: 2px solid var(--tt-accent, #dedede);
  outline-offset: 1px;
}
.tt-switcher-tile .tt-screen {
  pointer-events: none;
}
.tt-switcher-caption {
  position: absolute;
  left: 4px;
  bottom: 3px;
  font-size: 10px;
  padding: 1px 4px;
  background: rgb(0 0 0 / 0.6);
  border-radius: 2px;
}
.tt-switcher-empty {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 10px;
  color: var(--tt-muted, #a0a0a0);
}
.tt-switcher-status {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-switcher-take {
  font-weight: 600;
}
.tt-readout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 4px 8px;
}
.tt-readout-label {
  font-size: 10px;
  color: var(--tt-muted, #a0a0a0);
}
.tt-readout-value {
  font-size: clamp(14px, 40cqh, 48px);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-readout-value[data-unavailable='true'] {
  font-size: 12px;
  color: var(--tt-muted, #a0a0a0);
}

.tt-face,
.tt-face-palette {
  --tt-screen-band-1: #ef8080;
  --tt-screen-band-2: #edb66f;
  --tt-screen-band-3: #e2d26e;
  --tt-screen-band-4: #8fd69e;
  --tt-screen-band-5: #79c4ed;
  --tt-screen-band-6: #8ea6ff;
  --tt-screen-band-7: #b3a0ff;
  --tt-screen-band-8: #e79eaf;
}

.tt-model-credits {
  padding: 0.75rem;
  color: var(--tt-muted, currentColor);
  font-size: 0.75rem;
}
.tt-model-credits p {
  margin: 0;
}
.tt-model-credits a {
  color: inherit;
}

/* web/src/number-field.css */
/* NumberField and TextField: one box holding a start label, the value and an
 * end unit.
 * Mantine Input (unstyled) provides the structure and section semantics; the
 * look matches .design-field controls. Selectors carry the inner control class
 * so host rules such as `.design-field input` cannot restyle the input. */
.number-field {
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--ui-control-height);
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
}
.number-field:hover {
  border-color: var(--border);
}
.number-field:focus-within {
  border-color: var(--accent);
}
.number-field:has(> .number-field-input:disabled) {
  opacity: 0.5;
}
.number-field > .tt-number-input.number-field-input,
.number-field > input.number-field-input,
.number-field > select.number-field-input,
.text-field > input.text-field-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: 0;
  appearance: textfield;
}
.number-field > .number-field-section {
  flex: none;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.number-field > .number-field-section[data-position='left'] {
  padding-inline-start: 8px;
  pointer-events: var(--input-left-section-pointer-events, none);
}
.number-field > .number-field-section[data-position='right'] {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-inline-end: 8px;
  pointer-events: var(--input-right-section-pointer-events, none);
}
/* A trailing control such as reset; it keeps the box one control tall. */
.number-field-action {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-inline-end: -4px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.number-field-action:hover {
  color: var(--text);
  background: var(--hover);
}
.number-field-action:focus-visible {
  outline: 1px solid var(--accent);
}
.number-field > [data-position='left'] + .number-field-input {
  padding-inline-start: 6px;
}
.number-field > .number-field-input:has(+ [data-position='right']) {
  padding-inline-end: 5px;
}
/* SelectField: the searchable select fills the box; its own chrome is
 * removed so the box carries hover and focus. */
.select-field > .editor-select {
  flex: 1;
  min-width: 0;
  height: 100%;
}
.select-field > .editor-select .mantine-Input-wrapper {
  height: 100%;
}
.select-field > .editor-select .editor-select-input {
  height: 100%;
  min-height: 0;
  padding: 0 16px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
}
.select-field > [data-position='left'] + .editor-select .editor-select-input {
  padding-inline-start: 6px;
}
.select-field > .number-field-section[data-position='right'] {
  pointer-events: auto;
}
/* Text align in StyleFields: icon toggles fill the box after its label. An
 * inherited alignment stays pressed but muted. */
.style-align-field > .style-align-buttons {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 1px;
  padding-inline: 4px;
}
.style-align-field > .number-field-section[data-position='right'] {
  pointer-events: auto;
}
.style-align-buttons > button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.style-align-buttons > button:hover {
  color: var(--text);
  background: var(--hover);
}
.style-align-buttons > button[aria-pressed='true'] {
  color: var(--text);
  background: var(--hover);
}
.style-align-field[data-inherited]
  .style-align-buttons
  > button[aria-pressed='true'] {
  color: var(--muted);
}
/* ChoiceField: a native select fills the box, the chevron drawn over its end
 * padding so a click anywhere opens the list. */
.choice-field {
  position: relative;
}
.number-field.choice-field > select.number-field-input {
  padding-inline-end: 20px;
  cursor: pointer;
  appearance: none;
  text-overflow: ellipsis;
}
.number-field.choice-field > .number-field-section[data-position='right'] {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
}
.choice-field:hover > .number-field-section[data-position='right'] {
  color: var(--text);
}
/* Customizable selects: the open list is the editor-wide select list
 * (editor-ui.css); the box keeps its own chevron. */
@supports (appearance: base-select) {
  .number-field.choice-field > select.number-field-input {
    display: flex;
    align-items: center;
    appearance: base-select;
  }
  .number-field.choice-field > select.number-field-input::picker-icon {
    display: none;
  }
}
/* The Frame inspector follows the host control height. */
.frame-inspector .number-field {
  height: var(--ui-control-height);
  font-size: 11px;
}
.sound-grid .number-field {
  align-self: end;
  height: var(--ui-control-height);
  background: var(--inset);
  border-color: var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.sound-grid .number-field > .number-field-section {
  font-size: 11px;
}
.playback-timing-fields .number-field {
  height: var(--ui-control-height);
  border-color: var(--border);
  border-radius: 5px;
  font-size: 14px;
}

/* web/src/patch-editor.css */
/* The patch owns the window. Chrome and tools sit around or over its canvas. */
.node-card-root {
  /* Subpatch and Frame nodes: the color graphModel gives non-primitive nodes. */
  --patch-group-color: #b1a0e8;
}
.patch-workspace {
  height: 100dvh;
  overflow: hidden;
}
.patch-workspace .main-shell {
  padding-bottom: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.patch-workspace .topbar {
  height: 50px;
  min-height: 50px;
  padding: 0 18px;
  gap: 12px;
}
.patch-workspace .breadcrumbs {
  gap: 12px;
  flex: 1;
}
.patch-workspace .breadcrumbs > span:first-child {
  font-size: 10px;
}
.patch-workspace .toy-title {
  font-family: inherit;
  letter-spacing: -0.2px;
  font-size: 13px;
  margin: 0;
  width: 240px;
  font-weight: 500;
}
.patch-workspace .top-actions {
  gap: 7px;
}
.patch-workspace .top-actions .button {
  min-height: var(--ui-control-height);
  padding: var(--ui-control-padding);
  font-size: 10px;
}
.patch-workspace .workspace-panel {
  margin: 0;
  border: 0;
  border-radius: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  padding-bottom: var(--transport-height, 64px);
}
.patch-workspace .workspace-content {
  flex: 1;
  height: auto;
  min-height: 0;
  flex-direction: row;
  position: relative;
}
.patch-workspace .canvas-area {
  min-height: 0;
  overflow: hidden;
}
.patch-workspace .inspector {
  height: auto;
  min-height: 0;
  width: 278px;
}
.patch-workspace .inspector.is-hidden {
  display: none;
}
.editor-tab-bar {
  display: flex;
  align-items: stretch;
  height: 41px;
  min-height: 41px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: relative;
  z-index: 10;
}
.editor-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.editor-tab {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
  position: relative;
  color: var(--muted);
  flex: none;
}
.editor-tab:hover {
  color: var(--text);
  background: var(--hover);
}
.editor-tab.active {
  color: var(--text);
  background: var(--raised);
}
.editor-tab.active:before {
  content: '';
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--accent);
}
.editor-tab [role='tab'] {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  padding: 0 14px;
  font-size: 11px;
  color: inherit;
  white-space: nowrap;
}
.editor-tab [role='tab'] > svg {
  color: var(--muted);
}
.editor-tab.active [role='tab'] > svg {
  color: var(--accent);
}
.editor-tab [role='tab'] > small {
  font: 7px var(--mono);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 3px;
}
.tab-close {
  color: var(--muted);
  margin-right: 9px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: grid;
  place-items: center;
}
/* Translucent so it layers over the idle, hovered, or active tab background. */
.tab-close:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.tab-picker {
  position: relative;
  flex: none;
}
.tab-picker-trigger {
  height: 40px;
  width: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
  list-style: none;
}
.tab-picker-trigger::-webkit-details-marker {
  display: none;
}
.tab-picker-trigger:hover {
  background: var(--raised);
  color: var(--text);
}
.tab-picker-menu {
  position: fixed;
  width: 255px;
  padding: 7px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 12px 35px var(--black-a4);
}
.tab-picker-menu > small {
  display: block;
  padding: 8px;
  font: 8px var(--mono);
  color: var(--muted);
}
.tab-picker-menu > button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  padding: 10px 8px;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 11px;
}
.tab-picker-menu > button:hover {
  background: var(--raised);
  color: var(--text);
}
.tab-bar-note {
  margin: auto 17px auto auto;
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
  padding-left: 10px;
}
.patch-canvas {
  position: absolute;
  inset: 0;
}
.floating-surface {
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 3px 14px var(--black-a2);
  backdrop-filter: blur(12px);
}
.patch-location {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  color: var(--text-secondary);
  z-index: 5;
  font-size: 10px;
}
.patch-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
}
.patch-actions > button,
.patch-pointer-tools > button {
  min-width: var(--ui-control-height);
  height: var(--ui-control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-secondary);
}
.patch-actions > button:disabled {
  opacity: 0.3;
}
.patch-actions > button {
  width: var(--ui-control-height);
  padding: 0;
}
.patch-actions > button:hover:not(:disabled),
.patch-pointer-tools > button:hover {
  background: var(--hover);
  color: var(--text);
}
.patch-actions > i,
.patch-pointer-tools > i {
  height: 16px;
  width: 1px;
  background: var(--border);
  margin: 0 3px;
}
.patch-actions > i {
  flex-shrink: 0;
  margin: 0 2px;
}
.patch-actions > .patch-add {
  background: var(--accent);
  color: var(--accent-ink);
}
.patch-actions > .patch-add:hover {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.08);
}
.patch-pointer-tools {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.patch-canvas:has(.patch-location) .patch-pointer-tools {
  top: calc(32px + var(--ui-control-height));
}
.patch-pointer-tools > i {
  height: 1px;
  width: 20px;
  margin: 3px auto;
}
.patch-pointer-tools > button {
  padding: 0;
  width: var(--ui-control-height);
}
.patch-pointer-tools > button[aria-pressed='true'] {
  background: var(--hover);
  color: var(--accent);
}
.patch-help {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}
.patch-inspector-toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--ui-control-height);
  padding: 0 11px;
  z-index: 6;
  font-size: 10px;
  color: var(--text-secondary);
}
.patch-inspector-toggle[aria-pressed='true'] {
  color: var(--accent);
}
.patch-canvas .react-flow__controls {
  left: 16px !important;
  bottom: 16px !important;
  display: flex;
  flex-direction: row;
  margin: 0;
}
.patch-canvas .react-flow__controls-button {
  width: var(--ui-control-height) !important;
  height: var(--ui-control-height) !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  padding: 5px !important;
}
.patch-canvas .react-flow__controls-button:last-child {
  border-right: 0 !important;
}
.patch-canvas .react-flow__minimap {
  bottom: 57px;
  right: 16px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.patch-canvas .react-flow__edge-path {
  opacity: 0.78;
}
.patch-canvas .react-flow__edge:hover .react-flow__edge-path {
  opacity: 1;
  stroke-width: 3;
}
.patch-canvas .react-flow__connection-path {
  stroke: var(--port-audio);
}
.patch-node {
  /* Node faces and plots on the card draw in the node's colour. */
  --tt-node-color: var(--node-color);
  --node-inset: 8px;
  --node-header-height: 30px;
  --node-port-spacing: 20px;
  --node-port-padding: 3px;
  width: 190px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 5px 18px var(--black-a3);
}
.patch-node.is-selected {
  border-color: var(--node-color);
  box-shadow:
    0 0 0 1px var(--node-color),
    0 5px 18px var(--black-a3);
}
.patch-node-header {
  height: var(--node-header-height);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--node-inset);
  border-bottom: 1px solid var(--border);
  border-radius: 7px 7px 0 0;
  background: var(--raised);
  cursor: grab;
  font-size: 12px;
  font-weight: 500;
}
.patch-node-icon {
  color: var(--node-color);
  display: grid;
  place-items: center;
}
.patch-node-header > button {
  display: grid;
  place-items: center;
  color: var(--muted);
  margin-left: auto;
  padding: 3px;
}
.patch-node-header > button:hover {
  color: var(--node-color);
}
.patch-node-ports {
  position: relative;
}
.graph-port {
  position: absolute;
  height: var(--node-port-spacing);
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: 10px;
}
.graph-port.port-input {
  left: var(--node-inset);
}
.graph-port.port-output {
  right: var(--node-inset);
  text-align: right;
}
.graph-port > span {
  display: flex;
  gap: 6px;
  align-items: center;
}
.graph-port.port-output > span {
  flex-direction: row-reverse;
}
.graph-port small {
  font: 8px var(--mono);
  color: var(--muted);
}
/* Port offsets are relative to the node; the row lives directly below its header. */
.graph-port .react-flow__handle {
  /* Ports own their spot on the edge, above the width resize strip. */
  z-index: 21;
  box-sizing: border-box;
  padding: 0;
  appearance: none;
  width: 13px !important;
  height: 13px !important;
  border: 1px solid var(--port-color) !important;
  background: var(--panel) !important;
  border-radius: var(--port-radius, 50%);
  top: 50% !important;
  min-width: 13px;
  min-height: 13px;
  transition: box-shadow 0.12s;
}
.graph-port.port-input .react-flow__handle {
  left: calc(-0.5px - var(--node-inset)) !important;
}
.graph-port.port-output .react-flow__handle {
  right: calc(-0.5px - var(--node-inset)) !important;
  background: var(--port-color) !important;
}
/* Glyph shape (`portGlyphStyle`). Edge handles restate React Flow's centering
 * translate so a diamond turns in place. */
.graph-port .react-flow__handle {
  transform: var(--port-transform, none);
}
.graph-port .react-flow__handle-left {
  transform: translate(-50%, -50%) var(--port-transform,);
}
.graph-port .react-flow__handle-right {
  transform: translate(50%, -50%) var(--port-transform,);
}
/* A `signal` port draws as the rate it resolved to; an unconnected one is faint control. */
.graph-port[data-signal='control'] .react-flow__handle {
  border-style: dashed !important;
}
.graph-port[data-signal='open'] .react-flow__handle {
  opacity: 0.5;
}
.patch-node-rate {
  padding: 0 4px;
  border-radius: 3px;
  font: 8px var(--mono);
  text-transform: uppercase;
  color: var(--panel);
  background: var(--rate-color);
}
/* A polyphonic group's voices, `×N`. */
.patch-node-voices {
  --voice-badge-background: #b1a0e8;
  padding: 0 4px;
  border-radius: 3px;
  font: 600 9px var(--mono);
  color: var(--panel);
  background: var(--node-color, var(--voice-badge-background));
  font-variant-numeric: tabular-nums;
}
.graph-port .react-flow__handle:hover,
.graph-port .react-flow__handle.valid {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--port-color) 20%, transparent);
}
.patch-node-controls {
  padding: 0 var(--node-inset) 4px;
}
.patch-node-controls .node-parameter {
  padding: 0;
  border-top: 0;
}
.patch-node-controls .node-parameter-heading > .number-field {
  width: 82px;
  height: 18px;
}
/* Custom GUIs (node faces, the keyboard) bleed edge to edge, ruled off from
 * the ports above and the parameter rows below. */
.patch-node-controls > :is(.tt-graphical-editor, .patch-node-piano) {
  width: auto;
  margin: 0 calc(-1 * var(--node-inset)) 4px;
  padding: 0;
  border-block: 1px solid var(--border);
}
.patch-node-controls > .tt-graphical-editor {
  height: auto;
}
.patch-node-controls > .tt-graphical-editor .tt-graphical-plot {
  flex: none;
  height: 96px;
  border-radius: 0;
}
.patch-node-controls
  > .tt-graphical-editor[data-model='tuner']
  .tt-graphical-plot {
  height: 148px;
}
.patch-node-piano {
  height: 220px;
  box-sizing: border-box;
}
.node-parameter {
  padding: 9px 0 8px;
  border-top: 1px solid var(--border);
}
.node-parameter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
}
.node-parameter-heading > label {
  color: var(--text-secondary);
}
.node-parameter-caption {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* The value box: number right-aligned against its unit, `[ 440 Hz ]`. */
.node-parameter-heading > .number-field {
  width: 92px;
  height: 22px;
  background: var(--inset);
  border-radius: 3px;
  font-size: 10px;
}
/* A marked value names its point beside the number: `1.50 Tri→Saw`. */
.node-parameter-heading > .number-field:has(.parameter-mark) {
  width: 124px;
}
.patch-node-controls
  .node-parameter-heading
  > .number-field:has(.parameter-mark) {
  width: 112px;
}
.parameter-mark {
  color: var(--text-secondary);
}
.node-parameter-heading > .number-field:hover,
.node-parameter-heading > .number-field:focus-within {
  border-color: var(--border-strong);
}
.node-parameter-heading > .number-field > .number-field-input {
  padding-inline: 4px;
  text-align: right;
}
.node-parameter-heading > .number-field > .number-field-section {
  font: 9px var(--mono);
  padding-inline-end: 5px;
}
/* Every row (card, node inspector, public controls) shares that box. A choice
 * reads like a number, `[ ADSR ⌄ ]`, the box widening to its label. */
.node-parameter-heading > .choice-field {
  width: auto;
  min-width: 92px;
  max-width: 62%;
}
.patch-node-controls .node-parameter-heading > .choice-field {
  width: auto;
  min-width: 82px;
}
.node-parameter-heading > .choice-field > .number-field-input {
  justify-content: flex-end;
  field-sizing: content;
  text-align-last: right;
}
.boundary-node {
  width: 170px;
}
.subpatch-open {
  width: 100%;
  padding: 5px var(--node-inset);
  color: var(--node-color);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  border-top: 1px solid var(--border);
}
.subpatch-open > svg:last-child {
  margin-left: auto;
}
/* A Frame on the Patch: a header over the Frame's own board, at Frame size.
 * Components are child nodes laid on the board below the header (FRAME_HEADER
 * in patch/geometry.ts). */
.patch-frame-node {
  position: relative;
  color: var(--text);
}
.patch-frame-node > header {
  height: 34px;
  box-sizing: border-box;
  padding: 0 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
}
.patch-frame-node > header > svg {
  color: var(--patch-group-color);
}
.patch-frame-node > header > strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.patch-frame-node > header > button {
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 4px;
}
.patch-frame-node > header > button:hover {
  color: var(--text);
  background: var(--raised);
}
.patch-frame-board {
  box-sizing: border-box;
  border-width: 2px;
  box-shadow: 0 5px 18px var(--black-a3);
  cursor: grab;
}
.patch-frame-node.is-selected > .patch-frame-board {
  border-color: var(--accent);
}
.patch-frame-node:is(:hover, .is-selected) > .node-size-handle {
  opacity: 1;
}
.live-indicator {
  width: 5px;
  height: 5px;
  display: inline-block;
  background: var(--ok);
  border-radius: 50%;
}
.patch-area-node {
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--area-color) 45%, transparent);
  background: color-mix(in srgb, var(--area-color) 6%, transparent);
  border-radius: 12px;
}
.patch-area-node > header {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  color: var(--area-color);
  cursor: grab;
}
.patch-area-node input {
  color: var(--text-secondary);
  background: none;
  border: 0;
  min-width: 0;
  flex: 1;
  font-size: 11px;
}
.patch-area-node header > span {
  font: 7px var(--mono);
  letter-spacing: 0.7px;
  opacity: 0.75;
}
.patch-area-node button {
  display: grid;
  place-items: center;
  color: var(--muted);
  padding: 3px;
}
.patch-workspace .frame-toolbar {
  height: 44px;
  min-height: 44px;
  padding: 0 var(--ui-panel-padding);
  gap: var(--ui-gap);
}
.frame-toolbar-title {
  display: flex;
  align-items: center;
  gap: var(--ui-gap);
  font-size: 11px;
  color: var(--text-secondary);
}
.frame-toolbar-title > small {
  color: var(--muted);
  font: 9px var(--mono);
  margin-left: 6px;
}
.applet-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  padding: 22px 40px 40px;
  background: radial-gradient(
    ellipse at center,
    var(--raised),
    var(--ground) 70%
  );
}
.applet-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: auto;
  padding-bottom: 40px;
}
.applet-preview > header > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 1px;
}
.applet-preview-content {
  width: min(100%, 760px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 70px var(--black-a3);
  flex: none;
}
.applet-preview > p {
  font-size: 10px;
  color: var(--muted);
  padding-top: 20px;
  margin-bottom: auto;
}
.patch-workspace .frame-stage {
  height: 100%;
  overflow: auto;
  padding: 30px;
}
.patch-workspace .source-view {
  height: 100%;
  overflow: auto;
}
@media (max-width: 1200px) {
  .patch-help {
    display: none;
  }
  .tab-bar-note {
    display: none;
  }
}
@media (max-width: 800px) {
  .patch-workspace .topbar {
    padding: 0 10px;
  }
  .patch-workspace .breadcrumbs > span {
    display: none;
  }
  .patch-workspace .toy-title {
    width: 150px;
  }
  .patch-workspace .document-utility {
    display: none;
  }
  .patch-workspace .top-actions .button {
    padding: 5px 7px;
  }
  .patch-workspace .inspector {
    position: absolute;
    z-index: 7;
    right: 0;
    top: 0;
    bottom: 0;
    width: 265px;
    box-shadow: -8px 0 25px var(--black-a3);
  }
  .patch-workspace .canvas-area.frame-mode {
    padding-right: 265px;
  }
  .frame-toolbar-title {
    display: none;
  }
  .patch-workspace .frame-toolbar {
    justify-content: flex-end;
    padding: 0 8px;
  }
  .patch-location {
    max-width: 210px;
  }
}
@media (max-width: 600px) {
  .patch-workspace .topbar:before {
    display: none;
  }
  .patch-workspace .top-actions .button:first-of-type {
    display: none;
  }
  .patch-workspace .workspace-panel {
    padding-bottom: var(--transport-height, 64px);
  }
  .editor-tab [role='tab'] {
    font-size: 10px;
    padding: 0 10px;
    gap: 6px;
  }
  .editor-tab [role='tab'] > small {
    display: none;
  }
  .patch-location {
    left: 10px;
    top: 10px;
  }
  .patch-actions {
    top: 10px;
    right: 10px;
    padding: 3px;
  }
  .patch-pointer-tools {
    left: 10px;
    top: 10px;
  }
  .patch-canvas:has(.patch-location) .patch-actions {
    top: calc(26px + var(--ui-control-height));
  }
  .patch-canvas:has(.patch-location) .patch-pointer-tools {
    top: calc(26px + var(--ui-control-height));
  }
  .patch-inspector-toggle {
    right: 10px;
    font-size: 0;
    width: 33px;
    justify-content: center;
    padding: 0;
  }
  .applet-preview {
    padding: 20px 14px;
  }
  .applet-preview > header {
    gap: 10px;
  }
  .applet-preview > header > span {
    font-size: 8px;
  }
  .patch-workspace .canvas-area.frame-mode {
    padding-right: 0;
  }
  .patch-workspace .frame-mode + .inspector {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 210px;
    border-top: 1px solid var(--border);
  }
  .patch-workspace .frame-stage {
    padding: 20px 14px 230px;
  }
  .patch-workspace .frame-toolbar .canvas-tools {
    gap: 9px;
  }
}

/* Regions catch gestures on their nameplate; cables and members keep the canvas underneath. */
.patch-canvas .react-flow__node-area {
  pointer-events: none !important;
}
.patch-area-node > header {
  pointer-events: auto;
}

/* Wiring admission is shared with source writes; color is supplemented by
   port emphasis and a persistent instruction/rejection status. */
.react-flow__handle[data-cables] {
  box-shadow: 0 0 0 2px var(--port-color);
}
.shortcut-dialog {
  width: min(720px, calc(100vw - 32px));
}
.shortcut-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--ground);
  color: var(--muted);
}
.shortcut-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 4px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}
.shortcut-search:focus-within {
  border-color: var(--border-strong);
}
.shortcut-results {
  max-height: min(60vh, 600px);
  overflow-y: auto;
}
.shortcut-results h3 {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 18px 0 8px;
}
.shortcut-results dl {
  margin: 0;
}
.shortcut-results dl > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) 1.4fr;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.shortcut-results dd {
  margin: 0;
  line-height: 1.5;
}
.shortcut-results dt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.shortcut-combination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.shortcut-dialog .shortcut-key {
  display: inline-block;
  min-width: 24px;
  background: var(--raised);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.shortcut-gesture,
.shortcut-separator {
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 520px) {
  .shortcut-results dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Cable feedback shares source validation with commits; ports remain available for explanations. */
.graph-port[data-cable-state='valid'] .react-flow__handle {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--port-audio) 18%, transparent);
  border-color: var(--ok) !important;
}
.graph-port[data-cable-state='valid'] > span {
  color: var(--ok);
}
.graph-port[data-cable-state='blocked'] {
  opacity: 0.38;
}
.graph-port[data-cable-state='blocked']:hover {
  opacity: 1;
}
.graph-port[data-cable-state='blocked']:hover .react-flow__handle {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 16%, transparent);
}
.graph-port[data-cable-state='origin'] .react-flow__handle {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--port-audio) 31%, transparent);
}
.cable-gesture-feedback,
.cable-drop-feedback {
  position: absolute;
  z-index: 8;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  max-width: calc(100% - 40px);
  font-size: 11px;
  color: var(--text);
}
.cable-gesture-feedback {
  top: 68px;
  pointer-events: none;
}
.cable-gesture-feedback.is-valid {
  color: var(--ok);
}
.cable-gesture-feedback.is-invalid {
  color: var(--danger);
}
.cable-feedback-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.cable-gesture-feedback kbd {
  font: 9px var(--mono);
  opacity: 0.55;
  margin-left: 9px;
}
.cable-drop-feedback {
  bottom: 62px;
  color: var(--text-secondary);
}
.cable-drop-feedback button {
  width: 20px;
  flex: none;
  font-size: 18px;
  color: var(--muted);
}
.patch-canvas:has(.cable-gesture-feedback.is-invalid)
  .react-flow__connection-path {
  stroke: var(--danger);
}
.node-parameter-caption label {
  color: var(--text-secondary);
}
/* Mantine's transparent ActionIcon; the row scope outranks its inline colour. */
.node-parameter .node-expose {
  color: var(--muted);
}
.node-parameter .node-expose:is(:hover, :focus-visible) {
  color: var(--node-color);
}
/* Add to Frame shows only on its hovered or focused row. It keeps its space,
 * so labels never reflow. */
.node-parameter .node-expose {
  opacity: 0;
}
.node-parameter:is(:hover, :focus-within) .node-expose {
  opacity: 1;
}
.patch-node-header > .node-rename {
  margin-left: auto;
}
.patch-node-header > .node-rename + button {
  margin-left: 0;
}
.patch-location {
  max-width: calc(100% - 480px);
}
.patch-crumbs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.patch-crumbs > span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.patch-crumbs > span > svg {
  color: var(--muted);
  margin: 0 4px;
  flex: none;
}
.patch-crumbs button {
  color: var(--muted);
  font-size: 10px;
}
.patch-crumbs button:hover {
  color: var(--text);
}
.patch-crumbs strong {
  font-weight: 500;
}
.patch-rename {
  color: var(--muted);
  flex: none;
  display: grid;
  place-items: center;
  width: var(--ui-control-height);
  height: var(--ui-control-height);
}
.patch-dialog-form {
  padding: var(--ui-dialog-padding);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.patch-dialog-form > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.patch-dialog-form input,
.patch-dialog-form :is(select, .editor-select-input) {
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 11px;
  font: inherit;
}
.patch-dialog-form p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}
.patch-dialog-form > button {
  align-self: flex-end;
}
@media (max-width: 1200px) {
  .patch-location {
    max-width: calc(100% - 310px);
  }
}
@media (max-width: 600px) {
  .patch-location {
    max-width: calc(100% - 20px);
  }
  .cable-gesture-feedback {
    top: 105px;
    font-size: 10px;
  }
  .cable-drop-feedback {
    font-size: 10px;
    bottom: 58px;
  }
}

/* Shared node chrome: canvas, picker and inert drag previews. */
.patch-node {
  position: relative;
}
.patch-node-header {
  position: relative;
  gap: 0;
  padding: 0 var(--node-inset);
  background: color-mix(in srgb, var(--node-color) 43%, var(--panel));
  color: var(--text);
}
.patch-node-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patch-node-header .patch-node-icon {
  color: var(--text);
  opacity: 0.85;
}
.patch-node-header > button {
  margin-left: 0;
  color: var(--text);
  flex: 0 0 auto;
}
.patch-node-header > button:hover {
  color: var(--text);
  background: var(--white-a1);
}
.patch-node-header .node-fold {
  padding: 4px;
  border-radius: 4px;
}
.patch-node.is-collapsed .patch-node-header {
  border-bottom: 0;
  border-radius: 7px;
}
.patch-node.is-collapsed .patch-node-ports {
  position: absolute;
  inset: calc(var(--node-header-height) / 2) 0 auto;
  height: 0 !important;
  z-index: 8;
}
.patch-node.is-collapsed .graph-port {
  top: 0 !important;
  height: 0;
}
.patch-node.is-collapsed .graph-port > span {
  display: none;
}
.patch-node.is-collapsed .graph-port .react-flow__handle {
  visibility: hidden;
  pointer-events: none;
}
.patch-node-header .folded-ports {
  position: absolute;
  z-index: 21;
  top: calc((var(--node-header-height) - 20px) / 2);
  width: 13px;
  height: 20px;
  padding: 0;
  gap: 3px;
  display: flex;
  align-items: center;
  font: 8px var(--mono);
  background: var(--panel);
  border-radius: 8px;
}
.folded-ports.folded-input {
  left: -0.5px;
  transform: translateX(-50%);
}
.folded-ports.folded-output {
  right: -0.5px;
  transform: translateX(50%);
}
.folded-ports i {
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 1px solid var(--port-color);
  border-radius: var(--port-radius, 50%);
  transform: var(--port-transform, none);
  flex: 0 0 13px;
}
.folded-ports small {
  position: absolute;
  right: calc(100% + 4px);
}
.folded-output small {
  right: auto;
  left: calc(100% + 4px);
}
.folded-output i {
  background: var(--port-color);
}
.patch-node.is-collapsed.ports-open-input .graph-ports.input,
.patch-node.is-collapsed.ports-open-output .graph-ports.output {
  position: absolute;
  top: 22px;
  width: 190px;
  padding: 6px 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  box-shadow: 0 8px 25px var(--black-a6);
}
.patch-node.is-collapsed.ports-open-input .graph-ports.input {
  left: -1px;
}
.patch-node.is-collapsed.ports-open-output .graph-ports.output {
  right: -1px;
}
.patch-node.is-collapsed.ports-open-input .graph-ports.input .graph-port,
.patch-node.is-collapsed.ports-open-output .graph-ports.output .graph-port {
  position: relative;
  top: auto !important;
  left: auto;
  right: auto;
  min-height: 28px;
  height: 28px;
  margin: 0 var(--node-inset);
}
.patch-node.is-collapsed.ports-open-output .graph-ports.output .graph-port {
  justify-content: flex-end;
}
.patch-node.is-collapsed.ports-open-input .graph-ports.input .graph-port > span,
.patch-node.is-collapsed.ports-open-output
  .graph-ports.output
  .graph-port
  > span {
  display: flex;
}
.patch-node.is-collapsed.ports-open-input
  .graph-ports.input
  .react-flow__handle,
.patch-node.is-collapsed.ports-open-output
  .graph-ports.output
  .react-flow__handle {
  visibility: visible;
  pointer-events: auto;
}
.react-flow__node:has(.ports-open-input),
.react-flow__node:has(.ports-open-output) {
  z-index: 100 !important;
}

@media (pointer: coarse) {
  .patch-node {
    --node-header-height: 34px;
    --node-port-spacing: 26px;
  }
  .patch-node-controls .node-parameter {
    padding-block: 4px;
  }
  .patch-node-controls .node-parameter-heading > .number-field {
    min-height: 26px;
  }
}

.node-size-handle {
  position: absolute;
  z-index: 20;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
}
.node-size-handle.horizontal {
  right: -4px;
  top: 8px;
  bottom: 8px;
  width: 9px;
  cursor: ew-resize;
}
.node-size-handle.both {
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
}
.patch-node:hover > .node-size-handle,
.patch-node.is-selected > .node-size-handle,
.node-size-handle:focus-visible {
  opacity: 1;
}
.node-size-handle.horizontal:hover,
.node-size-handle.horizontal:focus-visible {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.patch-node-controls .node-parameter-caption label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* A component on its Frame card: just the widget, no box. Unlocked, hover or
 * selection outlines the control surface itself (measured in
 * PatchWidgetNode.tsx), with the resize corner on that outline. */
.patch-widget-node {
  position: relative;
  cursor: grab;
}
/* Locked Patch: the component is played, never arranged or outlined. */
.patch-widget-node.playable {
  cursor: auto;
}
.patch-widget-node.playable > .patch-widget-surface {
  display: none;
}
.patch-widget-content {
  height: 100%;
}
.patch-widget-surface {
  position: absolute;
  border-radius: 5px;
  outline: 1px solid transparent;
  outline-offset: 3px;
  pointer-events: none;
}
.patch-widget-node:hover > .patch-widget-surface {
  outline-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.patch-widget-node.selected > .patch-widget-surface {
  outline-color: var(--accent);
}
/* The Frame card already paints the board; members draw only themselves. */
.patch-widget-content > .tt-frame-board {
  background: transparent;
  border-color: transparent;
}
.patch-widget-surface > .node-size-handle {
  pointer-events: auto;
}
.patch-widget-node.selected .node-size-handle {
  opacity: 1;
}

/* web/src/patch-routing.css */
/* Parameter inlets on card rows, the collapsed-card socket list, bus chips and
 * bus peer highlight on Patch node cards. */
.node-card-root {
  /* Frame-control binding outlets and links: the Interface node color. */
  --patch-binding: #8cb7d6;
}
.node-parameter[data-inlet] {
  position: relative;
}
.node-parameter-stub {
  display: flex;
  align-items: center;
  height: 18px;
  color: var(--muted);
  font-size: 10px;
}
.graph-inlet,
.graph-socket .react-flow__handle {
  box-sizing: border-box;
  width: 11px !important;
  height: 11px !important;
  min-width: 11px;
  min-height: 11px;
  padding: 0;
  border: 1px solid var(--port-color, var(--port-control)) !important;
  border-radius: var(--port-radius, 50%);
  background: var(--panel) !important;
  transition: box-shadow 0.12s;
}
/* Inlets take a control lane, so they draw the control glyph
 * (`portGlyphStyle('control')`) and turn in place like edge ports. */
.react-flow__handle.graph-inlet,
.graph-socket .react-flow__handle {
  transform: translate(-50%, -50%) var(--port-transform,);
}
.node-parameter > .graph-inlet {
  position: absolute;
  left: calc(-0.5px - var(--node-inset)) !important;
  top: 50% !important;
}
/* Repeated channel rows sit inside the card's padded controls. */
.patch-node-controls .node-item-heading > .graph-ports {
  left: calc(-1 * var(--node-inset));
}
.patch-node-controls .node-item-add-inlet {
  left: calc(-0.5px - var(--node-inset)) !important;
}
.patch-node-sockets {
  display: flex;
  flex-direction: column;
  padding: 2px 0 4px;
  border-top: 1px dashed
    color-mix(in srgb, var(--port-control) 45%, transparent);
}
.graph-socket {
  position: relative;
  display: flex;
  align-items: center;
  height: 18px;
  padding-left: var(--node-inset, 8px);
  color: var(--text-secondary);
  font-size: 10px;
}
.graph-socket > span {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.graph-socket small {
  font: 8px var(--mono);
  color: var(--muted);
}
.graph-socket .react-flow__handle {
  left: -0.5px !important;
  top: 50% !important;
}
:is(.node-parameter, .graph-socket)[data-owner]
  :is(.graph-inlet, .react-flow__handle) {
  border-style: dotted !important;
  opacity: 0.6;
}
:is(.node-parameter, .graph-socket)[data-cable-state='valid']
  :is(.graph-inlet, .react-flow__handle),
.graph-inlet:hover,
.graph-inlet:focus-visible {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--port-control) 18%, transparent);
}
:is(.node-parameter, .graph-socket)[data-cable-state='valid']
  :is(.graph-inlet, .react-flow__handle) {
  border-color: var(--ok) !important;
}
.graph-socket[data-cable-state='valid'] > span,
.node-parameter[data-cable-state='valid'] .node-parameter-caption label {
  color: var(--ok);
}
:is(.node-parameter, .graph-socket)[data-cable-state='blocked'] {
  opacity: 0.38;
}
:is(.node-parameter, .graph-socket)[data-cable-state='blocked']:hover {
  opacity: 1;
}
.patch-node-bus {
  max-width: 72px;
  overflow: hidden;
  padding: 0 5px;
  border: 1px solid var(--node-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font: 9px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patch-node-bus[data-empty] {
  border-style: dashed;
  color: var(--muted);
}
.patch-node.is-bus-peer {
  outline: 2px solid var(--node-color);
  outline-offset: 3px;
}
/* Frame controls on the Patch: the binding outlet and the derived link to the
 * parameter rows the control drives. PatchWidgetNode places the outlet beside
 * the control surface; it shows on hover, selection, focus or while drawing. */
.patch-widget-node > .widget-audio-handle {
  width: 11px;
  height: 11px;
  border: 2px solid var(--port-audio);
  border-radius: 50%;
  background: var(--port-audio);
  transform: translate(-50%, -50%);
}
.patch-widget-node.playable > .widget-audio-handle {
  pointer-events: none;
}
.patch-widget-node
  > .widget-audio-handle:is(.is-valid, :hover, :focus-visible) {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--port-audio) 18%, transparent);
}
.patch-widget-node > .widget-binding-handle {
  position: absolute;
  right: auto;
  transform: translate(2px, -50%);
  opacity: 0;
  box-sizing: border-box;
  width: 11px !important;
  height: 11px !important;
  min-width: 11px;
  min-height: 11px;
  padding: 0;
  border: 2px solid var(--patch-binding) !important;
  border-radius: 2px;
  background: var(--patch-binding) !important;
  transition: box-shadow 0.12s;
}
.patch-widget-node:not(.playable):is(:hover, .selected)
  > .widget-binding-handle,
.patch-widget-node > .widget-binding-handle:focus-visible,
.patch-widget-node > .widget-binding-handle.connectingfrom {
  opacity: 1;
}
.patch-widget-node > .widget-binding-handle:hover,
.patch-widget-node > .widget-binding-handle:focus-visible {
  box-shadow: 0 0 0 5px
    color-mix(in srgb, var(--patch-binding) 18%, transparent);
}
.react-flow__edge-path.patch-binding-cable {
  stroke: var(--patch-binding);
  stroke-width: 2;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  opacity: 0.85;
}
.react-flow__edge.selected .react-flow__edge-path.patch-binding-cable,
.react-flow__edge-path.patch-binding-cable.is-selected {
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 3px var(--patch-binding));
}

/* web/src/creation-tools.css */
.creation-tool-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.creation-tool-row button,
.component-library button {
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 9px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.creation-tool-row button[aria-pressed='true'] {
  border-color: var(--accent);
}
.creation-tool-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.creation-tool-row input {
  width: 65px;
}
.component-library {
  display: grid;
  gap: 12px;
}
.component-library-search {
  width: 100%;
}
.component-library-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: 55dvh;
  overflow: auto;
}
.component-library-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.component-library-card .toy-thumbnail {
  height: 110px;
}
.component-library-card > input {
  min-width: 0;
  width: 100%;
}
.component-library-card small {
  color: var(--muted);
  font-size: 10px;
}
.component-library-card > div:last-child {
  display: flex;
  gap: 6px;
}
.patch-note {
  /* A sticky note: fixed paper colors on every theme. */
  --patch-note-paper: #f5d779;
  --patch-note-ink: #302713;
  --patch-note-edge: #9e822e;
  background: var(--patch-note-paper);
  color: var(--patch-note-ink);
  border: 1px solid var(--patch-note-edge);
  border-radius: 6px;
  padding: 10px;
  min-height: 100px;
  width: 240px;
  box-shadow: 0 3px 12px var(--black-a2);
}
.patch-note header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  cursor: grab;
}
.patch-note textarea {
  resize: vertical;
  display: block;
  width: 100%;
  min-height: 72px;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 6px;
}
.patch-note button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.patch-cut-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  touch-action: none;
  cursor: crosshair;
}
.patch-cut-overlay svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.patch-cut-overlay path {
  stroke: var(--danger);
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 4;
}
.patch-cut-help {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-size: 11px;
  white-space: nowrap;
}
.patch-find-dialog input {
  width: 100%;
}
.patch-find-results {
  display: grid;
  gap: 4px;
  max-height: 55dvh;
  overflow: auto;
  margin-top: 12px;
}
.patch-find-results button {
  display: grid;
  text-align: left;
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px;
  cursor: pointer;
  border-radius: 5px;
}
.patch-find-results small {
  color: var(--muted);
  margin-top: 4px;
}
.patch-canvas[data-detail='compact']
  .patch-node:not(:hover):not(.is-selected)
  .node-parameters {
  display: none;
}
.patch-splice-target .react-flow__edge-path {
  stroke: var(--accent) !important;
  stroke-width: 5 !important;
}
.patch-cable-waypoint {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: move;
  padding: 0;
  font-size: 12px;
}
.saved-components-palette {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.saved-components-palette > button,
.saved-components-palette > div > button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px;
  color: var(--text);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.saved-components-palette > div {
  max-height: 220px;
  overflow: auto;
}
.saved-components-palette button:hover {
  background: var(--raised);
}
.component-library > input:not([type='file']),
.component-library form input:not([type='file']),
.component-library-card > input,
.component-library .creation-tool-row label {
  flex: 1;
}
.component-library .creation-tool-row input {
  width: 100%;
  min-width: 120px;
  flex: 1;
}
.patch-actions {
  max-width: calc(100% - 32px);
  overflow-x: auto;
}
.patch-actions > button,
.patch-actions > select {
  flex-shrink: 0;
}
.patch-actions > select {
  height: var(--ui-control-height);
  padding: 0 4px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 5px;
  font: inherit;
  font-size: 10px;
}

.patch-cut-help {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
  white-space: normal;
}
.patch-cut-help button {
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
@media (max-width: 800px) {
  .patch-actions {
    left: auto;
    right: 10px;
    max-width: calc(100% - 66px);
  }
}

/* Mantine variables */
.node-card-root, :host{--mantine-z-index-app: 100;--mantine-z-index-modal: 200;--mantine-z-index-popover: 300;--mantine-z-index-overlay: 400;--mantine-z-index-max: 9999;--mantine-scale: 1;--mantine-cursor-type: default;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: 'DM Sans', sans-serif;--mantine-font-family-monospace: var(--mono);--mantine-font-family-headings: 'DM Sans', sans-serif;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem * var(--mantine-scale));--mantine-primary-color-filled: var(--accent);--mantine-primary-color-filled-hover: var(--mantine-color-gray-filled-hover);--mantine-primary-color-light: var(--mantine-color-gray-light);--mantine-primary-color-light-hover: var(--mantine-color-gray-light-hover);--mantine-primary-color-light-color: var(--mantine-color-gray-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem * var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem * var(--mantine-scale));--mantine-spacing-md: calc(1rem * var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem * var(--mantine-scale));--mantine-spacing-xl: calc(2rem * var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem * var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem * var(--mantine-scale));--mantine-font-size-md: calc(1rem * var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem * var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem * var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale)) calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale)) calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale)) calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale)) calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale));--mantine-radius-xs: calc(0.125rem * var(--mantine-scale));--mantine-radius-sm: calc(0.25rem * var(--mantine-scale));--mantine-radius-md: calc(0.5rem * var(--mantine-scale));--mantine-radius-lg: calc(1rem * var(--mantine-scale));--mantine-radius-xl: calc(2rem * var(--mantine-scale));--mantine-font-weight-regular: 400;--mantine-font-weight-medium: 600;--mantine-font-weight-bold: 700;--mantine-primary-color-0: var(--mantine-color-gray-0);--mantine-primary-color-1: var(--mantine-color-gray-1);--mantine-primary-color-2: var(--mantine-color-gray-2);--mantine-primary-color-3: var(--mantine-color-gray-3);--mantine-primary-color-4: var(--mantine-color-gray-4);--mantine-primary-color-5: var(--mantine-color-gray-5);--mantine-primary-color-6: var(--mantine-color-gray-6);--mantine-primary-color-7: var(--mantine-color-gray-7);--mantine-primary-color-8: var(--mantine-color-gray-8);--mantine-primary-color-9: var(--mantine-color-gray-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem * var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem * var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem * var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem * var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem * var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem * var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;--mantine-color-body: var(--panel);--mantine-color-text: var(--text);--mantine-color-dimmed: var(--muted);--mantine-color-default: var(--panel);--mantine-color-default-border: var(--border);--mantine-color-default-hover: var(--hover);--mantine-primary-color-contrast: var(--accent-ink);}

.node-card-root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-scheme: dark;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-success: var(--mantine-color-teal-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-gray-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-dark-4);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(10, 10, 10, 1);--mantine-color-dark-light-hover: rgba(14, 14, 14, 1);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(17, 19, 21, 1);--mantine-color-gray-light-hover: rgba(23, 26, 29, 1);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(101, 21, 21, 1);--mantine-color-red-light-hover: rgba(141, 29, 29, 1);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(83, 15, 39, 1);--mantine-color-pink-light-hover: rgba(116, 21, 54, 1);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(67, 23, 78, 1);--mantine-color-grape-light-hover: rgba(94, 32, 109, 1);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(48, 31, 98, 1);--mantine-color-violet-light-hover: rgba(67, 43, 137, 1);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(27, 40, 100, 1);--mantine-color-indigo-light-hover: rgba(38, 55, 139, 1);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(12, 50, 86, 1);--mantine-color-blue-light-hover: rgba(17, 70, 120, 1);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(6, 57, 67, 1);--mantine-color-cyan-light-hover: rgba(8, 80, 93, 1);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(4, 64, 46, 1);--mantine-color-teal-light-hover: rgba(6, 89, 64, 1);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(22, 69, 31, 1);--mantine-color-green-light-hover: rgba(30, 97, 43, 1);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(46, 74, 7, 1);--mantine-color-lime-light-hover: rgba(64, 104, 9, 1);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(115, 60, 0, 1);--mantine-color-yellow-light-hover: rgba(161, 83, 0, 1);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(109, 36, 8, 1);--mantine-color-orange-light-hover: rgba(152, 50, 11, 1);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);}

.node-card-root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-scheme: light;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-success: var(--mantine-color-teal-8);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-gray-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: var(--mantine-color-dark-1);--mantine-color-dark-light-hover: var(--mantine-color-dark-2);--mantine-color-dark-light-color: var(--mantine-color-dark-9);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: var(--mantine-color-gray-1);--mantine-color-gray-light-hover: var(--mantine-color-gray-2);--mantine-color-gray-light-color: var(--mantine-color-gray-9);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: var(--mantine-color-red-1);--mantine-color-red-light-hover: var(--mantine-color-red-2);--mantine-color-red-light-color: var(--mantine-color-red-9);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: var(--mantine-color-pink-1);--mantine-color-pink-light-hover: var(--mantine-color-pink-2);--mantine-color-pink-light-color: var(--mantine-color-pink-9);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: var(--mantine-color-grape-1);--mantine-color-grape-light-hover: var(--mantine-color-grape-2);--mantine-color-grape-light-color: var(--mantine-color-grape-9);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: var(--mantine-color-violet-1);--mantine-color-violet-light-hover: var(--mantine-color-violet-2);--mantine-color-violet-light-color: var(--mantine-color-violet-9);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: var(--mantine-color-indigo-1);--mantine-color-indigo-light-hover: var(--mantine-color-indigo-2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-9);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: var(--mantine-color-blue-1);--mantine-color-blue-light-hover: var(--mantine-color-blue-2);--mantine-color-blue-light-color: var(--mantine-color-blue-9);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: var(--mantine-color-cyan-1);--mantine-color-cyan-light-hover: var(--mantine-color-cyan-2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-9);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: var(--mantine-color-teal-1);--mantine-color-teal-light-hover: var(--mantine-color-teal-2);--mantine-color-teal-light-color: var(--mantine-color-teal-9);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: var(--mantine-color-green-1);--mantine-color-green-light-hover: var(--mantine-color-green-2);--mantine-color-green-light-color: var(--mantine-color-green-9);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: var(--mantine-color-lime-1);--mantine-color-lime-light-hover: var(--mantine-color-lime-2);--mantine-color-lime-light-color: var(--mantine-color-lime-9);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: var(--mantine-color-yellow-1);--mantine-color-yellow-light-hover: var(--mantine-color-yellow-2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-9);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: var(--mantine-color-orange-1);--mantine-color-orange-light-hover: var(--mantine-color-orange-2);--mantine-color-orange-light-color: var(--mantine-color-orange-9);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);}

.node-card-root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-scheme: dark;}

.node-card-root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-scheme: light;}
/* Editor chrome roles (apps/web Appearance.tsx) */
.node-card-root{--ground:#080808;--panel:#131313;--raised:#222222;--inset:#0B0B0B;--text:#FAFAF7;--text-secondary:#D9D9D4;--muted:#B0B0A8;--border:#3B3B3B;--border-strong:#606060;--accent:#FAFAF7;--accent-ink:#080808;--grid:#242424}
.node-card-root[data-scheme='light']{--ground:#FAFAF7;--panel:#FAFAF7;--raised:#FFFFFF;--inset:#FAFAF7;--text:#1C1C1B;--text-secondary:#484842;--muted:#64645F;--border:#D9D9D2;--border-strong:#BDBDB3;--accent:#1C1C1B;--accent-ink:#FAFAF7;--grid:#DDDDD6}
.node-card-root{display:inline-block;background:none;color:var(--text);font-size:13px}
.patch-diagram-root{display:block;padding:24px;background:var(--ground) radial-gradient(circle at 1px 1px,var(--grid) 0.8px,transparent 1px) 0 0/20px 20px}.patch-diagram-canvas.patch-canvas{position:relative;inset:auto;background:none;overflow:visible}.patch-diagram-node{position:absolute}.patch-diagram-cables{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}