Git Diff Panel

<!-- Git Diff Panel — file header, hunk marker, dual line-number gutter, +/- rows stagger in -->
<div class="nuda-ct2-git-diff">
  <div class="nuda-ct2-git-diff__head">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14 3 L14 8 L19 8" />
      <path d="M6 3 L14 3 L19 8 L19 21 L6 21 Z" />
    </svg>
    <span>utils.ts</span>
    <i class="nuda-ct2-git-diff__badge">+2 -1</i>
  </div>
  <div class="nuda-ct2-git-diff__hunk">@@ -12,4 +12,5 @@</div>
  <pre class="nuda-ct2-git-diff__body">
    <code>
      <span class="nuda-ct2-git-diff__row"><i class="nuda-ct2-git-diff__ln">12</i><i class="nuda-ct2-git-diff__ln">12</i><span class="nuda-ct2-git-diff__txt"> function sum(a, b) {</span></span>
      <span class="nuda-ct2-git-diff__row is-rem"><i class="nuda-ct2-git-diff__ln">13</i><i class="nuda-ct2-git-diff__ln"> </i><span class="nuda-ct2-git-diff__txt">-  return a + b</span></span>
      <span class="nuda-ct2-git-diff__row is-add"><i class="nuda-ct2-git-diff__ln"> </i><i class="nuda-ct2-git-diff__ln">13</i><span class="nuda-ct2-git-diff__txt">+  return Number(a)</span></span>
      <span class="nuda-ct2-git-diff__row is-add"><i class="nuda-ct2-git-diff__ln"> </i><i class="nuda-ct2-git-diff__ln">14</i><span class="nuda-ct2-git-diff__txt">+    + Number(b)</span></span>
      <span class="nuda-ct2-git-diff__row"><i class="nuda-ct2-git-diff__ln">14</i><i class="nuda-ct2-git-diff__ln">15</i><span class="nuda-ct2-git-diff__txt">}</span></span>
    </code>
  </pre>
</div>

.nuda-ct2-git-diff {
  width: 300px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  font: 500 11px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.nuda-ct2-git-diff__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: #161616;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #cfcfcf;
}

.nuda-ct2-git-diff__head svg {
  width: 12px;
  height: 12px;
  color: #777;
  flex-shrink: 0;
}

.nuda-ct2-git-diff__badge {
  margin-left: auto;
  font-style: normal;
  color: #e4ff54;
  font-size: 9px;
  letter-spacing: .02em;
}

.nuda-ct2-git-diff__hunk {
  padding: 4px 10px;
  color: #38bdf8;
  background: rgba(56,189,248,.06);
  font-size: 10px;
}

.nuda-ct2-git-diff__body {
  margin: 0;
  padding: 4px 0;
  overflow: hidden;
}

.nuda-ct2-git-diff__body code {
  display: flex;
  flex-direction: column;
}

.nuda-ct2-git-diff__row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1px 10px;
  color: #9a9aa2;
  opacity: 0;
  transform: translateX(-4px);
  animation: _nuda-ct2gitdiffin .35s cubic-bezier(.4,0,.2,1) forwards;
}

.nuda-ct2-git-diff__row:nth-child(1) {
  animation-delay: 0s;
}

.nuda-ct2-git-diff__row:nth-child(2) {
  animation-delay: .08s;
}

.nuda-ct2-git-diff__row:nth-child(3) {
  animation-delay: .16s;
}

.nuda-ct2-git-diff__row:nth-child(4) {
  animation-delay: .24s;
}

.nuda-ct2-git-diff__row:nth-child(5) {
  animation-delay: .32s;
}

.nuda-ct2-git-diff__ln {
  display: inline-flex;
  justify-content: flex-end;
  width: 16px;
  color: #4b4b52;
  font-style: normal;
  font-size: 9px;
  flex-shrink: 0;
  padding-right: 6px;
}

.nuda-ct2-git-diff__txt {
  white-space: pre;
}

.nuda-ct2-git-diff__row.is-add {
  background: rgba(228,255,84,.08);
  color: #fafafa;
}

.nuda-ct2-git-diff__row.is-add .nuda-ct2-git-diff__txt {
  color: #e4ff54;
}

.nuda-ct2-git-diff__row.is-rem {
  background: rgba(255,99,99,.08);
  color: #fafafa;
}

.nuda-ct2-git-diff__row.is-rem .nuda-ct2-git-diff__txt {
  color: #ff8383;
  text-decoration: line-through;
  text-decoration-color: rgba(255,99,99,.4);
}

@keyframes _nuda-ct2gitdiffin {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ct2-git-diff__row {
    animation: none;
    opacity: 1;
    transform: none;
  }
}