diff --git a/.gitignore b/.gitignore
index 66d9451..d4db458 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,4 @@
-node_modules
-generated
-convert.ts
-/cssforge.config.ts
-/.cssforge
-TODO.md
\ No newline at end of file
+.vitepress/cache
+.vitepress/dist
+.cssforge
+docs.md
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
new file mode 100644
index 0000000..5329887
--- /dev/null
+++ b/.vitepress/config.ts
@@ -0,0 +1,33 @@
+import { defineConfig } from "vitepress";
+
+export default defineConfig({
+  title: "CSS Forge",
+  description:
+    "0 runtime design tokens generator for modern style systems.",
+  appearance: "dark",
+  markdown: {
+    theme: "github-dark",
+  },
+  themeConfig: {
+    nav: [
+      { text: "Guide", link: "/docs" },
+      {
+        text: "JSR",
+        link: "https://jsr.io/@hebilicious/cssforge",
+      },
+      {
+        text: "GitHub",
+        link: "https://github.com/Hebilicious/cssforge",
+      },
+    ],
+    search: { provider: "local" },
+    editLink: {
+      pattern:
+        "https://github.com/Hebilicious/cssforge/edit/main/packages/docs/:path",
+    },
+    footer: {
+      message: "Released under the MIT License.",
+      copyright: "Copyright Hebilicious",
+    },
+  },
+});
diff --git a/.vitepress/theme/AnvilAnimation.vue b/.vitepress/theme/AnvilAnimation.vue
new file mode 100644
index 0000000..337801d
--- /dev/null
+++ b/.vitepress/theme/AnvilAnimation.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="anvil-container">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-50 -50 900 750"
+      width="100%"
+      height="100%"
+    >
+      <defs>
+        <radialGradient id="bgGrad" cx="50%" cy="50%" r="75%">
+          <stop offset="0%" stop-color="#140d26" />
+          <stop offset="100%" stop-color="#030206" />
+        </radialGradient>
+
+        <linearGradient id="metalDark" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color="#2a2a35" />
+          <stop offset="40%" stop-color="#15151c" />
+          <stop offset="100%" stop-color="#08080c" />
+        </linearGradient>
+
+        <linearGradient id="metalLight" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color="#555568" />
+          <stop offset="50%" stop-color="#2b2b3a" />
+          <stop offset="100%" stop-color="#111118" />
+        </linearGradient>
+
+        <linearGradient id="metalPlate" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0%" stop-color="#3b3b4f" />
+          <stop offset="20%" stop-color="#6a6a82" />
+          <stop offset="80%" stop-color="#44445c" />
+          <stop offset="100%" stop-color="#1a1a24" />
+        </linearGradient>
+
+        <linearGradient id="metalCylinder" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0%" stop-color="#0a0a10" />
+          <stop offset="30%" stop-color="#4a4a5e" />
+          <stop offset="70%" stop-color="#4a4a5e" />
+          <stop offset="100%" stop-color="#0a0a10" />
+        </linearGradient>
+
+        <linearGradient id="energyStrike" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0%" stop-color="#00f3ff" />
+          <stop offset="50%" stop-color="#ffffff" />
+          <stop offset="100%" stop-color="#ff00a0" />
+        </linearGradient>
+
+        <filter id="dropShadow" x="-20%" y="-20%" width="150%" height="150%">
+          <feDropShadow dx="0" dy="15" stdDeviation="10" flood-color="#000" flood-opacity="0.9" />
+        </filter>
+        <filter id="shadowSmall" x="-20%" y="-20%" width="150%" height="150%">
+          <feDropShadow dx="0" dy="5" stdDeviation="4" flood-color="#000" flood-opacity="0.8" />
+        </filter>
+
+        <filter id="glowCyan" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur1" />
+          <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur2" />
+          <feMerge>
+            <feMergeNode in="blur2" />
+            <feMergeNode in="blur1" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+
+        <filter id="glowMagenta" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur1" />
+          <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur2" />
+          <feMerge>
+            <feMergeNode in="blur2" />
+            <feMergeNode in="blur1" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+
+        <pattern id="gridPattern" width="60" height="60" patternUnits="userSpaceOnUse">
+          <path d="M 60 0 L 0 0 0 60" fill="none" stroke="#00f3ff" stroke-width="1" stroke-opacity="0.05" />
+        </pattern>
+      </defs>
+
+      <!-- Deep Background Grid -->
+      <rect x="-100" y="-100" width="1100" height="950" fill="url(#bgGrad)" />
+      <rect x="-100" y="-100" width="1100" height="950" fill="url(#gridPattern)" />
+
+      <!-- Background Forge Reactor Rings -->
+      <g class="reactor-ring" opacity="0.4">
+        <circle cx="0" cy="0" r="280" fill="none" stroke="#00f3ff" stroke-width="1" stroke-dasharray="4 16" />
+        <circle cx="0" cy="0" r="300" fill="none" stroke="#ff00a0" stroke-width="2" stroke-dasharray="40 80 10 40" />
+        <circle cx="0" cy="0" r="320" fill="none" stroke="#00f3ff" stroke-width="8" opacity="0.1" />
+      </g>
+
+      <!-- Camera shake group -->
+      <g class="scene-shake">
+        <!-- Floor Plane -->
+        <ellipse cx="400" cy="620" rx="350" ry="25" fill="#000" filter="blur(10px)" opacity="0.8" />
+        <line x1="-100" y1="620" x2="900" y2="620" stroke="#00f3ff" stroke-width="2" opacity="0.3" />
+
+        <!-- Forge Pillar (Right) -->
+        <rect x="720" y="-50" width="200" height="700" fill="url(#metalDark)" filter="url(#dropShadow)" />
+        <rect x="730" y="-50" width="20" height="700" fill="url(#metalPlate)" />
+        <rect x="780" y="50" width="40" height="550" fill="#050508" stroke="#111" stroke-width="4" />
+        <line x1="800" y1="50" x2="800" y2="600" stroke="#ff00a0" stroke-width="4" filter="url(#glowMagenta)" opacity="0.4" />
+        <path d="M 740 200 L 860 200 L 880 240 L 880 320 L 860 360 L 740 360 Z" fill="url(#metalLight)" filter="url(#shadowSmall)" />
+        <text x="750" y="230" font-family="sans-serif" font-weight="900" font-size="14" fill="#00f3ff">SYS_PIVOT</text>
+        <rect x="750" y="330" width="60" height="8" fill="#ff00a0" />
+
+        <!-- Anvil Assembly -->
+        <g class="anvil" filter="url(#dropShadow)">
+          <!-- Base Tier 1 -->
+          <polygon points="210,620 590,620 560,560 240,560" fill="url(#metalDark)" />
+          <polygon points="240,560 560,560 550,555 250,555" fill="url(#metalPlate)" />
+          <line x1="220" y1="615" x2="580" y2="615" stroke="#ff00a0" stroke-width="4" filter="url(#glowMagenta)" />
+
+          <!-- Base Tier 2 -->
+          <polygon points="250,555 550,555 510,510 290,510" fill="url(#metalLight)" stroke="#111" stroke-width="2" />
+
+          <!-- CSSFORGE Branding -->
+          <g transform="translate(400, 585)">
+            <rect x="-140" y="-16" width="280" height="32" rx="4" fill="#050508" stroke="#00f3ff" stroke-width="1" />
+            <text x="0" y="7" text-anchor="middle" font-size="24" font-weight="900" font-family="system-ui, sans-serif" letter-spacing="8" fill="#ffffff" filter="url(#glowCyan)">CSSFORGE</text>
+          </g>
+
+          <!-- Waist / Core Block -->
+          <rect x="310" y="440" width="180" height="70" fill="#0a0a0f" />
+          <rect x="325" y="440" width="30" height="70" fill="url(#metalCylinder)" stroke="#000" stroke-width="2" />
+          <rect x="385" y="440" width="30" height="70" fill="url(#metalCylinder)" stroke="#000" stroke-width="2" />
+          <rect x="445" y="440" width="30" height="70" fill="url(#metalCylinder)" stroke="#000" stroke-width="2" />
+          <rect x="360" y="450" width="20" height="50" fill="#00f3ff" filter="url(#glowCyan)" opacity="0.6" />
+          <rect x="420" y="450" width="20" height="50" fill="#00f3ff" filter="url(#glowCyan)" opacity="0.6" />
+
+          <!-- Upper Body -->
+          <polygon points="120,360 580,360 580,400 490,440 310,440 220,400" fill="url(#metalDark)" stroke="#111" stroke-width="3" />
+          <polygon points="135,363 565,363 565,395 480,435 320,435 225,395" fill="none" stroke="url(#metalPlate)" stroke-width="6" />
+
+          <!-- Strike Plate -->
+          <polygon points="110,340 590,340 580,360 120,360" fill="url(#metalPlate)" />
+          <line x1="110" y1="340" x2="590" y2="340" stroke="#ffffff" stroke-width="2" opacity="0.8" />
+          <line x1="140" y1="350" x2="560" y2="350" stroke="#00f3ff" stroke-width="2" filter="url(#glowCyan)" />
+
+          <!-- Bolts -->
+          <circle cx="260" cy="380" r="4" fill="#111" stroke="#555" stroke-width="1" />
+          <circle cx="320" cy="380" r="4" fill="#111" stroke="#555" stroke-width="1" />
+          <circle cx="480" cy="380" r="4" fill="#111" stroke="#555" stroke-width="1" />
+          <circle cx="540" cy="380" r="4" fill="#111" stroke="#555" stroke-width="1" />
+
+          <!-- Hardy Hole -->
+          <polygon points="510,340 540,340 535,350 515,350" fill="#ff00a0" filter="url(#glowMagenta)" />
+        </g>
+
+        <!-- Hammer Assembly -->
+        <g class="hammer" filter="url(#dropShadow)">
+          <g transform="translate(800, 280)">
+            <!-- Hydraulic Arm -->
+            <rect x="-380" y="-18" width="380" height="12" fill="url(#metalCylinder)" stroke="#111" stroke-width="2" />
+            <rect x="-380" y="6" width="380" height="12" fill="url(#metalCylinder)" stroke="#111" stroke-width="2" />
+            <line x1="-360" y1="0" x2="-40" y2="0" stroke="#00f3ff" stroke-width="4" filter="url(#glowCyan)" />
+            <rect x="-280" y="-25" width="30" height="50" rx="4" fill="url(#metalDark)" stroke="#334" stroke-width="2" />
+            <rect x="-160" y="-25" width="30" height="50" rx="4" fill="url(#metalDark)" stroke="#334" stroke-width="2" />
+
+            <!-- Hammer Head -->
+            <g transform="translate(-400, 0)">
+              <rect x="-70" y="-100" width="140" height="180" rx="12" fill="url(#metalDark)" stroke="#0a0a0f" stroke-width="4" />
+              <rect x="-60" y="-90" width="120" height="160" rx="6" fill="url(#metalLight)" stroke="#555568" stroke-width="2" />
+              <rect x="-40" y="-70" width="80" height="20" rx="2" fill="#08080c" />
+              <rect x="-40" y="-40" width="80" height="80" rx="4" fill="#050508" stroke="#ff00a0" stroke-width="1" />
+              <circle cx="0" cy="0" r="28" fill="#111" stroke="#00f3ff" stroke-width="3" />
+              <circle cx="0" cy="0" r="18" fill="#00f3ff" filter="url(#glowCyan)" />
+              <circle cx="0" cy="0" r="8" fill="#ffffff" />
+              <path d="M -30 -100 L 30 -100 L 40 -120 L -40 -120 Z" fill="url(#metalPlate)" />
+              <rect x="-25" y="-120" width="50" height="6" fill="#00f3ff" filter="url(#glowCyan)" />
+              <path d="M -70 80 L 70 80 L 80 100 L -80 100 Z" fill="url(#metalPlate)" />
+              <rect x="-75" y="94" width="150" height="6" fill="url(#energyStrike)" filter="url(#glowMagenta)" />
+              <line x1="-75" y1="100" x2="75" y2="100" stroke="#ffffff" stroke-width="3" />
+            </g>
+          </g>
+        </g>
+
+        <!-- Pivot Joint Cover -->
+        <g transform="translate(800, 280)" filter="url(#shadowSmall)">
+          <circle cx="0" cy="0" r="50" fill="url(#metalDark)" stroke="#222" stroke-width="4" />
+          <circle cx="0" cy="0" r="35" fill="url(#metalPlate)" />
+          <circle cx="0" cy="0" r="20" fill="#050508" />
+          <circle cx="0" cy="0" r="12" fill="#00f3ff" filter="url(#glowCyan)" />
+          <circle cx="0" cy="0" r="4" fill="#ffffff" />
+        </g>
+
+        <!-- Impact Effects -->
+        <ellipse cx="400" cy="360" rx="1" ry="0.3" fill="none" stroke="#ffffff" class="shockwave" filter="url(#glowCyan)" />
+        <ellipse cx="400" cy="360" rx="1" ry="0.3" fill="none" stroke="#ff00a0" class="shockwave shockwave-delayed" filter="url(#glowMagenta)" />
+
+        <!-- Core Flash -->
+        <ellipse cx="400" cy="360" rx="280" ry="120" fill="url(#bgGrad)" class="impact-flash" />
+        <ellipse cx="400" cy="360" rx="150" ry="60" fill="#ffffff" filter="url(#glowCyan)" class="impact-flash" />
+
+        <!-- Sparks -->
+        <g transform="translate(400, 360)">
+          <g class="spark" :style="{ '--rot': '10deg', '--dist': '350px' }"><rect x="0" y="-3" width="30" height="6" rx="3" fill="#ffffff" filter="url(#glowCyan)" /></g>
+          <g class="spark" :style="{ '--rot': '25deg', '--dist': '280px' }"><rect x="0" y="-2" width="20" height="4" rx="2" fill="#ffffff" filter="url(#glowMagenta)" /></g>
+          <g class="spark" :style="{ '--rot': '40deg', '--dist': '320px' }"><rect x="0" y="-4" width="40" height="8" rx="4" fill="#ffffff" filter="url(#glowCyan)" /></g>
+          <g class="spark" :style="{ '--rot': '140deg', '--dist': '300px' }"><rect x="0" y="-3" width="25" height="6" rx="3" fill="#ffffff" filter="url(#glowMagenta)" /></g>
+          <g class="spark" :style="{ '--rot': '160deg', '--dist': '380px' }"><rect x="0" y="-4" width="35" height="8" rx="4" fill="#ffffff" filter="url(#glowCyan)" /></g>
+          <g class="spark" :style="{ '--rot': '170deg', '--dist': '250px' }"><rect x="0" y="-2" width="18" height="4" rx="2" fill="#ffffff" filter="url(#glowMagenta)" /></g>
+          <g class="spark" :style="{ '--rot': '-15deg', '--dist': '450px' }"><rect x="0" y="-3" width="45" height="6" rx="3" fill="#ffffff" filter="url(#glowCyan)" /></g>
+          <g class="spark" :style="{ '--rot': '-35deg', '--dist': '200px' }"><rect x="0" y="-2" width="15" height="4" rx="2" fill="#ffffff" filter="url(#glowMagenta)" /></g>
+          <g class="spark" :style="{ '--rot': '-165deg', '--dist': '400px' }"><rect x="0" y="-3" width="30" height="6" rx="3" fill="#ffffff" filter="url(#glowCyan)" /></g>
+          <g class="spark" :style="{ '--rot': '-145deg', '--dist': '280px' }"><rect x="0" y="-2" width="22" height="4" rx="2" fill="#ffffff" filter="url(#glowMagenta)" /></g>
+          <g class="spark" :style="{ '--rot': '0deg', '--dist': '500px' }"><rect x="0" y="-5" width="60" height="10" rx="5" fill="#ffffff" filter="url(#glowCyan)" /></g>
+          <g class="spark" :style="{ '--rot': '180deg', '--dist': '500px' }"><rect x="0" y="-5" width="60" height="10" rx="5" fill="#ffffff" filter="url(#glowMagenta)" /></g>
+        </g>
+      </g>
+
+      <!-- HUD Panels -->
+      <g font-family="sans-serif" font-weight="bold" font-size="12" fill="#00f3ff" opacity="0.6">
+        <path d="M 20 50 L 20 20 L 50 20" fill="none" stroke="#00f3ff" stroke-width="2" />
+        <text x="30" y="45">SYS.FORGE // ONLINE</text>
+        <text x="30" y="65" fill="#ff00a0">PRSR: 80,000 kN</text>
+        <text x="30" y="85">HEAT: 4,200 °K</text>
+        <rect x="30" y="100" width="120" height="4" fill="#00f3ff" opacity="0.3" />
+        <rect x="30" y="100" width="85" height="4" fill="#00f3ff" filter="url(#glowCyan)" />
+      </g>
+
+      <g font-family="sans-serif" font-weight="bold" font-size="12" fill="#ff00a0" opacity="0.6" transform="translate(850, 680)">
+        <path d="M 0 -30 L 30 -30 L 30 0" fill="none" stroke="#ff00a0" stroke-width="2" />
+        <text x="20" y="-15" text-anchor="end">CYBER_ANVIL_v3.0</text>
+      </g>
+
+      <!-- Scanner -->
+      <rect x="-50" y="0" width="1000" height="4" fill="#ffffff" filter="url(#glowCyan)" class="scanner" />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.anvil-container {
+  width: 100%;
+  max-width: 640px;
+  aspect-ratio: 900 / 750;
+  overflow: hidden;
+  border-radius: 12px;
+}
+
+/* Camera Shake */
+@keyframes camera-shake {
+  0%, 19.9% { transform: translate(0, 0); }
+  20% { transform: translate(-6px, 12px); }
+  22% { transform: translate(8px, -10px); }
+  24% { transform: translate(-4px, 6px); }
+  26% { transform: translate(2px, -2px); }
+  28%, 100% { transform: translate(0, 0); }
+}
+
+/* Hammer Swing */
+@keyframes hammer-swing {
+  0% { transform: rotate(120deg); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); }
+  18% { transform: rotate(130deg); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  20% { transform: rotate(0deg); animation-timing-function: ease-out; }
+  22% { transform: rotate(6deg); animation-timing-function: ease-in-out; }
+  26% { transform: rotate(0deg); animation-timing-function: linear; }
+  45% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
+  70%, 100% { transform: rotate(120deg); }
+}
+
+/* Anvil Bump */
+@keyframes anvil-bump {
+  0%, 19.9% { transform: translateY(0); }
+  20% { transform: translateY(12px); animation-timing-function: ease-out; }
+  24% { transform: translateY(-2px); animation-timing-function: ease-in-out; }
+  28%, 100% { transform: translateY(0); }
+}
+
+/* Shockwave */
+@keyframes shockwave-expand {
+  0%, 19.9% { opacity: 0; transform: scale(0); stroke-width: 25px; }
+  20% { opacity: 1; transform: scale(0.1); stroke-width: 15px; }
+  50%, 100% { opacity: 0; transform: scale(3.5); stroke-width: 1px; }
+}
+
+/* Sparks */
+@keyframes spark-shoot {
+  0%, 19.9% { opacity: 0; transform: rotate(var(--rot)) translateX(0) scale(1); }
+  20% { opacity: 1; transform: rotate(var(--rot)) translateX(40px) scale(1.8); }
+  45%, 100% { opacity: 0; transform: rotate(var(--rot)) translateX(var(--dist)) scale(0); }
+}
+
+/* Flash */
+@keyframes flash {
+  0%, 19.9% { opacity: 0; }
+  20% { opacity: 1; transform: scale(1); }
+  25% { opacity: 0.5; transform: scale(1.2); }
+  30%, 100% { opacity: 0; }
+}
+
+/* Scanline */
+@keyframes scanline {
+  0% { transform: translateY(-100px); opacity: 0; }
+  10%, 90% { opacity: 0.3; }
+  100% { transform: translateY(850px); opacity: 0; }
+}
+
+/* Spin */
+@keyframes spin-slow { 100% { transform: rotate(360deg); } }
+
+.scene-shake { animation: camera-shake 3.5s infinite; transform-origin: center; }
+.hammer { animation: hammer-swing 3.5s infinite; transform-origin: 800px 280px; }
+.anvil { animation: anvil-bump 3.5s infinite; }
+.shockwave { animation: shockwave-expand 3.5s infinite; transform-origin: 400px 360px; }
+.shockwave-delayed { animation-delay: 0.05s; }
+.spark { animation: spark-shoot 3.5s infinite ease-out; }
+.impact-flash { animation: flash 3.5s infinite ease-out; pointer-events: none; transform-origin: 400px 360px; }
+.scanner { animation: scanline 4s linear infinite; pointer-events: none; }
+.reactor-ring { animation: spin-slow 20s linear infinite; transform-origin: 400px 360px; }
+</style>
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
new file mode 100644
index 0000000..501c0da
--- /dev/null
+++ b/.vitepress/theme/custom.css
@@ -0,0 +1,469 @@
+@import "../../.cssforge/output.css" layer(cssforge);
+
+/* ============================================================
+   CSSForge Docs — Full Cyberpunk Theme
+   All colors sourced from the anvil animation palette via
+   cssforge-generated --palette-forge-* tokens.
+   ============================================================ */
+
+/* ----- Typography ----- */
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Medium.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Bold.woff2")
+    format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ----- Root: Force dark everywhere ----- */
+
+:root {
+  /* Font */
+  --vp-font-family-base: "Geist Mono", "Courier New", Courier, monospace;
+  --vp-font-family-mono: "Geist Mono", "Courier New", Courier, monospace;
+
+  /* Core palette — anvil metals */
+  --vp-c-gray-1: var(--palette-forge-metal-8);
+  --vp-c-gray-2: var(--palette-forge-metal-6);
+  --vp-c-gray-3: var(--palette-forge-metal-5);
+  --vp-c-gray-soft: rgba(85, 85, 104, 0.16);
+
+  /* Background — deep void / space */
+  --vp-c-bg: var(--palette-forge-void);
+  --vp-c-bg-alt: var(--palette-forge-metal-1);
+  --vp-c-bg-elv: var(--palette-forge-metal-2);
+  --vp-c-bg-soft: var(--palette-forge-metal-2);
+
+  /* Text — light on dark */
+  --vp-c-text-1: var(--palette-forge-text-1);
+  --vp-c-text-2: var(--palette-forge-text-2);
+  --vp-c-text-3: var(--palette-forge-text-3);
+
+  /* Borders — subtle metal edges */
+  --vp-c-border: var(--palette-forge-metal-5);
+  --vp-c-divider: var(--palette-forge-metal-4);
+  --vp-c-gutter: var(--palette-forge-metal-1);
+
+  /* Neutral */
+  --vp-c-neutral: var(--palette-forge-white);
+  --vp-c-neutral-inverse: var(--palette-forge-void);
+
+  /* Brand — cyan primary */
+  --vp-c-brand-1: var(--palette-forge-cyan);
+  --vp-c-brand-2: var(--palette-forge-cyan);
+  --vp-c-brand-3: var(--palette-forge-cyan);
+  --vp-c-brand-soft: rgba(0, 243, 255, 0.12);
+  --vp-c-brand: var(--palette-forge-cyan);
+
+  /* Tip / Note — cyan */
+  --vp-c-tip-1: var(--palette-forge-cyan);
+  --vp-c-tip-2: var(--palette-forge-cyan);
+  --vp-c-tip-3: var(--palette-forge-cyan);
+  --vp-c-tip-soft: rgba(0, 243, 255, 0.08);
+  --vp-c-note-1: var(--palette-forge-cyan);
+  --vp-c-note-2: var(--palette-forge-cyan);
+  --vp-c-note-3: var(--palette-forge-cyan);
+  --vp-c-note-soft: rgba(0, 243, 255, 0.08);
+
+  /* Important — magenta */
+  --vp-c-important-1: var(--palette-forge-magenta);
+  --vp-c-important-2: var(--palette-forge-magenta);
+  --vp-c-important-3: var(--palette-forge-magenta);
+  --vp-c-important-soft: rgba(255, 0, 160, 0.1);
+
+  /* Warning — keep yellow-ish but tinted */
+  --vp-c-warning-1: #f9b44e;
+  --vp-c-warning-2: #da8b17;
+  --vp-c-warning-3: #a46a0a;
+  --vp-c-warning-soft: rgba(234, 179, 8, 0.1);
+
+  /* Danger / Caution — magenta tint */
+  --vp-c-danger-1: var(--palette-forge-magenta);
+  --vp-c-danger-2: var(--palette-forge-magenta);
+  --vp-c-danger-3: var(--palette-forge-magenta);
+  --vp-c-danger-soft: rgba(255, 0, 160, 0.08);
+  --vp-c-caution-1: var(--palette-forge-magenta);
+  --vp-c-caution-2: var(--palette-forge-magenta);
+  --vp-c-caution-3: var(--palette-forge-magenta);
+  --vp-c-caution-soft: rgba(255, 0, 160, 0.08);
+
+  /* Success — cyan */
+  --vp-c-success-1: var(--palette-forge-cyan);
+  --vp-c-success-2: var(--palette-forge-cyan);
+  --vp-c-success-3: var(--palette-forge-cyan);
+  --vp-c-success-soft: rgba(0, 243, 255, 0.08);
+
+  /* Default (hover states) */
+  --vp-c-default-1: var(--palette-forge-metal-8);
+  --vp-c-default-2: var(--palette-forge-metal-6);
+  --vp-c-default-3: var(--palette-forge-metal-5);
+  --vp-c-default-soft: rgba(85, 85, 104, 0.12);
+
+  /* Sponsor */
+  --vp-c-sponsor: var(--palette-forge-magenta);
+
+  /* Shadows — deeper, tinted */
+  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
+  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
+  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
+  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.6), 0 3px 9px rgba(0, 0, 0, 0.5);
+  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.6);
+
+  /* Code */
+  --vp-code-color: var(--palette-forge-cyan);
+  --vp-code-link-color: var(--palette-forge-cyan);
+  --vp-code-link-hover-color: var(--palette-forge-magenta);
+  --vp-code-bg: rgba(0, 243, 255, 0.06);
+  --vp-code-block-color: var(--palette-forge-text-2);
+  --vp-code-block-bg: var(--palette-forge-metal-1);
+  --vp-code-block-divider-color: var(--palette-forge-metal-4);
+  --vp-code-lang-color: var(--palette-forge-text-3);
+  --vp-code-line-highlight-color: rgba(0, 243, 255, 0.06);
+  --vp-code-line-number-color: var(--palette-forge-text-3);
+  --vp-code-copy-code-border-color: var(--palette-forge-metal-5);
+  --vp-code-copy-code-bg: var(--palette-forge-metal-3);
+  --vp-code-copy-code-hover-border-color: var(--palette-forge-cyan);
+  --vp-code-copy-code-hover-bg: var(--palette-forge-metal-4);
+  --vp-code-copy-code-active-text: var(--palette-forge-cyan);
+  --vp-code-tab-divider: var(--palette-forge-metal-4);
+  --vp-code-tab-text-color: var(--palette-forge-text-2);
+  --vp-code-tab-bg: var(--palette-forge-metal-1);
+  --vp-code-tab-hover-text-color: var(--palette-forge-text-1);
+  --vp-code-tab-active-text-color: var(--palette-forge-cyan);
+  --vp-code-tab-active-bar-color: var(--palette-forge-cyan);
+
+  /* Buttons */
+  --vp-button-brand-border: var(--palette-forge-cyan);
+  --vp-button-brand-text: var(--palette-forge-void);
+  --vp-button-brand-bg: var(--palette-forge-cyan);
+  --vp-button-brand-hover-border: var(--palette-forge-magenta);
+  --vp-button-brand-hover-text: var(--palette-forge-white);
+  --vp-button-brand-hover-bg: var(--palette-forge-magenta);
+  --vp-button-brand-active-border: var(--palette-forge-magenta);
+  --vp-button-brand-active-text: var(--palette-forge-white);
+  --vp-button-brand-active-bg: var(--palette-forge-magenta);
+
+  --vp-button-alt-border: var(--palette-forge-metal-7);
+  --vp-button-alt-text: var(--palette-forge-text-1);
+  --vp-button-alt-bg: var(--palette-forge-metal-3);
+  --vp-button-alt-hover-border: var(--palette-forge-cyan);
+  --vp-button-alt-hover-text: var(--palette-forge-cyan);
+  --vp-button-alt-hover-bg: var(--palette-forge-metal-4);
+  --vp-button-alt-active-border: var(--palette-forge-cyan);
+  --vp-button-alt-active-text: var(--palette-forge-cyan);
+  --vp-button-alt-active-bg: var(--palette-forge-metal-5);
+
+  /* Custom blocks */
+  --vp-custom-block-info-border: var(--palette-forge-metal-5);
+  --vp-custom-block-info-text: var(--palette-forge-text-1);
+  --vp-custom-block-info-bg: var(--palette-forge-metal-2);
+  --vp-custom-block-info-code-bg: var(--palette-forge-metal-3);
+  --vp-custom-block-note-border: var(--palette-forge-metal-5);
+  --vp-custom-block-note-text: var(--palette-forge-text-1);
+  --vp-custom-block-note-bg: var(--palette-forge-metal-2);
+  --vp-custom-block-note-code-bg: var(--palette-forge-metal-3);
+  --vp-custom-block-tip-border: rgba(0, 243, 255, 0.3);
+  --vp-custom-block-tip-text: var(--palette-forge-text-1);
+  --vp-custom-block-tip-bg: rgba(0, 243, 255, 0.05);
+  --vp-custom-block-tip-code-bg: rgba(0, 243, 255, 0.08);
+  --vp-custom-block-important-border: rgba(255, 0, 160, 0.3);
+  --vp-custom-block-important-text: var(--palette-forge-text-1);
+  --vp-custom-block-important-bg: rgba(255, 0, 160, 0.06);
+  --vp-custom-block-important-code-bg: rgba(255, 0, 160, 0.08);
+  --vp-custom-block-warning-border: rgba(234, 179, 8, 0.3);
+  --vp-custom-block-warning-text: var(--palette-forge-text-1);
+  --vp-custom-block-warning-bg: rgba(234, 179, 8, 0.06);
+  --vp-custom-block-warning-code-bg: rgba(234, 179, 8, 0.08);
+  --vp-custom-block-danger-border: rgba(255, 0, 160, 0.3);
+  --vp-custom-block-danger-text: var(--palette-forge-text-1);
+  --vp-custom-block-danger-bg: rgba(255, 0, 160, 0.06);
+  --vp-custom-block-danger-code-bg: rgba(255, 0, 160, 0.08);
+  --vp-custom-block-caution-border: rgba(255, 0, 160, 0.3);
+  --vp-custom-block-caution-text: var(--palette-forge-text-1);
+  --vp-custom-block-caution-bg: rgba(255, 0, 160, 0.06);
+  --vp-custom-block-caution-code-bg: rgba(255, 0, 160, 0.08);
+
+  /* Input / search */
+  --vp-input-border-color: var(--palette-forge-metal-5);
+  --vp-input-bg-color: var(--palette-forge-metal-2);
+  --vp-input-switch-bg-color: var(--palette-forge-metal-4);
+
+  /* Nav */
+  --vp-nav-bg-color: rgba(3, 2, 6, 0.85);
+  --vp-nav-screen-bg-color: var(--palette-forge-void);
+  --vp-nav-logo-height: 28px;
+
+  /* Local nav */
+  --vp-local-nav-bg-color: rgba(3, 2, 6, 0.85);
+
+  /* Sidebar */
+  --vp-sidebar-bg-color: var(--palette-forge-metal-1);
+
+  /* Backdrop */
+  --vp-backdrop-bg-color: rgba(3, 2, 6, 0.7);
+
+  /* Home */
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(
+    135deg,
+    var(--palette-forge-cyan) 0%,
+    var(--palette-forge-magenta) 100%
+  );
+  --vp-home-hero-image-background-image: radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 243, 255, 0.15) 0%,
+    transparent 70%
+  );
+  --vp-home-hero-image-filter: none;
+
+  /* Search */
+  --vp-local-search-bg: var(--palette-forge-metal-1);
+  --vp-local-search-result-bg: var(--palette-forge-metal-2);
+  --vp-local-search-result-border: var(--palette-forge-metal-5);
+  --vp-local-search-result-selected-bg: var(--palette-forge-metal-3);
+  --vp-local-search-result-selected-border: var(--palette-forge-cyan);
+  --vp-local-search-highlight-bg: var(--palette-forge-cyan);
+  --vp-local-search-highlight-text: var(--palette-forge-void);
+
+  /* Badge */
+  --vp-badge-info-border: var(--palette-forge-metal-5);
+  --vp-badge-info-text: var(--palette-forge-text-2);
+  --vp-badge-info-bg: var(--palette-forge-metal-3);
+  --vp-badge-tip-border: rgba(0, 243, 255, 0.3);
+  --vp-badge-tip-text: var(--palette-forge-cyan);
+  --vp-badge-tip-bg: rgba(0, 243, 255, 0.1);
+  --vp-badge-warning-border: rgba(234, 179, 8, 0.3);
+  --vp-badge-warning-text: #f9b44e;
+  --vp-badge-warning-bg: rgba(234, 179, 8, 0.1);
+  --vp-badge-danger-border: rgba(255, 0, 160, 0.3);
+  --vp-badge-danger-text: var(--palette-forge-magenta);
+  --vp-badge-danger-bg: rgba(255, 0, 160, 0.1);
+
+  color-scheme: dark;
+}
+
+/* Force dark mode class — disable light mode entirely */
+.dark {
+  --vp-c-bg: var(--palette-forge-void);
+  --vp-c-bg-alt: var(--palette-forge-metal-1);
+  --vp-c-bg-elv: var(--palette-forge-metal-2);
+  --vp-c-bg-soft: var(--palette-forge-metal-2);
+}
+
+/* ----- Nav bar ----- */
+
+.VPNav > .VPNavBar {
+  background: transparent !important;
+}
+
+.VPNavBar {
+  border-bottom: 1px solid var(--palette-forge-metal-4) !important;
+  backdrop-filter: blur(16px);
+}
+
+.VPNavBar .title {
+  color: var(--palette-forge-cyan) !important;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.VPNavBarMenuLink {
+  color: var(--palette-forge-text-2) !important;
+  transition: color 0.2s;
+}
+
+.VPNavBarMenuLink:hover,
+.VPNavBarMenuLink.active {
+  color: var(--palette-forge-cyan) !important;
+}
+
+/* ----- Sidebar ----- */
+
+.VPSidebar {
+  border-right: 1px solid var(--palette-forge-metal-4) !important;
+}
+
+/* ----- Links ----- */
+
+.vp-doc a {
+  color: var(--palette-forge-cyan);
+  text-decoration-color: rgba(0, 243, 255, 0.3);
+  transition: color 0.2s, text-decoration-color 0.2s;
+}
+
+.vp-doc a:hover {
+  color: var(--palette-forge-magenta);
+  text-decoration-color: var(--palette-forge-magenta);
+}
+
+/* ----- Headings ----- */
+
+.vp-doc h1,
+.vp-doc h2,
+.vp-doc h3 {
+  color: var(--palette-forge-white);
+}
+
+.vp-doc h1 {
+  background: linear-gradient(
+    90deg,
+    var(--palette-forge-cyan),
+    var(--palette-forge-magenta)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.vp-doc h2 {
+  border-top: 1px solid var(--palette-forge-metal-4);
+}
+
+/* ----- Code blocks ----- */
+
+div[class*="language-"] {
+  border: 1px solid var(--palette-forge-metal-4);
+}
+
+.vp-doc :not(pre) > code {
+  color: var(--palette-forge-cyan);
+  background: rgba(0, 243, 255, 0.08);
+}
+
+/* ----- Home hero ----- */
+
+.VPHero .name {
+  font-weight: 900 !important;
+  letter-spacing: 0.04em;
+}
+
+.VPHero .text {
+  color: var(--palette-forge-text-1) !important;
+}
+
+.VPHero .tagline {
+  color: var(--palette-forge-text-2) !important;
+}
+
+/* ----- Feature cards ----- */
+
+.VPFeature {
+  background: var(--palette-forge-metal-2) !important;
+  border: 1px solid var(--palette-forge-metal-5) !important;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.VPFeature:hover {
+  border-color: var(--palette-forge-cyan) !important;
+  box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
+}
+
+.VPFeature .title {
+  color: var(--palette-forge-white) !important;
+}
+
+.VPFeature .details {
+  color: var(--palette-forge-text-2) !important;
+}
+
+/* ----- Footer ----- */
+
+.VPFooter {
+  border-top: 1px solid var(--palette-forge-metal-4) !important;
+  background: var(--palette-forge-metal-1) !important;
+}
+
+.VPFooter .message,
+.VPFooter .copyright {
+  color: var(--palette-forge-text-3) !important;
+}
+
+/* ----- Outline (right TOC) ----- */
+
+.VPDocAsideOutline .outline-link {
+  color: var(--palette-forge-text-3);
+  transition: color 0.2s;
+}
+
+.VPDocAsideOutline .outline-link:hover,
+.VPDocAsideOutline .outline-link.active {
+  color: var(--palette-forge-cyan);
+}
+
+.VPDocAsideOutline .outline-marker {
+  background-color: var(--palette-forge-cyan) !important;
+}
+
+/* ----- Doc footer (prev/next) ----- */
+
+.VPDocFooter .pager-link {
+  border: 1px solid var(--palette-forge-metal-5);
+  background: var(--palette-forge-metal-2);
+  transition: border-color 0.2s;
+}
+
+.VPDocFooter .pager-link:hover {
+  border-color: var(--palette-forge-cyan);
+}
+
+.VPDocFooter .pager-link .title {
+  color: var(--palette-forge-text-2);
+}
+
+.VPDocFooter .pager-link .desc {
+  color: var(--palette-forge-cyan);
+}
+
+/* ----- Scrollbar ----- */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--palette-forge-metal-1);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--palette-forge-metal-6);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--palette-forge-cyan);
+}
+
+/* ----- Selection ----- */
+
+::selection {
+  background: rgba(0, 243, 255, 0.25);
+  color: var(--palette-forge-white);
+}
+
+/* ----- Hide appearance toggle (always dark) ----- */
+
+.VPSwitchAppearance {
+  display: none !important;
+}
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
new file mode 100644
index 0000000..73d6f75
--- /dev/null
+++ b/.vitepress/theme/index.ts
@@ -0,0 +1,13 @@
+import { h } from "vue";
+import DefaultTheme from "vitepress/theme-without-fonts";
+import AnvilAnimation from "./AnvilAnimation.vue";
+import "./custom.css";
+
+export default {
+  extends: DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      "home-hero-image": () => h(AnvilAnimation),
+    });
+  },
+};
diff --git a/cssforge.config.ts b/cssforge.config.ts
new file mode 100644
index 0000000..8c769de
--- /dev/null
+++ b/cssforge.config.ts
@@ -0,0 +1,72 @@
+import { defineConfig } from "@hebilicious/cssforge";
+
+export default defineConfig({
+  colors: {
+    palette: {
+      value: {
+        forge: {
+          value: {
+            // Anvil neon accents
+            cyan: "#00f3ff",
+            magenta: "#ff00a0",
+
+            // Backgrounds
+            void: "#030206",
+            space: "#140d26",
+            "space-light": "#1c1333",
+
+            // Metal surfaces
+            "metal-1": "#08080c",
+            "metal-2": "#111118",
+            "metal-3": "#15151c",
+            "metal-4": "#1a1a24",
+            "metal-5": "#2a2a35",
+            "metal-6": "#2b2b3a",
+            "metal-7": "#3b3b4f",
+            "metal-8": "#44445c",
+            "metal-9": "#555568",
+            "metal-10": "#6a6a82",
+
+            // Text
+            white: "#ffffff",
+            "text-1": "#e0e0f0",
+            "text-2": "#8888aa",
+            "text-3": "#555570",
+          },
+        },
+      },
+    },
+  },
+  spacing: {
+    fluid: {
+      space: {
+        value: {
+          minSize: 4,
+          maxSize: 24,
+          minWidth: 320,
+          maxWidth: 1280,
+          negativeSteps: [0],
+          positiveSteps: [2, 3, 4, 5],
+          prefix: "space",
+        },
+      },
+    },
+  },
+  typography: {
+    fluid: {
+      docs: {
+        value: {
+          minWidth: 320,
+          minFontSize: 15,
+          minTypeScale: 1.2,
+          maxWidth: 1280,
+          maxFontSize: 18,
+          maxTypeScale: 1.25,
+          negativeSteps: 1,
+          positiveSteps: 3,
+          prefix: "text",
+        },
+      },
+    },
+  },
+});
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..4b948a2
--- /dev/null
+++ b/index.md
@@ -0,0 +1,37 @@
+---
+layout: home
+hero:
+  name: CSS Forge
+  text: Design tokens for modern CSS
+  tagline: 0 runtime design tokens generator for modern style systems.
+  image:
+    light: /placeholder
+    dark: /placeholder
+    alt: CSS Forge Anvil
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /docs#quick-start
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/Hebilicious/cssforge
+features:
+  - title: Colors
+    details: Create palettes, gradients and themes. Automatically convert to OKLCH.
+    icon: "\U0001F3A8"
+  - title: Typography
+    details: Generate fluid typography scales with clamp-based responsive sizing.
+    icon: "\U0001F4D0"
+  - title: Spacing
+    details: Organize spacing utilities with fluid and custom scales.
+    icon: "\U0001F4CF"
+  - title: Primitives
+    details: Define custom design tokens for any CSS property.
+    icon: "\U0001F4E6"
+  - title: Zero Runtime
+    details: All processing happens at build time. Ship raw CSS, TypeScript, or JSON.
+    icon: "\U0001F3AF"
+  - title: Framework Agnostic
+    details: Use with any CSS workflow — Tailwind, vanilla CSS, or your own system.
+    icon: "\U0001F50C"
+---
diff --git a/moon.yml b/moon.yml
new file mode 100644
index 0000000..f6fe19a
--- /dev/null
+++ b/moon.yml
@@ -0,0 +1,70 @@
+$schema: "https://moonrepo.dev/schemas/v2/project.json"
+
+language: "typescript"
+layer: "application"
+
+dependsOn:
+  - "cssforge"
+
+tasks:
+  sync-docs:
+    command: "tsx"
+    args: ["./scripts/sync-readme.ts"]
+    inputs:
+      - "scripts/sync-readme.ts"
+      - "/packages/cssforge/README.md"
+    outputs:
+      - "docs.md"
+    options:
+      runInCI: false
+
+  generate:
+    command: "tsx"
+    args:
+      - "../../packages/cssforge/src/cli.ts"
+      - "--prefix"
+      - "."
+      - "--config"
+      - "./cssforge.config.ts"
+      - "--mode"
+      - "css"
+      - "--css"
+      - "./.cssforge/output.css"
+    deps:
+      - "^:build"
+    inputs:
+      - "cssforge.config.ts"
+    outputs:
+      - ".cssforge/output.css"
+    options:
+      runInCI: false
+
+  dev:
+    command: "vitepress"
+    args: ["dev"]
+    deps:
+      - "~:generate"
+      - "~:sync-docs"
+    preset: "server"
+    options:
+      runInCI: false
+
+  build:
+    command: "vitepress"
+    args: ["build"]
+    deps:
+      - "~:generate"
+      - "~:sync-docs"
+    outputs:
+      - ".vitepress/dist"
+    options:
+      runInCI: false
+
+  preview:
+    command: "vitepress"
+    args: ["preview"]
+    deps:
+      - "~:build"
+    preset: "server"
+    options:
+      runInCI: false
diff --git a/package.json b/package.json
index 7af13f1..c7fa648 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,11 @@
 {
-  "name": "@hebilicious/cssforge",
-  "version": "0.4.1",
+  "name": "cssforge-docs",
+  "private": true,
   "type": "module",
-  "scripts": {
-    "version": "npx @changesets/cli version && node scripts/sync-version.js"
+  "devDependencies": {
+    "@hebilicious/cssforge": "workspace:*",
+    "tsx": "4.20.6",
+    "vitepress": "1.6.3",
+    "vue": "3.5.17"
   }
 }
diff --git a/scripts/sync-readme.ts b/scripts/sync-readme.ts
new file mode 100644
index 0000000..6ac861f
--- /dev/null
+++ b/scripts/sync-readme.ts
@@ -0,0 +1,44 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const root = resolve(import.meta.dirname, "../../..");
+const readmePath = resolve(root, "packages/cssforge/README.md");
+const outputPath = resolve(root, "packages/docs/docs.md");
+
+const readme = readFileSync(readmePath, "utf-8");
+
+const GITHUB_BASE =
+  "https://github.com/Hebilicious/cssforge/tree/main";
+
+let content = readme;
+
+// Transform GitHub-flavored alerts to VitePress containers
+content = content.replace(
+  /^> \[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\n((?:> .*\n?)*)/gm,
+  (_match, type: string, body: string) => {
+    const containerType = type.toLowerCase();
+    const text = body
+      .split("\n")
+      .map((line: string) => line.replace(/^> ?/, ""))
+      .join("\n")
+      .trim();
+    return `::: ${containerType}\n${text}\n:::\n`;
+  },
+);
+
+// Replace relative links like ./example/ with GitHub URLs
+content = content.replace(
+  /\]\(\.\/([\w/.-]+)\)/g,
+  `](${GITHUB_BASE}/$1)`,
+);
+
+// Prepend VitePress frontmatter
+const frontmatter = `---
+title: Documentation
+outline: [2, 3]
+---
+
+`;
+
+writeFileSync(outputPath, frontmatter + content, "utf-8");
+console.log(`Synced README → ${outputPath}`);
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f4391f1
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2023",
+      "DOM"
+    ]
+  },
+  "include": [
+    "scripts/**/*.ts",
+    "cssforge.config.ts",
+    ".vitepress/**/*.ts"
+  ],
+  "references": [
+    {
+      "path": "../cssforge"
+    }
+  ]
+}