[@styles]: ./datatype.demo.css

# Datatype diagrams

Datatype expressions stay readable in Markdown and render as inline charts
(the Datatype plugin is part of the default plugin set):

| Source                  | Rendered              |
| ----------------------- | --------------------- |
| `{b:15,45,25,70,40,90}` | {b:15,45,25,70,40,90} |
| `{l:10,35,20,65,45,85}` | {l:10,35,20,65,45,85} |
| `{p:72}`                | {p:72}                |

<div class="datatype-demo" data-pmx-prose="off">
  <section class="ascii-frame">
    <header class="ascii-rule">
      <span aria-hidden="true">+</span>
      <i></i>
      <strong>[ What the research cost ]</strong>
      <i></i>
      <span aria-hidden="true">+</span>
    </header>
    <div class="ascii-frame-body ascii-table-wrap">
      <table class="ascii-table">
        <thead>
          <tr>
            <th>Agent</th>
            <th>Tokens</th>
            <th>Tool calls</th>
            <th>Time</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Inks and paper</td>
            <td>115,207</td>
            <td>120</td>
            <td>16m</td>
          </tr>
          <tr>
            <td>Overprint and drift</td>
            <td>135,218</td>
            <td>164</td>
            <td>16m</td>
          </tr>
          <tr>
            <td>Naming the patterns</td>
            <td>186,716</td>
            <td>112</td>
            <td>18m</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Total</td>
            <td>437,141</td>
            <td>396</td>
            <td>~50m</td>
          </tr>
        </tfoot>
      </table>
    </div>
    <footer class="ascii-rule" aria-hidden="true">
      <span>+</span><i></i><span>+</span>
    </footer>
  </section>
  <section class="ascii-frame">
    <header class="ascii-rule">
      <span aria-hidden="true">+</span>
      <i></i>
      <strong>[ AI is an amplifier ]</strong>
      <i></i>
      <span aria-hidden="true">+</span>
    </header>
    <div class="ascii-frame-body">
      <div class="amplifier">
        <div class="amplifier-stage">
          <span class="amplifier-chart">{b:8,28,10,42,18,30,12}</span>
          <span>your taste</span>
        </div>
        <span class="amplifier-arrow" aria-hidden="true">▶</span>
        <span class="amplifier-ai">AI</span>
        <span class="amplifier-arrow" aria-hidden="true">▶</span>
        <div class="amplifier-stage">
          <span class="amplifier-chart">{b:25,58,30,75,28,62,35}</span>
          <span>amplified</span>
        </div>
      </div>
    </div>
    <footer class="ascii-rule" aria-hidden="true">
      <span>+</span><i></i><span>+</span>
    </footer>
  </section>
</div>