@scope (noodles-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --noodles-duration-default:             var(--a-duration-fast);
    --noodles-easing-default:               var(--a-easing);
    --noodles-stroke-default:               var(--a-accent-bg);
    /* Component-intrinsic visual constants; no --a-space-* equivalent */
    --noodles-stroke-width-default:         2px;
    --noodles-stroke-readonly-default:      var(--a-fg-muted);
    /* Component-intrinsic visual constants; no --a-space-* equivalent */
    --noodles-port-size-default:            10px;
    --noodles-port-bg-default:              var(--a-accent-bg);
    --noodles-port-border-default:          var(--a-bg);
    --noodles-port-hover-ring-default:      0 0 0 3px var(--a-bg-muted);
    --noodles-port-drop-scale-default:      1.4;
    --noodles-port-drag-opacity-default:    0.4;
    --noodles-dash-length-default:          8;
    --noodles-dash-gap-default:             4;
    --noodles-anim-speed-default:           0.6s;
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  /* ── SVG overlay ── */
  :scope > svg[data-noodle-svg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
  }

  :scope > svg[data-noodle-svg] path {
    fill: none;
    stroke: var(--noodles-stroke, var(--noodles-stroke-default));
    stroke-width: var(--noodles-stroke-width, var(--noodles-stroke-width-default));
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
      stroke var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
      stroke-dasharray var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default));
  }

  /* ── State: readonly ── */
  :scope[readonly] > svg[data-noodle-svg] path {
    stroke: var(--noodles-stroke-readonly, var(--noodles-stroke-readonly-default));
    stroke-dasharray: 6 4;
  }

  /* ── State: animated ── */
  :scope[animated] > svg[data-noodle-svg] path {
    stroke-dasharray: var(--noodles-dash-length, var(--noodles-dash-length-default)) var(--noodles-dash-gap, var(--noodles-dash-gap-default));
    animation: noodle-march var(--noodles-anim-speed, var(--noodles-anim-speed-default)) linear infinite;
  }

  @keyframes noodle-march {
    to {
      stroke-dashoffset: -20;
    }
  }

  /* ── Port indicators ── */
  [data-noodle-port-indicator] {
    position: absolute;
    width: var(--noodles-port-size, var(--noodles-port-size-default));
    height: var(--noodles-port-size, var(--noodles-port-size-default));
    border-radius: 50%;
    background: var(--noodles-port-bg, var(--noodles-port-bg-default));
    border: 2px solid var(--noodles-port-border, var(--noodles-port-border-default));
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: crosshair;
    pointer-events: auto;
    transition:
      transform var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
      opacity var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default)),
      box-shadow var(--noodles-duration, var(--noodles-duration-default)) var(--noodles-easing, var(--noodles-easing-default));
  }

  [data-noodle-port-indicator]:hover {
    box-shadow: var(--noodles-port-hover-ring, var(--noodles-port-hover-ring-default));
  }

  /* ── State: drop ready ── */
  [data-noodle-drop-ready] {
    transform: translate(-50%, -50%) scale(var(--noodles-port-drop-scale, var(--noodles-port-drop-scale-default)));
  }

  /* ── State: dragging ── */
  [data-noodle-dragging] {
    opacity: var(--noodles-port-drag-opacity, var(--noodles-port-drag-opacity-default));
  }

  /* ── State: readonly ports ── */
  :scope[readonly] [data-noodle-port-indicator] {
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ── State: ports hidden ── */
  :scope:not([show-ports]) [data-noodle-port-indicator] {
    opacity: 0;
    pointer-events: none;
  }

  :scope[show-ports] [data-noodle-port-indicator] {
    opacity: 1;
  }
}
