:root {
  --bg: #0b0f0a;
  --fg: #b5f5c8;
  --dim: #4b6b55;
  --ok: #3ddc84;
  --fail: #ff5c5c;
  --blocked: #ffb454;
  --neutral: #7a8a80;
  --key: #ffe066;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  color: var(--fg);
  font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 24px 18px;
}
.terminal { max-width: 760px; margin: 0 auto; }
.prompt { color: var(--dim); margin-bottom: 14px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  gap: 2px 10px;
  padding: 4px 0;
  opacity: 1;
  transition: opacity .25s ease;
}
.row[data-state="pending"] { opacity: .32; }
.row .glyph { text-align: center; }
.row .label { }
.row .detail { grid-column: 2; color: var(--dim); font-size: .9em; }
.row[data-state="running"] .glyph { color: var(--fg); animation: pulse 1s infinite; }
.row[data-state="ok"] .glyph { color: var(--ok); }
.row[data-state="fail"] .glyph { color: var(--fail); }
.row[data-state="fail"] .detail { color: var(--fail); }
.row[data-state="blocked"] .glyph { color: var(--blocked); }
.row[data-state="blocked"] .detail { color: var(--blocked); }
.row[data-state="neutral"] .glyph { color: var(--neutral); }
.row.emphasis .label { color: var(--key); font-weight: 600; }
.cursor { color: var(--fg); animation: blink 1s steps(1) infinite; margin-top: 12px; }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes blink { 50% { opacity: 0; } }