@scope (noodles-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --noodles-duration:             var(--a-duration-fast);
    --noodles-easing:               var(--a-easing);
    --noodles-stroke:               var(--a-accent-bg);
    /* Component-intrinsic visual constants; no --a-space-* equivalent */
    --noodles-stroke-width:         2px;
    --noodles-stroke-readonly:      var(--a-fg-muted);
    /* Component-intrinsic visual constants; no --a-space-* equivalent */
    --noodles-port-size:            10px;
    --noodles-port-bg:              var(--a-accent-bg);
    --noodles-port-border:          var(--a-bg);
    --noodles-port-hover-ring:      0 0 0 3px var(--a-bg-muted);
    --noodles-port-drop-scale:      1.4;
    --noodles-port-drag-opacity:    0.4;
    --noodles-dash-length:          8;
    --noodles-dash-gap:             4;
    --noodles-anim-speed:           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);
    stroke-width: var(--noodles-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
      stroke var(--noodles-duration) var(--noodles-easing),
      stroke-dasharray var(--noodles-duration) var(--noodles-easing);
  }

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

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

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

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

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

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

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

  /* ── 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;
  }
}
