:root {
  --bg: #0a0a0a;
  --terminal-bg: #000;
  --terminal-text: #fbf9f9;
  --terminal-blue: #4da3ff;
  --terminal-green: #00ff87;
  --terminal-muted: #444;
  --border: #003344;
  --shadow: #00aaff55;
  --red: #ff5555;
  --yellow: #ffaa00;
  --green: #55ff55;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--terminal-text);
  font-family: "Courier New", Courier, monospace;
}

.window {
  width: min(80%, 1100px);
  margin: 40px auto;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--terminal-bg);
  box-shadow: 0 0 25px var(--shadow);
}

.titlebar {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 2px solid var(--border);
  background: #001a26;
}

.buttons .btn {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 50%;
}

.btn.red { background: var(--red); }
.btn.yellow { background: var(--yellow); }
.btn.green { background: var(--green); }

.title {
  margin-left: 10px;
  color: var(--terminal-blue);
  text-shadow: 0 0 6px #0088ff;
}

.terminal {
  min-height: 18rem;
  padding: 14px 16px;
  overflow-wrap: anywhere;
  background: var(--terminal-bg);
  font-size: 18px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.cursor {
  display: inline-block;
  width: 10px;
  color: var(--terminal-text);
  animation: blink 1s infinite;
}

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

.terminal-line { min-height: 1.45em; }
.contact-terminal { white-space: normal; }
.terminal-line--system,
.terminal-line--output { color: var(--terminal-text); }
.terminal-line--success { color: var(--terminal-green); }
.terminal-line--separator { color: var(--terminal-muted); }

.shell-prompt,
.terminal-link { color: var(--terminal-blue); }

.shell-path { color: var(--terminal-muted); }

.terminal-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.terminal-link:hover,
.terminal-link:focus-visible {
  color: #fff;
  text-shadow: 0 0 8px var(--terminal-blue);
}

.terminal-heading {
  margin: 0 0 1rem;
  color: var(--terminal-blue);
  font-size: 1.25rem;
}

.contact-terminal p {
  margin: 0 0 1rem;
}

@media (max-width: 700px) {
  .window {
    width: calc(100% - 24px);
    margin: 12px auto;
  }

  .terminal {
    min-height: calc(100vh - 76px);
    padding: 14px;
    font-size: 16px;
  }
}