diff --git a/website/src/app.css b/website/src/app.css
index 682facf..68cc771 100644
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -731,6 +731,175 @@ body {
   text-decoration: underline;
 }
 
+/* ---- Docs Section ---- */
+.docs-section {
+  margin-top: var(--space-12);
+}
+
+.docs-section h2 {
+  font-size: 1.375rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.3;
+  margin-bottom: var(--space-3);
+  color: var(--foreground);
+}
+
+.docs-section p {
+  color: var(--muted-foreground);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  margin-bottom: var(--space-4);
+}
+
+/* ---- Docs Card ---- */
+.docs-card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  background: var(--card);
+  border-radius: var(--space-3);
+  border: 1px solid var(--border);
+}
+
+.docs-card-number {
+  width: var(--space-8);
+  height: var(--space-8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: oklch(0.65 0.22 270 / 0.1);
+  color: var(--accent);
+  font-weight: 700;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.docs-card-number.primary {
+  background: oklch(0.65 0.22 270 / 0.15);
+  color: var(--accent);
+}
+
+.docs-card-number.muted {
+  background: var(--muted);
+  color: var(--muted-foreground);
+}
+
+/* ---- Docs Terminal ---- */
+.docs-terminal {
+  background: oklch(0.10 0 0);
+  border-radius: var(--space-3);
+  border: 1px solid var(--border);
+  overflow: hidden;
+  margin-bottom: var(--space-6);
+}
+
+.terminal-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
+  background: oklch(0.10 0 0);
+}
+
+.terminal-bar span {
+  width: var(--space-2);
+  height: var(--space-2);
+  border-radius: 9999px;
+}
+
+.terminal-bar .terminal-dot-red { background: var(--destructive); }
+.terminal-bar .terminal-dot-yellow { background: var(--warning); }
+.terminal-bar .terminal-dot-green { background: var(--success); }
+
+/* ---- Docs utility classes ---- */
+.docs-term-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+}
+
+.docs-term-item {
+  display: flex;
+  gap: var(--space-2);
+  font-size: 14px;
+  color: var(--muted-foreground);
+}
+
+.docs-term-key {
+  color: var(--accent);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+.docs-term-value {
+  color: var(--muted-foreground);
+  font-size: 14px;
+}
+
+.docs-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.docs-link-list a {
+  font-size: 14px;
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.docs-link-list a:hover {
+  text-decoration: underline;
+}
+
+/* ---- Mobile docs nav ---- */
+.mobile-docs-nav {
+  display: none;
+  position: sticky;
+  top: 3.5rem;
+  z-index: 20;
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+  padding: var(--space-2) var(--space-4);
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.mobile-docs-nav a {
+  display: inline-block;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--space-2);
+  color: var(--muted-foreground);
+  font-size: 14px;
+  text-decoration: none;
+  min-height: 44px;
+  line-height: 1.25;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.mobile-docs-nav a:hover {
+  background: var(--muted);
+  color: var(--foreground);
+}
+
+.mobile-docs-nav a.active {
+  background: oklch(0.65 0.22 270 / 0.1);
+  color: var(--accent);
+}
+
+@media (max-width: 768px) {
+  .mobile-docs-nav {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+}
+
 /* ---- Mobile: collapse docs sidebar ---- */
 @media (max-width: 768px) {
   .docs-sidebar {
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 8135567..ccf7876 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -156,11 +156,11 @@
 				<div class="text-2xl md:text-3xl font-bold text-[var(--foreground)] -tracking-tight leading-tight">5</div>
 				<div class="text-sm text-[var(--muted-foreground)] mt-2">AI Providers</div>
 			</div>
-			<div class="glass-card text-center scroll-reveal py-8" style="transition-delay: 100ms;">
+			<div class="glass-card text-center scroll-reveal py-8 [transition-delay:100ms]">
 				<div class="text-2xl md:text-3xl font-bold text-[var(--foreground)] -tracking-tight leading-tight">&lt; 3s</div>
 				<div class="text-sm text-[var(--muted-foreground)] mt-2">Review Time</div>
 			</div>
-			<div class="glass-card text-center scroll-reveal py-8" style="transition-delay: 200ms;">
+			<div class="glass-card text-center scroll-reveal py-8 [transition-delay:200ms]">
 				<div class="text-2xl md:text-3xl font-bold text-[var(--foreground)] -tracking-tight leading-tight">Zero</div>
 				<div class="text-sm text-[var(--muted-foreground)] mt-2">Config Required</div>
 			</div>
@@ -222,7 +222,7 @@
 			</div>
 
 			<!-- Step 2 -->
-			<div class="glass-card flex-1 text-center scroll-reveal" style="transition-delay: 100ms;">
+			<div class="glass-card flex-1 text-center scroll-reveal [transition-delay:100ms]">
 				<div class="text-2xl font-bold text-[var(--accent)] -tracking-tight font-mono opacity-50">02</div>
 				<div class="flex justify-center mt-4">
 					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
@@ -232,12 +232,12 @@
 			</div>
 
 			<!-- Connector -->
-			<div class="connect-line hidden md:flex scroll-reveal" style="transition-delay: 100ms;">
+			<div class="connect-line hidden md:flex scroll-reveal [transition-delay:100ms]">
 				<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
 			</div>
 
 			<!-- Step 3 -->
-			<div class="glass-card flex-1 text-center scroll-reveal" style="transition-delay: 200ms;">
+			<div class="glass-card flex-1 text-center scroll-reveal [transition-delay:200ms]">
 				<div class="text-2xl font-bold text-[var(--accent)] -tracking-tight font-mono opacity-50">03</div>
 				<div class="flex justify-center mt-4">
 					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
@@ -269,7 +269,7 @@
 			</div>
 
 			<!-- Feature 2: BYOK -->
-			<div class="glass-card scroll-reveal" style="transition-delay: 100ms;">
+			<div class="glass-card scroll-reveal [transition-delay:100ms]">
 				<div class="feature-icon">
 					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
 				</div>
@@ -279,7 +279,7 @@
 			</div>
 
 			<!-- Feature 3: Pre-commit Hooks -->
-			<div class="glass-card scroll-reveal" style="transition-delay: 200ms;">
+			<div class="glass-card scroll-reveal [transition-delay:200ms]">
 				<div class="feature-icon">
 					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22V8"/><path d="M5 12H2a10 10 0 0020 0h-3"/><circle cx="12" cy="5" r="3"/></svg>
 				</div>
@@ -289,7 +289,7 @@
 			</div>
 
 			<!-- Feature 4: Incremental Scan -->
-			<div class="glass-card scroll-reveal" style="transition-delay: 300ms;">
+			<div class="glass-card scroll-reveal [transition-delay:300ms]">
 				<div class="feature-icon">
 					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
 				</div>
@@ -299,7 +299,7 @@
 			</div>
 
 			<!-- Feature 5: SARIF Output -->
-			<div class="glass-card scroll-reveal" style="transition-delay: 400ms;">
+			<div class="glass-card scroll-reveal [transition-delay:400ms]">
 				<div class="feature-icon">
 					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
 				</div>
@@ -309,7 +309,7 @@
 			</div>
 
 			<!-- Feature 6: Fully Private -->
-			<div class="glass-card scroll-reveal" style="transition-delay: 500ms;">
+			<div class="glass-card scroll-reveal [transition-delay:500ms]">
 				<div class="feature-icon">
 					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/><circle cx="12" cy="16" r="1"/></svg>
 				</div>
@@ -434,7 +434,7 @@
 			</div>
 
 			<!-- Step 2 -->
-			<div class="timeline-step scroll-reveal" style="transition-delay: 100ms;">
+			<div class="timeline-step scroll-reveal [transition-delay:100ms]">
 				<div class="timeline-number">2</div>
 				<div>
 					<h3 class="text-lg font-semibold text-[var(--foreground)] -tracking-tight leading-snug">Initialize</h3>
@@ -453,7 +453,7 @@
 			</div>
 
 			<!-- Step 3 -->
-			<div class="timeline-step scroll-reveal" style="transition-delay: 200ms;">
+			<div class="timeline-step scroll-reveal [transition-delay:200ms]">
 				<div class="timeline-number">3</div>
 				<div>
 					<h3 class="text-lg font-semibold text-[var(--foreground)] -tracking-tight leading-snug">Review</h3>
@@ -472,7 +472,7 @@
 			</div>
 
 			<!-- Step 4 -->
-			<div class="timeline-step scroll-reveal" style="transition-delay: 300ms;">
+			<div class="timeline-step scroll-reveal [transition-delay:300ms]">
 				<div class="timeline-number">4</div>
 				<div>
 					<h3 class="text-lg font-semibold text-[var(--foreground)] -tracking-tight leading-snug">Done</h3>
diff --git a/website/src/routes/docs/+layout.svelte b/website/src/routes/docs/+layout.svelte
index 9647819..f7b6698 100644
--- a/website/src/routes/docs/+layout.svelte
+++ b/website/src/routes/docs/+layout.svelte
@@ -8,8 +8,8 @@
 		{ href: '/docs/installation', label: 'Installation' },
 		{ href: '/docs/usage', label: 'Usage' },
 		{ href: '/docs/configuration', label: 'Configuration' },
-	{ href: '/docs/providers', label: 'Providers' },
-	{ href: '/docs/examples', label: 'Examples' },
+		{ href: '/docs/providers', label: 'Providers' },
+		{ href: '/docs/examples', label: 'Examples' },
 		{ href: '/docs/cli-reference', label: 'CLI Reference' },
 	];
 </script>
@@ -18,21 +18,21 @@
 	<title>Docs — cora</title>
 </svelte:head>
 
-<div style="min-height: 100vh; display: flex; background: var(--background);">
+<div class="min-h-screen flex bg-[var(--background)]">
 
 	<!-- Sidebar (desktop) -->
 	<aside class="docs-sidebar hidden lg:block">
-		<div style="padding: 1.5rem;">
-			<a href="/" class="flex items-center gap-2 mb-8" style="color: var(--muted-foreground); text-decoration: none; font-size: 14px; transition: color 0.2s ease; min-height: 44px; display: flex; align-items: center;">
+		<div class="p-6">
+			<a href="/" class="flex items-center gap-2 mb-8 text-sm text-[var(--muted-foreground)] no-underline transition-colors duration-200 min-h-11 hover:text-[var(--foreground)]">
 				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
 				Back to Home
 			</a>
 
-			<div style="margin-bottom: 1.5rem;">
-				<a href="/docs" style="font-size: 18px; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: -0.01em; line-height: 1.35;">cora docs</a>
+			<div class="mb-6">
+				<a href="/docs" class="text-lg font-semibold text-[var(--accent)] no-underline -tracking-tight leading-tight">cora docs</a>
 			</div>
 
-			<nav style="display: flex; flex-direction: column; gap: 0.25rem;">
+			<nav class="flex flex-col gap-1">
 				{#each navLinks as link}
 					<a
 						href={link.href}
@@ -48,7 +48,7 @@
 
 	<!-- Mobile nav -->
 	<nav class="mobile-docs-nav">
-		<a href="/" style="color: var(--muted-foreground);" aria-label="Back to Home">
+		<a href="/" class="text-[var(--muted-foreground)]" aria-label="Back to Home">
 			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
 		</a>
 		{#each navLinks as link}
@@ -59,8 +59,8 @@
 	</nav>
 
 	<!-- Main content -->
-	<main style="flex: 1; min-width: 0;">
-		<div style="max-width: 48rem; margin: 0 auto; padding: 3rem 2rem;">
+	<main class="flex-1 min-w-0">
+		<div class="max-w-3xl mx-auto px-8 py-12">
 			{@render children()}
 		</div>
 	</main>
diff --git a/website/src/routes/docs/cli-reference/+page.svelte b/website/src/routes/docs/cli-reference/+page.svelte
index 9579c60..77ef7e8 100644
--- a/website/src/routes/docs/cli-reference/+page.svelte
+++ b/website/src/routes/docs/cli-reference/+page.svelte
@@ -23,27 +23,28 @@
 	<meta name="description" content="Complete CLI reference for cora - AI code review tool commands, flags, and options." />
 </svelte:head>
 
-<h1 class="scroll-reveal" style="font-size: 32px; font-weight: 700; color: var(--foreground); letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 0.5rem;">CLI Reference</h1>
-<p class="scroll-reveal" style="color: var(--muted-foreground); font-size: 14px; margin-bottom: 2.5rem;">Complete command reference for the cora CLI.</p>
+<div class="docs-content">
+<h1 class="scroll-reveal">CLI Reference</h1>
+<p class="scroll-reveal">Complete command reference for the cora CLI.</p>
 
 <!-- Global Flags -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
 		Global Flags
 	</h2>
-	<div class="glass-card" style="padding: 0; overflow: hidden;">
+	<div class="glass-card p-0 overflow-hidden">
 		<table class="compare-table">
 			<thead>
 				<tr>
-					<th style="width: 33%;">Flag</th>
+					<th class="w-1/3">Flag</th>
 					<th>Description</th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr>
-					<td><code class="syntax-flag">--config</code> <code style="color: var(--muted-foreground);">&lt;path&gt;</code></td>
-					<td>Override config file path (default: <code style="color: var(--muted-foreground);">.cora.yaml</code>)</td>
+					<td><code class="syntax-flag">--config</code> <code class="text-[var(--muted-foreground)]">&lt;path&gt;</code></td>
+					<td>Override config file path (default: <code class="text-[var(--muted-foreground)]">.cora.yaml</code>)</td>
 				</tr>
 				<tr>
 					<td><code class="syntax-flag">--json</code></td>
@@ -60,37 +61,37 @@
 
 <!-- Commands -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
 		Commands
 	</h2>
-	<div class="glass-card" style="padding: 0; overflow: hidden;">
+	<div class="glass-card p-0 overflow-hidden">
 		<table class="compare-table">
 			<thead>
 				<tr>
-					<th style="width: 33%;">Command</th>
+					<th class="w-1/3">Command</th>
 					<th>Description</th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr>
 					<td><code class="syntax-highlight">cora init</code></td>
-					<td>Create <code style="color: var(--muted-foreground);">.cora.yaml</code> config file</td>
+					<td>Create <code class="text-[var(--muted-foreground)]">.cora.yaml</code> config file</td>
 				</tr>
 				<tr>
 					<td><code class="syntax-highlight">cora review --staged</code></td>
 					<td>Review staged git changes (default)</td>
 				</tr>
 				<tr>
-					<td><code class="syntax-highlight">cora review --branch</code> <code style="color: var(--muted-foreground);">&lt;name&gt;</code></td>
+					<td><code class="syntax-highlight">cora review --branch</code> <code class="text-[var(--muted-foreground)]">&lt;name&gt;</code></td>
 					<td>Compare current branch against target</td>
 				</tr>
 				<tr>
-					<td><code class="syntax-highlight">cora review --diff</code> <code style="color: var(--muted-foreground);">&lt;base&gt;..&lt;head&gt;</code></td>
+					<td><code class="syntax-highlight">cora review --diff</code> <code class="text-[var(--muted-foreground)]">&lt;base&gt;..&lt;head&gt;</code></td>
 					<td>Review specific diff range</td>
 				</tr>
 				<tr>
-					<td><code class="syntax-highlight">cora review --file</code> <code style="color: var(--muted-foreground);">&lt;path&gt;</code></td>
+					<td><code class="syntax-highlight">cora review --file</code> <code class="text-[var(--muted-foreground)]">&lt;path&gt;</code></td>
 					<td>Review single file</td>
 				</tr>
 				<tr>
@@ -107,7 +108,7 @@
 				</tr>
 				<tr>
 					<td><code class="syntax-highlight">cora auth login</code></td>
-					<td>Save API key to <code style="color: var(--muted-foreground);">~/.cora/config.toml</code></td>
+					<td>Save API key to <code class="text-[var(--muted-foreground)]">~/.cora/config.toml</code></td>
 				</tr>
 				<tr>
 					<td><code class="syntax-highlight">cora auth status</code></td>
@@ -118,11 +119,11 @@
 					<td>List supported AI providers</td>
 				</tr>
 				<tr>
-					<td><code class="syntax-highlight">cora completion</code> <code style="color: var(--muted-foreground);">&lt;shell&gt;</code></td>
+					<td><code class="syntax-highlight">cora completion</code> <code class="text-[var(--muted-foreground)]">&lt;shell&gt;</code></td>
 					<td>Generate shell completions (bash/zsh/fish/powershell)</td>
 				</tr>
 				<tr>
-					<td><code class="syntax-highlight">cora upload-sarif</code> <code style="color: var(--muted-foreground);">&lt;file&gt;</code></td>
+					<td><code class="syntax-highlight">cora upload-sarif</code> <code class="text-[var(--muted-foreground)]">&lt;file&gt;</code></td>
 					<td>Upload SARIF to GitHub Code Scanning</td>
 				</tr>
 			</tbody>
@@ -132,11 +133,11 @@
 
 <!-- Quick Examples -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
 		Quick Examples
 	</h2>
-	<div style="display: flex; flex-direction: column; gap: 0.75rem;">
+	<div class="flex flex-col gap-3">
 		<div class="docs-terminal">
 			<div class="terminal-bar">
 				<span class="terminal-dot terminal-dot-red"></span>
@@ -186,3 +187,4 @@
 		</div>
 	</div>
 </section>
+</div>
diff --git a/website/src/routes/docs/configuration/+page.svelte b/website/src/routes/docs/configuration/+page.svelte
index b62e1b9..5e9d3e4 100644
--- a/website/src/routes/docs/configuration/+page.svelte
+++ b/website/src/routes/docs/configuration/+page.svelte
@@ -23,17 +23,18 @@
 	<meta name="description" content="Configure cora - config resolution, .cora.yaml, environment variables, and CLI flags." />
 </svelte:head>
 
-<h1 class="scroll-reveal" style="font-size: 32px; font-weight: 700; color: var(--foreground); letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 0.5rem;">Configuration</h1>
-<p class="scroll-reveal" style="color: var(--muted-foreground); font-size: 14px; margin-bottom: 2.5rem;">cora uses a layered config system. Later sources override earlier ones.</p>
+<div class="docs-content">
+<h1 class="scroll-reveal">Configuration</h1>
+<p class="scroll-reveal">cora uses a layered config system. Later sources override earlier ones.</p>
 
 <!-- Config Resolution Order -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
 		Config Resolution Order
 	</h2>
-	<p style="color: var(--muted-foreground); margin-bottom: 1.5rem;">Settings are resolved in this order (highest priority first):</p>
-	<div style="display: flex; flex-direction: column; gap: 0.5rem;">
+	<p class="text-[var(--muted-foreground)] mb-6">Settings are resolved in this order (highest priority first):</p>
+	<div class="flex flex-col gap-2">
 		{#each [
 			{ num: '1', label: 'CLI flags', desc: '--provider, --model, --base-url, etc.', accent: true },
 			{ num: '2', label: '.cora.yaml', desc: 'Project root config file', accent: false },
@@ -44,8 +45,8 @@
 			<div class="docs-card" class:accent={item.accent}>
 				<div class="docs-card-number" class:primary={item.accent} class:muted={!item.accent}>{item.num}</div>
 				<div>
-					<div style="font-size: 14px; font-weight: 600; color: var(--foreground);">{item.label}</div>
-					<div style="font-size: 12px; color: var(--muted-foreground); letter-spacing: 0.01em;">{item.desc}</div>
+					<div class="text-sm font-semibold text-[var(--foreground)]">{item.label}</div>
+					<div class="text-xs text-[var(--muted-foreground)] tracking-wide">{item.desc}</div>
 				</div>
 			</div>
 		{/each}
@@ -54,11 +55,11 @@
 
 <!-- .cora.yaml Example -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
 		.cora.yaml Example
 	</h2>
-	<p style="color: var(--muted-foreground); margin-bottom: 1rem;">Create this file in your project root. Run <code class="syntax-highlight">cora init</code> to generate it.</p>
+	<p class="text-[var(--muted-foreground)] mb-4">Create this file in your project root. Run <code class="syntax-highlight">cora init</code> to generate it.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -70,13 +71,13 @@
 <pre class="whitespace-pre"><span class="syntax-comment"># cora project config</span>
 <span class="syntax-highlight">review:</span>
   <span class="syntax-flag">severity:</span> <span class="syntax-string">warning</span>          <span class="syntax-comment"># minimum severity: info, warning, error</span>
-  <span class="syntax-flag">max_issues:</span> <span style="color: var(--foreground);">20</span>             <span class="syntax-comment"># max issues to report</span>
+  <span class="syntax-flag">max_issues:</span> <span class="text-[var(--foreground)]">20</span>             <span class="syntax-comment"># max issues to report</span>
   <span class="syntax-flag">focus:</span> <span class="syntax-string">security,performance</span>  <span class="syntax-comment"># focus areas</span>
 
 <span class="syntax-highlight">ignore:</span>
-  <span style="color: var(--muted-foreground);">- "vendor/**"</span>
-  <span style="color: var(--muted-foreground);">- "*.min.js"</span>
-  <span style="color: var(--muted-foreground);">- "migrations/**"</span>
+  <span class="syntax-cmd">- "vendor/**"</span>
+  <span class="syntax-cmd">- "*.min.js"</span>
+  <span class="syntax-cmd">- "migrations/**"</span>
 
 <span class="syntax-highlight">providers:</span>
   <span class="syntax-flag">openai:</span>
@@ -89,15 +90,15 @@
 
 <!-- Environment Variables -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
 		Environment Variables
 	</h2>
-	<div class="glass-card" style="padding: 0; overflow: hidden;">
+	<div class="glass-card p-0 overflow-hidden">
 		<table class="compare-table">
 			<thead>
 				<tr>
-					<th style="width: 33%;">Variable</th>
+					<th class="w-1/3">Variable</th>
 					<th>Description</th>
 				</tr>
 			</thead>
@@ -125,11 +126,11 @@
 
 <!-- Provider env vars -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
 		Provider-Specific Env Vars
 	</h2>
-	<p style="color: var(--muted-foreground); margin-bottom: 1rem;">Each provider has its own API key variable. cora checks these for auto-detection.</p>
+	<p class="text-[var(--muted-foreground)] mb-4">Each provider has its own API key variable. cora checks these for auto-detection.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -156,3 +157,4 @@
 		</div>
 	</div>
 </section>
+</div>
diff --git a/website/src/routes/docs/examples/+page.svelte b/website/src/routes/docs/examples/+page.svelte
index 56b350b..5e966eb 100644
--- a/website/src/routes/docs/examples/+page.svelte
+++ b/website/src/routes/docs/examples/+page.svelte
@@ -23,16 +23,17 @@
 	<meta name="description" content="Practical examples for using cora - quick review, CI, pre-commit hooks, SARIF, and more." />
 </svelte:head>
 
-<h1 class="scroll-reveal" style="font-size: 32px; font-weight: 700; color: var(--foreground); letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 0.5rem;">Examples</h1>
-<p class="scroll-reveal" style="color: var(--muted-foreground); font-size: 14px; margin-bottom: 2.5rem;">Practical examples to get you started with cora.</p>
+<div class="docs-content">
+<h1 class="scroll-reveal">Examples</h1>
+<p class="scroll-reveal">Practical examples to get you started with cora.</p>
 
 <!-- Quick Review -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
-		<span style="color: var(--accent); font-family: var(--font-mono); font-size: 14px;">01</span>
+	<h2 class="flex items-center gap-2">
+		<span class="text-[var(--accent)] font-mono text-sm">01</span>
 		Quick Review
 	</h2>
-	<p style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 0.75rem;">Review your staged changes before committing.</p>
+	<p class="text-sm text-[var(--muted-foreground)] mb-3">Review your staged changes before committing.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -47,11 +48,11 @@
 
 <!-- Branch Comparison -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
-		<span style="color: var(--accent); font-family: var(--font-mono); font-size: 14px;">02</span>
+	<h2 class="flex items-center gap-2">
+		<span class="text-[var(--accent)] font-mono text-sm">02</span>
 		Branch Comparison
 	</h2>
-	<p style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 0.75rem;">Compare your current branch against main.</p>
+	<p class="text-sm text-[var(--muted-foreground)] mb-3">Compare your current branch against main.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -66,11 +67,11 @@
 
 <!-- Full Project Scan -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
-		<span style="color: var(--accent); font-family: var(--font-mono); font-size: 14px;">03</span>
+	<h2 class="flex items-center gap-2">
+		<span class="text-[var(--accent)] font-mono text-sm">03</span>
 		Full Project Scan
 	</h2>
-	<p style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 0.75rem;">Scan your entire project for issues.</p>
+	<p class="text-sm text-[var(--muted-foreground)] mb-3">Scan your entire project for issues.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -85,11 +86,11 @@
 
 <!-- Incremental Scan -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
-		<span style="color: var(--accent); font-family: var(--font-mono); font-size: 14px;">04</span>
+	<h2 class="flex items-center gap-2">
+		<span class="text-[var(--accent)] font-mono text-sm">04</span>
 		Incremental Scan
 	</h2>
-	<p style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 0.75rem;">Only scan files that changed since the last scan.</p>
+	<p class="text-sm text-[var(--muted-foreground)] mb-3">Only scan files that changed since the last scan.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -104,11 +105,11 @@
 
 <!-- Streaming -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
-		<span style="color: var(--accent); font-family: var(--font-mono); font-size: 14px;">05</span>
+	<h2 class="flex items-center gap-2">
+		<span class="text-[var(--accent)] font-mono text-sm">05</span>
 		Streaming Output
 	</h2>
-	<p style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 0.75rem;">Stream results as they come in from the LLM.</p>
+	<p class="text-sm text-[var(--muted-foreground)] mb-3">Stream results as they come in from the LLM.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -123,11 +124,11 @@
 
 <!-- GitHub Actions -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
-		<span style="color: var(--accent); font-family: var(--font-mono); font-size: 14px;">06</span>
+	<h2 class="flex items-center gap-2">
+		<span class="text-[var(--accent)] font-mono text-sm">06</span>
 		GitHub Actions CI
 	</h2>
-	<p style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 0.75rem;">Add cora to your CI pipeline.</p>
+	<p class="text-sm text-[var(--muted-foreground)] mb-3">Add cora to your CI pipeline.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -146,10 +147,10 @@
   <span class="syntax-flag">review:</span>
     <span class="syntax-flag">runs-on:</span> <span class="syntax-string">ubuntu-latest</span>
     <span class="syntax-flag">steps:</span>
-      <span style="color: var(--muted-foreground);">- uses:</span> <span class="syntax-string">actions/checkout@v4</span>
-      <span style="color: var(--muted-foreground);">- name:</span> <span class="syntax-string">Install cora</span>
+      <span class="syntax-cmd">- uses:</span> <span class="syntax-string">actions/checkout@v4</span>
+      <span class="syntax-cmd">- name:</span> <span class="syntax-string">Install cora</span>
         <span class="syntax-flag">run:</span> <span class="syntax-string">cargo install cora</span>
-      <span style="color: var(--muted-foreground);">- name:</span> <span class="syntax-string">Run AI code review</span>
+      <span class="syntax-cmd">- name:</span> <span class="syntax-string">Run AI code review</span>
         <span class="syntax-flag">env:</span>
           {@html '<span class="syntax-flag">CORA_API_KEY:</span> <span class="syntax-string">${{ secrets.CORA_API_KEY }}</span>'}
           <span class="syntax-flag">CORA_PROVIDER:</span> <span class="syntax-string">openai</span>
@@ -160,11 +161,11 @@
 
 <!-- Pre-commit Hook -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
-		<span style="color: var(--accent); font-family: var(--font-mono); font-size: 14px;">07</span>
+	<h2 class="flex items-center gap-2">
+		<span class="text-[var(--accent)] font-mono text-sm">07</span>
 		Pre-commit Hook
 	</h2>
-	<p style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 0.75rem;">Install once, then every commit gets reviewed automatically.</p>
+	<p class="text-sm text-[var(--muted-foreground)] mb-3">Install once, then every commit gets reviewed automatically.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -176,7 +177,7 @@
 			<span class="syntax-cmd">$</span> <span class="syntax-highlight">cora hook</span> <span class="syntax-string">install</span><br/><br/>
 			<span class="syntax-comment"># Now just commit normally &mdash; cora reviews automatically</span><br/>
 			<span class="syntax-cmd">$</span> <span class="syntax-highlight">git</span> <span class="syntax-string">commit</span> <span class="syntax-flag">-m</span> <span class="syntax-string">"fix: handle edge case in parser"</span><br/>
-			<span style="color: var(--muted-foreground);">cora pre-commit hook running...</span><br/>
+			<span class="syntax-cmd">cora pre-commit hook running...</span><br/>
 			<span class="syntax-success">No issues found &mdash; commit allowed</span>
 		</div>
 	</div>
@@ -184,11 +185,11 @@
 
 <!-- SARIF Upload -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
-		<span style="color: var(--accent); font-family: var(--font-mono); font-size: 14px;">08</span>
+	<h2 class="flex items-center gap-2">
+		<span class="text-[var(--accent)] font-mono text-sm">08</span>
 		SARIF Upload
 	</h2>
-	<p style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 0.75rem;">Generate SARIF output and upload to GitHub Code Scanning.</p>
+	<p class="text-sm text-[var(--muted-foreground)] mb-3">Generate SARIF output and upload to GitHub Code Scanning.</p>
 	<div class="docs-terminal">
 		<div class="terminal-bar">
 			<span class="terminal-dot terminal-dot-red"></span>
@@ -197,9 +198,10 @@
 		</div>
 		<div class="terminal-body">
 			<span class="syntax-comment"># Generate SARIF report and upload</span><br/>
-			<span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--staged</span> <span class="syntax-flag">--output</span> <span class="syntax-string">sarif</span> <span style="color: var(--muted-foreground);">&gt;</span> <span class="syntax-string">results.sarif</span> <span style="color: var(--muted-foreground);">&amp;&amp;</span> \<br/>
+			<span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--staged</span> <span class="syntax-flag">--output</span> <span class="syntax-string">sarif</span> <span class="syntax-cmd">&gt;</span> <span class="syntax-string">results.sarif</span> <span class="syntax-cmd">&amp;&amp;</span> \<br/>
 			&nbsp;&nbsp;<span class="syntax-highlight">cora upload-sarif</span> <span class="syntax-string">results.sarif</span><br/><br/>
 			<span class="syntax-success">Uploaded 3 findings to GitHub Code Scanning</span>
 		</div>
 	</div>
 </section>
+</div>
diff --git a/website/src/routes/docs/getting-started/+page.svelte b/website/src/routes/docs/getting-started/+page.svelte
index 7195d0b..a152047 100644
--- a/website/src/routes/docs/getting-started/+page.svelte
+++ b/website/src/routes/docs/getting-started/+page.svelte
@@ -21,7 +21,8 @@
 	});
 </script>
 
-<h1 style="font-size: 28px; font-weight: 700; color: var(--foreground); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.5rem;">
+<div class="docs-content">
+<h1 class="scroll-reveal">
 	Getting Started
 </h1>
 
@@ -31,124 +32,125 @@
 
 	<div class="docs-card">
 		<div class="docs-card-number primary">1</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<strong style="color: var(--foreground);">Install cora</strong> — Single binary via Cargo:
-			<code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">cargo install cora</code>
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<strong class="text-[var(--foreground)]">Install cora</strong> — Single binary via Cargo:
+			<code>cargo install cora</code>
 		</div>
 	</div>
 
 	<div class="docs-card">
 		<div class="docs-card-number primary">2</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<strong style="color: var(--foreground);">Configure</strong> — Initialize your project:
-			<code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">cora init</code> creates <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">.cora.yaml</code>
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<strong class="text-[var(--foreground)]">Configure</strong> — Initialize your project:
+			<code>cora init</code> creates <code>.cora.yaml</code>
 		</div>
 	</div>
 
 	<div class="docs-card">
 		<div class="docs-card-number primary">3</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<strong style="color: var(--foreground);">Add API key</strong> — Run <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">cora auth login</code> or set <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">CORA_API_KEY</code> environment variable
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<strong class="text-[var(--foreground)]">Add API key</strong> — Run <code>cora auth login</code> or set <code>CORA_API_KEY</code> environment variable
 		</div>
 	</div>
 
 	<div class="docs-card">
 		<div class="docs-card-number primary">4</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<strong style="color: var(--foreground);">Review</strong> — Analyze your staged changes:
-			<code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">cora review --staged</code>
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<strong class="text-[var(--foreground)]">Review</strong> — Analyze your staged changes:
+			<code>cora review --staged</code>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Understanding the Output</h2>
 	<p>cora outputs a structured, color-coded summary of findings for each file reviewed.</p>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora review</span> <span style="color: oklch(0.75 0.15 240);">--staged</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--staged</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);">Analyzing 3 files...</span></div>
-			<div><span style="color: var(--success);">&#10003;</span> src/auth/login.ts <span style="color: var(--muted-foreground);">— 2 issues found</span></div>
-			<div>  <span style="color: var(--warning);">&#9888;</span> <span style="color: var(--muted-foreground);">Line 42:</span> Potential SQL injection</div>
-			<div>  <span style="color: var(--warning);">&#9888;</span> <span style="color: var(--muted-foreground);">Line 87:</span> Hardcoded secret</div>
-			<div><span style="color: var(--success);">&#10003;</span> src/utils/parser.ts <span style="color: var(--muted-foreground);">— clean</span></div>
-			<div><span style="color: var(--success);">&#10003;</span> src/api/routes.ts <span style="color: var(--muted-foreground);">— 1 issue found</span></div>
-			<div>  <span style="color: var(--destructive);">&#10007;</span> <span style="color: var(--muted-foreground);">Line 23:</span> Missing error handling</div>
+			<div><span class="syntax-cmd">Analyzing 3 files...</span></div>
+			<div><span class="syntax-success">&#10003;</span> src/auth/login.ts <span class="syntax-cmd">— 2 issues found</span></div>
+			<div>  <span class="syntax-warning">&#9888;</span> <span class="syntax-cmd">Line 42:</span> Potential SQL injection</div>
+			<div>  <span class="syntax-warning">&#9888;</span> <span class="syntax-cmd">Line 87:</span> Hardcoded secret</div>
+			<div><span class="syntax-success">&#10003;</span> src/utils/parser.ts <span class="syntax-cmd">— clean</span></div>
+			<div><span class="syntax-success">&#10003;</span> src/api/routes.ts <span class="syntax-cmd">— 1 issue found</span></div>
+			<div>  <span class="syntax-error">&#10007;</span> <span class="syntax-cmd">Line 23:</span> Missing error handling</div>
 			<div></div>
 			<div>3 issues found in 3 files</div>
 		</div>
 	</div>
 
 	<p>Each line in the output contains:</p>
-	<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent); font-family: var(--font-mono);">file path</span>
+	<div class="docs-term-list">
+		<div class="docs-term-item">
+			<span class="docs-term-key">file path</span>
 			<span>The relative path to the file being reviewed</span>
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent); font-family: var(--font-mono);">line number</span>
+		<div class="docs-term-item">
+			<span class="docs-term-key">line number</span>
 			<span>Specific line where the issue was found</span>
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent); font-family: var(--font-mono);">severity</span>
+		<div class="docs-term-item">
+			<span class="docs-term-key">severity</span>
 			<span>Suggestion (&#9888;), Warning (&#9888;), or Error (&#10007;)</span>
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent); font-family: var(--font-mono);">description</span>
+		<div class="docs-term-item">
+			<span class="docs-term-key">description</span>
 			<span>Brief explanation of the issue</span>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Customizing Your Review</h2>
-	<p>The <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">.cora.yaml</code> file controls how cora reviews your code.</p>
+	<p>The <code>.cora.yaml</code> file controls how cora reviews your code.</p>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);"># .cora.yaml</span></div>
-			<div><span style="color: var(--accent);">provider</span>: <span style="color: var(--success);">openai</span></div>
-			<div><span style="color: var(--accent);">model</span>: <span style="color: var(--success);">gpt-4o</span></div>
+			<div><span class="syntax-comment"># .cora.yaml</span></div>
+			<div><span class="syntax-highlight">provider</span>: <span class="syntax-string">openai</span></div>
+			<div><span class="syntax-highlight">model</span>: <span class="syntax-string">gpt-4o</span></div>
 			<div></div>
-			<div><span style="color: var(--accent);">custom_prompt</span>: <span style="color: var(--success);">|</span></div>
-			<div><span style="color: var(--success);">  Focus on security vulnerabilities and</span></div>
-			<div><span style="color: var(--success);">  performance issues. Ignore style linting.</span></div>
+			<div><span class="syntax-highlight">custom_prompt</span>: <span class="syntax-string">|</span></div>
+			<div><span class="syntax-string">  Focus on security vulnerabilities and</span></div>
+			<div><span class="syntax-string">  performance issues. Ignore style linting.</span></div>
 		</div>
 	</div>
 
-	<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-family: var(--font-mono);">provider</span> — Which LLM provider to use (openai, anthropic, groq, ollama, zai)
+	<div class="docs-term-list">
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="docs-term-key">provider</span> — Which LLM provider to use (openai, anthropic, groq, ollama, zai)
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-family: var(--font-mono);">model</span> — Specific model name (e.g., gpt-4o, claude-sonnet-4-20250514)
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="docs-term-key">model</span> — Specific model name (e.g., gpt-4o, claude-sonnet-4-20250514)
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-family: var(--font-mono);">custom_prompt</span> — Override the default review prompt to focus on specific concerns
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="docs-term-key">custom_prompt</span> — Override the default review prompt to focus on specific concerns
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Next Steps</h2>
 	<p>Now that you have cora running, explore these topics to get the most out of it:</p>
-	<div style="display: flex; flex-direction: column; gap: 0.5rem;">
-		<a href="/docs/installation" style="font-size: 14px; color: var(--accent); text-decoration: none;">Installation — install options and shell completions</a>
-		<a href="/docs/usage" style="font-size: 14px; color: var(--accent); text-decoration: none;">Usage — review modes, output formats, and configuration</a>
-		<a href="/docs/configuration" style="font-size: 14px; color: var(--accent); text-decoration: none;">Configuration — full .cora.yaml reference</a>
-		<a href="/docs/providers" style="font-size: 14px; color: var(--accent); text-decoration: none;">Providers — setting up OpenAI, Anthropic, Groq, Ollama, and Z.AI</a>
-		<a href="/docs/cli-reference" style="font-size: 14px; color: var(--accent); text-decoration: none;">CLI Reference — full command documentation</a>
+	<div class="docs-link-list">
+		<a href="/docs/installation">Installation — install options and shell completions</a>
+		<a href="/docs/usage">Usage — review modes, output formats, and configuration</a>
+		<a href="/docs/configuration">Configuration — full .cora.yaml reference</a>
+		<a href="/docs/providers">Providers — setting up OpenAI, Anthropic, Groq, Ollama, and Z.AI</a>
+		<a href="/docs/cli-reference">CLI Reference — full command documentation</a>
 	</div>
 </div>
+</div>
diff --git a/website/src/routes/docs/installation/+page.svelte b/website/src/routes/docs/installation/+page.svelte
index 26feb3a..2c62fbe 100644
--- a/website/src/routes/docs/installation/+page.svelte
+++ b/website/src/routes/docs/installation/+page.svelte
@@ -21,49 +21,50 @@
 	});
 </script>
 
-<h1 style="font-size: 28px; font-weight: 700; color: var(--foreground); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.5rem;">
+<div class="docs-content">
+<h1 class="scroll-reveal">
 	Installation
 </h1>
 
 <div class="docs-section scroll-reveal">
 	<h2>Prerequisites</h2>
 	<p>cora is a Rust binary. You have two installation paths:</p>
-	<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-weight: 600;">Via Cargo (recommended)</span> — Requires Rust 1.70 or later with Cargo installed
+	<div class="docs-term-list">
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="font-semibold text-[var(--accent)]">Via Cargo (recommended)</span> — Requires Rust 1.70 or later with Cargo installed
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-weight: 600;">Binary download</span> — No Rust required; just download and place in your PATH
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="font-semibold text-[var(--accent)]">Binary download</span> — No Rust required; just download and place in your PATH
 		</div>
 	</div>
 	<p>cora works on Linux (x86_64 and arm64), macOS (arm64), and Windows.</p>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Install via Cargo</h2>
 	<p>The recommended way to install cora is through Cargo:</p>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cargo install</span> <span style="color: var(--success);">cora</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cargo install</span> <span class="syntax-string">cora</span></div>
 		</div>
 	</div>
 
-	<p>This compiles cora from source and installs it to Cargo's binary directory (typically <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">~/.cargo/bin/</code>).</p>
+	<p>This compiles cora from source and installs it to Cargo's binary directory (typically <code>~/.cargo/bin/</code>).</p>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Download Binary</h2>
-	<p>Pre-built binaries are available from the <a href="https://github.com/ajianaz/cora-cli/releases" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: none;">GitHub Releases</a> page.</p>
+	<p>Pre-built binaries are available from the <a href="https://github.com/ajianaz/cora-cli/releases" target="_blank" rel="noopener">GitHub Releases</a> page.</p>
 
-	<div style="font-size: 14px; color: var(--muted-foreground); margin-bottom: 1rem;">
+	<div class="text-sm text-[var(--muted-foreground)] mb-4">
 		<p>Supported platforms:</p>
-		<div style="display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem;">
+		<div class="flex flex-col gap-1 mt-2">
 			<div>Linux x86_64 (glibc)</div>
 			<div>Linux arm64 (aarch64)</div>
 			<div>macOS arm64 (Apple Silicon)</div>
@@ -73,93 +74,94 @@
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);"># Download and extract</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">curl</span> -sL https://github.com/ajianaz/cora-cli/releases/latest/download/cora-linux-x86_64.tar.gz | <span style="color: var(--accent);">tar</span> xz</div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">mv</span> cora ~/.local/bin/cora</div>
+			<div><span class="syntax-comment"># Download and extract</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">curl</span> -sL https://github.com/ajianaz/cora-cli/releases/latest/download/cora-linux-x86_64.tar.gz | <span class="syntax-highlight">tar</span> xz</div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">mv</span> cora ~/.local/bin/cora</div>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Build from Source</h2>
 	<p>If you prefer to build from the latest source:</p>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">git clone</span> <span style="color: var(--success);">https://github.com/ajianaz/cora-cli.git</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cd</span> cora-cli</div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cargo build</span> <span style="color: oklch(0.75 0.15 240);">--release</span></div>
-			<div><span style="color: var(--muted-foreground);"># Binary at target/release/cora</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">git clone</span> <span class="syntax-string">https://github.com/ajianaz/cora-cli.git</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cd</span> cora-cli</div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cargo build</span> <span class="syntax-flag">--release</span></div>
+			<div><span class="syntax-comment"># Binary at target/release/cora</span></div>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Shell Completions</h2>
 	<p>cora provides shell completions for bash, zsh, and fish:</p>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);"># Bash</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora completion</span> <span style="color: var(--success);">bash</span> > ~/.cora/completion.bash</div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">echo</span> <span style="color: var(--success);">'source ~/.cora/completion.bash'</span> >> ~/.bashrc</div>
+			<div><span class="syntax-comment"># Bash</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora completion</span> <span class="syntax-string">bash</span> > ~/.cora/completion.bash</div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">echo</span> <span class="syntax-string">'source ~/.cora/completion.bash'</span> >> ~/.bashrc</div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Zsh</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora completion</span> <span style="color: var(--success);">zsh</span> > ~/.cora/completion.zsh</div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">echo</span> <span style="color: var(--success);">'source ~/.cora/completion.zsh'</span> >> ~/.zshrc</div>
+			<div><span class="syntax-comment"># Zsh</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora completion</span> <span class="syntax-string">zsh</span> > ~/.cora/completion.zsh</div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">echo</span> <span class="syntax-string">'source ~/.cora/completion.zsh'</span> >> ~/.zshrc</div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Fish</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora completion</span> <span style="color: var(--success);">fish</span> > ~/.config/fish/completions/cora.fish</div>
+			<div><span class="syntax-comment"># Fish</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora completion</span> <span class="syntax-string">fish</span> > ~/.config/fish/completions/cora.fish</div>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Verify Installation</h2>
 	<p>Confirm cora is installed correctly:</p>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora</span> <span style="color: oklch(0.75 0.15 240);">--version</span></div>
-			<div><span style="color: var(--success);">cora 0.x.x</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora</span> <span class="syntax-flag">--version</span></div>
+			<div><span class="syntax-string">cora 0.x.x</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora auth</span> <span style="color: var(--success);">status</span></div>
-			<div><span style="color: var(--success);">Provider: openai</span></div>
-			<div><span style="color: var(--success);">API key: configured</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora auth</span> <span class="syntax-string">status</span></div>
+			<div><span class="syntax-string">Provider: openai</span></div>
+			<div><span class="syntax-string">API key: configured</span></div>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Updating</h2>
 	<p>To update cora to the latest version:</p>
 
-	<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-weight: 600;">Via Cargo:</span> <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">cargo install cora --force</code>
+	<div class="docs-term-list">
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="font-semibold text-[var(--accent)]">Via Cargo:</span> <code>cargo install cora --force</code>
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-weight: 600;">Via Binary:</span> Download the latest release from GitHub and replace the existing binary
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="font-semibold text-[var(--accent)]">Via Binary:</span> Download the latest release from GitHub and replace the existing binary
 		</div>
 	</div>
 </div>
+</div>
diff --git a/website/src/routes/docs/providers/+page.svelte b/website/src/routes/docs/providers/+page.svelte
index 806822b..058f734 100644
--- a/website/src/routes/docs/providers/+page.svelte
+++ b/website/src/routes/docs/providers/+page.svelte
@@ -23,16 +23,17 @@
 	<meta name="description" content="Supported AI providers for cora - OpenAI, Anthropic, Groq, Ollama, Z.AI." />
 </svelte:head>
 
-<h1 class="scroll-reveal" style="font-size: 32px; font-weight: 700; color: var(--foreground); letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 0.5rem;">Providers</h1>
-<p class="scroll-reveal" style="color: var(--muted-foreground); font-size: 14px; margin-bottom: 2.5rem;">cora supports multiple AI providers. Use your own API key &mdash; no subscriptions to us.</p>
+<div class="docs-content">
+<h1 class="scroll-reveal">Providers</h1>
+<p class="scroll-reveal">cora supports multiple AI providers. Use your own API key &mdash; no subscriptions to us.</p>
 
 <!-- Supported Providers -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
 		Supported Providers
 	</h2>
-	<div class="glass-card" style="padding: 0; overflow-x: auto;">
+	<div class="glass-card p-0 overflow-x-auto">
 		<table class="compare-table">
 			<thead>
 				<tr>
@@ -45,31 +46,31 @@
 			<tbody>
 				<tr>
 					<td class="cora-col">OpenAI</td>
-					<td><code style="color: var(--muted-foreground);">gpt-4o</code></td>
+					<td><code class="text-[var(--muted-foreground)]">gpt-4o</code></td>
 					<td><code class="syntax-flag">OPENAI_API_KEY</code></td>
 					<td><code class="syntax-flag">OPENAI_BASE_URL</code></td>
 				</tr>
 				<tr>
 					<td class="cora-col">Anthropic</td>
-					<td><code style="color: var(--muted-foreground);">claude-sonnet-4-20250514</code></td>
+					<td><code class="text-[var(--muted-foreground)]">claude-sonnet-4-20250514</code></td>
 					<td><code class="syntax-flag">ANTHROPIC_API_KEY</code></td>
 					<td><code class="syntax-flag">ANTHROPIC_BASE_URL</code></td>
 				</tr>
 				<tr>
 					<td class="cora-col">Groq</td>
-					<td><code style="color: var(--muted-foreground);">llama-3.3-70b-versatile</code></td>
+					<td><code class="text-[var(--muted-foreground)]">llama-3.3-70b-versatile</code></td>
 					<td><code class="syntax-flag">GROQ_API_KEY</code></td>
 					<td><code class="syntax-flag">GROQ_BASE_URL</code></td>
 				</tr>
 				<tr>
 					<td class="cora-col">Ollama</td>
-					<td><code style="color: var(--muted-foreground);">llama3.1</code></td>
-					<td style="color: var(--muted-foreground);">&mdash; (local)</td>
-					<td><code class="syntax-flag">OLLAMA_BASE_URL</code> <span style="color: var(--muted-foreground); font-size: 12px;">(default: http://localhost:11434)</span></td>
+					<td><code class="text-[var(--muted-foreground)]">llama3.1</code></td>
+					<td class="text-[var(--muted-foreground)]">&mdash; (local)</td>
+					<td><code class="syntax-flag">OLLAMA_BASE_URL</code> <span class="text-[var(--muted-foreground)] text-xs">(default: http://localhost:11434)</span></td>
 				</tr>
 				<tr>
 					<td class="cora-col">Z.AI</td>
-					<td><code style="color: var(--muted-foreground);">glm-5.1</code></td>
+					<td><code class="text-[var(--muted-foreground)]">glm-5.1</code></td>
 					<td><code class="syntax-flag">ZAI_API_KEY</code></td>
 					<td><code class="syntax-flag">ZAI_BASE_URL</code></td>
 				</tr>
@@ -80,14 +81,14 @@
 
 <!-- Auto Detection -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
 		Auto-Detection
 	</h2>
-	<p style="color: var(--muted-foreground); margin-bottom: 1.5rem;">
+	<p class="text-[var(--muted-foreground)] mb-6">
 		cora automatically detects which provider to use by checking environment variables in this order:
 	</p>
-	<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem;">
+	<div class="flex flex-col gap-2 mb-6">
 		{#each [
 			'OPENAI_API_KEY \u2192 uses OpenAI',
 			'ANTHROPIC_API_KEY \u2192 uses Anthropic',
@@ -97,22 +98,22 @@
 		] as item, i}
 			<div class="docs-card">
 				<div class="docs-card-number muted">{i + 1}</div>
-				<code style="font-size: 14px; color: var(--muted-foreground);">{item}</code>
+				<code class="text-sm text-[var(--muted-foreground)]">{item}</code>
 			</div>
 		{/each}
 	</div>
-	<p style="font-size: 14px; color: var(--muted-foreground);">
+	<p class="text-sm text-[var(--muted-foreground)]">
 		Override auto-detection with <code class="syntax-highlight">CORA_PROVIDER</code> env var or <code class="syntax-flag">--provider</code> flag.
 	</p>
 </section>
 
 <!-- Usage Examples -->
 <section class="docs-section scroll-reveal">
-	<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+	<h2 class="flex items-center gap-2">
 		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
 		Usage Examples
 	</h2>
-	<div style="display: flex; flex-direction: column; gap: 0.75rem;">
+	<div class="flex flex-col gap-3">
 		<div class="docs-terminal">
 			<div class="terminal-bar">
 				<span class="terminal-dot terminal-dot-red"></span>
@@ -162,3 +163,4 @@
 		</div>
 	</div>
 </section>
+</div>
diff --git a/website/src/routes/docs/usage/+page.svelte b/website/src/routes/docs/usage/+page.svelte
index 5c222da..e43cccb 100644
--- a/website/src/routes/docs/usage/+page.svelte
+++ b/website/src/routes/docs/usage/+page.svelte
@@ -21,7 +21,8 @@
 	});
 </script>
 
-<h1 style="font-size: 28px; font-weight: 700; color: var(--foreground); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.5rem;">
+<div class="docs-content">
+<h1 class="scroll-reveal">
 	Usage
 </h1>
 
@@ -29,7 +30,7 @@
 	<h2>Review Modes</h2>
 	<p>cora supports four review modes, each suited to a different workflow:</p>
 
-	<div style="overflow-x: auto;">
+	<div class="overflow-x-auto">
 		<table class="compare-table">
 			<thead>
 				<tr>
@@ -41,26 +42,26 @@
 			</thead>
 			<tbody>
 				<tr>
-					<td style="font-weight: 500;">Staged</td>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">--staged</code></td>
+					<td class="font-medium">Staged</td>
+					<td><code>--staged</code></td>
 					<td>Files in git staging area</td>
 					<td>Pre-commit review</td>
 				</tr>
 				<tr>
-					<td style="font-weight: 500;">Branch</td>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">--branch</code></td>
+					<td class="font-medium">Branch</td>
+					<td><code>--branch</code></td>
 					<td>Diff against base branch</td>
 					<td>PR review workflow</td>
 				</tr>
 				<tr>
-					<td style="font-weight: 500;">Full</td>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">--full</code></td>
+					<td class="font-medium">Full</td>
+					<td><code>--full</code></td>
 					<td>Entire repository</td>
 					<td>Comprehensive audit</td>
 				</tr>
 				<tr>
-					<td style="font-weight: 500;">Incremental</td>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">--incremental</code></td>
+					<td class="font-medium">Incremental</td>
+					<td><code>--incremental</code></td>
 					<td>Only new/changed files</td>
 					<td>Large codebases</td>
 				</tr>
@@ -70,118 +71,118 @@
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);"># Review staged changes</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora review</span> <span style="color: oklch(0.75 0.15 240);">--staged</span></div>
+			<div><span class="syntax-comment"># Review staged changes</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--staged</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Review against main branch</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora review</span> <span style="color: oklch(0.75 0.15 240);">--branch</span> <span style="color: var(--success);">main</span></div>
+			<div><span class="syntax-comment"># Review against main branch</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--branch</span> <span class="syntax-string">main</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Full project scan</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora review</span> <span style="color: oklch(0.75 0.15 240);">--full</span></div>
+			<div><span class="syntax-comment"># Full project scan</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--full</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Incremental (only changed files)</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora review</span> <span style="color: oklch(0.75 0.15 240);">--incremental</span></div>
+			<div><span class="syntax-comment"># Incremental (only changed files)</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--incremental</span></div>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Output Formats</h2>
 	<p>cora can output results in three formats:</p>
 
-	<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-weight: 600; font-family: var(--font-mono);">--format pretty</span> — Human-readable terminal output (default)
+	<div class="docs-term-list">
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="font-semibold text-[var(--accent)] font-mono">--format pretty</span> — Human-readable terminal output (default)
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-weight: 600; font-family: var(--font-mono);">--format json</span> — Machine-readable JSON for CI/CD pipelines
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="font-semibold text-[var(--accent)] font-mono">--format json</span> — Machine-readable JSON for CI/CD pipelines
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground);">
-			<span style="color: var(--accent); font-weight: 600; font-family: var(--font-mono);">--format sarif</span> — SARIF format for GitHub Code Scanning
+		<div class="text-sm text-[var(--muted-foreground)]">
+			<span class="font-semibold text-[var(--accent)] font-mono">--format sarif</span> — SARIF format for GitHub Code Scanning
 		</div>
 	</div>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);"># JSON output example</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora review</span> <span style="color: oklch(0.75 0.15 240);">--staged</span> <span style="color: oklch(0.75 0.15 240);">--format</span> <span style="color: var(--success);">json</span></div>
+			<div><span class="syntax-comment"># JSON output example</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--staged</span> <span class="syntax-flag">--format</span> <span class="syntax-string">json</span></div>
 			<div></div>
 			<div>{'{'}</div>
-			<div>  <span style="color: var(--accent);">"files"</span>: [</div>
+			<div>  <span class="syntax-highlight">"files"</span>: [</div>
 			<div>    {'{'}</div>
-			<div>      <span style="color: var(--accent);">"path"</span>: <span style="color: var(--success);">"src/auth/login.ts"</span>,</div>
-			<div>      <span style="color: var(--accent);">"issues"</span>: [</div>
+			<div>      <span class="syntax-highlight">"path"</span>: <span class="syntax-string">"src/auth/login.ts"</span>,</div>
+			<div>      <span class="syntax-highlight">"issues"</span>: [</div>
 			<div>        {'{'}</div>
-			<div>          <span style="color: var(--accent);">"line"</span>: <span style="color: oklch(0.75 0.15 240);">42</span>,</div>
-			<div>          <span style="color: var(--accent);">"severity"</span>: <span style="color: var(--success);">"warning"</span>,</div>
-			<div>          <span style="color: var(--accent);">"message"</span>: <span style="color: var(--success);">"Potential SQL injection"</span></div>
+			<div>          <span class="syntax-highlight">"line"</span>: <span class="syntax-flag">42</span>,</div>
+			<div>          <span class="syntax-highlight">"severity"</span>: <span class="syntax-string">"warning"</span>,</div>
+			<div>          <span class="syntax-highlight">"message"</span>: <span class="syntax-string">"Potential SQL injection"</span></div>
 			<div>{'}'}</div>
 			<div>      ]</div>
 			<div>    {'}'}</div>
 			<div>  ],</div>
-			<div>  <span style="color: var(--accent);">"summary"</span>: {'{'}</div>
-			<div>    <span style="color: var(--accent);">"total_files"</span>: <span style="color: oklch(0.75 0.15 240);">3</span>,</div>
-			<div>    <span style="color: var(--accent);">"total_issues"</span>: <span style="color: oklch(0.75 0.15 240);">3</span></div>
+			<div>  <span class="syntax-highlight">"summary"</span>: {'{'}</div>
+			<div>    <span class="syntax-highlight">"total_files"</span>: <span class="syntax-flag">3</span>,</div>
+			<div>    <span class="syntax-highlight">"total_issues"</span>: <span class="syntax-flag">3</span></div>
 			<div>{'}'}</div>
 			<div>{'}'}</div>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Configuration File</h2>
-	<p>The <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">.cora.yaml</code> file provides persistent configuration. Place it in your project root or use <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">~/.cora/config.yaml</code> for global settings.</p>
+	<p>The <code>.cora.yaml</code> file provides persistent configuration. Place it in your project root or use <code>~/.cora/config.yaml</code> for global settings.</p>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);"># .cora.yaml — full example</span></div>
+			<div><span class="syntax-comment"># .cora.yaml — full example</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># LLM provider: openai, anthropic, groq, ollama, zai</span></div>
-			<div><span style="color: var(--accent);">provider</span>: <span style="color: var(--success);">openai</span></div>
+			<div><span class="syntax-comment"># LLM provider: openai, anthropic, groq, ollama, zai</span></div>
+			<div><span class="syntax-highlight">provider</span>: <span class="syntax-string">openai</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Model name</span></div>
-			<div><span style="color: var(--accent);">model</span>: <span style="color: var(--success);">gpt-4o</span></div>
+			<div><span class="syntax-comment"># Model name</span></div>
+			<div><span class="syntax-highlight">model</span>: <span class="syntax-string">gpt-4o</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Custom base URL (for proxies or self-hosted endpoints)</span></div>
-			<div><span style="color: var(--muted-foreground);"># base_url: https://api.example.com/v1</span></div>
+			<div><span class="syntax-comment"># Custom base URL (for proxies or self-hosted endpoints)</span></div>
+			<div><span class="syntax-comment"># base_url: https://api.example.com/v1</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Custom review prompt</span></div>
-			<div><span style="color: var(--muted-foreground);"># custom_prompt: |</span></div>
-			<div><span style="color: var(--muted-foreground);">#   Focus on security and performance only.</span></div>
+			<div><span class="syntax-comment"># Custom review prompt</span></div>
+			<div><span class="syntax-comment"># custom_prompt: |</span></div>
+			<div><span class="syntax-comment">#   Focus on security and performance only.</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># File patterns to include</span></div>
-			<div><span style="color: var(--muted-foreground);"># include:</span></div>
-			<div><span style="color: var(--muted-foreground);">#   - "src/**"</span></div>
-			<div><span style="color: var(--muted-foreground);">#   - "lib/**"</span></div>
+			<div><span class="syntax-comment"># File patterns to include</span></div>
+			<div><span class="syntax-comment"># include:</span></div>
+			<div><span class="syntax-comment">#   - "src/**"</span></div>
+			<div><span class="syntax-comment">#   - "lib/**"</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># File patterns to exclude</span></div>
-			<div><span style="color: var(--muted-foreground);"># exclude:</span></div>
-			<div><span style="color: var(--muted-foreground);">#   - "**/*.test.ts"</span></div>
-			<div><span style="color: var(--muted-foreground);">#   - "**/node_modules/**"</span></div>
+			<div><span class="syntax-comment"># File patterns to exclude</span></div>
+			<div><span class="syntax-comment"># exclude:</span></div>
+			<div><span class="syntax-comment">#   - "**/*.test.ts"</span></div>
+			<div><span class="syntax-comment">#   - "**/node_modules/**"</span></div>
 		</div>
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Environment Variables</h2>
 	<p>Environment variables override configuration file settings:</p>
 
-	<div style="overflow-x: auto;">
+	<div class="overflow-x-auto">
 		<table class="compare-table">
 			<thead>
 				<tr>
@@ -192,27 +193,27 @@
 			</thead>
 			<tbody>
 				<tr>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">CORA_API_KEY</code></td>
+					<td><code>CORA_API_KEY</code></td>
 					<td>API key for the configured provider</td>
 					<td>Yes (unless using cora auth)</td>
 				</tr>
 				<tr>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">CORA_PROVIDER</code></td>
+					<td><code>CORA_PROVIDER</code></td>
 					<td>Override the LLM provider</td>
 					<td>No</td>
 				</tr>
 				<tr>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">CORA_MODEL</code></td>
+					<td><code>CORA_MODEL</code></td>
 					<td>Override the model name</td>
 					<td>No</td>
 				</tr>
 				<tr>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">CORA_BASE_URL</code></td>
+					<td><code>CORA_BASE_URL</code></td>
 					<td>Override the API base URL</td>
 					<td>No</td>
 				</tr>
 				<tr>
-					<td><code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">CORA_CONFIG</code></td>
+					<td><code>CORA_CONFIG</code></td>
 					<td>Path to alternative config file</td>
 					<td>No</td>
 				</tr>
@@ -221,33 +222,33 @@
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Working with Monorepos</h2>
 	<p>cora works well in monorepo setups. Use include patterns to limit review scope to specific packages:</p>
 
 	<div class="docs-terminal">
 		<div class="terminal-bar">
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--destructive);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--warning);"></span>
-			<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--success);"></span>
+			<span class="terminal-dot-red"></span>
+			<span class="terminal-dot-yellow"></span>
+			<span class="terminal-dot-green"></span>
 		</div>
 		<div class="terminal-body">
-			<div><span style="color: var(--muted-foreground);"># Review only the backend package</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora review</span> <span style="color: oklch(0.75 0.15 240);">--staged</span> <span style="color: oklch(0.75 0.15 240);">--include</span> <span style="color: var(--success);">"packages/backend/**"</span></div>
+			<div><span class="syntax-comment"># Review only the backend package</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--staged</span> <span class="syntax-flag">--include</span> <span class="syntax-string">"packages/backend/**"</span></div>
 			<div></div>
-			<div><span style="color: var(--muted-foreground);"># Exclude test and generated files</span></div>
-			<div><span style="color: var(--muted-foreground);">$</span> <span style="color: var(--accent);">cora review</span> <span style="color: oklch(0.75 0.15 240);">--staged</span> <span style="color: oklch(0.75 0.15 240);">--exclude</span> <span style="color: var(--success);">"**/*.test.ts"</span> <span style="color: oklch(0.75 0.15 240);">--exclude</span> <span style="color: var(--success);">"**/generated/**"</span></div>
+			<div><span class="syntax-comment"># Exclude test and generated files</span></div>
+			<div><span class="syntax-cmd">$</span> <span class="syntax-highlight">cora review</span> <span class="syntax-flag">--staged</span> <span class="syntax-flag">--exclude</span> <span class="syntax-string">"**/*.test.ts"</span> <span class="syntax-flag">--exclude</span> <span class="syntax-string">"**/generated/**"</span></div>
 		</div>
 	</div>
 
-	<p>Alternatively, set include/exclude patterns in <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">.cora.yaml</code> for persistent configuration.</p>
+	<p>Alternatively, set include/exclude patterns in <code>.cora.yaml</code> for persistent configuration.</p>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Exit Codes</h2>
 	<p>cora uses standard exit codes for scripting and CI integration:</p>
 
-	<div style="overflow-x: auto;">
+	<div class="overflow-x-auto">
 		<table class="compare-table">
 			<thead>
 				<tr>
@@ -258,22 +259,22 @@
 			</thead>
 			<tbody>
 				<tr>
-					<td><code style="color: var(--success); font-family: var(--font-mono); font-size: 13px;">0</code></td>
+					<td><code class="syntax-success">0</code></td>
 					<td>No issues found</td>
 					<td>Pass</td>
 				</tr>
 				<tr>
-					<td><code style="color: var(--warning); font-family: var(--font-mono); font-size: 13px;">1</code></td>
+					<td><code class="syntax-warning">1</code></td>
 					<td>Issues found</td>
 					<td>Fail (warning/error)</td>
 				</tr>
 				<tr>
-					<td><code style="color: var(--destructive); font-family: var(--font-mono); font-size: 13px;">2</code></td>
+					<td><code class="syntax-error">2</code></td>
 					<td>Review blocked</td>
 					<td>Fail (auth/config error)</td>
 				</tr>
 				<tr>
-					<td><code style="color: var(--destructive); font-family: var(--font-mono); font-size: 13px;">3</code></td>
+					<td><code class="syntax-error">3</code></td>
 					<td>Authentication error</td>
 					<td>Fail (missing API key)</td>
 				</tr>
@@ -282,28 +283,29 @@
 	</div>
 </div>
 
-<div class="docs-section scroll-reveal" style="margin-top: 3rem;">
+<div class="docs-section scroll-reveal">
 	<h2>Tips</h2>
-	<div style="display: flex; flex-direction: column; gap: 0.75rem;">
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent);">&#8226;</span>
-			Use <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">--staged</code> as a pre-commit hook for the fastest feedback loop
+	<div class="flex flex-col gap-3">
+		<div class="docs-term-item">
+			<span class="text-[var(--accent)]">&#8226;</span>
+			Use <code>--staged</code> as a pre-commit hook for the fastest feedback loop
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent);">&#8226;</span>
-			Combine <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">--format json</code> with <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">--branch main</code> in CI pipelines
+		<div class="docs-term-item">
+			<span class="text-[var(--accent)]">&#8226;</span>
+			Combine <code>--format json</code> with <code>--branch main</code> in CI pipelines
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent);">&#8226;</span>
-			Use <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">--incremental</code> for large codebases — only changed files are analyzed
+		<div class="docs-term-item">
+			<span class="text-[var(--accent)]">&#8226;</span>
+			Use <code>--incremental</code> for large codebases — only changed files are analyzed
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent);">&#8226;</span>
-			Set <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">custom_prompt</code> to match your team's coding standards
+		<div class="docs-term-item">
+			<span class="text-[var(--accent)]">&#8226;</span>
+			Set <code>custom_prompt</code> to match your team's coding standards
 		</div>
-		<div style="font-size: 14px; color: var(--muted-foreground); display: flex; gap: 0.5rem;">
-			<span style="color: var(--accent);">&#8226;</span>
-			Use <code style="color: var(--accent); font-family: var(--font-mono); font-size: 13px;">cora auth login</code> to store API keys securely instead of environment variables
+		<div class="docs-term-item">
+			<span class="text-[var(--accent)]">&#8226;</span>
+			Use <code>cora auth login</code> to store API keys securely instead of environment variables
 		</div>
 	</div>
 </div>
+</div>