<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" role="img" aria-labelledby="title desc">
  <title id="title">Relationship between an event, its markets, outcomes, and order books</title>
  <desc id="desc">One event contains two markets. Each market has two outcomes, and each outcome is traded through an order book.</desc>
  <style>
    :root { color-scheme: light dark; }
    .bg { fill: #f8fafc; }
    .panel { fill: #ffffff; stroke: #dbe3ee; }
    .soft { fill: #eef2ff; stroke: #c7d2fe; }
    .outcome-yes { fill: #ecfdf5; stroke: #a7f3d0; }
    .outcome-no { fill: #fff1f2; stroke: #fecdd3; }
    .line { stroke: #94a3b8; }
    .arrow { fill: #94a3b8; }
    .title { fill: #0f172a; font: 700 26px ui-sans-serif, system-ui, sans-serif; }
    .label { fill: #334155; font: 600 20px ui-sans-serif, system-ui, sans-serif; }
    .small { fill: #64748b; font: 500 16px ui-sans-serif, system-ui, sans-serif; }
    .yes { fill: #047857; font: 700 18px ui-sans-serif, system-ui, sans-serif; }
    .no { fill: #be123c; font: 700 18px ui-sans-serif, system-ui, sans-serif; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #0b1220; }
      .panel { fill: #111827; stroke: #334155; }
      .soft { fill: #1e1b4b; stroke: #4338ca; }
      .outcome-yes { fill: #052e2b; stroke: #047857; }
      .outcome-no { fill: #4c0519; stroke: #be123c; }
      .title { fill: #f8fafc; }
      .label { fill: #e2e8f0; }
      .small { fill: #94a3b8; }
      .line { stroke: #64748b; }
      .arrow { fill: #64748b; }
      .yes { fill: #6ee7b7; }
      .no { fill: #fda4af; }
    }
  </style>
  <rect class="bg" width="1200" height="600" rx="28"/>

  <rect class="soft" x="70" y="180" width="240" height="240" rx="28"/>
  <text class="small" x="190" y="250" text-anchor="middle">EVENT</text>
  <text class="title" x="190" y="300" text-anchor="middle">Election 2028</text>
  <text class="small" x="190" y="338" text-anchor="middle">Related questions</text>

  <line class="line" x1="310" y1="300" x2="378" y2="300" stroke-width="4"/>
  <polygon class="arrow" points="378,292 394,300 378,308"/>

  <rect class="panel" x="400" y="80" width="300" height="190" rx="24"/>
  <text class="small" x="550" y="125" text-anchor="middle">MARKET A</text>
  <text class="label" x="550" y="165" text-anchor="middle">Will Candidate A win?</text>
  <rect class="outcome-yes" x="444" y="195" width="92" height="48" rx="14"/>
  <rect class="outcome-no" x="564" y="195" width="92" height="48" rx="14"/>
  <text class="yes" x="490" y="226" text-anchor="middle">Yes</text>
  <text class="no" x="610" y="226" text-anchor="middle">No</text>

  <rect class="panel" x="400" y="330" width="300" height="190" rx="24"/>
  <text class="small" x="550" y="375" text-anchor="middle">MARKET B</text>
  <text class="label" x="550" y="415" text-anchor="middle">Will Candidate B win?</text>
  <rect class="outcome-yes" x="444" y="445" width="92" height="48" rx="14"/>
  <rect class="outcome-no" x="564" y="445" width="92" height="48" rx="14"/>
  <text class="yes" x="490" y="476" text-anchor="middle">Yes</text>
  <text class="no" x="610" y="476" text-anchor="middle">No</text>

  <line class="line" x1="700" y1="175" x2="768" y2="175" stroke-width="4"/>
  <polygon class="arrow" points="768,167 784,175 768,183"/>
  <line class="line" x1="700" y1="425" x2="768" y2="425" stroke-width="4"/>
  <polygon class="arrow" points="768,417 784,425 768,433"/>

  <rect class="panel" x="790" y="105" width="340" height="140" rx="24"/>
  <text class="small" x="960" y="150" text-anchor="middle">ORDER BOOK</text>
  <text class="label" x="960" y="190" text-anchor="middle">Bids, asks, and trades</text>

  <rect class="panel" x="790" y="355" width="340" height="140" rx="24"/>
  <text class="small" x="960" y="400" text-anchor="middle">ORDER BOOK</text>
  <text class="label" x="960" y="440" text-anchor="middle">Bids, asks, and trades</text>
</svg>
