Chip Overflow More

<div class="nuda-chip-over">
  <span class="nuda-chip-over__chip">design</span>
  <span class="nuda-chip-over__chip">code</span>
  <span class="nuda-chip-over__chip">tools</span>
  <button type="button" class="nuda-chip-over__more">+3 more</button>
</div>

/* Chip Overflow More
   Collapses the tail of a long chip list behind "+N more".
   Customize: --over-accent */

.nuda-chip-over {
  --over-accent: #e4ff54;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.nuda-chip-over__chip {
  padding: 4px 10px;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
}

.nuda-chip-over__more {
  padding: 4px 10px;
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  color: var(--over-accent);
  background: rgba(228, 255, 84, 0.08);
  border: 1px solid rgba(228, 255, 84, 0.25);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.nuda-chip-over__more:hover {
  background: rgba(228, 255, 84, 0.16);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-chip-over__more { transition: none; }
  .nuda-chip-over__more:hover { transform: none; }
}