Streaming Markdown Table

<!-- Streaming Markdown Table — rows build in sequentially -->
<table class="nuda-ac2-table" aria-label="Streaming benchmark results">
  <thead>
    <tr><th>Model</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr class="nuda-ac2-table__row"><td>GPT</td><td>92</td></tr>
    <tr class="nuda-ac2-table__row"><td>Claude</td><td>95</td></tr>
    <tr class="nuda-ac2-table__row"><td>Gemini</td><td>90</td></tr>
  </tbody>
</table>

.nuda-ac2-table {
  width: 300px;
  border-collapse: collapse;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  font: 12px ui-sans-serif,system-ui,sans-serif;
  color: #cfcfcf;
}

.nuda-ac2-table th {
  text-align: left;
  padding: 8px 12px;
  color: #777;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.nuda-ac2-table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.nuda-ac2-table__row {
  animation: _nuda-ac2table 3.6s ease-in-out infinite;
}

.nuda-ac2-table__row:nth-child(2) {
  animation-delay: .4s;
}

.nuda-ac2-table__row:nth-child(3) {
  animation-delay: .8s;
}

@keyframes _nuda-ac2table {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  12%,88% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-ac2-table__row {
    animation: none !important;
    opacity: 1;
    transform: none !important;
  }
}