*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fff;
  --border: #e8e8e4;
  --text: #1a1a18;
  --title: #000;
  --muted: rgba(102, 102, 102, 1);
  --hover: rgb(245, 245, 245);
  --surface: #f5f5f2;
  --font: 'Manrope', system-ui, sans-serif;
  --mono: 'Geist Mono', monospace;
  --toc-w: 200px;
  --content-max: 680px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; }

/* ── LAYOUT ── */
.page {
  display: flex;
  justify-content: center;
  padding: 4rem 2rem 6rem;
  gap: 3rem;
}

/* ── CONTENT ── */
.content {
  flex: 1;
  max-width: var(--content-max);
  min-width: 0;
}

.index { max-width: 620px; margin: 0 auto; padding: 4rem 2rem 6rem; }

.index-hero { margin-bottom: 2.5rem; }
.index-logo { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 1.25rem; display: block; }

.index hr { border: none; border-top: 1px solid var(--border); margin-bottom: 2.5rem; }

.index-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem 3rem; }

.category-label { font-size: 18px; font-weight: 800; color: var(--title); margin-bottom: 0.75rem; }

.index-category nav { display: flex; flex-direction: column; gap: 2px; }

.index-category nav a { display: flex; align-items: center; gap: 10px; padding: 5px; text-decoration: none; color: var(--muted); font-size: 16px; font-weight: 500; }
.index-category nav a:hover { background: var(--hover); color: rgba(51, 51, 51, 1); border-radius: 10px; }

.index-category nav a span { font-weight: 700; color: var(--text); }

@media (max-width: 520px) { .index-grid { grid-template-columns: 1fr; } }