:root {
  color-scheme: dark;
  --background: #050505;
  --green: #8cff7a;
  --green-muted: #62b958;
  --green-dim: #397134;
  --glow: rgba(140, 255, 122, 0.22);
}

* { box-sizing: border-box; }

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

body {
  overflow: hidden;
  color: var(--green);
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.5;
  text-shadow: 0 0 7px var(--glow);
}

body::before {
  content: "";
  position: fixed;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0, 0, 0, 0.13) 4px);
  opacity: 0.38;
}

body::after {
  content: "";
  position: fixed;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.36) 100%);
  animation: screen-flicker 9s infinite;
}

.terminal {
  position: fixed;
  inset: 0;
  overflow: auto;
  padding: clamp(16px, 3vw, 38px);
  scrollbar-color: var(--green-dim) transparent;
  scrollbar-width: thin;
}

body.blackout .terminal,
body.blackout::before,
body.blackout::after { visibility: hidden; }

.terminal:focus { outline: none; }
.output { min-height: 1.5em; }
.line { min-height: 1.5em; white-space: pre-wrap; overflow-wrap: anywhere; }
.line.command-record { display: flex; align-items: baseline; }
.line.command-record .typed-command { margin-left: 0.65ch; white-space: pre-wrap; }
.muted { color: var(--green-muted); }
.bright { color: #c5ffbb; text-shadow: 0 0 10px rgba(140, 255, 122, 0.44); }
.error { color: #b7ffab; }
.link { color: #c5ffbb; text-decoration: underline; text-underline-offset: 0.18em; }
.link:hover, .link:focus { background: var(--green); color: var(--background); outline: none; text-shadow: none; }

.command-line { display: flex; align-items: baseline; min-width: 0; }
.prompt { flex: 0 0 auto; color: #b8ffad; user-select: text; }
.prompt span { color: #73d5ff; }
.command-input {
  min-width: 2ch;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  padding: 0 0 0 0.65ch;
  margin: 0;
  background: transparent;
  color: var(--green);
  caret-color: var(--green);
  font: inherit;
  line-height: inherit;
  text-shadow: inherit;
  border-radius: 0;
}

::selection { color: var(--background); background: var(--green); text-shadow: none; }

.matrix-overlay { position: fixed; z-index: 20; inset: 0; background: #000; }
.matrix-overlay canvas { display: block; width: 100%; height: 100%; }
.matrix-overlay p { position: absolute; right: 18px; bottom: 12px; margin: 0; color: rgba(140,255,122,.6); font-size: 12px; letter-spacing: .12em; }

.train-frame { white-space: pre; display: block; width: max-content; will-change: transform; }
.color-row { display: flex; gap: 0; margin-top: 0.3em; }
.color-row span { display: block; width: 3ch; height: 1em; text-shadow: none; }

@keyframes screen-flicker {
  0%, 18%, 22%, 64%, 100% { opacity: 1; }
  20% { opacity: .965; }
  65% { opacity: .985; }
}

@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }
@media (max-width: 560px) { .terminal { padding: 14px 12px 28px; } body { font-size: 13px; } }