<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 460" width="100%" height="100%">
  <defs>
    <!-- Arrowhead markers -->
    <marker id="arrow-blue" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#0000e6" />
    </marker>
    <marker id="arrow-red" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#e60000" />
    </marker>
    <marker id="arrow-black" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#000000" />
    </marker>
  </defs>

<style>
<![CDATA[
  .mono { font-family: "Courier New", Courier, monospace; font-size: 16px; fill: #000; }
  .serif { font-family: "Times New Roman", Times, serif; font-size: 16px; fill: #000; }
  .math { font-family: "Times New Roman", Times, serif; font-size: 18px; font-style: italic; fill: #000; }
  .sub { font-size: 70%; baseline-shift: sub; }
  .box-text { font-family: "Times New Roman", Times, serif; font-size: 18px; fill: #000; text-anchor: middle; }

  .csa-box { fill: #e0e0e0; stroke: none; }
  .blue-line { stroke: #0000e6; stroke-width: 1.5; fill: none; }
  .red-line { stroke: #e60000; stroke-width: 1.5; fill: none; }
  .black-line { stroke: #000000; stroke-width: 1.5; fill: none; }
]]>
</style>

  <!-- Top Inputs Row -->
  <text x="40" y="45" class="serif">...</text>
  
  <text x="120" y="30" class="mono" text-anchor="middle">twos</text>
  <text x="120" y="50" class="serif" text-anchor="middle">(input)</text>
  
  <text x="200" y="30" class="mono" text-anchor="middle">ones</text>
  <text x="200" y="50" class="serif" text-anchor="middle">(input)</text>
  
  <text x="280" y="30" class="math" text-anchor="middle">d<tspan class="sub">i</tspan></text>
  <text x="280" y="50" class="serif" text-anchor="middle">(input)</text>
  
  <text x="360" y="30" class="math" text-anchor="middle">d<tspan class="sub">i+1</tspan></text>
  <text x="360" y="50" class="serif" text-anchor="middle">(input)</text>

  <!-- Middle Inputs Row -->
  <text x="425" y="115" class="math" text-anchor="middle">d<tspan class="sub">i+2</tspan></text>
  <text x="425" y="135" class="serif" text-anchor="middle">(input)</text>
  
  <text x="505" y="115" class="math" text-anchor="middle">d<tspan class="sub">i+3</tspan></text>
  <text x="505" y="135" class="serif" text-anchor="middle">(input)</text>
  
  <text x="540" y="205" class="serif">...</text>

  <!-- CSA Blocks -->
  <!-- Top CSA -->
  <rect x="185" y="110" width="190" height="30" class="csa-box" />
  <text x="280" y="131" class="box-text">CSA</text>

  <!-- Middle CSA -->
  <rect x="330" y="190" width="190" height="30" class="csa-box" />
  <text x="425" y="211" class="box-text">CSA</text>

  <!-- Bottom CSA -->
  <rect x="185" y="280" width="190" height="30" class="csa-box" />
  <text x="280" y="301" class="box-text">CSA</text>

  <!-- Blue Lines (Sum / Weight 1) -->
  <line x1="200" y1="60" x2="200" y2="110" class="blue-line" marker-end="url(#arrow-blue)" />
  <line x1="280" y1="60" x2="280" y2="110" class="blue-line" marker-end="url(#arrow-blue)" />
  <line x1="360" y1="60" x2="360" y2="110" class="blue-line" marker-end="url(#arrow-blue)" />
  
  <line x1="425" y1="145" x2="425" y2="190" class="blue-line" marker-end="url(#arrow-blue)" />
  <line x1="505" y1="145" x2="505" y2="190" class="blue-line" marker-end="url(#arrow-blue)" />
  
  <line x1="345" y1="140" x2="345" y2="190" class="blue-line" marker-end="url(#arrow-blue)" />
  <line x1="490" y1="220" x2="490" y2="320" class="blue-line" marker-end="url(#arrow-blue)" />

  <!-- Red Lines (Carry / Weight 2) -->
  <path d="M 120 60 C 120 170, 200 170, 200 280" class="red-line" marker-end="url(#arrow-red)" />
  <path d="M 215 140 C 215 210, 280 210, 280 280" class="red-line" marker-end="url(#arrow-red)" />
  
  <line x1="360" y1="220" x2="360" y2="280" class="red-line" marker-end="url(#arrow-red)" />
  <line x1="360" y1="310" x2="360" y2="380" class="red-line" marker-end="url(#arrow-red)" />

  <!-- Black Lines (Weight 4) -->
  <line x1="220" y1="310" x2="220" y2="380" class="black-line" marker-end="url(#arrow-black)" />

  <!-- Outputs Row -->
  <text x="220" y="405" class="mono" text-anchor="middle">fours</text>
  <text x="220" y="425" class="serif" text-anchor="middle">(output)</text>

  <text x="360" y="405" class="mono" text-anchor="middle">twos</text>
  <text x="360" y="425" class="serif" text-anchor="middle">(output)</text>

  <text x="490" y="345" class="mono" text-anchor="middle">ones</text>
  <text x="490" y="365" class="serif" text-anchor="middle">(output)</text>
</svg>
