:root {
  --bg: #0b1220;
  --card: #121a2e;
  --text: #e7ecf5;
  --muted: #9aa7c2;
  --accent: #4ddc82;
  --accent-2: #35c46a;
  --code-bg: #0a0f1a;
  --code-text: #d9f7e2;
  --border: #223052;
  --warning: #332710;
  --challenge: #142a3d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--accent-2); }
header.site-header {
  background: linear-gradient(135deg, #06140a, #123a1f);
  color: white;
  padding: 1.1rem 0;
}
.wrap { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; }
.brand { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.brand h1 { margin:0; font-size:1.4rem; }
.brand nav a { color:white; text-decoration:none; margin-right:1rem; }
.hero {
  padding: 3rem 0 2rem;
}
.hero h2 { font-size: clamp(2rem, 5vw, 3.5rem); line-height:1.05; margin:0 0 1rem; }
.hero p { max-width: 850px; font-size:1.1rem; color:#eef7ee; }
main { padding: 2rem 0 4rem; }
.card-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:1rem;
}
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.1rem 1.2rem;
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.card h3 { margin-top:0; }
.badge {
  display:inline-block;
  padding:.2rem .55rem;
  border-radius:999px;
  background:rgba(77,220,130,.15);
  color:var(--accent);
  font-size:.82rem;
  font-weight:700;
}
.chapter {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:clamp(1rem, 3vw, 2rem);
}
.chapter h1 { margin-top:0; }
.chapter h2 { margin-top:2rem; border-bottom:2px solid var(--border); padding-bottom:.35rem; }
.chapter h3 { margin-top:1.4rem; }
pre {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 1rem;
  border-radius: 12px;
  overflow:auto;
  tab-size:4;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tip, .challenge, .teacher, .mistake {
  border-left:5px solid var(--accent);
  padding: .8rem 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  background:#132a1a;
}
.challenge { background:var(--challenge); border-left-color:#4fa8e0; }
.teacher { background:#241733; border-left-color:#b48cf0; }
.mistake { background:var(--warning); border-left-color:#f4c542; }
.lesson-meta {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap:.7rem;
  margin:1rem 0 1.5rem;
}
.lesson-meta div {
  background:#0f1626;
  border:1px solid var(--border);
  border-radius:10px;
  padding:.75rem;
}
nav.chapter-nav {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:2rem;
}
nav.chapter-nav a {
  display:inline-block;
  background:rgba(255,255,255,.07);
  padding:.65rem .9rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
}
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { border:1px solid var(--border); padding:.65rem; text-align:left; vertical-align:top; }
th { background:#182238; }
footer {
  color:var(--muted);
  border-top:1px solid var(--border);
  padding:2rem 0 3rem;
}
ul.checklist { list-style:none; padding-left:0; }
ul.checklist li::before { content:"✓ "; color:var(--accent); font-weight:700; }
.small { color:var(--muted); font-size:.95rem; }
@media (max-width:650px) {
  .brand nav { width:100%; }
  nav.chapter-nav { flex-direction:column; }
}