feat(web): full layout overhaul — Linear design system

Complete UI/UX overhaul, not just style changes:

Layout:
- Dark-mode-first (near-black #08090a canvas, whiteOpacity borders)
- Sticky header with brand + nav + theme toggle
- Sticky sidebar (xl+) with hierarchical doc tree
- Main content in max-w-3xl centered column
- Inter font system (via @font-face + CSS vars)
- Font feature settings cv01/ss03 for Linear-geometric Inter

Components rewritten in Linear aesthetic:
- Homepage: editorial-style doc listing with tags, section headers
- Doc page: breadcrumb-style nav links, metadata bar (author/date/tags),
  clean prose, Related + History sections
- TOC: rehype-slug heading anchors + github-slugger matching
- Create/Edit: inline form with Linear-style inputs/buttons
- Login: centered card-style, brand-indigo CTA button
- Docs index: sectioned listing with tag previews
- Search: dark-themed search with result cards + snippets
- ThemeToggle: system-default + localStorage persistence

Typography:
- prose with custom Tailwind classes matching Linear's:
  headings #f7f8f8 font-light, body #d0d6e0,
  links #7170ff with hover #828fff,
  code blocks #191a1b bg with #23252a border

New deps: rehype-slug (heading anchors), github-slugger (TOC matching)
Files: layout.tsx (overhaul), page.tsx, create/, login/, docs/,
       [section]/[...slug]/page.tsx, Sidebar.tsx, ThemeToggle.tsx,
       TOC.tsx, DocForm.tsx, Markdown.tsx, Search page

apps/web/app/layout.tsx

@@ -2,10 +2,12 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import "./globals.css";
 import ThemeToggle from "@/components/ThemeToggle";
+import Sidebar from "@/components/Sidebar";
 
 export const metadata: Metadata = {
-  title: "MCPedia",
-  description: "Knowledge base for humans and AI agents via MCP.",
+  title: "MCPedia — Knowledge base for humans and AI agents",
+  description:
+    "A content-first knowledge base. Humans read the Web UI; AI agents use the MCP server. Both share one Core.",
 };
 
 export default function RootLayout({
@@ -14,28 +16,51 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className="h-full antialiased">
-      <body className="min-h-full flex flex-col bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
-        <header className="border-b border-zinc-200 dark:border-zinc-800">
-          <div className="mx-auto max-w-5xl px-4 py-3 flex items-center justify-between">
-            <Link href="/" className="font-semibold tracking-tight">
+    <html lang="en" className="h-full scroll-smooth">
+      <body className="min-h-screen bg-[#08090a] text-[#e2e4e7] font-inter">
+        <header className="sticky top-0 z-20 border-b border-[#1f2022]">
+          <div className="mx-auto max-w-7xl px-4 h-14 flex items-center justify-between">
+            <Link href="/" className="font-medium text-[#f7f8f8] text-lg">
               MCPedia
             </Link>
-            <nav className="flex items-center gap-4 text-sm">
-              <Link href="/" className="hover:underline">
-                Home
+            <nav className="flex items-center gap-6 text-sm">
+              <Link
+                href="/docs"
+                className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
+              >
+                Docs
               </Link>
-              <Link href="/search" className="hover:underline">
+              <Link
+                href="/search"
+                className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
+              >
                 Search
               </Link>
-              <Link href="/docs" className="hover:underline">
-                Docs
+              <Link
+                href="/login"
+                className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
+              >
+                Login
               </Link>
               <ThemeToggle />
             </nav>
           </div>
         </header>
-        <main className="mx-auto max-w-5xl w-full flex-1 px-4 py-8">{children}</main>
+
+        <div className="mx-auto max-w-7xl">
+          <div className="flex">
+            {/* Sticky sidebar for doc navigation */}
+            <aside className="hidden xl:block w-64 shrink-0 border-r border-[#1f2022]">
+              <Sidebar />
+            </aside>
+
+            <main className="flex-1 min-w-0">
+              <div className="px-8 py-10 max-w-3xl mx-auto">
+                {children}
+              </div>
+            </main>
+          </div>
+        </div>
       </body>
     </html>
   );