:root {
  --bg: #f6f8fb;
  --bg-gradient-a: #eef4ff;
  --bg-gradient-b: #f8f5ef;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --text: #161d29;
  --muted: #5f6b7c;
  --accent: #0f766e;
  --accent-strong: #0b5953;
  --accent-soft: #d7f2ed;
  --line: #dfe5ee;
  --shadow-sm: 0 8px 20px rgba(20, 33, 56, 0.05);
  --shadow-md: 0 18px 40px rgba(20, 33, 56, 0.11);
  --radius-lg: 18px;
  --radius-md: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 4% -10%, var(--bg-gradient-a) 0%, transparent 55%),
    radial-gradient(900px 500px at 96% -5%, var(--bg-gradient-b) 0%, transparent 62%),
    var(--bg);
  font-family: "Plus Jakarta Sans", "IBM Plex Sans", "Segoe UI", sans-serif;
  line-height: 1.58;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 140ms ease;
}

a:hover {
  color: var(--accent-strong);
}

code {
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  background: #eff4f9;
  border: 1px solid #dde5ef;
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
  color: #25415e;
}

pre {
  overflow-x: auto;
  background: linear-gradient(180deg, #151e2f 0%, #111827 100%);
  color: #dbe6f5;
  border: 1px solid #2a3a54;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 1rem;
  border-radius: var(--radius-md);
}

pre code {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
}

pre code .token.comment {
  color: #7f8fa4;
}

pre code .token.keyword {
  color: #79c0ff;
}

pre code .token.string {
  color: #a5d6a7;
}

pre code .token.number {
  color: #f7c46c;
}

pre code .token.constant {
  color: #f9a8d4;
}

pre code .token.operator {
  color: #f4b8ff;
}

pre code .token.builtin {
  color: #84dcc6;
}

@media (max-width: 980px) {
  pre {
    font-size: 0.85rem;
  }
}