:root {
  --bg: #020503;
  --green: #78ff9b;
  --green-bright: #a7ffbc;
  --green-dim: #39b95d;
  --green-faint: rgba(120, 255, 155, 0.10);
  --glow: 0 0 5px rgba(120, 255, 155, 0.55), 0 0 14px rgba(120, 255, 155, 0.20);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  overflow-x: hidden;
  color: var(--green);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.48;
  text-shadow: var(--glow);
  cursor: text;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.018) 0,
      rgba(255,255,255,0.018) 1px,
      rgba(0,0,0,0.09) 2px,
      rgba(0,0,0,0.09) 4px
    ),
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,0.52) 100%);
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 21;
  opacity: 0.14;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.18) 50%);
  background-size: 100% 4px;
  animation: flicker 7s infinite steps(1);
}

.screen {
  width: min(1100px, 94vw);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(22px, 4.5vw, 58px) 0 90px;
  position: relative;
  z-index: 2;
}

.terminal {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 55vh;
}

.line { min-height: 1.48em; }
.dim { color: var(--green-dim); }
.bright { color: var(--green-bright); }
.secret { color: var(--green-bright); filter: brightness(1.18); }
.command-line { color: var(--green-bright); margin-top: 0.2rem; }

.terminal-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(120,255,155,0.55);
  cursor: pointer;
  text-shadow: inherit;
}

.terminal-link:hover,
.terminal-link:focus-visible {
  color: var(--green-bright);
  background: rgba(120,255,155,0.10);
  outline: none;
  border-bottom-color: var(--green-bright);
}

.terminal-link.external::after {
  content: "↗";
  margin-left: 0.25ch;
  color: var(--green-dim);
}

.input-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-height: 1.7em;
  margin-top: 0.25rem;
}

.prompt {
  color: var(--green-bright);
  font-weight: 700;
  flex: 0 0 auto;
}

#commandInput {
  min-width: 1ch;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  background: transparent;
  color: var(--green-bright);
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  text-transform: uppercase;
  caret-color: var(--green-bright);
  text-shadow: var(--glow);
  appearance: none;
}

#commandInput::selection { background: rgba(120,255,155,0.28); }

.statusbar {
  margin-top: 2rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(120,255,155,0.18);
  color: var(--green-dim);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.flash { animation: flash 0.12s steps(1) 2; }

@keyframes flicker {
  0%,100% { opacity: 0.12; }
  38% { opacity: 0.16; }
  39% { opacity: 0.08; }
  40% { opacity: 0.14; }
  71% { opacity: 0.12; }
  72% { opacity: 0.18; }
}

@keyframes flash {
  0%,100% { filter: none; }
  50% { filter: brightness(1.65); }
}

@media (max-width: 600px) {
  .screen { width: 92vw; padding-top: 24px; }
  body { font-size: 14px; }
  .statusbar { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}