Delta Pair

<!-- Delta Pair — two periods compared with a drawing arrow and a delta badge -->
<div class="nuda-sc2-deltapair">
  <div class="nuda-sc2-deltapair__row">
    <div class="nuda-sc2-deltapair__stat">
      <span class="nuda-sc2-deltapair__num">312</span>
      <span class="nuda-sc2-deltapair__tag">Last mo.</span>
    </div>
    <div class="nuda-sc2-deltapair__arrow" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path class="nuda-sc2-deltapair__arrowpath" d="M3 12 L21 12" />
        <path class="nuda-sc2-deltapair__arrowpath" d="M14 5 L21 12 L14 19" />
      </svg>
    </div>
    <div class="nuda-sc2-deltapair__stat nuda-sc2-deltapair__stat--now">
      <span class="nuda-sc2-deltapair__num">468</span>
      <span class="nuda-sc2-deltapair__tag">This mo.</span>
    </div>
  </div>
  <span class="nuda-sc2-deltapair__badge">+50%</span>
</div>

.nuda-sc2-deltapair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
}

.nuda-sc2-deltapair__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nuda-sc2-deltapair__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  animation: _nuda-sc2deltapair-pop .6s cubic-bezier(.4,0,.2,1) forwards;
}

.nuda-sc2-deltapair__stat--now {
  animation-delay: .15s;
}

.nuda-sc2-deltapair__num {
  font: 700 20px ui-sans-serif,system-ui;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nuda-sc2-deltapair__stat--now .nuda-sc2-deltapair__num {
  color: #e4ff54;
}

.nuda-sc2-deltapair__tag {
  font: 500 8px ui-sans-serif,system-ui;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nuda-sc2-deltapair__arrow {
  width: 20px;
  height: 20px;
  color: #e4ff54;
}

.nuda-sc2-deltapair__arrow svg {
  width: 100%;
  height: 100%;
}

.nuda-sc2-deltapair__arrowpath {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: _nuda-sc2deltapair-draw .5s ease-out .3s forwards;
}

.nuda-sc2-deltapair__badge {
  font: 700 10px ui-sans-serif,system-ui;
  color: #0a0a0a;
  background: #e4ff54;
  padding: 2px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  animation: _nuda-sc2deltapair-badge .5s cubic-bezier(.4,0,.2,1) .6s forwards;
}

@keyframes _nuda-sc2deltapair-pop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes _nuda-sc2deltapair-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes _nuda-sc2deltapair-badge {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sc2-deltapair__stat,.nuda-sc2-deltapair__badge {
    animation: none !important;
    opacity: 1;
    transform: translateY(0);
  }
  .nuda-sc2-deltapair__arrowpath {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}