:root {
  --bg: #0f1115;
  --fg: #f7f8fa;
  --muted: #c7cbd4;
  --accent: #4fb5ff;
  --accent-2: #8bdcff;
  --card: #161a20;
  --border: #222836;
  --max-width: 72rem;
  --font-sans: "IBM Plex Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 20% 20%, #1b2333 0%, #0f1115 45%), #0f1115;
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

.wrap {
  max-width: var(--max-width);
  padding: 1.25rem 1.5rem;
  margin: 0 auto;
}

.site-head {
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
  background: rgba(15,17,21,0.8);
}
.brand a { font-weight: 700; letter-spacing: 0.02em; }
.top-nav { display: flex; gap: 1rem; font-size: 0.95rem; }
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lang-nav {
  display: flex;
  gap: 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lang-nav a[aria-current="page"] {
  color: var(--fg);
}

.site-foot {
  border-top: 1px solid var(--border);
  background: #0c0e12;
  color: var(--muted);
  font-size: 0.9rem;
}

.prose h1, .prose h2, .prose h3 { line-height: 1.3; margin-top: 1.6em; }
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.15rem; }
.prose p { margin: 0.7em 0; }
.prose ul { padding-left: 1.1em; }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: 0.9em; color: var(--muted); }

.foot-grid { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 720px) {
  .wrap { padding: 1rem; }
  .top-nav { display: none; }
  .site-head .wrap { flex-wrap: wrap; }
  .prose h1 { font-size: 1.6rem; }
}