body {
  background: #000;
  color: #fff;
  font-family: "Courier New", monospace;
  font-size: 14px;
  padding: 20px;
  white-space: pre-wrap;
  overflow: hidden;
}

#terminal {
  position: relative;
}

.line {
  opacity: 0;
}

.panic-line {
  color: #f00;
}

/* blinking block cursor */
.cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #fff;
  margin-left: 4px;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* subtle screen shake on panic */
.shake {
  animation: screen-shake 120ms linear 2;
}

@keyframes screen-shake {
  0%   { transform: translate(0, 0);     }
  25%  { transform: translate(-2px, 1px);}
  50%  { transform: translate(2px, -1px);}
  75%  { transform: translate(-1px, -2px);}
  100% { transform: translate(0, 0);     }
}

/* scanline distortion */
.glitch {
  animation: glitch 90ms steps(2, end) 2;
}

@keyframes glitch {
  0% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  20% { clip-path: inset(10% 0 0 0); transform: translate(1px, -1px); }
  40% { clip-path: inset(20% 0 0 0); transform: translate(-1px, 1px); }
  60% { clip-path: inset(35% 0 0 0); transform: translate(1px, 0); }
  80% { clip-path: inset(12% 0 0 0); transform: translate(-1px, 0); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
}