body {
  background: black;
  color: #00ff00;
  font-family: monospace;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  user-select: none;
}
#terminal {
  height: 80vh;
  overflow-y: auto;
  white-space: pre-wrap;
  padding-bottom: 40px;
}
#input-line {
  position: fixed;
  bottom: 40px;
  width: 100%;
}
#input {
  width: 90%;
  background: black;
  border: none;
  color: #00ff00;
  outline: none;
  font-family: monospace;
  caret-color: #00ff00;
  animation: blink-caret 1s step-end infinite;
}
#trace-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  background: #002200;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  color: #00ff00;
}
#bar {
  flex-grow: 1;
  height: 10px;
  background: #002200;
  margin-left: 10px;
  border: 1px solid #00ff00;
}
#progress {
  height: 10px;
  width: 0%;
  background: #00ff00;
  transition: width 0.3s ease;
}
@keyframes blink-caret {
  from, to { caret-color: transparent; }
  50% { caret-color: #00ff00; }
}
.glitch {
  animation: glitch-effect 0.3s infinite;
}
@keyframes glitch-effect {
  0%, 100% { filter: none; }
  20% { filter: hue-rotate(20deg) saturate(150%) contrast(120%); }
  40% { filter: hue-rotate(-20deg) saturate(200%) contrast(90%); }
  60% { filter: hue-rotate(10deg) saturate(180%) contrast(110%); }
  80% { filter: hue-rotate(-10deg) saturate(170%) contrast(100%); }
}