<div class="tl11-wrap">
  <div class="tl11-scanlines" aria-hidden="true"></div>

  <div class="tl11-term">
    <div class="tl11-topbar">
      <span class="tl11-dot tl11-r"></span>
      <span class="tl11-dot tl11-y"></span>
      <span class="tl11-dot tl11-g"></span>
      <span class="tl11-tlabel">incident-report-2025-03-14.log — Production / US-EAST-1</span>
    </div>

    <div class="tl11-body">
      <div class="tl11-sep">── INCIDENT INC-4471 · Severity P1 · Duration 4h 17m ──</div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:13:07</span>
        <span class="tl11-lvl tl11-warn">WARN</span>
        <span class="tl11-text">Latency spike detected on <strong>api-gateway-prod-3</strong>. P99: <span class="tl11-hl">1,840ms</span> (threshold 500ms). Auto-scaling triggered.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:19:44</span>
        <span class="tl11-lvl tl11-err">ERROR</span>
        <span class="tl11-text">DB connection pool exhausted on <strong>rds-primary-east</strong>. <span class="tl11-hl">4,200 queued</span>. New connections rejected.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:21:02</span>
        <span class="tl11-lvl tl11-crit">CRIT</span>
        <span class="tl11-text"><strong>ALERT FIRED:</strong> Error rate exceeded <span class="tl11-hl">18.7%</span>. PagerDuty escalated. Checkout flow <span class="tl11-hl">DEGRADED</span>.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:28:15</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">SRE <strong>@chen_wei</strong> acknowledged. War room opened in <strong>#inc-4471</strong>. Status page updated to "Investigating".</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:45:33</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">Root cause: <strong>unoptimised query</strong> in release <span class="tl11-hl">v4.12.1</span> causing full table scans. Rollback initiated.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 03:02:09</span>
        <span class="tl11-lvl tl11-warn">WARN</span>
        <span class="tl11-text">Rollback to <strong>v4.11.9</strong> complete. Queue depth: <span class="tl11-hl">812</span>. Error rate falling → <span class="tl11-hl">3.2%</span>.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 03:18:51</span>
        <span class="tl11-lvl tl11-ok">OK</span>
        <span class="tl11-text">All services nominal. Error rate <span class="tl11-hl">0.04%</span>. P99 <span class="tl11-hl">182ms</span>. Status: "Resolved".</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 06:30:00</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">Postmortem created. <strong>Action items:</strong> query review gate in CI, pool alerting at 60% capacity, blue/green for DB migrations.</span>
      </div>

      <div class="tl11-sep">── END OF INCIDENT · 3,847 users affected · $14,200 est. revenue loss ──</div>
    </div>
  </div>
</div>

.tl11-wrap {
  --tl11-bg:   #080810;
  --tl11-a:    #ff3860;
  background: var(--tl11-bg);
  padding: 2rem 1.5rem;
  position: relative;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  overflow: hidden;
}
.tl11-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.04) 0 1px,
    transparent 1px 3px
  );
}
.tl11-term {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(255,56,96,0.18);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.tl11-topbar {
  background: rgba(255,56,96,0.08);
  border-bottom: 1px solid rgba(255,56,96,0.18);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tl11-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.tl11-r { background: #ff5f57; }
.tl11-y { background: #febc2e; }
.tl11-g { background: #28c840; }
.tl11-tlabel {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-left: 0.65rem;
}
.tl11-body {
  padding: 1.25rem 1rem;
}
.tl11-sep {
  font-size: 10.5px;
  color: rgba(255,255,255,0.12);
  letter-spacing: 1.5px;
  padding: 0.4rem 0;
}
.tl11-line {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.tl11-line:last-of-type { border-bottom: 0; }
.tl11-ts {
  font-size: 10.5px;
  color: rgba(255,255,255,0.22);
  white-space: nowrap;
  flex-shrink: 0;
}
.tl11-lvl {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}
.tl11-info { background: rgba(30,120,255,0.18); color: #4da6ff; }
.tl11-warn { background: rgba(255,180,0,0.18);  color: #fbbf24; }
.tl11-err  { background: rgba(255,56,96,0.22);  color: var(--tl11-a); }
.tl11-ok   { background: rgba(40,200,64,0.18);  color: #4ade80; }
.tl11-crit {
  background: rgba(255,56,96,0.4);
  color: #fff;
  animation: tl11-blink 1s step-end infinite;
}
@keyframes tl11-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.tl11-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  flex: 1;
  word-break: break-word;
}
.tl11-text strong { color: #fff; font-weight: 600; }
.tl11-hl          { color: var(--tl11-a); }
@media (max-width: 600px) {
  .tl11-line { flex-direction: column; gap: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl11-crit { animation: none; }
}