:root {
  --site-bg: #f6f7fb;
  --site-surface: #ffffff;
  --site-text: #101828;
  --site-muted: #667085;
  --site-border: #e5e7eb;
  --site-accent: #0d6efd;
}

body {
  background: linear-gradient(180deg, #f8fafc 0%, var(--site-bg) 100%);
  color: var(--site-text);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.navbar, .footer-links a, .card, .sidebar-box, .hero-card, .empty-state {
  backdrop-filter: blur(10px);
}

.hero {
  background: radial-gradient(circle at top right, rgba(13,110,253,.12), transparent 35%), linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--site-border);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.04);
}

.hero-card, .sidebar-box, .empty-state {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 1.25rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  color: var(--site-muted);
}

.meta span + span::before {
  content: " ";
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links a {
  color: var(--site-muted);
  text-decoration: none;
}

.content-article {
  max-width: 860px;
}

.markdown-content {
  font-size: 1.05rem;
  line-height: 1.8;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content table,
.markdown-content pre {
  margin-bottom: 1.25rem;
}

.markdown-content blockquote {
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-left: 4px solid var(--site-accent);
  border-radius: .75rem;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid var(--site-border);
  padding: .75rem;
}

.markdown-content img {
  max-width: 100%;
  height: auto;
}

.markdown-content pre {
  padding: 1rem;
  border-radius: 1rem;
  background: #0b1020;
  color: #e5eefc;
  overflow-x: auto;
}

.codehilite pre {
  margin-bottom: 1.25rem;
}

.codehilite .hll { background-color: #2f3b52; }
.codehilite .c { color: #90a4ae; font-style: italic; }
.codehilite .k { color: #82aaff; font-weight: 600; }
.codehilite .o { color: #c792ea; }
.codehilite .ch, .codehilite .cm, .codehilite .cp, .codehilite .cpf, .codehilite .c1, .codehilite .cs { color: #90a4ae; font-style: italic; }
.codehilite .kc, .codehilite .kd, .codehilite .kn, .codehilite .kp, .codehilite .kr, .codehilite .kt { color: #82aaff; font-weight: 600; }
.codehilite .na { color: #f78c6c; }
.codehilite .nb { color: #82aaff; }
.codehilite .nc { color: #ffcb6b; }
.codehilite .no { color: #f07178; }
.codehilite .nd { color: #ffcb6b; }
.codehilite .ni { color: #f78c6c; }
.codehilite .ne { color: #f07178; }
.codehilite .nf { color: #82aaff; }
.codehilite .nl { color: #f78c6c; }
.codehilite .nn { color: #ffcb6b; }
.codehilite .nt { color: #c3e88d; }
.codehilite .nv { color: #f07178; }
.codehilite .ow { color: #c792ea; }
.codehilite .w { color: #d1d5db; }
.codehilite .mf, .codehilite .mh, .codehilite .mi, .codehilite .mo, .codehilite .il { color: #f78c6c; }
.codehilite .s, .codehilite .sa, .codehilite .sb, .codehilite .sc, .codehilite .dl, .codehilite .sd, .codehilite .s2, .codehilite .se, .codehilite .sh, .codehilite .si, .codehilite .sx, .codehilite .sr, .codehilite .s1, .codehilite .ss { color: #c3e88d; }
.codehilite .err { color: #ff5370; }

@media (max-width: 991.98px) {
  .hero { padding: 1.25rem; }
}