:root { --bg: #0b0a06; --fg: #5f7dff; --dim: #4c67b8; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  color: var(--fg);
  font: 15px/1.35 ui-monospace, "SF Mono", "DejaVu Sans Mono", "Courier New", monospace;
  padding: clamp(1rem, 4vw, 3rem);
  text-shadow: 0 0 5px rgba(95,125,255,0.25);
}

.screen a.hex-entry { color: #b978ff; }
.screen a.hex-entry.visited-entry,
.screen a.hex-entry:visited { color: #e0b8ff; }
.screen a.hex-entry:hover, .screen a.hex-entry:focus {
  background: rgba(159, 123, 205, 0.28);
  color: #f7e2ff;
  text-shadow: none;
  outline: none;
}

.dir.hex-dir { color: #aa66ff; }

.hex-line { color: #9f7bcd; }

.screen a.drone-entry { color: #5f7dff; }
.screen a.drone-entry.visited-entry,
.screen a.drone-entry:visited { color: #8ea8ff; }
.screen a.drone-entry:hover, .screen a.drone-entry:focus {
  background: rgba(95, 125, 255, 0.18);
  color: #07090a;
  text-shadow: none;
  outline: none;
}

.dir.drone-dir { color: #6f88d6; }

.drone-line { color: #6f88d6; }

.screen a.tech-entry { color: #28aef5; }
.screen a.tech-entry.visited-entry,
.screen a.tech-entry:visited { color: #5fefff; }
.screen a.tech-entry:hover, .screen a.tech-entry:focus {
  background: rgba(40, 222, 238, 0.22);
  color: #07090a;
  text-shadow: none;
  outline: none;
}

.dir.tech-dir { color: #27dcee; }

.tech-line { color: #27dcee; }

.screen a.hex-entry.visited-entry::after,
.screen a.drone-entry.visited-entry::after,
.screen a.tech-entry.visited-entry::after {
  content: " ⚙";
  font-size: 0.85em;
  opacity: 0.7;
}

.screen a.hex-entry::before,
.screen a.hex-entry::after,
.dir.hex-dir::before,
.dir.hex-dir::after {
  color: #9f7bcd;
}

/* faint CRT scanlines + vignette */
.crt {
  position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 3px 4px),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,.55));
}
.screen {
  margin: 0; white-space: pre; overflow-x: auto;
  font: inherit; letter-spacing: .02em;
}
.screen a { color: var(--fg); text-decoration: none; }
.screen a:hover, .screen a:focus { background: rgba(95, 125, 255, 0.18); color: var(--bg); text-shadow: none; outline: none; }
.screen a:active, .screen a:visited { color: #8ea8ff; }
.dir { color: var(--dim); }
.cursor { background: var(--fg); color: var(--bg); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }