{#- Minimal pipeline: problem → OpenSCvx (JAX) → trajectory. -#}
<div class="osc-home-diagram" aria-hidden="true">
  <svg
    class="osc-home-diagram__svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 400 128"
    fill="none"
  >
    <defs>
      <marker
        id="osc-arrowhead"
        markerWidth="7"
        markerHeight="7"
        refX="6"
        refY="3.5"
        orient="auto"
      >
        <path d="M0 0 L7 3.5 L0 7 Z" class="osc-home-diagram__arrow-fill" />
      </marker>
      <linearGradient id="osc-traj-grad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" class="osc-home-diagram__grad-start" stop-opacity="1" />
        <stop offset="100%" class="osc-home-diagram__grad-stop" stop-opacity="1" />
      </linearGradient>
    </defs>

    <!-- 1 -->
    <rect class="osc-home-diagram__panel" x="4" y="26" width="114" height="78" rx="10" />
    <text class="osc-home-diagram__cap" x="61" y="46" text-anchor="middle">Problem</text>
    <text class="osc-home-diagram__title" x="61" y="68" text-anchor="middle">Nonlinear OCP</text>
    <text class="osc-home-diagram__micro" x="61" y="86" text-anchor="middle">states · controls · constraints</text>

    <line
      class="osc-home-diagram__connector"
      x1="122"
      y1="65"
      x2="132"
      y2="65"
      marker-end="url(#osc-arrowhead)"
    />

    <!-- 2 OpenSCvx + JAX -->
    <rect class="osc-home-diagram__panel osc-home-diagram__panel--accent" x="138" y="26" width="124" height="78" rx="10" />
    <text class="osc-home-diagram__brand" x="200" y="56" text-anchor="middle">OpenSCvx</text>
    <text class="osc-home-diagram__micro" x="200" y="74" text-anchor="middle">jax.export · XLA · custom VJP</text>
    <text class="osc-home-diagram__micro" x="200" y="90" text-anchor="middle">vmap-ready internals</text>

    <line
      class="osc-home-diagram__connector"
      x1="266"
      y1="65"
      x2="276"
      y2="65"
      marker-end="url(#osc-arrowhead)"
    />

    <!-- 3 -->
    <rect class="osc-home-diagram__panel" x="282" y="26" width="114" height="78" rx="10" />
    <text class="osc-home-diagram__cap" x="339" y="46" text-anchor="middle">Output</text>
    <text class="osc-home-diagram__title" x="339" y="68" text-anchor="middle">Trajectory</text>
    <path
      class="osc-home-diagram__curve"
      d="M 296 96 C 312 80 328 112 344 96 C 360 80 376 104 388 92"
      stroke="url(#osc-traj-grad)"
      stroke-width="2.5"
      stroke-linecap="round"
      fill="none"
    />
    <circle class="osc-home-diagram__dot" cx="296" cy="96" r="3.5" />
    <circle class="osc-home-diagram__dot" cx="388" cy="92" r="3.5" />
  </svg>
</div>