<svg viewBox="0 0 720 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="AI Ballpark, LLM API cost estimator">
  <defs>
    <linearGradient id="bpBg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0c0e14"/>
      <stop offset="1" stop-color="#000000"/>
    </linearGradient>
  </defs>
  <rect width="720" height="360" fill="url(#bpBg)"/>

  <!-- Baseball diamond -->
  <g transform="translate(48 70)">
    <text x="120" y="6" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="14" letter-spacing="2" fill="#8b93ad">YOU'RE UP</text>
    <!-- outfield arc -->
    <path d="M40 250 A150 150 0 0 1 200 40" fill="none" stroke="#1c2233" stroke-width="2"/>
    <!-- infield -->
    <polygon points="120,60 210,150 120,240 30,150" fill="#12181f" stroke="#2a3350" stroke-width="2"/>
    <polygon points="120,120 165,165 120,210 75,165" fill="none" stroke="#2a3350" stroke-width="1.5"/>
    <!-- base paths accent (batter's route) -->
    <polyline points="120,240 210,150 120,60" fill="none" stroke="#2337ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    <!-- bases -->
    <g fill="#e5e9f0">
      <rect x="203" y="143" width="14" height="14" transform="rotate(45 210 150)"/>
      <rect x="113" y="53" width="14" height="14" transform="rotate(45 120 60)"/>
      <rect x="23" y="143" width="14" height="14" transform="rotate(45 30 150)"/>
    </g>
    <!-- home plate -->
    <path d="M110 236 h20 v10 l-10 8 l-10 -8 z" fill="#2337ff"/>
    <!-- baseball -->
    <g transform="translate(120 172)">
      <circle r="12" fill="#f5f5f0" stroke="#c9ccc4" stroke-width="1"/>
      <path d="M-7 -9 A12 12 0 0 0 -7 9" fill="none" stroke="#d24a3a" stroke-width="1.5"/>
      <path d="M7 -9 A12 12 0 0 1 7 9" fill="none" stroke="#d24a3a" stroke-width="1.5"/>
    </g>
  </g>

  <!-- Scoreboard -->
  <g transform="translate(322 60)">
    <rect x="0" y="0" width="350" height="236" rx="16" fill="#12151d" stroke="#2337ff" stroke-width="2"/>
    <text x="22" y="40" font-family="'Geist Mono', ui-monospace, monospace" font-size="15" letter-spacing="2" fill="#8b93ad">STANDINGS &#183; $/MONTH</text>
    <line x1="22" y1="54" x2="328" y2="54" stroke="#2a2f3d" stroke-width="1.5"/>

    <g font-family="'Geist', sans-serif" font-size="15">
      <!-- row 1 MVP -->
      <rect x="10" y="66" width="330" height="34" rx="8" fill="rgba(35,55,255,0.10)"/>
      <circle cx="30" cy="83" r="5" fill="#4285f4"/>
      <text x="46" y="88" fill="#e5e9f0">Gemini 3.1 Flash-Lite</text>
      <rect x="196" y="74" width="34" height="17" rx="8" fill="#2337ff"/>
      <text x="213" y="87" text-anchor="middle" font-size="10" font-weight="700" fill="#fff" font-family="'Geist', sans-serif">MVP</text>
      <text x="328" y="88" text-anchor="end" font-family="'Geist Mono', ui-monospace, monospace" fill="#e5e9f0">$96</text>
      <!-- row 2 -->
      <circle cx="30" cy="121" r="5" fill="#10a37f"/>
      <text x="46" y="126" fill="#c7cdda">GPT-5.4 mini</text>
      <text x="328" y="126" text-anchor="end" font-family="'Geist Mono', ui-monospace, monospace" fill="#c7cdda">$288</text>
      <!-- row 3 -->
      <circle cx="30" cy="153" r="5" fill="#d97757"/>
      <text x="46" y="158" fill="#c7cdda">Claude Haiku 4.5</text>
      <text x="328" y="158" text-anchor="end" font-family="'Geist Mono', ui-monospace, monospace" fill="#c7cdda">$338</text>
      <!-- row 4 -->
      <circle cx="30" cy="185" r="5" fill="#4285f4"/>
      <text x="46" y="190" fill="#c7cdda">Gemini 3.5 Flash</text>
      <text x="328" y="190" text-anchor="end" font-family="'Geist Mono', ui-monospace, monospace" fill="#c7cdda">$577</text>
    </g>
    <line x1="22" y1="206" x2="328" y2="206" stroke="#2a2f3d" stroke-width="1.5"/>
    <text x="22" y="226" font-family="'Geist', sans-serif" font-size="12" fill="#6b7492">Anthropic &#183; OpenAI &#183; Google</text>
  </g>

  <!-- label -->
  <text x="360" y="336" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="17" letter-spacing="2" fill="#8b93ad">AI Ballpark</text>
</svg>
