Command Output

<!-- Command Output — lines stagger up; final prompt has a blinking caret -->
<div class="nuda-cout">
  <div class="nuda-cout__line nuda-cout__line--cmd" style="--d: 0s"><b>$</b> npm test</div>
  <div class="nuda-cout__line" style="--d: .4s"><i>✓</i> 28 tests passed</div>
  <div class="nuda-cout__line" style="--d: .8s"><i class="is-warn">!</i> 3 warnings</div>
  <div class="nuda-cout__line" style="--d: 1.2s">
    <b>$</b> <span class="nuda-cout__caret"></span>
  </div>
</div>

/* Command Output
   Terminal-style output where each line fades up after a delay.
   Customize: --co-bg, --co-accent */

.nuda-cout {
  --co-accent: #e4ff54;
  --co-bg: #0a0a0a;
  padding: 12px 14px;
  background: var(--co-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font: 500 0.85rem ui-monospace, monospace;
  color: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 480px;
}

.nuda-cout__line {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: nuda-co-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s) forwards;
}

.nuda-cout__line b {
  color: var(--co-accent);
  font-weight: 700;
}

.nuda-cout__line i {
  font-style: normal;
  color: var(--co-accent);
}

.nuda-cout__line i.is-warn { color: #fbbf24; }

.nuda-cout__caret {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--co-accent);
  animation: nuda-co-blink 1s steps(2) infinite;
  animation-delay: 1.4s;
}

@keyframes nuda-co-up {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nuda-co-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nuda-cout__line,
  .nuda-cout__caret { animation: none; opacity: 1; }
}