Console — Developer Maintenance

<main class="co-wrap"><div class="co-card">
  <div class="co-bar"><span class="co-d co-r"></span><span class="co-d co-y"></span><span class="co-d co-g"></span><span class="co-t">deploy — system maintenance</span></div>
  <div class="co-body">
    <h1 class="co-h1"># System maintenance in progress</h1>
    <div class="co-log" role="log" aria-label="Maintenance log">
      <p><span class="co-ok">✓</span> Draining traffic from edge nodes</p>
      <p><span class="co-ok">✓</span> Snapshotting primary database</p>
      <p><span class="co-ok">✓</span> Applying migration 2026_06_15_a</p>
      <p><span class="co-run">●</span> Rebuilding search index <span class="co-prog">[■■■■■■■□□□] 72%</span></p>
      <p><span class="co-wait">○</span> Re-enabling services</p>
      <p class="co-cursor"><span class="co-prompt">$</span> tail -f /var/log/maintenance<span class="co-blink">_</span></p>
    </div>
    <p class="co-eta"># estimated completion: ~10 minutes · ETA 14:40 UTC</p>
    <div class="co-actions"><a class="co-btn" href="#">status.devforge.io</a><a class="co-link" href="mailto:ops@devforge.io">ops@devforge.io</a></div>
    <footer class="co-foot"><span class="x-by">Powered by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
  </div>
</div></main>

*{box-sizing:border-box}
.co-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 20px;background:#0a0e0a;color:#d3f9d8;font-family:'JetBrains Mono',ui-monospace,monospace;background-image:radial-gradient(60% 50% at 50% 0%,rgba(34,197,94,.07),transparent)}
.co-card{width:100%;max-width:600px;background:#0e140e;border:1px solid #1d2b1d;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.co-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#111a11;border-bottom:1px solid #1d2b1d}
.co-d{width:11px;height:11px;border-radius:50%}.co-r{background:#ff5f56}.co-y{background:#ffbd2e}.co-g{background:#27c93f}
.co-t{margin-left:8px;font-size:.78rem;color:#5f8f5f}
.co-body{padding:26px}
.co-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.4rem;color:#eafdec;margin:0 0 20px}
.co-log{font-size:.9rem;line-height:1.9;background:#0b110b;border:1px solid #1d2b1d;border-radius:10px;padding:16px 18px}
.co-log p{margin:0}
.co-ok{color:#22c55e}.co-run{color:#fbbf24}.co-wait{color:#4f7a4f}
.co-prog{color:#22c55e;margin-left:6px}
.co-prompt{color:#22c55e;font-weight:700}.co-cursor{color:#7fb87f;margin-top:6px}
.co-blink{animation:coB 1.1s steps(2) infinite}@keyframes coB{50%{opacity:0}}
.co-eta{font-size:.82rem;color:#6fa86f;margin:18px 0 20px}
.co-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.co-btn{padding:11px 18px;border-radius:9px;background:#22c55e;color:#04140a;font-weight:700;text-decoration:none;transition:.15s}
.co-btn:hover{background:#16a34a}.co-btn:focus-visible{outline:3px solid #86efac;outline-offset:2px}
.co-link{color:#4ade80;text-decoration:none}.co-link:hover{text-decoration:underline}
.co-foot{margin-top:20px;padding-top:16px;border-top:1px solid #1d2b1d}
.x-by{font-size:.78rem;color:#4f7a4f}.x-by a{color:#4ade80;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.co-blink{animation:none}.co-btn{transition:none}}