<div class="dm-cyber-bg">
  <div class="dm-cyber">
    <div class="dm-cyber__head">
      <span class="dm-cyber__dot"></span>
      <span>node-01.codefronts.io</span>
    </div>
    <div class="dm-cyber__body">
      <div class="dm-cyber__line"><span class="dm-cyber__prompt">$</span> deploy --env=prod</div>
      <div class="dm-cyber__line">→ Build complete in 8.42s</div>
      <div class="dm-cyber__line">→ 158 pages · 0 errors</div>
      <div class="dm-cyber__line">
        <span class="dm-cyber__prompt">$</span> <span class="dm-cyber__cur">█</span>
      </div>
    </div>
  </div>
</div>

.dm-cyber-bg { padding: 22px; border-radius: 16px; background: #020a05; }
.dm-cyber {
  background: #020a05;
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 8px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  color: #4ade80;
  overflow: hidden;
}
.dm-cyber__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(74, 222, 128, 0.06);
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  font-size: 11px;
  color: rgba(74, 222, 128, 0.7);
}
.dm-cyber__dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80;
}
.dm-cyber__body { padding: 12px 14px; font-size: 11.5px; line-height: 1.7; }
.dm-cyber__line { color: rgba(74, 222, 128, 0.85); }
.dm-cyber__prompt { color: #86efac; font-weight: 700; margin-right: 4px; }
.dm-cyber__cur { animation: dm-cyber-blink 0.8s steps(2) infinite; }
@keyframes dm-cyber-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-cyber__cur { animation: none; } }