/* Design tokens, reset and typography */
:root {
  --bg: #12141a;
  --bg-deep: #0e1015;
  --panel: #181b22;
  --chip: #1b1e26;
  --line: #2a2e38;
  --line-strong: #3a3f4c;
  --text: #e6e8ec;
  --text-soft: #cfd3dc;
  --muted: #aab0bd;
  --faint: #8b919e;
  --accent: #ff6b5e;
  --accent-soft: #ffa095;
  --green: #5fc98a;
  --blue: #7aa7ff;
  --yellow: #e6c75a;

  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }
button, input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.accent { color: var(--accent); }
.muted { color: var(--faint); max-width: 620px; margin-bottom: 32px; }
.lead { color: var(--muted); font-size: 17px; text-wrap: pretty; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes log-line {
  0% { opacity: 0; transform: translateY(6px); }
  4%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}