.mlp-mcpflow { container-type: inline-size; width: min(720px, 100%); margin: 0 auto; display: grid; gap: clamp(14px, 2.4svh, 22px); }
        .mlp-mcpflow-stage { position: relative; width: 100%; aspect-ratio: 600 / 340; }
        .mlp-mcpflow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
        /* One travelling pulse per groove: a short dash sliding along a
           pathLength of 100. Clients -> hub first, then hub -> destinations. */
        .mlp-mcpflow-flux {
          fill: none;
          stroke: var(--flux-a);
          stroke-width: 3.2;
          stroke-linecap: round;
          stroke-dasharray: 12 88;
          stroke-dashoffset: 112;
          opacity: 0;
          animation: mlp-mcp-flux 3.2s cubic-bezier(.45,.05,.35,1) infinite;
        }
        .mlp-mcpflow-flux.is-out { stroke: var(--flux-b); }
        @keyframes mlp-mcp-flux {
          0% { stroke-dashoffset: 112; opacity: 0; }
          8% { opacity: 1; }
          62% { stroke-dashoffset: 0; opacity: 1; }
          70%, 100% { stroke-dashoffset: 0; opacity: 0; }
        }
        .mlp-mcpflow.is-reduced .mlp-mcpflow-flux { animation: none; opacity: 0.55; stroke-dasharray: none; stroke-dashoffset: 0; }
        .mlp-mcpflow-node { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; }
        .mlp-mcpflow-client { width: clamp(38px, 7.4cqi, 48px); aspect-ratio: 1; border-radius: 50%; }
        .mlp-mcpflow-client img { width: 56%; height: 56%; object-fit: contain; }
        .mlp-mcpflow-label, .mlp-mcpflow-more {
          position: absolute; transform: translate(-50%, -50%);
          font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
          color: var(--mcp-sub); white-space: nowrap;
        }
        .mlp-mcpflow-hub {
          gap: 7px; padding: 16px 18px 14px; border-radius: 22px; text-align: center; min-width: 30%;
        }
        .mlp-mcpflow-hub b { font: 700 15px/1.1 Poppins, system-ui, sans-serif; color: var(--mcp-text); }
        .mlp-mcpflow-hub .ep {
          display: block; margin-top: 3px; padding: 8px 14px; border-radius: 999px;
          font: 600 12px/1.1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.01em;
          color: var(--mcp-text); white-space: nowrap;
        }
        .mlp-mcpflow-dest {
          grid-auto-flow: column; gap: 8px; padding: 11px 15px; border-radius: 14px;
          font: 600 13.5px/1 Poppins, system-ui, sans-serif; color: var(--mcp-text); white-space: nowrap;
        }
        .mlp-mcpflow-ico { display: grid; }
        /* Phones: the vertical mini flow replaces the curved stage. */
        .mlp-mcpflow { container-type: inline-size; }
        .mlp-mcpflow-mini { display: none; }
        @container (max-width: 520px) {
          .mlp-mcpflow-stage { display: none; }
          .mlp-mcpflow-mini { display: grid; justify-items: center; gap: 8px; padding-block: 4px 6px; }
          .mlp-mcpflow-mini .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
          .mlp-mcpflow-mini .mlp-mcpflow-label, .mlp-mcpflow-mini .mlp-mcpflow-more { position: static; transform: none; }
          .mlp-mcpflow-mini .mlp-mcpflow-client { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 50%; }
          .mlp-mcpflow-mini .mlp-mcpflow-hub { display: grid; justify-items: center; gap: 6px; padding: 12px 16px; border-radius: 18px; text-align: center; }
          .mlp-mcpflow-mini .row { flex-wrap: nowrap; gap: 6px; }
          /* Equal columns so the fan lines land exactly on each node. */
          .mlp-mcpflow-mini .row.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); justify-items: center; width: 100%; gap: 4px; }
          .mlp-mcpflow-mini .mlp-mcpflow-fan { display: block; width: 100%; height: 34px; overflow: visible; }
          .mlp-mcpflow-mini .mlp-mcpflow-fan .mlp-mcpflow-flux { stroke-width: 2.6; }
          .mlp-mcpflow-mini .mlp-mcpflow-dest { display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: 11px;
            font: 600 11.5px/1 Poppins, system-ui, sans-serif; color: var(--mcp-text); white-space: nowrap; }
          .mlp-mcpflow-mini .mlp-mcpflow-dest svg { width: 15px; height: 15px; }
          .mlp-mcpflow-mini .mlp-mcpflow-client { width: 36px; }
          .mlp-mcpflow-mini .down { position: relative; width: 2px; height: 22px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--mcp-sub) 35%, transparent); }
          .mlp-mcpflow-mini .down i { position: absolute; left: 0; top: 0; width: 2px; height: 8px; border-radius: 2px; background: var(--flux-a);
            animation: mlp-mcp-down 1.6s cubic-bezier(.45,.05,.35,1) infinite; }
          .mlp-mcpflow-mini .down.is-out i { background: var(--flux-b); animation-delay: .8s; }
          @keyframes mlp-mcp-down { 0% { transform: translateY(-8px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
          .mlp-mcpflow.is-reduced .mlp-mcpflow-mini .down i { animation: none; opacity: 0.6; }
        }
        .mlp-mcpflow-install { border-radius: 20px; padding: 14px 16px 16px; display: grid; gap: 8px; min-height: clamp(260px, 36svh, 340px); align-content: start; }
        .mlp-mcpflow-back {
          justify-self: start; border: 0; background: none; cursor: pointer; padding: 4px 2px;
          font: 600 12.5px/1 Poppins, system-ui, sans-serif; color: var(--mcp-sub);
        }
        .mlp-mcpflow-back:hover { color: var(--mcp-text); }
        .mlp-mcpquick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 14px; }
        .mlp-mcpquick a, .mlp-mcpquick button {
          display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 4px; border: 0; background: none; cursor: pointer;
          text-decoration: none; font: 600 13px/1 Poppins, system-ui, sans-serif; color: var(--mtp-ink, currentColor);
        }
        .mlp-mcpquick button.is-done { color: #10B981; }
        .mlp-mcpquick :is(a, button):focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: 8px; }
        .mlp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        @media (prefers-reduced-motion: reduce) { .mlp-mcpflow-flux { animation: none !important; } }