:root {
  --bg: #f1f2f3;
  --panel: #ffffff;
  --border: #d9dbde;
  --bar-tint: rgba(0, 0, 0, 0.02);
  --grey-dim: #6c7075;
  --text: #1c1e21;
  --yellow: #9c7a12;
  --yellow-fill: #f2c14e;
  --yellow-dim: #c9a227;
  --shadow: 0 16px 40px rgba(20, 20, 20, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --panel: #1c1e21;
    --border: #34373b;
    --bar-tint: rgba(255, 255, 255, 0.02);
    --grey-dim: #75787d;
    --text: #d6d8db;
    --yellow: #f2c14e;
    --yellow-fill: #f2c14e;
    --yellow-dim: #8a712c;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, Consolas, 'Courier New', Courier, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 100dvh;
}

p { margin: 0; }

.terminal {
  width: 100%;
  max-width: 620px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bar-tint);
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grey-dim);
}

.dot.active { background: var(--yellow-fill); }

.terminal-title {
  margin-left: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-dim);
}

.terminal-body {
  padding: clamp(20px, 5vw, 36px);
  font-size: clamp(14px, 2.4vw, 16px);
  line-height: 1.7;
}

.block + .block { margin-top: 1.6em; }

.tag { color: var(--grey-dim); }
.who { color: var(--yellow); font-weight: 600; }
.msg { color: var(--text); }

.email {
  color: var(--yellow);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--yellow-dim);
  text-underline-offset: 3px;
}
.email:hover { text-decoration-color: var(--yellow); }
.email:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--yellow);
  margin-left: 4px;
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

@media (max-width: 420px) {
  .terminal-body { padding: 20px; }
}