\n \n {\"\\u2190\"} docs\n {title}\n \n copy(pageUrl, \"url\")}>\n {copied === \"url\" ? \"copied \\u2713\" : \"copy URL\"}\n \n {rawPath && (\n \n source\n \n )}\n \n \n \n \n \n \n );\n}\n\n// ── DocsIndex component ─────────────────────────────────────────────────────\n\nconst IndexContainer = styled.div`\n max-width: 680px;\n margin: 0 auto;\n padding: 2.5rem 1.5rem 3rem;\n width: 100%;\n @media (max-width: 480px) {\n padding: 1.5rem 1rem 2rem;\n }\n`;\n\nconst IndexTitle = styled.h1`\n font-size: 1.4rem;\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--fg);\n margin-bottom: 0.3rem;\n`;\n\nconst IndexSub = styled.p`\n font-size: 0.88rem;\n color: var(--dim);\n margin-bottom: 2rem;\n`;\n\nconst SectionLabel = styled.h2`\n font-size: 0.78rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--dim);\n margin: 1.8rem 0 0.6rem;\n &:first-of-type { margin-top: 0; }\n`;\n\nconst DocLink = styled.a`\n display: block;\n padding: 0.5rem 0.7rem;\n margin: 0.15rem 0;\n border-radius: 6px;\n color: var(--fg);\n text-decoration: none;\n font-size: 0.92rem;\n transition: background 0.12s;\n &:hover { background: var(--surface); }\n`;\n\nexport interface DocsIndexProps {\n docs: Array<{ slug: string; title: string; category: string }>;\n}\n\nexport function DocsIndex({ docs }: DocsIndexProps) {\n const reference = docs.filter(d => d.category === \"reference\");\n const essays = docs.filter(d => d.category === \"essay\");\n\n return (\n \n