diff --git a/package-lock.json b/package-lock.json
index df049bd..af6afb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,7 @@
 			"name": "openboot-web",
 			"version": "0.0.1",
 			"dependencies": {
-				"@cf-wasm/resvg": "^0.3.3",
-				"@codemirror/commands": "^6.10.3",
-				"@codemirror/language": "^6.12.2",
-				"@codemirror/legacy-modes": "^6.5.2",
-				"@codemirror/state": "^6.6.0",
-				"@codemirror/theme-one-dark": "^6.1.3",
-				"@codemirror/view": "^6.43.0"
+				"@cf-wasm/resvg": "^0.3.3"
 			},
 			"devDependencies": {
 				"@cloudflare/vitest-pool-workers": "^0.16.6",
@@ -252,74 +246,6 @@
 			"dev": true,
 			"license": "MIT OR Apache-2.0"
 		},
-		"node_modules/@codemirror/commands": {
-			"version": "6.10.3",
-			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.3.tgz",
-			"integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
-			"license": "MIT",
-			"dependencies": {
-				"@codemirror/language": "^6.0.0",
-				"@codemirror/state": "^6.6.0",
-				"@codemirror/view": "^6.27.0",
-				"@lezer/common": "^1.1.0"
-			}
-		},
-		"node_modules/@codemirror/language": {
-			"version": "6.12.2",
-			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.2.tgz",
-			"integrity": "sha512-jEPmz2nGGDxhRTg3lTpzmIyGKxz3Gp3SJES4b0nAuE5SWQoKdT5GoQ69cwMmFd+wvFUhYirtDTr0/DRHpQAyWg==",
-			"license": "MIT",
-			"dependencies": {
-				"@codemirror/state": "^6.0.0",
-				"@codemirror/view": "^6.23.0",
-				"@lezer/common": "^1.5.0",
-				"@lezer/highlight": "^1.0.0",
-				"@lezer/lr": "^1.0.0",
-				"style-mod": "^4.0.0"
-			}
-		},
-		"node_modules/@codemirror/legacy-modes": {
-			"version": "6.5.2",
-			"resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.5.2.tgz",
-			"integrity": "sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==",
-			"license": "MIT",
-			"dependencies": {
-				"@codemirror/language": "^6.0.0"
-			}
-		},
-		"node_modules/@codemirror/state": {
-			"version": "6.6.0",
-			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz",
-			"integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@marijn/find-cluster-break": "^1.0.0"
-			}
-		},
-		"node_modules/@codemirror/theme-one-dark": {
-			"version": "6.1.3",
-			"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
-			"integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
-			"license": "MIT",
-			"dependencies": {
-				"@codemirror/language": "^6.0.0",
-				"@codemirror/state": "^6.0.0",
-				"@codemirror/view": "^6.0.0",
-				"@lezer/highlight": "^1.0.0"
-			}
-		},
-		"node_modules/@codemirror/view": {
-			"version": "6.43.0",
-			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.0.tgz",
-			"integrity": "sha512-V7ZCLQO3Jus9hzh2jVCCPW3mO4IBMr43O37PqSUYautJSnnJF41YlgLw21x0fLJTYvJ+Vkm6Gp+qKGH9pltgXA==",
-			"license": "MIT",
-			"dependencies": {
-				"@codemirror/state": "^6.6.0",
-				"crelt": "^1.0.6",
-				"style-mod": "^4.1.0",
-				"w3c-keyname": "^2.2.4"
-			}
-		},
 		"node_modules/@cspotcode/source-map-support": {
 			"version": "0.8.1",
 			"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -1568,36 +1494,6 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
-		"node_modules/@lezer/common": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
-			"integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==",
-			"license": "MIT"
-		},
-		"node_modules/@lezer/highlight": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
-			"integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
-			"license": "MIT",
-			"dependencies": {
-				"@lezer/common": "^1.3.0"
-			}
-		},
-		"node_modules/@lezer/lr": {
-			"version": "1.4.8",
-			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
-			"integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
-			"license": "MIT",
-			"dependencies": {
-				"@lezer/common": "^1.0.0"
-			}
-		},
-		"node_modules/@marijn/find-cluster-break": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
-			"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
-			"license": "MIT"
-		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.29",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -3060,12 +2956,6 @@
 				"node": ">= 0.6"
 			}
 		},
-		"node_modules/crelt": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
-			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
-			"license": "MIT"
-		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5108,12 +4998,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/style-mod": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
-			"integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
-			"license": "MIT"
-		},
 		"node_modules/supports-color": {
 			"version": "10.2.2",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
@@ -5718,12 +5602,6 @@
 				}
 			}
 		},
-		"node_modules/w3c-keyname": {
-			"version": "2.2.8",
-			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
-			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
-			"license": "MIT"
-		},
 		"node_modules/whatwg-mimetype": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
diff --git a/package.json b/package.json
index 4161c1e..e82bb9d 100644
--- a/package.json
+++ b/package.json
@@ -52,12 +52,6 @@
 		"wrangler": "^4.61.1"
 	},
 	"dependencies": {
-		"@cf-wasm/resvg": "^0.3.3",
-		"@codemirror/commands": "^6.10.3",
-		"@codemirror/language": "^6.12.2",
-		"@codemirror/legacy-modes": "^6.5.2",
-		"@codemirror/state": "^6.6.0",
-		"@codemirror/theme-one-dark": "^6.1.3",
-		"@codemirror/view": "^6.43.0"
+		"@cf-wasm/resvg": "^0.3.3"
 	}
 }
diff --git a/src/lib/components/ConfigDetail.svelte b/src/lib/components/ConfigDetail.svelte
index 2afabdc..d72a9a7 100644
--- a/src/lib/components/ConfigDetail.svelte
+++ b/src/lib/components/ConfigDetail.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getCatalogItem, CATALOG_CATEGORIES } from '$lib/macos-prefs-catalog';
+	import { getCatalogItem } from '$lib/macos-prefs-catalog';
 	import ShareModal from '$lib/components/ShareModal.svelte';
 	import MacOSPreferencesDisplay from '$lib/components/MacOSPreferencesDisplay.svelte';
 
@@ -14,64 +14,42 @@
 		packageDescriptions: Record<string, string>;
 	} = $props();
 
-	let copied = $state(false);
 	let showShareModal = $state(false);
+	let curlCopied = $state(false);
 	let forking = $state(false);
 	let forkError = $state('');
-	let showAllApps = $state(false);
-	let showAllCli = $state(false);
-
-	function getInstallCommand() {
-		if (config.alias) {
-			return `openboot install ${config.alias}`;
-		}
-		return `openboot install ${configUser.username}/${config.slug}`;
-	}
-
-	function copyCommand() {
-		navigator.clipboard.writeText(getInstallCommand());
-		copied = true;
-		setTimeout(() => (copied = false), 2000);
-	}
 
 	function getCurlCommand() {
-		if (config.alias) {
-			return `curl -fsSL openboot.dev/${config.alias} | bash`;
-		}
+		if (config.alias) return `curl -fsSL openboot.dev/${config.alias} | bash`;
 		return `curl -fsSL openboot.dev/${configUser.username}/${config.slug} | bash`;
 	}
 
-	let curlCopied = $state(false);
-
-	function copyCurlCommand() {
-		navigator.clipboard.writeText(getCurlCommand());
-		curlCopied = true;
-		setTimeout(() => (curlCopied = false), 2000);
+	function getInstallCommand() {
+		if (config.alias) return `openboot install ${config.alias}`;
+		return `openboot install ${configUser.username}/${config.slug}`;
 	}
 
 	function getShareUrl() {
-		if (config.alias) {
-			return `https://openboot.dev/${config.alias}`;
-		}
+		if (config.alias) return `https://openboot.dev/${config.alias}`;
 		return `https://openboot.dev/${configUser.username}/${config.slug}`;
 	}
 
-	function openShareModal() {
-		showShareModal = true;
+	function copyCurl() {
+		navigator.clipboard.writeText(getCurlCommand());
+		curlCopied = true;
+		setTimeout(() => (curlCopied = false), 1600);
 	}
 
-	async function forkConfig() {
+	async function useThisConfig() {
 		forking = true;
 		forkError = '';
-
 		try {
 			const authCheck = await fetch('/api/user');
 			if (!authCheck.ok) {
 				window.location.href = `/login?return_to=${encodeURIComponent(window.location.pathname)}`;
 				return;
 			}
-
-			const forkResponse = await fetch('/api/configs', {
+			const res = await fetch('/api/configs', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
 				body: JSON.stringify({
@@ -87,16 +65,14 @@
 					forked_from: config.id
 				})
 			});
-
-			if (!forkResponse.ok) {
-				const error = await forkResponse.json();
-				forkError = error.error || 'Failed to fork config';
+			if (!res.ok) {
+				const error = await res.json();
+				forkError = error.error || 'Failed to use config';
 				forking = false;
 				return;
 			}
-
 			goto('/dashboard');
-		} catch (err) {
+		} catch {
 			forkError = 'Network error. Please try again.';
 			forking = false;
 		}
@@ -105,7 +81,6 @@
 	function getPackageUrl(name: string, type: 'formula' | 'cask' | 'npm'): string {
 		if (type === 'npm') return `https://www.npmjs.com/package/${name}`;
 		if (type === 'cask') return `https://formulae.brew.sh/cask/${name}`;
-		// Tap formulae like "cirruslabs/cli/tart" link to the tap repo
 		if (name.includes('/')) {
 			const parts = name.split('/');
 			return `https://github.com/${parts[0]}/homebrew-${parts[1]}`;
@@ -113,49 +88,87 @@
 		return `https://formulae.brew.sh/formula/${name}`;
 	}
 
-	/** Extract display name from a package name. "cirruslabs/cli/tart" → "tart" */
+	/** "cirruslabs/cli/tart" → "tart" */
 	function displayName(name: string): string {
-		if (name.includes('/')) {
-			const parts = name.split('/');
-			return parts[parts.length - 1];
-		}
+		if (name.includes('/')) return name.split('/').pop() as string;
 		return name;
 	}
 
-	function getAppGradient(index: number): string {
-		const gradients = [
-			'linear-gradient(135deg, #22c55e, #3b82f6)',
-			'linear-gradient(135deg, #a855f7, #ec4899)',
-			'linear-gradient(135deg, #f97316, #ef4444)',
-			'linear-gradient(135deg, #06b6d4, #3b82f6)',
-			'linear-gradient(135deg, #eab308, #f97316)',
-			'linear-gradient(135deg, #8b5cf6, #6366f1)',
-			'linear-gradient(135deg, #10b981, #06b6d4)',
-			'linear-gradient(135deg, #f43f5e, #ec4899)',
-		];
-		return gradients[index % gradients.length];
+	function formatDate(value: unknown): string {
+		if (value == null) return '';
+		let ms: number;
+		if (typeof value === 'number') ms = value < 1e12 ? value * 1000 : value;
+		else ms = Date.parse(String(value));
+		if (Number.isNaN(ms)) return '';
+		return new Date(ms).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
 	}
 
 	function escapeHtml(str: string): string {
 		return str
 			.replace(/&/g, '&amp;')
 			.replace(/</g, '&lt;')
-			.replace(/>/g, '&gt;')
-			.replace(/"/g, '&quot;')
-			.replace(/'/g, '&#039;');
-	}
+			.replace(/>/g, '&gt;');
+	}
+
+	/** Color comments muted and the leading command token accent, comp-style. */
+	function scriptLine(line: string): string {
+		const esc = escapeHtml(line);
+		if (/^\s*#/.test(line)) return `<span class="cmt">${esc}</span>`;
+		return esc.replace(/^(\s*)([\w./-]+)/, (_m, sp, cmd) => `${sp}<span class="cmd">${cmd}</span>`);
+	}
+
+	const dotfilesLabel = $derived(
+		config.dotfiles_repo ? config.dotfiles_repo.replace(/^https?:\/\//, '').replace(/\.git$/, '') : ''
+	);
+
+	const configPkgs: { name: string; type: string }[] = $derived(
+		Array.isArray(config.packages)
+			? config.packages.map((p: any) => (typeof p === 'string' ? { name: p, type: 'formula' } : p))
+			: []
+	);
+
+	const configCli = $derived(
+		configPkgs.filter((p) => p.type !== 'cask' && p.type !== 'npm' && p.type !== 'tap')
+	);
+	const configApps = $derived(configPkgs.filter((p) => p.type === 'cask'));
+	const configNpm = $derived(configPkgs.filter((p) => p.type === 'npm'));
+	const configTaps = $derived(configPkgs.filter((p) => p.type === 'tap'));
+
+	// Package "DNA" — one segment per package, opacity ramping within each group.
+	type Seg = { color: string; opacity: number };
+	const dna = $derived.by((): Seg[] => {
+		const groups: [number, string][] = [
+			[configCli.length, 'var(--accent)'],
+			[configApps.length, 'var(--amber)'],
+			[configNpm.length, '#7aa2e3']
+		];
+		const segs: Seg[] = [];
+		for (const [n, color] of groups) {
+			for (let i = 0; i < n; i++) {
+				segs.push({ color, opacity: 0.55 + (i / Math.max(n - 1, 1)) * 0.45 });
+			}
+		}
+		return segs;
+	});
 
-	function highlightBash(code: string): string {
-		return escapeHtml(code)
-			.replace(/^(#.*)$/gm, '<span class="comment">$1</span>')
-			.replace(/\b(if|then|else|elif|fi|for|while|do|done|case|esac|function|return|exit|echo|export|source|cd|mkdir|chmod|chown|sudo|brew|npm|git|curl|wget)\b/g, '<span class="keyword">$1</span>')
-			.replace(/(&#039;|&quot;)(.*?)\1/g, '<span class="string">$1$2$1</span>')
-			.replace(/(\$\w+|\$\{[^}]+\})/g, '<span class="variable">$1</span>');
-	}
+	const dnaLegend = $derived(
+		[
+			{ n: configCli.length, label: configCli.length === 1 ? 'formula' : 'formulae', color: 'var(--accent)' },
+			{ n: configApps.length, label: configApps.length === 1 ? 'cask' : 'casks', color: 'var(--amber)' },
+			{ n: configNpm.length, label: 'npm', color: '#7aa2e3' }
+		].filter((x) => x.n > 0)
+	);
 
-	const snapshot = $derived(config.snapshot || {});
+	const visibility = $derived((config.visibility || 'public') as string);
 
+	const snapshot = $derived(config.snapshot || {});
 	const macosPrefs = $derived(snapshot.macos_prefs || []);
+	const shell = $derived(snapshot.shell || {});
+	const git = $derived(snapshot.git || {});
+	const devToolsRaw = $derived(snapshot.dev_tools || []);
+	const devTools = $derived(
+		devToolsRaw.map((t: any) => (typeof t === 'string' ? t : t?.name || String(t)))
+	);
 
 	const prefsByCategory = $derived.by(() => {
 		const map: Record<string, { pref: any; catalogItem: ReturnType<typeof getCatalogItem> }[]> = {};
@@ -167,1101 +180,691 @@
 		}
 		return map;
 	});
-
 	const prefCategoryNames = $derived(Object.keys(prefsByCategory));
-	const shell = $derived(snapshot.shell || {});
-	const git = $derived(snapshot.git || {});
-	const devToolsRaw = $derived(snapshot.dev_tools || []);
-	const devTools = $derived(devToolsRaw.map((t: any) => typeof t === 'string' ? t : (t?.name || String(t))));
-
-	const configPkgs: { name: string; type: string }[] = $derived(Array.isArray(config.packages)
-		? config.packages.map((p: any) => (typeof p === 'string' ? { name: p, type: 'formula' } : p))
-		: []);
-
-	const configCli = $derived(configPkgs.filter((p: any) => p.type !== 'cask' && p.type !== 'npm' && p.type !== 'tap'));
-	const configApps = $derived(configPkgs.filter((p: any) => p.type === 'cask'));
-	const configNpm = $derived(configPkgs.filter((p: any) => p.type === 'npm'));
-
-	const formulae = $derived(configCli.map((p: any) => p.name));
-	const casks = $derived(configApps.map((p: any) => p.name));
-	const configTaps = $derived(configPkgs.filter((p: any) => p.type === 'tap'));
-	const taps = $derived(configTaps.map((p: any) => p.name));
-
-	const displayedApps = $derived(showAllApps ? casks : casks.slice(0, 12));
-	const displayedCli = $derived(showAllCli ? formulae : formulae.slice(0, 24));
 </script>
 
 <div class="page">
-	<section class="hero">
-		<button class="share-btn" onclick={openShareModal}>
-			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
-			Share
-		</button>
-
-		<div class="hero-meta">
-			{#if configUser.avatar_url}
-				<img src={configUser.avatar_url} alt={configUser.username} class="avatar" />
-			{:else}
-				<div class="avatar-placeholder">{configUser.username.charAt(0).toUpperCase()}</div>
-			{/if}
-			<div class="meta-text">
-				<span class="username">@{configUser.username}</span>
-				<span class="sep">/</span>
-				<span class="slug">{config.slug}</span>
-			</div>
+	<div class="container">
+		<div class="topbar">
+			<a href="/explore" class="back">
+				<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5" /><path d="m12 19-7-7 7-7" /></svg>
+				Back to explore
+			</a>
+			<button class="share" onclick={() => (showShareModal = true)}>
+				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><line x1="8.59" y1="13.51" x2="15.42" y2="17.49" /><line x1="15.41" y1="6.51" x2="8.59" y2="10.49" /></svg>
+				Share
+			</button>
 		</div>
 
-		<h1 class="title">{config.name}</h1>
-		{#if config.description}
-			<p class="desc">{config.description}</p>
-		{/if}
-
-		<div class="install-box">
-			<div class="terminal">
-				<code>$ {getCurlCommand()}</code>
-				<button class="copy" onclick={copyCurlCommand}>
-					{#if curlCopied}
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+		<div class="grid">
+			<!-- main -->
+			<div class="main">
+				<div class="byline">
+					{#if configUser.avatar_url}
+						<img src={configUser.avatar_url} alt={configUser.username} class="avatar" />
 					{:else}
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+						<span class="avatar avatar-ph">{configUser.username.charAt(0).toLowerCase()}</span>
 					{/if}
-				</button>
-			</div>
-			<div class="curl-alt">
-				<span class="curl-label">Already have OpenBoot?</span>
-				<code>{getInstallCommand()}</code>
-				<button class="copy copy-curl" onclick={copyCommand}>
-					{#if copied}
-						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-					{:else}
-						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+					<a href="/{configUser.username}" class="user">@{configUser.username}</a>
+					<span class="vis-badge" class:public={visibility === 'public'}>{visibility}</span>
+				</div>
+
+				<h1 class="title">{config.name}</h1>
+				{#if config.description}
+					<p class="desc">{config.description}</p>
+				{/if}
+
+				<div class="meta">
+					<span class="meta-item">
+						<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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
+						<span class="strong">{config.install_count || 0}</span> installs
+					</span>
+					{#if formatDate(config.updated_at)}
+						<span>updated {formatDate(config.updated_at)}</span>
 					{/if}
-				</button>
-			</div>
-		<div class="install-actions">
-				<button class="share-inline" onclick={openShareModal}>
-					<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
-					Share
-				</button>
-				<button class="fork" onclick={forkConfig} disabled={forking}>
-					<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg>
-					{forking ? 'Forking...' : 'Fork to Dashboard'}
-				</button>
-			</div>
-			{#if forkError}
-				<div class="error">{forkError}</div>
-			{/if}
-		</div>
+					{#if config.base_preset}
+						<span>base preset <span class="strong">{config.base_preset}</span></span>
+					{/if}
+				</div>
 
-		<div class="stats">
-			<div class="stat">
-				<div class="stat-val">{casks.length}</div>
-				<div class="stat-lbl">Apps</div>
-			</div>
-			<div class="stat">
-				<div class="stat-val">{formulae.length}</div>
-				<div class="stat-lbl">CLI</div>
+				{#if dna.length > 0}
+					<div class="dna">
+						{#each dna as seg}
+							<span style="flex:1; height:100%; background:{seg.color}; opacity:{seg.opacity};"></span>
+						{/each}
+					</div>
+					<div class="dna-legend">
+						{#each dnaLegend as l}
+							<span><span class="swatch" style="background:{l.color};"></span>{l.n} {l.label}</span>
+						{/each}
+					</div>
+				{/if}
 			</div>
-			{#if devTools.length > 0}
-				<div class="stat">
-					<div class="stat-val">{devTools.length}</div>
-					<div class="stat-lbl">Dev</div>
+
+			<!-- rail -->
+			<div class="rail">
+				<div class="rail-card">
+					<div class="rail-label">Install this setup</div>
+					<button class="curl-btn" onclick={copyCurl}>
+						<code><span class="prompt">$</span> {getCurlCommand()}</code>
+						<span class="curl-copy">{curlCopied ? '✓ copied' : 'copy'}</span>
+					</button>
+					<button class="use" onclick={useThisConfig} disabled={forking}>
+						{forking ? 'Working…' : 'Use this config'}
+					</button>
+					{#if forkError}
+						<p class="fork-error">{forkError}</p>
+					{/if}
+					<p class="rail-hint">
+						Already have OpenBoot?<br /><code>{getInstallCommand()}</code>
+					</p>
 				</div>
-			{/if}
-			{#if macosPrefs.length > 0}
-				<div class="stat">
-					<div class="stat-val">{macosPrefs.length}</div>
-					<div class="stat-lbl">Prefs</div>
+
+				<div class="rail-card meta-card">
+					<div class="kv"><span class="k">Visibility</span><span class="v cap">{visibility}</span></div>
+					{#if config.base_preset}
+						<div class="kv"><span class="k">Base preset</span><span class="v">{config.base_preset}</span></div>
+					{/if}
+					{#if config.dotfiles_repo}
+						<div class="kv"><span class="k">Dotfiles</span><a class="v link" href={config.dotfiles_repo} target="_blank" rel="noopener noreferrer">{dotfilesLabel}</a></div>
+					{/if}
+					<div class="kv"><span class="k">macOS prefs</span><span class="v">{macosPrefs.length} applied</span></div>
 				</div>
-			{/if}
-			<div class="stat">
-				<div class="stat-val">{config.install_count || 0}</div>
-				<div class="stat-lbl">Installs</div>
 			</div>
 		</div>
-	</section>
-
-	<main class="content">
-		{#if casks.length > 0}
-			<section class="section">
-				<h2 class="section-title">📱 Applications</h2>
-				<div class="app-grid">
-					{#each displayedApps as app, i}
-						<a href={getPackageUrl(app, 'cask')} target="_blank" rel="noopener noreferrer" class="app-card">
-							<div class="app-icon" style="background: {getAppGradient(i)}">
-								{displayName(app).charAt(0).toUpperCase()}
-							</div>
-							<div class="app-name">{displayName(app)}</div>
-						</a>
-					{/each}
-				</div>
-				{#if casks.length > 12}
-					<button class="show-more" onclick={() => showAllApps = !showAllApps}>
-						{showAllApps ? 'Show less' : `Show all ${casks.length} apps →`}
-					</button>
-				{/if}
-			</section>
-		{/if}
-
-		{#if devTools.length > 0}
-			<section class="section">
-				<h2 class="section-title">⚙️ Development Tools</h2>
-				<div class="dev-grid">
-					{#each devTools as tool, i}
-						<div class="dev-card">
-							<div class="dev-icon" style="background: {getAppGradient(i + 2)}">
-								{tool.charAt(0).toUpperCase()}
-							</div>
-							<div class="dev-name">{tool}</div>
-						</div>
-					{/each}
-				</div>
-			</section>
-		{/if}
-
-		{#if formulae.length > 0}
-			<section class="section">
-				<h2 class="section-title">⌘ CLI Tools</h2>
-				<div class="cli-tags">
-					{#each displayedCli as pkg}
-						<a href={getPackageUrl(pkg, 'formula')} target="_blank" rel="noopener noreferrer" class="cli-tag">{displayName(pkg)}</a>
-					{/each}
-				</div>
-				{#if formulae.length > 24}
-					<button class="show-more" onclick={() => showAllCli = !showAllCli}>
-						{showAllCli ? 'Show less' : `Show all ${formulae.length} tools →`}
-					</button>
-				{/if}
-			</section>
-		{/if}
-
-		{#if configNpm.length > 0}
-			<section class="section">
-				<h2 class="section-title">📦 NPM Packages</h2>
-				<div class="cli-tags">
-					{#each configNpm as pkg}
-						<a href={getPackageUrl(pkg.name, 'npm')} target="_blank" rel="noopener noreferrer" class="cli-tag">{pkg.name}</a>
-					{/each}
-				</div>
-			</section>
-		{/if}
-
-		<section class="section">
-			<h2 class="section-title">🔧 Configuration</h2>
-
-			{#if config.dotfiles_repo}
-				<details class="detail-card" open>
-					<summary>
-						<span class="detail-icon">📁</span>
-						<span class="detail-title">Dotfiles Repository</span>
-					</summary>
-					<div class="detail-content">
-						<a href={config.dotfiles_repo} target="_blank" rel="noopener noreferrer" class="link">
-							{config.dotfiles_repo}
-							<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="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
-						</a>
-						<p class="detail-desc">Deployed automatically via GNU Stow</p>
+
+		<div class="sections">
+			{#if configCli.length > 0}
+				<section class="pkg-section">
+					<h3 class="pkg-head"><span class="swatch" style="background:var(--accent);"></span>Formulae <span class="count">{configCli.length}</span></h3>
+					<div class="pkg-grid">
+						{#each configCli as p}
+							<a class="pkg-card" href={getPackageUrl(p.name, 'formula')} target="_blank" rel="noopener noreferrer">
+								<span class="pkg-name accent">{displayName(p.name)}</span>
+								{#if packageDescriptions[p.name]}<span class="pkg-desc">{packageDescriptions[p.name]}</span>{/if}
+							</a>
+						{/each}
 					</div>
-				</details>
+				</section>
 			{/if}
 
-			{#if shell.default || shell.oh_my_zsh}
-				<details class="detail-card">
-					<summary>
-						<span class="detail-icon">🐚</span>
-						<span class="detail-title">Shell Setup</span>
-					</summary>
-					<div class="detail-content">
-						<div class="kv-grid">
-							{#if shell.default}
-								<div class="kv">
-									<span class="k">Shell</span>
-									<span class="v">{shell.default}</span>
-								</div>
-							{/if}
-							{#if shell.oh_my_zsh}
-								<div class="kv">
-									<span class="k">Oh My Zsh</span>
-									<span class="v badge">Installed</span>
-								</div>
-							{/if}
-							{#if shell.theme}
-								<div class="kv">
-									<span class="k">Theme</span>
-									<span class="v">{shell.theme}</span>
-								</div>
-							{/if}
-						</div>
-						{#if shell.plugins && shell.plugins.length > 0}
-							<div class="plugins">
-								<div class="plugins-label">Plugins ({shell.plugins.length})</div>
-								<div class="cli-tags">
-									{#each shell.plugins as plugin}
-										<span class="cli-tag">{plugin}</span>
-									{/each}
-								</div>
-							</div>
-						{/if}
+			{#if configApps.length > 0}
+				<section class="pkg-section">
+					<h3 class="pkg-head"><span class="swatch" style="background:var(--amber);"></span>Casks <span class="count">{configApps.length}</span></h3>
+					<div class="pkg-grid">
+						{#each configApps as p}
+							<a class="pkg-card" href={getPackageUrl(p.name, 'cask')} target="_blank" rel="noopener noreferrer">
+								<span class="pkg-name amber">{displayName(p.name)}</span>
+								{#if packageDescriptions[p.name]}<span class="pkg-desc">{packageDescriptions[p.name]}</span>{/if}
+							</a>
+						{/each}
 					</div>
-				</details>
+				</section>
 			{/if}
 
-			{#if Object.keys(git).length > 0}
-				<details class="detail-card">
-					<summary>
-						<span class="detail-icon">🔀</span>
-						<span class="detail-title">Git Configuration</span>
-					</summary>
-					<div class="detail-content">
-						<div class="kv-grid">
-							{#each Object.entries(git) as [key, value]}
-								<div class="kv">
-									<span class="k">{key}</span>
-									<span class="v">{value}</span>
-								</div>
-							{/each}
-						</div>
+			{#if configNpm.length > 0}
+				<section class="pkg-section">
+					<h3 class="pkg-head"><span class="swatch" style="background:#7aa2e3;"></span>NPM globals <span class="count">{configNpm.length}</span></h3>
+					<div class="chips">
+						{#each configNpm as p}
+							<a class="chip npm" href={getPackageUrl(p.name, 'npm')} target="_blank" rel="noopener noreferrer">{p.name}</a>
+						{/each}
 					</div>
-				</details>
+				</section>
 			{/if}
 
-		{#if config.custom_script}
-			<details class="detail-card">
-				<summary>
-					<span class="detail-icon">⚡</span>
-					<span class="detail-title">Custom Installation Script</span>
-				</summary>
-				<div class="code-block">
-					<div class="code-header">
-						<span>custom-script.sh</span>
-						<button onclick={(e: MouseEvent) => {
-							navigator.clipboard.writeText(config.custom_script || '');
-							const btn = e.currentTarget as HTMLButtonElement;
-							if (btn) {
-								btn.textContent = 'Copied!';
-								setTimeout(() => btn.textContent = 'Copy', 2000);
-							}
-						}}>Copy</button>
-						</div>
-					<pre><code>{@html highlightBash(config.custom_script)}</code></pre>
+			{#if configTaps.length > 0}
+				<section class="pkg-section">
+					<h3 class="pkg-head"><span class="swatch" style="background:var(--text-muted);"></span>Homebrew taps <span class="count">{configTaps.length}</span></h3>
+					<div class="chips">
+						{#each configTaps as p}
+							<span class="chip">{p.name}</span>
+						{/each}
 					</div>
-				</details>
+				</section>
 			{/if}
-		</section>
-
-		{#if macosPrefs.length > 0}
-			<section class="section">
-				<h2 class="section-title">🍎 macOS Preferences</h2>
-				<MacOSPreferencesDisplay {prefsByCategory} {prefCategoryNames} />
-			</section>
-		{/if}
-
-		{#if taps.length > 0}
-			<section class="section">
-				<h2 class="section-title">📋 Additional</h2>
-				<details class="detail-card">
-					<summary>
-						<span class="detail-icon">🚰</span>
-						<span class="detail-title">Homebrew Taps ({taps.length})</span>
-					</summary>
-					<div class="detail-content">
-						<div class="tap-list">
-							{#each taps as tap}
-								<div class="tap-item">{tap}</div>
+
+			{#if config.custom_script}
+				<section class="pkg-section">
+					<h3 class="pkg-head">Custom script</h3>
+					<div class="term">
+						<div class="term-head">runs after packages install</div>
+						<div class="term-body">
+							{#each config.custom_script.split('\n') as line}
+								<div>{@html scriptLine(line)}</div>
 							{/each}
 						</div>
 					</div>
-				</details>
-			</section>
-		{/if}
-
-		<section class="cta">
-			<div class="cta-icon">✨</div>
-			<div class="cta-text">
-				<h3>Create Your Own Configuration</h3>
-				<p>Build and share your perfect dev environment in minutes</p>
-			</div>
-			<a href="/login?return_to=/dashboard" class="cta-btn">
-				Get Started
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
-			</a>
-		</section>
-	</main>
+				</section>
+			{/if}
+
+			{#if macosPrefs.length > 0}
+				<section class="pkg-section">
+					<h3 class="pkg-head">macOS preferences <span class="count">{macosPrefs.length}</span></h3>
+					<MacOSPreferencesDisplay {prefsByCategory} {prefCategoryNames} />
+				</section>
+			{/if}
+
+			{#if shell.default || shell.oh_my_zsh || Object.keys(git).length > 0}
+				<section class="pkg-section">
+					<h3 class="pkg-head">Shell &amp; Git</h3>
+					<div class="kv-list">
+						{#if shell.default}<div class="kv-row"><span class="k">Shell</span><span class="v">{shell.default}</span></div>{/if}
+						{#if shell.oh_my_zsh}<div class="kv-row"><span class="k">Oh My Zsh</span><span class="v accent">installed</span></div>{/if}
+						{#if shell.theme}<div class="kv-row"><span class="k">Theme</span><span class="v">{shell.theme}</span></div>{/if}
+						{#each Object.entries(git) as [key, value]}
+							<div class="kv-row"><span class="k">git.{key}</span><span class="v">{value}</span></div>
+						{/each}
+					</div>
+				</section>
+			{/if}
+
+			{#if devTools.length > 0}
+				<section class="pkg-section">
+					<h3 class="pkg-head">Dev tools <span class="count">{devTools.length}</span></h3>
+					<div class="chips">
+						{#each devTools as tool}
+							<span class="chip">{tool}</span>
+						{/each}
+					</div>
+				</section>
+			{/if}
+		</div>
+	</div>
 </div>
 
 <ShareModal bind:show={showShareModal} shareUrl={getShareUrl()} configName={config.name} />
 
 <style>
-	* {
-		box-sizing: border-box;
-	}
-
 	.page {
 		min-height: 100vh;
-		background: var(--bg-primary);
+		padding-top: 56px;
+		padding-bottom: 96px;
 	}
 
-	.hero {
-		position: relative;
-		max-width: 1000px;
+	.container {
+		max-width: 1160px;
 		margin: 0 auto;
-		padding: 120px 32px 80px;
-		text-align: center;
+		padding: 0 36px;
 	}
 
-	.share-btn {
-		position: absolute;
-		top: 20px;
-		right: 32px;
+	.topbar {
 		display: flex;
 		align-items: center;
-		gap: 6px;
-		padding: 10px 16px;
+		justify-content: space-between;
+		padding: 40px 0 20px;
+	}
+
+	.back {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 0.85rem;
+		color: var(--text-secondary);
+		transition: color 0.15s ease;
+	}
+
+	.back:hover {
+		color: var(--text-primary);
+	}
+
+	.share {
+		display: inline-flex;
+		align-items: center;
+		gap: 7px;
+		padding: 7px 12px;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border);
 		border-radius: 8px;
+		font-family: inherit;
+		font-size: 0.8rem;
 		color: var(--text-secondary);
-		font-size: 0.9rem;
-		font-weight: 500;
 		cursor: pointer;
-		transition: all 0.2s;
+		transition: border-color 0.15s ease, color 0.15s ease;
 	}
 
-	.share-btn:hover {
-		border-color: var(--accent);
-		color: var(--accent);
+	.share:hover {
+		border-color: var(--border-hover);
+		color: var(--text-primary);
 	}
 
-	.hero-meta {
+	.grid {
+		display: grid;
+		grid-template-columns: 1.35fr 1fr;
+		gap: 40px;
+		align-items: start;
+	}
+
+	/* ---------- main column ---------- */
+	.byline {
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		gap: 12px;
-		margin-bottom: 24px;
+		gap: 11px;
+		margin-bottom: 16px;
 	}
 
 	.avatar {
-		width: 64px;
-		height: 64px;
+		width: 34px;
+		height: 34px;
 		border-radius: 50%;
-		border: 2px solid var(--border);
+		flex-shrink: 0;
 	}
 
-	.avatar-placeholder {
-		width: 64px;
-		height: 64px;
-		border-radius: 50%;
-		border: 2px solid var(--border);
-		background: var(--bg-tertiary);
-		color: var(--accent);
+	.avatar-ph {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		font-weight: 600;
-		font-size: 1.5rem;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-hover);
+		font-size: 0.85rem;
+		color: var(--text-secondary);
 	}
 
-	.meta-text {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		font-size: 1.1rem;
+	.user {
+		font-size: 0.9rem;
+		color: var(--text-secondary);
+		transition: color 0.15s ease;
 	}
 
-	.username {
-		color: var(--accent);
-		font-weight: 600;
+	.user:hover {
+		color: var(--text-primary);
 	}
 
-	.sep {
+	.vis-badge {
+		font-size: 0.66rem;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
 		color: var(--text-muted);
+		border: 1px solid var(--border-hover);
+		border-radius: 5px;
+		padding: 2px 7px;
 	}
 
-	.slug {
-		font-family: 'JetBrains Mono', monospace;
-		color: var(--text-primary);
-		font-weight: 500;
+	.vis-badge.public {
+		color: var(--accent);
+		border-color: color-mix(in srgb, var(--accent) 40%, transparent);
 	}
 
 	.title {
-		font-size: clamp(2.2rem, 5vw, 3.2rem);
-		font-weight: 600;
-		margin: 0 0 16px;
-		line-height: 1.05;
-		letter-spacing: -0.035em;
+		font-size: 2.1rem;
+		font-weight: 500;
+		letter-spacing: -0.03em;
+		margin: 0 0 12px;
 		color: var(--text-primary);
 	}
 
 	.desc {
-		font-size: 1.2rem;
+		font-size: 0.95rem;
 		color: var(--text-secondary);
-		margin: 0 0 48px;
-		max-width: 700px;
-		margin-left: auto;
-		margin-right: auto;
-		line-height: 1.6;
-	}
-
-	.install-box {
-		max-width: 700px;
-		margin: 0 auto 48px;
+		line-height: 1.65;
+		max-width: 60ch;
+		margin: 0 0 20px;
 	}
 
-	.terminal {
+	.meta {
 		display: flex;
 		align-items: center;
-		gap: 12px;
-		background: var(--bg-tertiary);
-		border: 2px solid var(--border);
-		border-radius: 12px;
-		padding: 20px 24px;
-		margin-bottom: 12px;
-		transition: border-color 0.2s;
+		gap: 20px;
+		flex-wrap: wrap;
+		font-size: 0.82rem;
+		color: var(--text-muted);
+		margin-bottom: 18px;
 	}
 
-	.terminal:hover {
-		border-color: var(--accent);
+	.meta-item {
+		display: flex;
+		align-items: center;
+		gap: 6px;
 	}
 
-	.terminal code {
-		flex: 1;
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 1rem;
-		color: var(--accent);
-		font-weight: 500;
-		text-align: left;
+	.meta .strong {
+		color: var(--text-secondary);
 	}
 
-	.curl-alt {
+	.dna {
 		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin-bottom: 12px;
-		padding: 0 4px;
+		height: 8px;
+		gap: 2px;
+		max-width: 420px;
 	}
 
-	.curl-label {
-		font-size: 0.85rem;
-		color: var(--text-tertiary);
-		white-space: nowrap;
+	.dna span {
+		border-radius: 1px;
 	}
 
-	.curl-alt code {
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.85rem;
-		color: var(--text-secondary);
+	.dna-legend {
+		display: flex;
+		gap: 18px;
+		flex-wrap: wrap;
+		margin-top: 11px;
+		font-size: 0.74rem;
+		color: var(--text-muted);
 	}
 
-	.copy-curl {
-		padding: 6px 10px;
+	.swatch {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 2px;
+		margin-right: 5px;
+		vertical-align: middle;
 	}
 
-	.copy {
+	/* ---------- rail ---------- */
+	.rail {
+		position: sticky;
+		top: 80px;
 		display: flex;
-		align-items: center;
-		gap: 6px;
-		background: var(--accent);
-		color: var(--bg-primary);
-		border: none;
-		padding: 10px 18px;
-		border-radius: 8px;
-		font-size: 0.9rem;
-		font-weight: 600;
-		cursor: pointer;
-		transition: all 0.2s;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.rail-card {
+		background: var(--bg-secondary);
+		border: 1px solid var(--border);
+		border-radius: 14px;
+		padding: 20px;
 	}
 
-	.copy:hover {
-		background: var(--accent-hover);
-		transform: translateY(-2px);
+	.rail-label {
+		font-size: 0.74rem;
+		color: var(--text-muted);
+		margin-bottom: 11px;
 	}
 
-	.fork {
+	.curl-btn {
+		width: 100%;
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		gap: 8px;
-		padding: 10px 14px;
-		background: color-mix(in srgb, var(--bg-secondary) 85%, transparent);
-		border: 1px solid var(--border);
-		border-radius: 999px;
-		color: var(--text-secondary);
-		font-size: 0.85rem;
-		font-weight: 600;
+		gap: 10px;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-hover);
+		border-radius: 9px;
+		padding: 12px 13px;
 		cursor: pointer;
-		transition: all 0.2s ease;
-		white-space: nowrap;
+		font-family: inherit;
+		text-align: left;
+		margin-bottom: 12px;
+		transition: border-color 0.15s ease;
 	}
 
-	.install-actions {
-		display: flex;
-		justify-content: flex-end;
-		gap: 8px;
+	.curl-btn:hover {
+		border-color: var(--border-hover);
 	}
 
-	.share-inline {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 8px;
-		padding: 10px 14px;
-		background: color-mix(in srgb, var(--bg-secondary) 85%, transparent);
-		border: 1px solid var(--border);
-		border-radius: 999px;
+	.curl-btn code {
+		flex: 1;
+		min-width: 0;
+		font-family: inherit;
+		font-size: 0.74rem;
 		color: var(--text-secondary);
-		font-size: 0.85rem;
-		font-weight: 600;
-		cursor: pointer;
-		transition: all 0.2s ease;
 		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
-	.share-inline:hover {
-		border-color: var(--accent);
+	.curl-btn .prompt {
 		color: var(--accent);
-		background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
 	}
 
-	.fork:hover:not(:disabled) {
-		border-color: var(--accent);
+	.curl-copy {
+		flex-shrink: 0;
+		font-size: 0.68rem;
 		color: var(--accent);
-		background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
 	}
 
-	.fork:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	.error {
-		margin-top: 12px;
+	.use {
+		width: 100%;
 		padding: 12px;
-		background: rgba(239, 68, 68, 0.1);
-		border: 1px solid rgba(239, 68, 68, 0.3);
-		border-radius: 8px;
-		color: #ef4444;
-		font-size: 0.9rem;
+		background: var(--accent);
+		color: var(--bg-primary);
+		border: none;
+		border-radius: 9px;
+		font-family: inherit;
+		font-size: 0.86rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: filter 0.15s ease, transform 0.15s ease;
 	}
 
-	.stats {
-		display: flex;
-		justify-content: center;
-		gap: 32px;
-		flex-wrap: wrap;
+	.use:hover:not(:disabled) {
+		filter: brightness(1.08);
+		transform: translateY(-1px);
 	}
 
-	.stat {
-		text-align: center;
+	.use:disabled {
+		opacity: 0.6;
+		cursor: default;
 	}
 
-	.stat-val {
-		font-size: 2.5rem;
-		font-weight: 600;
-		color: var(--accent);
-		line-height: 1;
-		margin-bottom: 8px;
+	.fork-error {
+		margin: 10px 0 0;
+		font-size: 0.78rem;
+		color: var(--danger);
 	}
 
-	.stat-lbl {
-		font-size: 0.85rem;
+	.rail-hint {
+		font-size: 0.72rem;
 		color: var(--text-muted);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		font-weight: 600;
-	}
-
-	.content {
-		max-width: 1000px;
-		margin: 0 auto;
-		padding: 0 32px 120px;
-	}
-
-	.section {
-		margin-bottom: 80px;
-	}
-
-	.section-title {
-		font-size: 1.75rem;
-		font-weight: 600;
-		margin: 0 0 32px;
-		color: var(--text-primary);
+		margin: 11px 0 0;
+		line-height: 1.6;
 	}
 
-	.app-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-		gap: 24px;
-		margin-bottom: 24px;
+	.rail-hint code {
+		font-family: inherit;
+		color: var(--text-secondary);
 	}
 
-	.app-card {
+	.meta-card {
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		gap: 12px;
-		text-decoration: none;
-		transition: transform 0.2s;
+		gap: 13px;
 	}
 
-	.app-card:hover {
-		transform: translateY(-4px);
-	}
-
-	.app-icon {
-		width: 80px;
-		height: 80px;
-		border-radius: 20px;
+	.kv {
 		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		font-weight: 600;
-		color: #fff;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+		justify-content: space-between;
+		gap: 12px;
+		font-size: 0.8rem;
 	}
 
-	.app-name {
-		font-size: 0.9rem;
-		color: var(--text-primary);
-		font-weight: 500;
-		text-align: center;
-		word-break: break-word;
+	.kv .k {
+		color: var(--text-muted);
+		flex-shrink: 0;
 	}
 
-	.dev-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-		gap: 20px;
-		margin-bottom: 24px;
+	.kv .v {
+		color: var(--text-secondary);
+		min-width: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
-	.dev-card {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 10px;
+	.kv .v.cap {
+		text-transform: capitalize;
 	}
 
-	.dev-icon {
-		width: 56px;
-		height: 56px;
-		border-radius: 14px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1.5rem;
-		font-weight: 600;
-		color: #fff;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+	.kv .v.link {
+		color: var(--accent);
 	}
 
-	.dev-name {
-		font-size: 0.9rem;
-		color: var(--text-primary);
-		font-weight: 500;
-		text-transform: capitalize;
+	/* ---------- full-width sections ---------- */
+	.sections {
+		padding-bottom: 60px;
 	}
 
-	.cli-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 10px;
-		margin-bottom: 24px;
+	.pkg-section {
+		margin-top: 30px;
 	}
 
-	.cli-tag {
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		padding: 8px 14px;
-		border-radius: 8px;
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.85rem;
+	.pkg-head {
+		display: flex;
+		align-items: center;
+		gap: 9px;
+		font-size: 0.95rem;
+		font-weight: 500;
+		margin: 0 0 14px;
 		color: var(--text-primary);
-		text-decoration: none;
-		transition: all 0.2s;
 	}
 
-	.cli-tag:hover {
-		border-color: var(--accent);
-		background: var(--bg-tertiary);
+	.pkg-head .swatch {
+		margin-right: 0;
 	}
 
-	.show-more {
-		display: block;
-		margin: 0 auto;
-		padding: 12px 24px;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		color: var(--text-secondary);
-		font-size: 0.9rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.2s;
+	.pkg-head .count {
+		color: var(--text-muted);
+		font-weight: 400;
 	}
 
-	.show-more:hover {
-		border-color: var(--accent);
-		color: var(--accent);
+	.pkg-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 8px;
 	}
 
-	.detail-card {
+	.pkg-card {
+		display: flex;
+		align-items: baseline;
+		gap: 10px;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border);
-		border-radius: 16px;
-		margin-bottom: 16px;
-		overflow: hidden;
-	}
-
-	.detail-card summary {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-		padding: 24px 32px;
-		cursor: pointer;
-		user-select: none;
-		transition: background 0.2s;
-	}
-
-	.detail-card summary:hover {
-		background: var(--bg-tertiary);
+		border-radius: 9px;
+		padding: 11px 13px;
+		transition: border-color 0.15s ease;
 	}
 
-	.detail-icon {
-		font-size: 1.5rem;
+	.pkg-card:hover {
+		border-color: var(--border-hover);
 	}
 
-	.detail-title {
-		flex: 1;
-		font-size: 1.1rem;
-		font-weight: 600;
-		color: var(--text-primary);
-	}
-
-	.detail-content {
-		padding: 0 32px 32px;
+	.pkg-name {
+		font-size: 0.84rem;
 	}
 
-	.link {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
+	.pkg-name.accent {
 		color: var(--accent);
-		text-decoration: none;
-		font-weight: 500;
-		word-break: break-all;
-		transition: opacity 0.2s;
 	}
 
-	.link:hover {
-		opacity: 0.8;
+	.pkg-name.amber {
+		color: var(--amber);
 	}
 
-	.detail-desc {
-		margin: 12px 0 0;
+	.pkg-desc {
+		font-size: 0.76rem;
 		color: var(--text-muted);
-		font-size: 0.9rem;
-	}
-
-	.kv-grid {
-		display: grid;
-		gap: 12px;
+		margin-left: auto;
+		text-align: right;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
-	.kv {
+	.chips {
 		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 16px 20px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 10px;
-	}
-
-	.k {
-		font-size: 0.9rem;
-		color: var(--text-muted);
-		font-weight: 500;
-	}
-
-	.v {
-		font-size: 0.95rem;
-		color: var(--text-primary);
-		font-weight: 600;
-		font-family: 'JetBrains Mono', monospace;
+		gap: 8px;
+		flex-wrap: wrap;
 	}
 
-	.v.badge {
-		background: var(--accent);
-		color: var(--bg-primary);
-		padding: 4px 12px;
-		border-radius: 6px;
-		font-size: 0.8rem;
+	.chip {
+		background: var(--bg-secondary);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		padding: 8px 13px;
+		font-size: 0.82rem;
+		color: var(--text-secondary);
+		transition: border-color 0.15s ease;
 	}
 
-	.plugins {
-		margin-top: 20px;
+	.chip.npm {
+		color: #7aa2e3;
 	}
 
-	.plugins-label {
-		font-size: 0.9rem;
-		font-weight: 600;
-		color: var(--text-primary);
-		margin-bottom: 12px;
+	a.chip:hover {
+		border-color: var(--border-hover);
 	}
 
-	.code-block {
-		background: var(--bg-tertiary);
+	.term {
+		background: var(--bg-secondary);
 		border: 1px solid var(--border);
 		border-radius: 12px;
 		overflow: hidden;
 	}
 
-	.code-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 16px 20px;
-		background: var(--bg-secondary);
+	.term-head {
+		padding: 10px 14px;
 		border-bottom: 1px solid var(--border);
+		font-size: 0.72rem;
+		color: var(--text-muted);
 	}
 
-	.code-header span {
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.9rem;
-		font-weight: 600;
-		color: var(--text-primary);
-	}
-
-	.code-header button {
-		background: var(--accent);
-		color: var(--bg-primary);
-		border: none;
-		padding: 6px 14px;
-		border-radius: 6px;
-		font-size: 0.85rem;
-		font-weight: 600;
-		cursor: pointer;
-		transition: all 0.2s;
-	}
-
-	.code-header button:hover {
-		background: var(--accent-hover);
-	}
-
-	.code-block pre {
-		margin: 0;
-		padding: 24px;
+	.term-body {
+		padding: 16px 18px;
+		font-size: 0.78rem;
+		line-height: 1.85;
+		color: var(--text-secondary);
 		overflow-x: auto;
 	}
 
-	.code-block code {
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.9rem;
-		line-height: 1.6;
-		color: var(--text-primary);
+	.term-body :global(.cmd) {
+		color: var(--accent);
 	}
 
-	.code-block :global(.comment) {
+	.term-body :global(.cmt) {
 		color: var(--text-muted);
-		font-style: italic;
-	}
-
-	.code-block :global(.keyword) {
-		color: #c678dd;
-		font-weight: 600;
 	}
 
-	.code-block :global(.string) {
-		color: #98c379;
-	}
-
-	.code-block :global(.variable) {
-		color: #e5c07b;
-	}
-
-	.tap-list {
+	.kv-list {
 		display: flex;
 		flex-direction: column;
-		gap: 10px;
-	}
-
-	.tap-item {
-		padding: 14px 18px;
-		background: var(--bg-tertiary);
+		gap: 2px;
+		background: var(--bg-secondary);
 		border: 1px solid var(--border);
-		border-radius: 10px;
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.9rem;
-		color: var(--text-primary);
+		border-radius: 12px;
+		padding: 6px 16px;
 	}
 
-	.cta {
+	.kv-row {
 		display: flex;
-		align-items: center;
-		gap: 24px;
-		padding: 48px;
-		background: var(--bg-secondary);
-		border: 2px solid var(--border);
-		border-radius: 20px;
-		transition: all 0.3s;
-	}
-
-	.cta:hover {
-		border-color: var(--accent);
-		transform: translateY(-2px);
-	}
-
-	.cta-icon {
-		font-size: 3rem;
-		flex-shrink: 0;
+		justify-content: space-between;
+		gap: 16px;
+		padding: 11px 0;
+		font-size: 0.82rem;
+		border-bottom: 1px solid var(--border);
 	}
 
-	.cta-text {
-		flex: 1;
+	.kv-row:last-child {
+		border-bottom: none;
 	}
 
-	.cta-text h3 {
-		font-size: 1.5rem;
-		font-weight: 600;
-		margin: 0 0 8px;
-		color: var(--text-primary);
+	.kv-row .k {
+		color: var(--text-muted);
 	}
 
-	.cta-text p {
-		font-size: 1rem;
+	.kv-row .v {
 		color: var(--text-secondary);
-		margin: 0;
 	}
 
-	.cta-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 8px;
-		padding: 16px 32px;
-		background: var(--accent);
-		color: var(--bg-primary);
-		border: none;
-		border-radius: 12px;
-		font-size: 1rem;
-		font-weight: 600;
-		text-decoration: none;
-		cursor: pointer;
-		transition: all 0.2s;
-		white-space: nowrap;
-	}
-
-	.cta-btn:hover {
-		background: var(--accent-hover);
-		transform: translateY(-2px);
+	.kv-row .v.accent {
+		color: var(--accent);
 	}
 
-	@media (max-width: 768px) {
-		.hero {
-			padding: 100px 20px 60px;
-		}
-
-		.share-btn {
-			right: 20px;
-		}
-
-		.title {
-			font-size: 2.5rem;
-		}
-
-		.desc {
-			font-size: 1rem;
-		}
-
-		.content {
-			padding: 0 20px 80px;
-		}
-
-		.section {
-			margin-bottom: 60px;
-		}
-
-		.section-title {
-			font-size: 1.5rem;
-		}
-
-		.app-grid {
-			grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-			gap: 16px;
-		}
-
-		.app-icon {
-			width: 64px;
-			height: 64px;
-			font-size: 1.5rem;
-		}
-
-		.dev-grid {
-			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-		}
-
-		.dev-icon {
-			width: 48px;
-			height: 48px;
-			font-size: 1.2rem;
-		}
-
-		.detail-card summary {
-			padding: 20px;
-		}
-
-		.detail-content {
-			padding: 0 20px 20px;
-		}
-
-		.cta {
-			flex-direction: column;
-			text-align: center;
-			padding: 32px 24px;
-		}
-
-		.cta-btn {
-			width: 100%;
-			justify-content: center;
-		}
-
-		.terminal {
-			flex-direction: column;
-			align-items: stretch;
-		}
-
-		.terminal code {
-			text-align: center;
-		}
-
-		.curl-alt {
-			flex-direction: column;
-			text-align: center;
-		}
-
-		.curl-alt code {
-			text-align: center;
-		}
-
-		.copy {
-			width: 100%;
-			justify-content: center;
+	@media (max-width: 880px) {
+		.grid {
+			grid-template-columns: 1fr;
+			gap: 28px;
 		}
 
-		.install-actions {
-			justify-content: stretch;
+		.rail {
+			position: static;
 		}
 
-		.fork {
-			width: 100%;
-			border-radius: 12px;
-			padding: 12px 14px;
+		.pkg-grid {
+			grid-template-columns: 1fr;
 		}
 
-		.share-inline {
-			width: 100%;
-			border-radius: 12px;
-			padding: 12px 14px;
+		.container {
+			padding: 0 22px;
 		}
 	}
 </style>
diff --git a/src/lib/components/ConfigEditor.svelte b/src/lib/components/ConfigEditor.svelte
index bf0fc05..20200c1 100644
--- a/src/lib/components/ConfigEditor.svelte
+++ b/src/lib/components/ConfigEditor.svelte
@@ -3,17 +3,8 @@
 	import { goto } from '$app/navigation';
 	import { auth } from '$lib/stores/auth';
 	import PackageManager from './PackageManager.svelte';
-	import PackageDna from './PackageDna.svelte';
-	import SectionNav from './SectionNav.svelte';
-	import {
-		MACOS_PREF_CATALOG,
-		CATALOG_CATEGORIES,
-		getCatalogItem,
-		type MacOSPrefCatalogItem,
-	} from '$lib/macos-prefs-catalog';
-	import { PRESET_PACKAGES } from '$lib/presets';
-	import ShellEditor from './ShellEditor.svelte';
 	import MacOSPreferencesEditor from './MacOSPreferencesEditor.svelte';
+	import { PRESET_PACKAGES } from '$lib/presets';
 
 	let { slug, skipAuth = false }: { slug?: string; skipAuth?: boolean } = $props();
 	const isNew = !slug;
@@ -23,22 +14,10 @@
 	let error = $state('');
 	let editingConfig = $state<any>(null);
 	let initialSnapshot = $state('');
+	let initialPayload: any = null;
 	let rawMode = $state(false);
 	let rawJson = $state('');
 
-	function captureSnapshot(): string {
-		return JSON.stringify({
-			formData,
-			packages: [...selectedPackages.entries()].sort(),
-			packageDescs: [...packageDescs.entries()].sort(),
-			macosPrefs,
-		});
-	}
-
-	const hasChanges = $derived(isNew || initialSnapshot === '' || rawMode || captureSnapshot() !== initialSnapshot);
-	let showScriptModal = $state(false);
-	let scriptDraft = $state('');
-
 	let formData = $state({
 		name: '',
 		description: '',
@@ -46,7 +25,7 @@
 		visibility: 'unlisted' as string,
 		alias: '',
 		custom_script: '',
-		dotfiles_repo: '',
+		dotfiles_repo: ''
 	});
 
 	let selectedPackages = $state(new Map<string, string>());
@@ -65,80 +44,22 @@
 		host?: string;
 	}
 	let macosPrefs = $state<MacOSPref[]>([]);
-	let expandedPrefCats = $state<Set<string>>(new Set());
-
-	const packages = $derived(
-		Array.from(selectedPackages.entries()).map(([key, type]) => {
-			const name = key.slice(type.length + 1);
-			return { name, type, desc: packageDescs.get(key) || '' };
-		})
-	);
-
-	const sections = [
-		{ id: 'identity', label: 'Identity' },
-		{ id: 'stack', label: 'Stack' },
-		{ id: 'system', label: 'System' },
-		{ id: 'script', label: 'Script' },
-	];
-
-	// Gradient from config name (matches ConfigCard)
-	const GRADIENTS = [
-		'linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%)',
-		'linear-gradient(135deg, #f43f5e 0%, #fb923c 50%, #fbbf24 100%)',
-		'linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%)',
-		'linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #3b82f6 100%)',
-		'linear-gradient(135deg, #f97316 0%, #ef4444 50%, #ec4899 100%)',
-		'linear-gradient(135deg, #8b5cf6 0%, #d946ef 50%, #f43f5e 100%)',
-		'linear-gradient(135deg, #14b8a6 0%, #22c55e 50%, #84cc16 100%)',
-		'linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)',
-	];
-	function hashStr(s: string): number {
-		let h = 0;
-		for (let i = 0; i < s.length; i++) {
-			h = ((h << 5) - h) + s.charCodeAt(i);
-			h |= 0;
-		}
-		return Math.abs(h);
-	}
-	const editorGradient = $derived(
-		formData.name
-			? GRADIENTS[hashStr(formData.name) % GRADIENTS.length]
-			: GRADIENTS[0]
-	);
-
-	const catalogByCategory = $derived.by(() => {
-		const map: Record<string, MacOSPrefCatalogItem[]> = {};
-		for (const cat of CATALOG_CATEGORIES) {
-			map[cat] = MACOS_PREF_CATALOG.filter((i) => i.category === cat);
-		}
-		return map;
-	});
 
-	const addedCountByCategory = $derived.by(() => {
-		const counts: Record<string, number> = {};
-		for (const pref of macosPrefs) {
-			const ci = getCatalogItem(pref.domain, pref.key);
-			const cat = ci?.category ?? 'Custom';
-			counts[cat] = (counts[cat] || 0) + 1;
-		}
-		return counts;
-	});
+	const scriptPlaceholder =
+		'#!/usr/bin/env bash\n# Runs after packages, shell, dotfiles, and macOS prefs.\n\n# npm install -g pnpm vercel\n# git config --global pull.rebase true';
 
-	const customPrefs = $derived(
-		macosPrefs
-			.map((p, i) => ({ pref: p, index: i }))
-			.filter(({ pref }) => !getCatalogItem(pref.domain, pref.key))
-	);
-
-	function initExpandedCats() {
-		const cats = new Set<string>();
-		for (const pref of macosPrefs) {
-			const ci = getCatalogItem(pref.domain, pref.key);
-			if (ci) cats.add(ci.category);
-		}
-		expandedPrefCats = cats.size > 0 ? cats : new Set([CATALOG_CATEGORIES[0]]);
+	function captureSnapshot(): string {
+		return JSON.stringify({
+			formData,
+			packages: [...selectedPackages.entries()].sort(),
+			packageDescs: [...packageDescs.entries()].sort(),
+			macosPrefs
+		});
 	}
 
+	const dirty = $derived(initialSnapshot !== '' && captureSnapshot() !== initialSnapshot);
+	const canSave = $derived(isNew || dirty || rawMode);
+
 	function initPackagesForPreset(preset: string) {
 		const p = PRESET_PACKAGES[preset];
 		if (!p) return;
@@ -151,7 +72,12 @@
 
 	function handlePresetChange(preset: string) {
 		formData.base_preset = preset;
-		initPackagesForPreset(preset);
+		if (preset === 'scratch') {
+			selectedPackages = new Map();
+			packageDescs = new Map();
+		} else {
+			initPackagesForPreset(preset);
+		}
 	}
 
 	function togglePackage(name: string, type: string, desc: string = '') {
@@ -170,12 +96,25 @@
 	}
 
 	function normalizePrefValue(type: string, value: string): string {
-		if (type === 'bool') {
-			return (value === '1' || value === 'true') ? 'true' : 'false';
-		}
+		if (type === 'bool') return value === '1' || value === 'true' ? 'true' : 'false';
 		return value;
 	}
 
+	function mapPrefs(raw: any[]): MacOSPref[] {
+		return raw.map((p: any) => {
+			const type = p.type || '';
+			const out: MacOSPref = {
+				domain: p.domain || '',
+				key: p.key || '',
+				type,
+				value: normalizePrefValue(type, String(p.value ?? '')),
+				desc: p.desc || ''
+			};
+			if (typeof p.host === 'string' && p.host !== '') out.host = p.host;
+			return out;
+		});
+	}
+
 	onMount(async () => {
 		if (!skipAuth) {
 			await auth.check();
@@ -198,7 +137,7 @@
 						visibility: data.visibility || 'unlisted',
 						alias: '',
 						custom_script: data.custom_script || '',
-						dotfiles_repo: data.dotfiles_repo || '',
+						dotfiles_repo: data.dotfiles_repo || ''
 					};
 					if (data.packages?.length) {
 						const map = new Map<string, string>();
@@ -218,21 +157,7 @@
 					} else {
 						initPackagesForPreset(formData.base_preset);
 					}
-					if (data.snapshot?.macos_prefs) {
-						macosPrefs = data.snapshot.macos_prefs.map((p: any) => {
-							const type = p.type || '';
-							const out: MacOSPref = {
-								domain: p.domain || '',
-								key: p.key || '',
-								type,
-								value: normalizePrefValue(type, String(p.value ?? '')),
-								desc: p.desc || '',
-							};
-							if (typeof p.host === 'string' && p.host !== '') out.host = p.host;
-							return out;
-						});
-					}
-					initExpandedCats();
+					if (data.snapshot?.macos_prefs) macosPrefs = mapPrefs(data.snapshot.macos_prefs);
 				} catch {
 					initPackagesForPreset('developer');
 				}
@@ -253,23 +178,11 @@
 					visibility: config.visibility || 'unlisted',
 					alias: config.alias || '',
 					custom_script: config.custom_script || '',
-					dotfiles_repo: config.dotfiles_repo || '',
+					dotfiles_repo: config.dotfiles_repo || ''
 				};
 				macosPrefs = Array.isArray(config.snapshot?.macos_prefs)
-					? config.snapshot.macos_prefs.map((p: any) => {
-							const type = p.type || '';
-							const out: MacOSPref = {
-								domain: p.domain || '',
-								key: p.key || '',
-								type,
-								value: normalizePrefValue(type, String(p.value ?? '')),
-								desc: p.desc || '',
-							};
-							if (typeof p.host === 'string' && p.host !== '') out.host = p.host;
-							return out;
-						})
+					? mapPrefs(config.snapshot.macos_prefs)
 					: [];
-				initExpandedCats();
 				const savedPkgs = config.packages || [];
 				if (savedPkgs.length > 0) {
 					const newMap = new Map<string, string>();
@@ -292,9 +205,11 @@
 			} catch {
 				error = 'Failed to load configuration';
 			}
-			initialSnapshot = captureSnapshot();
 			loading = false;
 		}
+
+		initialPayload = JSON.parse(JSON.stringify(buildPayload()));
+		initialSnapshot = captureSnapshot();
 	});
 
 	function buildPayload() {
@@ -310,7 +225,7 @@
 				const name = key.slice(type.length + 1);
 				return { name, type, desc: packageDescs.get(key) || '' };
 			}),
-			snapshot: updatedSnapshot,
+			snapshot: updatedSnapshot
 		};
 	}
 
@@ -322,7 +237,7 @@
 			visibility: parsed.visibility || 'unlisted',
 			alias: parsed.alias || '',
 			custom_script: parsed.custom_script || '',
-			dotfiles_repo: parsed.dotfiles_repo || '',
+			dotfiles_repo: parsed.dotfiles_repo || ''
 		};
 		const newMap = new Map<string, string>();
 		const newDescs = new Map<string, string>();
@@ -338,21 +253,7 @@
 		}
 		selectedPackages = newMap;
 		packageDescs = newDescs;
-		macosPrefs = Array.isArray(parsed.snapshot?.macos_prefs)
-			? parsed.snapshot.macos_prefs.map((p: any) => {
-					const type = p.type || '';
-					const out: MacOSPref = {
-						domain: p.domain || '',
-						key: p.key || '',
-						type,
-						value: normalizePrefValue(type, String(p.value ?? '')),
-						desc: p.desc || '',
-					};
-					if (typeof p.host === 'string' && p.host !== '') out.host = p.host;
-					return out;
-				})
-			: [];
-		initExpandedCats();
+		macosPrefs = Array.isArray(parsed.snapshot?.macos_prefs) ? mapPrefs(parsed.snapshot.macos_prefs) : [];
 	}
 
 	function enterRawMode() {
@@ -363,8 +264,7 @@
 
 	function exitRawMode() {
 		try {
-			const parsed = JSON.parse(rawJson);
-			applyParsed(parsed);
+			applyParsed(JSON.parse(rawJson));
 			rawMode = false;
 			error = '';
 		} catch {
@@ -372,8 +272,18 @@
 		}
 	}
 
+	function toggleRaw() {
+		if (rawMode) exitRawMode();
+		else enterRawMode();
+	}
+
+	function discard() {
+		if (initialPayload) applyParsed(JSON.parse(JSON.stringify(initialPayload)));
+		error = '';
+	}
+
 	async function save() {
-		let payload: ReturnType<typeof buildPayload> | any;
+		let payload: any;
 		if (rawMode) {
 			try {
 				payload = JSON.parse(rawJson);
@@ -400,7 +310,7 @@
 			const response = await fetch(url, {
 				method,
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify(payload),
+				body: JSON.stringify(payload)
 			});
 			const text = await response.text();
 			let result;
@@ -428,204 +338,115 @@
 </svelte:head>
 
 {#if loading}
-	<div class="editor-loading">
-		<div class="loader"></div>
-	</div>
+	<div class="editor-loading"><div class="loader"></div></div>
 {:else}
 	<div class="editor">
-		{#if !rawMode}
-			<SectionNav {sections} />
-		{/if}
-
-		<header class="editor-header">
-			<button class="back-btn" onclick={() => goto('/dashboard')}>
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-					<path d="M19 12H5" /><path d="m12 19-7-7 7-7" />
-				</svg>
-				Back
+		<!-- save bar -->
+		<div class="savebar">
+			<button class="back" onclick={() => goto('/dashboard')}>
+				<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5" /><path d="m12 19-7-7 7-7" /></svg>
+				Back to dashboard
 			</button>
-			<div class="header-right">
-				{#if !rawMode}
-					<div class="dna-preview">
-						<PackageDna {packages} />
-					</div>
+			<div class="savebar-right">
+				{#if error}
+					<span class="savebar-error">{error}</span>
+				{:else if rawMode}
+					<span class="status raw">editing config.json</span>
+				{:else if dirty}
+					<span class="status unsaved"><span class="status-dot"></span> Unsaved changes</span>
+				{:else if !isNew}
+					<span class="status saved">✓ All changes saved</span>
 				{/if}
-				<button
-					class="raw-btn"
-					class:raw-btn-active={rawMode}
-					onclick={() => rawMode ? exitRawMode() : enterRawMode()}
-					title={rawMode ? 'Switch to visual editor' : 'Edit raw JSON'}
-				>
-					<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-						<polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
-					</svg>
-					{rawMode ? 'Visual' : 'Raw'}
+				<button class="raw-btn" class:active={rawMode} onclick={toggleRaw} title={rawMode ? 'Back to the form' : 'Edit raw JSON'}>
+					<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg>
+					Raw
 				</button>
-				{#if error}
-					<span class="header-error">{error}</span>
+				{#if dirty && !rawMode}
+					<button class="discard" onclick={discard}>Discard</button>
 				{/if}
-				<button class="save-btn" class:save-btn-inactive={!hasChanges} onclick={save} disabled={saving || !hasChanges}>
-					{saving ? 'Saving...' : isNew ? 'Create Config' : 'Save Changes'}
+				<button class="save" class:inactive={!canSave} disabled={saving || !canSave} onclick={save}>
+					{saving ? 'Saving…' : 'Save changes'}
 				</button>
 			</div>
-		</header>
+		</div>
 
 		{#if rawMode}
-			<div class="raw-editor">
-				<div class="raw-hint">Edit the config JSON directly. Switch back to Visual to see your changes reflected in the form.</div>
-				<textarea
-					class="raw-textarea"
-					bind:value={rawJson}
-					spellcheck="false"
-					autocomplete="off"
-					autocapitalize="off"
-				></textarea>
+			<div class="raw-wrap">
+				<div class="term">
+					<div class="term-head">
+						<span class="dot dot-red"></span><span class="dot dot-amber"></span><span class="dot dot-green"></span>
+						<span class="term-name">config.json</span>
+						<span class="term-note">editable · consumed by the CLI</span>
+					</div>
+					<textarea class="raw-textarea" bind:value={rawJson} spellcheck="false" autocomplete="off" autocapitalize="off"></textarea>
+				</div>
 			</div>
 		{:else}
-
-		<div class="editor-body">
-			<!-- IDENTITY -->
-			<section class="section" id="identity">
-				<div class="identity-hero" style="background: {editorGradient}">
-					<div class="identity-glass">
-						<input
-							class="name-input"
-							bind:value={formData.name}
-							placeholder="Config name"
-						/>
-						<input
-							class="desc-input"
-							bind:value={formData.description}
-							placeholder="What's this config for?"
-						/>
-						<div class="identity-row">
+			<div class="form-grid">
+				<!-- IDENTITY -->
+				<section class="col-full">
+					<p class="eyebrow"><span class="gt">&gt;</span> IDENTITY</p>
+					<div class="card identity-card">
+						<input class="name-input" bind:value={formData.name} placeholder="Config name" />
+						<input class="desc-input" bind:value={formData.description} placeholder="What's this config for?" />
+						<div class="identity-foot">
 							<div class="vis-pills">
-								{#each ['public', 'unlisted', 'private'] as v}
-									<button
-										class="vis-pill"
-										class:active={formData.visibility === v}
-										onclick={() => (formData.visibility = v)}
-									>
-										{v}
-									</button>
+								{#each ['public', 'unlisted', 'private'] as v (v)}
+									<button class="vis-pill" class:active={formData.visibility === v} onclick={() => (formData.visibility = v)}>{v}</button>
 								{/each}
 							</div>
 							<div class="alias-field">
 								<span class="alias-prefix">openboot.dev/</span>
-								<input
-									class="alias-input"
-									bind:value={formData.alias}
-									placeholder="alias"
-								/>
+								<input class="alias-input" bind:value={formData.alias} placeholder="alias" />
 							</div>
 						</div>
 					</div>
-				</div>
-			</section>
+				</section>
 
-			<!-- STACK -->
-			<section class="section" id="stack">
-				<div class="section-top">
-					<div class="section-tag">STACK</div>
-					<span class="section-count">{selectedPackages.size} packages</span>
-				</div>
-				<PackageManager
-					{selectedPackages}
-					{packageDescs}
-					basePreset={formData.base_preset}
-					{togglePackage}
-					onPresetChange={handlePresetChange}
-				/>
-			</section>
-
-			<!-- SYSTEM -->
-			<section class="section" id="system">
-				<div class="section-tag">SYSTEM</div>
-
-				<div class="system-dotfiles">
-					<span class="dotfiles-label">Dotfiles Repository</span>
-					<input
-						class="dotfiles-input"
-						bind:value={formData.dotfiles_repo}
-						placeholder="https://github.com/you/dotfiles"
+				<!-- STACK -->
+				<section>
+					<div class="eyebrow-row">
+						<p class="eyebrow"><span class="gt">&gt;</span> STACK</p>
+						<span class="eyebrow-count">{selectedPackages.size} packages</span>
+					</div>
+					<PackageManager
+						{selectedPackages}
+						basePreset={formData.base_preset}
+						{togglePackage}
+						onPresetChange={handlePresetChange}
 					/>
-					<p class="dotfiles-hint">Cloned & deployed via GNU Stow after install.</p>
-				</div>
-
-				<MacOSPreferencesEditor
-					bind:macosPrefs
-					bind:expandedPrefCats
-					{catalogByCategory}
-					{addedCountByCategory}
-					{customPrefs}
-				/>
-			</section>
-
-			<!-- SCRIPT -->
-			<section class="section" id="script">
-				<div class="section-tag">SCRIPT</div>
-				<div class="script-card">
-					<div class="script-bar">
-						<span class="script-filename">post-install.sh</span>
-						<button
-							class="script-edit-btn"
-							type="button"
-							onclick={() => { scriptDraft = formData.custom_script; showScriptModal = true; }}
-						>
-							{formData.custom_script ? 'Edit' : 'Add Script'}
-						</button>
+				</section>
+
+				<!-- SYSTEM -->
+				<section>
+					<p class="eyebrow"><span class="gt">&gt;</span> SYSTEM</p>
+					<div class="card">
+						<div class="field-label">Dotfiles repository</div>
+						<input class="text-input" bind:value={formData.dotfiles_repo} placeholder="https://github.com/you/dotfiles" />
+						<p class="field-hint">Cloned &amp; deployed via GNU Stow after install.</p>
+						<div class="field-label field-label-spaced">macOS preferences</div>
+						<MacOSPreferencesEditor bind:macosPrefs />
 					</div>
-					<!-- svelte-ignore a11y_click_events_have_key_events -->
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					{#if formData.custom_script}
-						<pre class="script-preview" onclick={() => { scriptDraft = formData.custom_script; showScriptModal = true; }}>{formData.custom_script}</pre>
-					{:else}
-						<div class="script-empty" onclick={() => { scriptDraft = ''; showScriptModal = true; }}>No post-install script — click to add</div>
-					{/if}
-				</div>
-			</section>
-		</div>
-		{/if}
-	</div>
-{/if}
-
-{#if showScriptModal}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="script-modal-overlay" onkeydown={(e) => { if (e.key === 'Escape') showScriptModal = false; }}>
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<div class="script-modal-backdrop" onclick={() => showScriptModal = false}></div>
-		<div class="script-modal">
-			<div class="script-modal-bar">
-				<span class="script-modal-filename">post-install.sh</span>
-				<div class="script-modal-actions">
-					<button
-						type="button"
-						class="script-modal-cancel"
-						onclick={() => showScriptModal = false}
-					>Cancel</button>
-					<button
-						type="button"
-						class="script-modal-save"
-						onclick={() => { formData.custom_script = scriptDraft; showScriptModal = false; }}
-					>Save</button>
-				</div>
-			</div>
-			<div class="script-modal-body">
-				<ShellEditor
-					bind:value={scriptDraft}
-					placeholder="#!/bin/bash
-# Commands to run after package installation
-
-# Example:
-# mkdir -p ~/Projects
-# npm install -g vercel
-# defaults write com.apple.dock autohide -bool true"
-				/>
-			</div>
-			<div class="script-modal-hint">
-				Commands run sequentially in your home directory after packages, shell, dotfiles, and macOS preferences are applied.
+				</section>
+
+				<!-- SCRIPT -->
+				<section class="col-full">
+					<p class="eyebrow"><span class="gt">&gt;</span> SCRIPT</p>
+					<div class="term">
+						<div class="term-head">
+							<span class="dot dot-red"></span><span class="dot dot-amber"></span><span class="dot dot-green"></span>
+							<span class="term-name">post-install.sh — runs after packages</span>
+						</div>
+						<textarea
+							class="script-textarea"
+							bind:value={formData.custom_script}
+							spellcheck="false"
+							placeholder={scriptPlaceholder}
+						></textarea>
+					</div>
+				</section>
 			</div>
-		</div>
+		{/if}
 	</div>
 {/if}
 
@@ -653,879 +474,451 @@
 	}
 
 	.editor {
-		max-width: 820px;
+		max-width: 1160px;
 		margin: 0 auto;
-		padding: 0 24px 100px;
+		padding: 0 36px 96px;
 	}
 
-	/* Header */
-	.editor-header {
+	/* ---------- save bar ---------- */
+	.savebar {
 		position: sticky;
-		top: 53px;
+		top: 56px;
 		z-index: 40;
 		display: flex;
-		justify-content: space-between;
 		align-items: center;
-		padding: 16px 0;
-		margin-bottom: 40px;
-		background: var(--bg-primary);
+		justify-content: space-between;
+		gap: 16px;
+		padding: 22px 0 16px;
+		background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
 		border-bottom: 1px solid var(--border);
 	}
 
-	.back-btn {
-		display: flex;
+	.back {
+		display: inline-flex;
 		align-items: center;
 		gap: 8px;
 		background: none;
 		border: none;
-		color: var(--text-muted);
-		font-size: 0.88rem;
-		font-weight: 600;
-		font-family: inherit;
 		cursor: pointer;
-		transition: color 0.15s;
-		padding: 8px 0;
+		font-family: inherit;
+		font-size: 0.85rem;
+		color: var(--text-secondary);
+		padding: 0;
+		transition: color 0.15s ease;
 	}
 
-	.back-btn:hover {
+	.back:hover {
 		color: var(--text-primary);
 	}
 
-	.header-right {
+	.savebar-right {
 		display: flex;
 		align-items: center;
-		gap: 16px;
-	}
-
-	.dna-preview {
-		opacity: 0.6;
-		transition: opacity 0.3s;
+		gap: 14px;
 	}
 
-	.dna-preview:hover {
-		opacity: 1;
+	.status {
+		display: flex;
+		align-items: center;
+		gap: 7px;
+		font-size: 0.78rem;
+		animation: ob-fade 0.25s ease;
 	}
 
-	.header-error {
-		color: var(--danger);
-		font-size: 0.82rem;
-		font-weight: 500;
+	.status.unsaved {
+		color: var(--amber);
 	}
 
-	.save-btn {
-		padding: 10px 24px;
-		background: var(--accent);
-		color: var(--bg-primary);
-		border: none;
-		border-radius: 10px;
-		font-size: 0.88rem;
-		font-weight: 600;
-		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.2s;
+	.status.saved {
+		color: var(--accent);
 	}
 
-	.save-btn:hover:not(:disabled) {
-		background: var(--accent-hover);
-		transform: translateY(-1px);
+	.status.raw {
+		color: var(--text-muted);
 	}
 
-	.save-btn:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
+	.status-dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--amber);
+		animation: ob-pulse 1.5s ease infinite;
 	}
 
-	.save-btn-inactive {
-		background: var(--border);
-		color: var(--text-muted);
+	.savebar-error {
+		font-size: 0.78rem;
+		color: var(--danger);
 	}
 
 	.raw-btn {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
-		gap: 6px;
-		padding: 8px 14px;
-		background: none;
-		border: 1px solid var(--border);
+		gap: 7px;
+		padding: 9px 15px;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-hover);
 		border-radius: 8px;
-		color: var(--text-muted);
-		font-size: 0.82rem;
-		font-weight: 600;
 		font-family: inherit;
+		font-size: 0.8rem;
+		color: var(--text-secondary);
 		cursor: pointer;
-		transition: all 0.15s;
+		transition: all 0.15s ease;
 	}
 
 	.raw-btn:hover {
-		border-color: var(--text-muted);
 		color: var(--text-primary);
 	}
 
-	.raw-btn-active {
+	.raw-btn.active {
+		background: var(--accent-glow);
 		border-color: var(--accent);
 		color: var(--accent);
 	}
 
-	.raw-editor {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding-bottom: 100px;
+	.discard {
+		padding: 9px 16px;
+		background: none;
+		border: 1px solid var(--border-hover);
+		border-radius: 8px;
+		font-family: inherit;
+		font-size: 0.82rem;
+		color: var(--text-secondary);
+		cursor: pointer;
+		animation: ob-fade 0.25s ease;
+		transition: color 0.15s ease;
 	}
 
-	.raw-hint {
-		font-size: 0.80rem;
-		color: var(--text-muted);
+	.discard:hover {
+		color: var(--text-primary);
 	}
 
-	.raw-textarea {
-		width: 100%;
-		min-height: 60vh;
-		padding: 16px;
-		background: var(--bg-secondary, #111);
-		color: var(--text-primary);
+	.save {
+		padding: 10px 22px;
+		background: var(--accent);
+		color: var(--bg-primary);
+		border: none;
+		border-radius: 8px;
+		font-family: inherit;
+		font-size: 0.84rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: filter 0.15s ease, transform 0.15s ease;
+	}
+
+	.save:hover:not(:disabled) {
+		filter: brightness(1.08);
+		transform: translateY(-1px);
+	}
+
+	.save.inactive {
+		background: var(--bg-tertiary);
+		color: var(--text-muted);
 		border: 1px solid var(--border);
-		border-radius: 10px;
-		font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-		font-size: 0.82rem;
-		line-height: 1.6;
-		resize: vertical;
-		outline: none;
-		box-sizing: border-box;
-		transition: border-color 0.15s;
+		cursor: default;
 	}
 
-	.raw-textarea:focus {
-		border-color: var(--accent);
+	.save:disabled {
+		cursor: default;
 	}
 
-	/* Sections */
-	.editor-body {
-		display: flex;
-		flex-direction: column;
-		gap: 56px;
+	/* ---------- form grid ---------- */
+	.form-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 30px 24px;
+		align-items: start;
+		padding-top: 30px;
 	}
 
-	.section {
-		scroll-margin-top: 80px;
+	.col-full {
+		grid-column: 1 / -1;
 	}
 
-	.section-tag {
-		font-size: 0.68rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.14em;
+	.eyebrow {
+		font-size: 0.72rem;
+		letter-spacing: 0.1em;
 		color: var(--text-muted);
-		margin-bottom: 16px;
-		display: flex;
-		align-items: center;
-		gap: 12px;
+		margin: 0 0 16px;
 	}
 
-	.section-tag::after {
-		content: '';
-		flex: 1;
-		height: 1px;
-		background: var(--border);
+	.eyebrow .gt {
+		color: var(--accent);
 	}
 
-	.section-top {
+	.eyebrow-row {
 		display: flex;
+		align-items: baseline;
 		justify-content: space-between;
-		align-items: center;
 		margin-bottom: 16px;
 	}
 
-	.section-top .section-tag {
-		margin-bottom: 0;
+	.eyebrow-row .eyebrow {
+		margin: 0;
 	}
 
-	.section-count {
-		font-size: 0.78rem;
+	.eyebrow-count {
+		font-size: 0.74rem;
 		color: var(--text-muted);
-		font-weight: 600;
-		font-variant-numeric: tabular-nums;
 	}
 
-	/* Identity */
-	.identity-hero {
-		border-radius: 20px;
-		padding: 4px;
-		transition: background 0.5s;
+	.card {
+		background: var(--bg-secondary);
+		border: 1px solid var(--border);
+		border-radius: 14px;
+		padding: 22px;
 	}
 
-	.identity-glass {
-		background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
-		backdrop-filter: blur(20px);
-		-webkit-backdrop-filter: blur(20px);
-		border-radius: 17px;
-		padding: 32px;
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
+	.identity-card {
+		padding: 24px;
 	}
 
-	.name-input {
-		background: none;
-		border: none;
-		color: var(--text-primary);
-		font-size: 2.2rem;
-		font-weight: 600;
+	.field-label {
+		font-size: 0.74rem;
+		color: var(--text-secondary);
+		margin-bottom: 11px;
+	}
+
+	.field-label-spaced {
+		margin-top: 22px;
+	}
+
+	.field-hint {
+		font-size: 0.74rem;
+		color: var(--text-muted);
+		margin: 6px 0 0;
+	}
+
+	.text-input {
+		width: 100%;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-hover);
+		border-radius: 8px;
+		padding: 11px 13px;
 		font-family: inherit;
+		font-size: 0.84rem;
+		color: var(--text-primary);
 		outline: none;
-		padding: 0;
-		line-height: 1.2;
-		width: 100%;
+		transition: border-color 0.15s ease;
 	}
 
-	.name-input::placeholder {
-		color: var(--text-muted);
-		opacity: 0.5;
+	.text-input:focus {
+		border-color: var(--accent);
 	}
 
-	.desc-input {
-		background: none;
+	/* ---------- identity ---------- */
+	.name-input {
+		width: 100%;
+		background: transparent;
 		border: none;
-		color: var(--text-secondary);
-		font-size: 1.05rem;
-		font-family: inherit;
 		outline: none;
-		padding: 0;
+		font-family: inherit;
+		font-size: 1.5rem;
+		font-weight: 500;
+		letter-spacing: -0.02em;
+		color: var(--text-primary);
+		margin-bottom: 8px;
+	}
+
+	.desc-input {
 		width: 100%;
+		background: transparent;
+		border: none;
+		outline: none;
+		font-family: inherit;
+		font-size: 0.88rem;
+		color: var(--text-secondary);
+		margin-bottom: 20px;
 	}
 
+	.name-input::placeholder,
 	.desc-input::placeholder {
 		color: var(--text-muted);
-		opacity: 0.5;
 	}
 
-	.identity-row {
+	.identity-foot {
 		display: flex;
-		justify-content: space-between;
 		align-items: center;
-		gap: 16px;
-		margin-top: 12px;
+		justify-content: space-between;
+		gap: 20px;
 		flex-wrap: wrap;
+		padding-top: 18px;
+		border-top: 1px solid var(--border);
 	}
 
 	.vis-pills {
 		display: flex;
-		gap: 0;
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		overflow: hidden;
+		gap: 6px;
 	}
 
 	.vis-pill {
-		padding: 8px 16px;
-		background: var(--bg-tertiary);
-		border: none;
-		color: var(--text-muted);
-		font-size: 0.78rem;
-		font-weight: 600;
+		padding: 7px 15px;
+		border-radius: 7px;
 		font-family: inherit;
+		font-size: 0.8rem;
 		cursor: pointer;
+		background: var(--bg-tertiary);
+		color: var(--text-secondary);
+		border: 1px solid var(--border-hover);
 		text-transform: capitalize;
-		transition: all 0.15s;
-		border-right: 1px solid var(--border);
-	}
-
-	.vis-pill:last-child {
-		border-right: none;
+		transition: all 0.15s ease;
 	}
 
 	.vis-pill:hover {
-		color: var(--text-secondary);
-		background: var(--bg-hover);
+		color: var(--text-primary);
 	}
 
 	.vis-pill.active {
 		background: var(--accent);
 		color: var(--bg-primary);
+		border-color: var(--accent);
 	}
 
 	.alias-field {
 		display: flex;
 		align-items: center;
-		gap: 4px;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-hover);
+		border-radius: 8px;
+		overflow: hidden;
 	}
 
 	.alias-prefix {
-		color: var(--text-muted);
 		font-size: 0.82rem;
+		color: var(--text-muted);
+		padding: 9px 4px 9px 12px;
 		white-space: nowrap;
 	}
 
 	.alias-input {
-		width: 120px;
-		padding: 8px 10px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-primary);
-		font-size: 0.82rem;
-		font-family: 'JetBrains Mono', monospace;
+		background: transparent;
+		border: none;
 		outline: none;
-		transition: border-color 0.2s;
+		font-family: inherit;
+		font-size: 0.82rem;
+		color: var(--accent);
+		padding: 9px 12px 9px 0;
+		width: 130px;
 	}
 
-	.alias-input:focus {
-		border-color: var(--accent);
+	.alias-input::placeholder {
+		color: var(--text-muted);
 	}
 
-	/* System */
-	.system-prefs {
-		display: flex;
-		flex-direction: column;
-		gap: 14px;
+	/* ---------- terminal (script + raw) ---------- */
+	.term {
+		background: var(--bg-secondary);
+		border: 1px solid var(--border);
+		border-radius: 14px;
+		overflow: hidden;
 	}
 
-	.prefs-top {
+	.term-head {
 		display: flex;
-		justify-content: space-between;
 		align-items: center;
+		gap: 7px;
+		padding: 11px 15px;
+		border-bottom: 1px solid var(--border);
 	}
 
-	.prefs-title {
-		font-size: 0.95rem;
-		font-weight: 600;
-		color: var(--text-primary);
+	.dot {
+		width: 9px;
+		height: 9px;
+		border-radius: 50%;
 	}
 
-	.prefs-count {
-		font-size: 0.78rem;
-		color: var(--text-muted);
-		font-weight: 500;
+	.dot-red {
+		background: var(--danger);
 	}
 
-	/* Accordion */
-	.pref-accordion {
-		display: flex;
-		flex-direction: column;
-		border: 1px solid var(--border);
-		border-radius: 12px;
-		overflow: hidden;
+	.dot-amber {
+		background: var(--amber);
 	}
 
-	.pref-acc-group {
-		border-bottom: 1px solid var(--border);
+	.dot-green {
+		background: var(--accent);
 	}
 
-	.pref-acc-group:last-child {
-		border-bottom: none;
+	.term-name {
+		margin-left: 6px;
+		font-size: 0.72rem;
+		color: var(--text-muted);
 	}
 
-	.pref-acc-header {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		padding: 10px 14px;
-		background: var(--bg-tertiary);
-		border: none;
-		font-family: inherit;
-		cursor: pointer;
-		text-align: left;
-		transition: background 0.1s;
-	}
-
-	.pref-acc-header:hover {
-		background: var(--bg-secondary);
-	}
-
-	.pref-acc-header-static {
-		cursor: default;
-	}
-
-	.pref-acc-header-static:hover {
-		background: var(--bg-tertiary);
-	}
-
-	.pref-acc-chevron {
-		color: var(--text-muted);
-		transition: transform 0.15s;
-		flex-shrink: 0;
-	}
-
-	.pref-acc-chevron-open {
-		transform: rotate(90deg);
-	}
-
-	.pref-acc-name {
-		font-size: 0.84rem;
-		font-weight: 600;
-		color: var(--text-primary);
-		flex: 1;
-	}
-
-	.pref-acc-badge {
-		padding: 2px 7px;
-		background: var(--accent);
-		border-radius: 8px;
-		font-size: 0.65rem;
-		font-weight: 600;
-		color: var(--bg-primary);
-		line-height: 1.3;
-	}
-
-	.pref-acc-total {
-		font-size: 0.72rem;
-		color: var(--text-muted);
-	}
-
-	.pref-acc-body {
-		display: flex;
-		flex-direction: column;
-		background: var(--bg-primary);
-	}
-
-	/* Pref rows */
-	.pref-row {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		padding: 8px 14px;
-		border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
-		transition: background 0.1s;
-	}
-
-	.pref-row-active {
-		background: color-mix(in srgb, var(--accent) 4%, transparent);
-	}
-
-	.pref-toggle-btn {
-		background: none;
-		border: none;
-		padding: 0;
-		cursor: pointer;
-		flex-shrink: 0;
-	}
-
-	.pref-check {
-		width: 18px;
-		height: 18px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 1.5px solid var(--border);
-		border-radius: 4px;
-		font-size: 0.65rem;
-		font-weight: 600;
-		color: transparent;
-		background: var(--bg-secondary);
-		transition: all 0.15s;
-	}
-
-	.pref-check-on {
-		background: var(--accent);
-		border-color: var(--accent);
-		color: var(--bg-primary);
-	}
-
-	.pref-info {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.pref-label {
-		font-size: 0.84rem;
-		font-weight: 500;
-		color: var(--text-primary);
-		display: block;
-	}
-
-	.pref-meta {
+	.term-note {
+		margin-left: auto;
 		font-size: 0.7rem;
 		color: var(--text-muted);
-		display: block;
-		line-height: 1.3;
-	}
-
-	.pref-control {
-		flex-shrink: 0;
-	}
-
-	.pref-bool {
-		padding: 4px 10px;
-		border-radius: 6px;
-		font-size: 0.72rem;
-		font-weight: 600;
-		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.15s;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		color: var(--text-muted);
-		min-width: 44px;
-	}
-
-	.pref-bool.on {
-		background: color-mix(in srgb, var(--accent) 15%, transparent);
-		border-color: var(--accent);
-		color: var(--accent);
-	}
-
-	.pref-sel {
-		padding: 4px 8px;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		color: var(--text-primary);
-		font-size: 0.78rem;
-		font-family: inherit;
-		cursor: pointer;
-		outline: none;
-	}
-
-	.pref-sel:focus {
-		border-color: var(--accent);
-	}
-
-	.pref-val {
-		width: 72px;
-		padding: 4px 8px;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		color: var(--text-primary);
-		font-size: 0.78rem;
-		font-family: 'JetBrains Mono', monospace;
-		outline: none;
-	}
-
-	.pref-val:focus {
-		border-color: var(--accent);
-	}
-
-	.pref-rm {
-		background: none;
-		border: none;
-		color: var(--text-muted);
-		cursor: pointer;
-		font-size: 1.1rem;
-		padding: 2px 4px;
-		border-radius: 4px;
-		transition: color 0.15s;
-		line-height: 1;
-		flex-shrink: 0;
 	}
 
-	.pref-rm:hover {
-		color: var(--danger);
-	}
-
-	.custom-pref-toggle {
-		background: none;
+	.script-textarea {
+		width: 100%;
+		min-height: 200px;
+		padding: 18px 20px;
+		background: transparent;
 		border: none;
-		padding: 0;
-		font-size: 0.78rem;
-		color: var(--text-muted);
-		cursor: pointer;
-		font-family: inherit;
-		text-align: left;
-		transition: color 0.15s;
-	}
-
-	.custom-pref-toggle:hover {
-		color: var(--text-secondary);
-	}
-
-	.custom-pref-row {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-	}
-
-	.custom-pref-input {
-		flex: 1;
-		padding: 10px 12px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-primary);
-		font-size: 0.82rem;
-		font-family: 'JetBrains Mono', monospace;
 		outline: none;
-	}
-
-	.custom-pref-input:focus {
-		border-color: var(--accent);
-	}
-
-	.custom-pref-type {
-		padding: 10px 8px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-secondary);
-		font-size: 0.78rem;
-		font-family: inherit;
-		cursor: pointer;
-		outline: none;
-	}
-
-	.custom-pref-add {
-		padding: 10px 16px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-secondary);
-		font-size: 0.82rem;
-		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.custom-pref-add:hover {
-		border-color: var(--accent);
-		color: var(--accent);
-	}
-
-	.pref-error {
-		font-size: 0.78rem;
-		color: var(--danger);
-	}
-
-	.pref-hint {
-		font-size: 0.75rem;
-		color: var(--text-muted);
-		margin: 0;
-	}
-
-	/* Dotfiles */
-	.system-dotfiles {
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 14px;
-		padding: 20px 24px;
-		display: flex;
-		align-items: center;
-		gap: 16px;
-		flex-wrap: wrap;
-		margin-bottom: 20px;
-	}
-
-	.dotfiles-label {
-		font-size: 0.88rem;
-		font-weight: 600;
-		color: var(--text-primary);
-	}
-
-	.dotfiles-input {
-		flex: 1;
-		min-width: 200px;
-		padding: 10px 12px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-primary);
-		font-size: 0.85rem;
+		resize: vertical;
 		font-family: inherit;
-		outline: none;
-	}
-
-	.dotfiles-input:focus {
-		border-color: var(--accent);
-	}
-
-	.dotfiles-hint {
-		font-size: 0.75rem;
-		color: var(--text-muted);
-		margin: 0;
-		line-height: 1.4;
-	}
-
-	/* Script */
-	.script-card {
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 14px;
-		overflow: hidden;
-	}
-
-	.script-bar {
-		padding: 12px 18px;
-		background: var(--bg-tertiary);
-		border-bottom: 1px solid var(--border);
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.script-filename {
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.82rem;
-		font-weight: 600;
-		color: var(--text-secondary);
-	}
-
-	.script-edit-btn {
-		padding: 5px 14px;
-		background: none;
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		color: var(--accent);
 		font-size: 0.8rem;
-		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.script-edit-btn:hover {
-		border-color: var(--accent);
-		background: var(--accent-glow);
-	}
-
-	.script-preview {
-		padding: 16px 20px;
-		margin: 0;
+		line-height: 1.9;
 		color: var(--text-secondary);
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.82rem;
-		line-height: 1.7;
-		white-space: pre-wrap;
-		word-break: break-all;
-		max-height: 160px;
-		overflow: hidden;
-		cursor: pointer;
 	}
 
-	.script-empty {
-		padding: 24px 20px;
+	.script-textarea::placeholder {
 		color: var(--text-muted);
-		font-size: 0.85rem;
-		text-align: center;
-		cursor: pointer;
 	}
 
-	.script-empty:hover {
-		color: var(--text-secondary);
+	.raw-wrap {
+		padding: 30px 0 0;
 	}
 
-	/* Script modal */
-	.script-modal-overlay {
-		position: fixed;
-		inset: 0;
-		z-index: 1000;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 32px;
-	}
-
-	.script-modal-backdrop {
-		position: absolute;
-		inset: 0;
-		background: rgba(0, 0, 0, 0.7);
-		backdrop-filter: blur(4px);
-	}
-
-	.script-modal {
-		position: relative;
+	.raw-textarea {
+		display: block;
 		width: 100%;
-		max-width: 860px;
-		height: 80vh;
-		max-height: 700px;
-		background: var(--bg-primary);
-		border: 1px solid var(--border);
-		border-radius: 16px;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-		box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
-	}
-
-	.script-modal-bar {
-		padding: 14px 20px;
-		background: var(--bg-tertiary);
-		border-bottom: 1px solid var(--border);
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-shrink: 0;
-	}
-
-	.script-modal-filename {
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.85rem;
-		font-weight: 600;
-		color: var(--text-secondary);
-	}
-
-	.script-modal-actions {
-		display: flex;
-		gap: 8px;
-	}
-
-	.script-modal-cancel {
-		padding: 6px 16px;
-		background: none;
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-secondary);
-		font-size: 0.82rem;
-		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.script-modal-cancel:hover {
-		border-color: var(--text-muted);
-	}
-
-	.script-modal-save {
-		padding: 6px 16px;
-		background: var(--accent);
+		min-height: 58vh;
+		padding: 20px 22px;
+		background: transparent;
 		border: none;
-		border-radius: 8px;
-		color: var(--bg-primary);
-		font-size: 0.82rem;
-		font-weight: 600;
+		outline: none;
+		resize: vertical;
 		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.script-modal-save:hover {
-		opacity: 0.9;
-	}
-
-	.script-modal-body {
-		flex: 1;
-		overflow: hidden;
-	}
-
-
-	.script-modal-hint {
-		padding: 10px 20px;
-		background: var(--bg-tertiary);
-		border-top: 1px solid var(--border);
-		color: var(--text-muted);
-		font-size: 0.75rem;
-		flex-shrink: 0;
+		font-size: 0.8rem;
+		line-height: 1.75;
+		color: var(--text-secondary);
 	}
 
-	@media (max-width: 768px) {
-		.editor {
-			padding: 0 16px 80px;
+	@keyframes ob-fade {
+		from {
+			opacity: 0;
+			transform: translateY(4px);
 		}
-
-		.name-input {
-			font-size: 1.4rem;
+		to {
+			opacity: 1;
+			transform: none;
 		}
+	}
 
-		.identity-row {
-			flex-direction: column;
-			align-items: flex-start;
+	@keyframes ob-pulse {
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.45;
+			transform: scale(1.5);
 		}
+	}
 
-		.editor-header {
-			flex-wrap: wrap;
-			gap: 12px;
+	@media (max-width: 880px) {
+		.editor {
+			padding: 0 22px 80px;
 		}
 
-		.dna-preview {
-			display: none;
+		.form-grid {
+			grid-template-columns: 1fr;
 		}
 	}
 </style>
diff --git a/src/lib/components/ConfigRow.svelte b/src/lib/components/ConfigRow.svelte
index 907e115..ae6805c 100644
--- a/src/lib/components/ConfigRow.svelte
+++ b/src/lib/components/ConfigRow.svelte
@@ -107,11 +107,14 @@
 	</div>
 
 	<div class="row-actions">
-		<button class="copy-cmd" onclick={copyInstall}>
+		<button class="copy-cmd" onclick={copyInstall} aria-label={copied ? 'Copied install command' : 'Copy install command'}>
 			<code><span class="prompt">$</span> curl -fsSL {installUrl} | bash</code>
 			<span class="copy-label" class:copied>
-				<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-				{copied ? 'copied ✓' : 'click to copy install'}
+				{#if copied}
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+				{:else}
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+				{/if}
 			</span>
 		</button>
 		<button class="icon-btn" aria-label="Edit" onclick={() => onaction('edit', config.slug)}>
@@ -127,11 +130,13 @@
 		border: 1px solid var(--border);
 		border-radius: 14px;
 		padding: 20px 22px;
-		transition: border-color 0.18s ease;
+		transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 	}
 
 	.row:hover {
+		transform: translateY(-3px);
 		border-color: var(--border-hover);
+		box-shadow: 0 16px 34px -16px var(--shadow);
 	}
 
 	.row-top {
@@ -257,6 +262,7 @@
 
 	.copy-cmd:hover {
 		border-color: var(--border-hover);
+		background: var(--bg-hover);
 	}
 
 	.copy-cmd code {
@@ -312,7 +318,8 @@
 
 	.icon-btn:hover {
 		border-color: var(--border-hover);
-		color: var(--accent);
+		color: var(--text-primary);
+		background: var(--bg-hover);
 	}
 
 	@media (max-width: 640px) {
diff --git a/src/lib/components/GitHubStarBadge.svelte b/src/lib/components/GitHubStarBadge.svelte
index a7251a8..f0092f3 100644
--- a/src/lib/components/GitHubStarBadge.svelte
+++ b/src/lib/components/GitHubStarBadge.svelte
@@ -34,12 +34,12 @@
 	target="_blank" 
 	rel="noopener noreferrer"
 >
-	<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+	<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
 		<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
 	</svg>
-	<span>GitHub</span>
+	<span class="star">★</span>
 	{#if !loading && starCount > 0}
-		<span class="star-count">[{formatStarCount(starCount)}]</span>
+		<span class="star-count">{formatStarCount(starCount)}</span>
 	{/if}
 </a>
 
@@ -47,28 +47,34 @@
 	.github-star-badge {
 		display: inline-flex;
 		align-items: center;
-		gap: 6px;
-		padding: 0;
+		gap: 7px;
+		padding: 5px 9px;
+		border: 1px solid var(--border);
+		border-radius: 7px;
 		color: var(--text-secondary);
-		font-size: 0.9rem;
-		font-weight: 500;
+		font-size: 0.78rem;
 		text-decoration: none;
-		transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		transition:
+			color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+			border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	.github-star-badge:hover {
 		color: var(--text-primary);
+		border-color: var(--border-hover);
 	}
 
 	.github-star-badge svg {
-		width: 16px;
-		height: 16px;
+		width: 14px;
+		height: 14px;
 		flex-shrink: 0;
 	}
 
+	.star {
+		color: var(--amber);
+	}
+
 	.star-count {
-		font-family: 'JetBrains Mono', monospace;
-		font-weight: 600;
-		color: var(--accent);
+		color: inherit;
 	}
 </style>
diff --git a/src/lib/components/MacOSPreferencesEditor.svelte b/src/lib/components/MacOSPreferencesEditor.svelte
index 4fbd104..44fa262 100644
--- a/src/lib/components/MacOSPreferencesEditor.svelte
+++ b/src/lib/components/MacOSPreferencesEditor.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-	import { CATALOG_CATEGORIES, getCatalogItem, type MacOSPrefCatalogItem } from '$lib/macos-prefs-catalog';
+	import {
+		MACOS_PREF_CATALOG,
+		CATALOG_CATEGORIES,
+		getCatalogItem,
+		type MacOSPrefCatalogItem
+	} from '$lib/macos-prefs-catalog';
 
 	interface MacOSPref {
 		domain: string;
@@ -10,45 +15,15 @@
 		host?: string;
 	}
 
-	let {
-		macosPrefs = $bindable([]),
-		expandedPrefCats = $bindable(new Set<string>()),
-		catalogByCategory,
-		addedCountByCategory,
-		customPrefs,
-	}: {
-		macosPrefs: MacOSPref[];
-		expandedPrefCats: Set<string>;
-		catalogByCategory: Record<string, MacOSPrefCatalogItem[]>;
-		addedCountByCategory: Record<string, number>;
-		customPrefs: { pref: MacOSPref; index: number }[];
-	} = $props();
+	let { macosPrefs = $bindable() }: { macosPrefs: MacOSPref[] } = $props();
 
-	let showCustomPref = $state(false);
-	let prefInput = $state('');
-	let prefTypeInput = $state('');
-	let prefInputError = $state('');
-
-	function togglePrefCat(cat: string) {
-		const next = new Set(expandedPrefCats);
-		if (next.has(cat)) next.delete(cat);
-		else next.add(cat);
-		expandedPrefCats = next;
-	}
-
-	function getAddedPrefIndex(item: MacOSPrefCatalogItem): number {
-		return macosPrefs.findIndex((p) => p.domain === item.domain && p.key === item.key);
-	}
-
-	function isPrefAdded(item: MacOSPrefCatalogItem): boolean {
+	function isOn(item: MacOSPrefCatalogItem): boolean {
 		return macosPrefs.some((p) => p.domain === item.domain && p.key === item.key);
 	}
 
-	function addPrefFromCatalog(item: MacOSPrefCatalogItem) {
-		if (isPrefAdded(item)) {
-			macosPrefs = macosPrefs.filter(
-				(p) => !(p.domain === item.domain && p.key === item.key)
-			);
+	function toggle(item: MacOSPrefCatalogItem) {
+		if (isOn(item)) {
+			macosPrefs = macosPrefs.filter((p) => !(p.domain === item.domain && p.key === item.key));
 		} else {
 			macosPrefs = [
 				...macosPrefs,
@@ -57,517 +32,137 @@
 					key: item.key,
 					type: item.type,
 					value: item.defaultValue,
-					desc: item.description,
-				},
+					desc: item.label
+				}
 			];
 		}
 	}
 
-	function updatePrefValue(index: number, newValue: string) {
-		macosPrefs = macosPrefs.map((p, i) => (i === index ? { ...p, value: newValue } : p));
-	}
+	const byCategory = $derived(
+		CATALOG_CATEGORIES.map((cat) => ({
+			cat,
+			items: MACOS_PREF_CATALOG.filter((i) => i.category === cat)
+		}))
+	);
 
-	function removePref(index: number) {
-		macosPrefs = macosPrefs.filter((_, i) => i !== index);
-	}
+	// Prefs present on the config that aren't in the catalog — show them so they can be removed.
+	const customPrefs = $derived(macosPrefs.filter((p) => !getCatalogItem(p.domain, p.key)));
 
-	function addPref() {
-		const raw = prefInput.trim();
-		const eqIdx = raw.indexOf('=');
-		if (eqIdx <= 0) {
-			prefInputError = 'Format: domain.key=value';
-			return;
-		}
-		const domainKey = raw.slice(0, eqIdx);
-		const value = raw.slice(eqIdx + 1);
-		if (!domainKey.includes('.') || !value) {
-			prefInputError = 'Format: domain.key=value';
-			return;
-		}
-		if (macosPrefs.some((p) => `${p.domain}.${p.key}` === domainKey)) {
-			prefInputError = 'Already added';
-			return;
-		}
-		const dotIdx = domainKey.lastIndexOf('.');
-		macosPrefs = [
-			...macosPrefs,
-			{
-				domain: domainKey.slice(0, dotIdx),
-				key: domainKey.slice(dotIdx + 1),
-				type: prefTypeInput,
-				value,
-				desc: '',
-			},
-		];
-		prefInput = '';
-		prefTypeInput = '';
-		prefInputError = '';
+	function removeCustom(pref: MacOSPref) {
+		macosPrefs = macosPrefs.filter((p) => !(p.domain === pref.domain && p.key === pref.key));
 	}
 </script>
 
-<div class="system-prefs">
-		<div class="prefs-top">
-			<span class="prefs-title">macOS Preferences</span>
-			{#if macosPrefs.length > 0}
-				<span class="prefs-count">{macosPrefs.length} configured</span>
-			{/if}
-		</div>
-
-		<!-- Accordion groups by category -->
-		<div class="pref-accordion">
-			{#each CATALOG_CATEGORIES as cat}
-				{@const items = catalogByCategory[cat]}
-				{@const count = addedCountByCategory[cat] || 0}
-				{@const total = items.length}
-				{@const expanded = expandedPrefCats.has(cat)}
-				<div class="pref-acc-group" class:pref-acc-has-items={count > 0}>
-					<button class="pref-acc-header" onclick={() => togglePrefCat(cat)}>
-						<svg class="pref-acc-chevron" class:pref-acc-chevron-open={expanded} width="12" height="12" viewBox="0 0 12 12"><path d="M4 2l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-						<span class="pref-acc-name">{cat}</span>
-						{#if count > 0}
-							<span class="pref-acc-badge">{count}/{total}</span>
-						{:else}
-							<span class="pref-acc-total">{total}</span>
-						{/if}
+<div class="prefs">
+	{#each byCategory as group (group.cat)}
+		<div class="group">
+			<div class="group-label">{group.cat}</div>
+			{#each group.items as item (item.id)}
+				{@const on = isOn(item)}
+				<div class="row">
+					<div class="row-text">
+						<div class="row-name">{item.label}</div>
+						<div class="row-desc">{item.description}</div>
+					</div>
+					<button class="knob" class:on role="switch" aria-checked={on} aria-label={item.label} onclick={() => toggle(item)}>
+						<span class="knob-dot"></span>
 					</button>
-					{#if expanded}
-						<div class="pref-acc-body">
-							{#each items as item}
-								{@const added = isPrefAdded(item)}
-								{@const prefIdx = getAddedPrefIndex(item)}
-								<div class="pref-row" class:pref-row-active={added}>
-									<button
-										class="pref-toggle-btn"
-										onclick={() => addPrefFromCatalog(item)}
-									>
-										<span class="pref-check" class:pref-check-on={added}>{added ? '✓' : ''}</span>
-									</button>
-									<div class="pref-info">
-										<span class="pref-label">{item.label}</span>
-										<span class="pref-meta">{item.description}</span>
-									</div>
-									{#if added && prefIdx >= 0}
-										<div class="pref-control">
-											{#if item.options}
-												<select
-													class="pref-sel"
-													value={macosPrefs[prefIdx].value}
-													onchange={(e) => updatePrefValue(prefIdx, e.currentTarget.value)}
-												>
-													{#each item.options as opt}
-														<option value={opt.value}>{opt.label}</option>
-													{/each}
-												</select>
-											{:else if item.type === 'bool'}
-												<button
-													class="pref-bool"
-													class:on={macosPrefs[prefIdx].value === 'true'}
-													onclick={() => updatePrefValue(prefIdx, macosPrefs[prefIdx].value === 'true' ? 'false' : 'true')}
-												>
-													{macosPrefs[prefIdx].value === 'true' ? 'ON' : 'OFF'}
-												</button>
-											{:else}
-												<input
-													type={(item.type === 'int' || item.type === 'float') ? 'number' : 'text'}
-													class="pref-val"
-													value={macosPrefs[prefIdx].value}
-													min={item.min}
-													max={item.max}
-													oninput={(e) => updatePrefValue(prefIdx, e.currentTarget.value)}
-												/>
-											{/if}
-										</div>
-									{/if}
-								</div>
-							{/each}
-						</div>
-					{/if}
 				</div>
 			{/each}
 		</div>
-
-		<!-- Custom prefs not in catalog -->
-		{#if customPrefs.length > 0}
-			<div class="pref-acc-group pref-acc-has-items">
-				<div class="pref-acc-header pref-acc-header-static">
-					<span class="pref-acc-name">Custom</span>
-					<span class="pref-acc-badge">{customPrefs.length}</span>
-				</div>
-				<div class="pref-acc-body">
-					{#each customPrefs as { pref, index }}
-						<div class="pref-row pref-row-active">
-							<button class="pref-toggle-btn" onclick={() => removePref(index)}>
-								<span class="pref-check pref-check-on">✓</span>
-							</button>
-							<div class="pref-info">
-								<span class="pref-label">{pref.domain}.{pref.key}</span>
-								{#if pref.desc}
-									<span class="pref-meta">{pref.desc}</span>
-								{/if}
-							</div>
-							<div class="pref-control">
-								<input
-									type="text"
-									class="pref-val"
-									value={pref.value}
-									oninput={(e) => updatePrefValue(index, e.currentTarget.value)}
-								/>
-							</div>
-							<button class="pref-rm" onclick={() => removePref(index)}>&times;</button>
-						</div>
-					{/each}
+	{/each}
+
+	{#if customPrefs.length > 0}
+		<div class="group">
+			<div class="group-label">Custom</div>
+			{#each customPrefs as pref (pref.domain + ':' + pref.key)}
+				<div class="row">
+					<div class="row-text">
+						<div class="row-name">{pref.desc || pref.key}</div>
+						<div class="row-desc">{pref.domain} {pref.key} = {pref.value}</div>
+					</div>
+					<button class="knob on" role="switch" aria-checked="true" aria-label="Remove {pref.key}" onclick={() => removeCustom(pref)}>
+						<span class="knob-dot"></span>
+					</button>
 				</div>
-			</div>
-		{/if}
-
-		<button
-			class="custom-pref-toggle"
-			onclick={() => (showCustomPref = !showCustomPref)}
-		>
-			{showCustomPref ? '− Hide' : '+ Custom defaults key'}
-		</button>
-		{#if showCustomPref}
-			<div class="custom-pref-row">
-				<input
-					type="text"
-					class="custom-pref-input"
-					bind:value={prefInput}
-					placeholder="com.apple.dock.tilesize=48"
-					onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), addPref())}
-				/>
-				<select class="custom-pref-type" bind:value={prefTypeInput}>
-					<option value="">auto</option>
-					<option value="string">string</option>
-					<option value="int">int</option>
-					<option value="bool">bool</option>
-					<option value="float">float</option>
-				</select>
-				<button class="custom-pref-add" onclick={addPref}>Add</button>
-			</div>
-			{#if prefInputError}
-				<p class="pref-error">{prefInputError}</p>
-			{:else}
-				<p class="pref-hint">Format: domain.key=value</p>
-			{/if}
-		{/if}
-	</div>
+			{/each}
+		</div>
+	{/if}
+</div>
 
 <style>
-	.system-prefs {
+	.prefs {
 		display: flex;
 		flex-direction: column;
-		gap: 14px;
 	}
 
-	.prefs-top {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+	.group + .group {
+		margin-top: 14px;
 	}
 
-	.prefs-title {
-		font-size: 0.95rem;
+	.group-label {
+		font-size: 0.66rem;
 		font-weight: 600;
-		color: var(--text-primary);
-	}
-
-	.prefs-count {
-		font-size: 0.78rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
 		color: var(--text-muted);
-		font-weight: 500;
-	}
-
-	/* Accordion */
-	.pref-accordion {
-		display: flex;
-		flex-direction: column;
-		border: 1px solid var(--border);
-		border-radius: 12px;
-		overflow: hidden;
-	}
-
-	.pref-acc-group {
-		border-bottom: 1px solid var(--border);
-	}
-
-	.pref-acc-group:last-child {
-		border-bottom: none;
-	}
-
-	.pref-acc-header {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		padding: 10px 14px;
-		background: var(--bg-tertiary);
-		border: none;
-		font-family: inherit;
-		cursor: pointer;
-		text-align: left;
-		transition: background 0.1s;
-	}
-
-	.pref-acc-header:hover {
-		background: var(--bg-secondary);
-	}
-
-	.pref-acc-header-static {
-		cursor: default;
-	}
-
-	.pref-acc-header-static:hover {
-		background: var(--bg-tertiary);
-	}
-
-	.pref-acc-chevron {
-		color: var(--text-muted);
-		transition: transform 0.15s;
-		flex-shrink: 0;
-	}
-
-	.pref-acc-chevron-open {
-		transform: rotate(90deg);
-	}
-
-	.pref-acc-name {
-		font-size: 0.84rem;
-		font-weight: 600;
-		color: var(--text-primary);
-		flex: 1;
-	}
-
-	.pref-acc-badge {
-		padding: 2px 7px;
-		background: var(--accent);
-		border-radius: 8px;
-		font-size: 0.65rem;
-		font-weight: 700;
-		color: #000;
-		line-height: 1.3;
-	}
-
-	.pref-acc-total {
-		font-size: 0.72rem;
-		color: var(--text-muted);
-	}
-
-	.pref-acc-body {
-		display: flex;
-		flex-direction: column;
-		background: var(--bg-primary);
+		padding: 8px 0 2px;
 	}
 
-	/* Pref rows */
-	.pref-row {
+	.row {
 		display: flex;
 		align-items: center;
-		gap: 10px;
-		padding: 8px 14px;
-		border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
-		transition: background 0.1s;
-	}
-
-	.pref-row-active {
-		background: color-mix(in srgb, var(--accent) 4%, transparent);
-	}
-
-	.pref-toggle-btn {
-		background: none;
-		border: none;
-		padding: 0;
-		cursor: pointer;
-		flex-shrink: 0;
-	}
-
-	.pref-check {
-		width: 18px;
-		height: 18px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 1.5px solid var(--border);
-		border-radius: 4px;
-		font-size: 0.65rem;
-		font-weight: 700;
-		color: transparent;
-		background: var(--bg-secondary);
-		transition: all 0.15s;
-	}
-
-	.pref-check-on {
-		background: var(--accent);
-		border-color: var(--accent);
-		color: #000;
+		justify-content: space-between;
+		gap: 16px;
+		padding: 12px 4px;
+		border-bottom: 1px solid var(--border);
 	}
 
-	.pref-info {
-		flex: 1;
+	.row-text {
 		min-width: 0;
 	}
 
-	.pref-label {
-		font-size: 0.84rem;
-		font-weight: 500;
+	.row-name {
+		font-size: 0.86rem;
 		color: var(--text-primary);
-		display: block;
 	}
 
-	.pref-meta {
-		font-size: 0.7rem;
-		color: var(--text-muted);
-		display: block;
-		line-height: 1.3;
-	}
-
-	.pref-control {
-		flex-shrink: 0;
-	}
-
-	.pref-bool {
-		padding: 4px 10px;
-		border-radius: 6px;
+	.row-desc {
 		font-size: 0.72rem;
-		font-weight: 700;
-		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.15s;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
 		color: var(--text-muted);
-		min-width: 44px;
-	}
-
-	.pref-bool.on {
-		background: color-mix(in srgb, var(--accent) 15%, transparent);
-		border-color: var(--accent);
-		color: var(--accent);
+		margin-top: 2px;
+		line-height: 1.4;
 	}
 
-	.pref-sel {
-		padding: 4px 8px;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		color: var(--text-primary);
-		font-size: 0.78rem;
-		font-family: inherit;
-		cursor: pointer;
-		outline: none;
-	}
-
-	.pref-sel:focus {
-		border-color: var(--accent);
-	}
-
-	.pref-val {
-		width: 72px;
-		padding: 4px 8px;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		color: var(--text-primary);
-		font-size: 0.78rem;
-		font-family: 'JetBrains Mono', monospace;
-		outline: none;
-	}
-
-	.pref-val:focus {
-		border-color: var(--accent);
-	}
-
-	.pref-rm {
-		background: none;
-		border: none;
-		color: var(--text-muted);
-		cursor: pointer;
-		font-size: 1.1rem;
-		padding: 2px 4px;
-		border-radius: 4px;
-		transition: color 0.15s;
-		line-height: 1;
+	.knob {
+		width: 34px;
+		height: 20px;
+		border-radius: 20px;
+		position: relative;
 		flex-shrink: 0;
-	}
-
-	.pref-rm:hover {
-		color: var(--danger);
-	}
-
-	.custom-pref-toggle {
-		background: none;
+		cursor: pointer;
 		border: none;
 		padding: 0;
-		font-size: 0.78rem;
-		color: var(--text-muted);
-		cursor: pointer;
-		font-family: inherit;
-		text-align: left;
-		transition: color 0.15s;
+		background: var(--border-hover);
+		transition: background 0.18s ease;
 	}
 
-	.custom-pref-toggle:hover {
-		color: var(--text-secondary);
-	}
-
-	.custom-pref-row {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-	}
-
-	.custom-pref-input {
-		flex: 1;
-		padding: 10px 12px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-primary);
-		font-size: 0.82rem;
-		font-family: 'JetBrains Mono', monospace;
-		outline: none;
-	}
-
-	.custom-pref-input:focus {
-		border-color: var(--accent);
-	}
-
-	.custom-pref-type {
-		padding: 10px 8px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-secondary);
-		font-size: 0.78rem;
-		font-family: inherit;
-		cursor: pointer;
-		outline: none;
-	}
-
-	.custom-pref-add {
-		padding: 10px 16px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-secondary);
-		font-size: 0.82rem;
-		font-family: inherit;
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.custom-pref-add:hover {
-		border-color: var(--accent);
-		color: var(--accent);
+	.knob.on {
+		background: var(--accent);
 	}
 
-	.pref-error {
-		font-size: 0.78rem;
-		color: var(--danger);
+	.knob-dot {
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background: var(--bg-primary);
+		transition: left 0.18s ease;
 	}
 
-	.pref-hint {
-		font-size: 0.75rem;
-		color: var(--text-muted);
-		margin: 0;
+	.knob.on .knob-dot {
+		left: 16px;
 	}
 </style>
diff --git a/src/lib/components/PackageDna.svelte b/src/lib/components/PackageDna.svelte
deleted file mode 100644
index f7adbcf..0000000
--- a/src/lib/components/PackageDna.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-	interface Package {
-		name: string;
-		type: string;
-	}
-
-	let { packages = [] }: { packages: Package[] } = $props();
-
-	const cols = 10;
-	const rows = 4;
-	const size = 7;
-	const gap = 3;
-	const totalCells = cols * rows;
-	const w = cols * (size + gap) - gap;
-	const h = rows * (size + gap) - gap;
-
-	function getColor(type: string): string {
-		if (type === 'cask') return '#3b82f6';
-		if (type === 'npm') return '#f97316';
-		return '#22c55e';
-	}
-
-	// Group by type for visual clustering
-	const sorted = $derived([
-		...packages.filter(p => p.type === 'cask'),
-		...packages.filter(p => p.type !== 'cask' && p.type !== 'npm'),
-		...packages.filter(p => p.type === 'npm'),
-	]);
-</script>
-
-<svg class="dna" viewBox="0 0 {w} {h}" width={w} height={h} aria-label="Package DNA visualization">
-	{#each Array(totalCells) as _, i}
-		{@const x = (i % cols) * (size + gap)}
-		{@const y = Math.floor(i / cols) * (size + gap)}
-		{@const pkg = sorted[i]}
-		<rect
-			{x} {y}
-			width={size} height={size}
-			rx="1.5"
-			fill={pkg ? getColor(pkg.type) : 'currentColor'}
-			opacity={pkg ? 0.9 : 0.07}
-		>
-			{#if pkg}
-				<title>{pkg.name} ({pkg.type})</title>
-			{/if}
-		</rect>
-	{/each}
-</svg>
-
-<style>
-	.dna {
-		display: block;
-		color: var(--text-muted);
-	}
-</style>
diff --git a/src/lib/components/PackageManager.svelte b/src/lib/components/PackageManager.svelte
index 84ac252..9992492 100644
--- a/src/lib/components/PackageManager.svelte
+++ b/src/lib/components/PackageManager.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { PRESET_PACKAGES } from '$lib/presets';
-
 	interface SearchResult {
 		name: string;
 		desc: string;
@@ -9,13 +7,11 @@
 
 	let {
 		selectedPackages,
-		packageDescs,
 		basePreset,
 		togglePackage,
-		onPresetChange,
+		onPresetChange
 	}: {
 		selectedPackages: Map<string, string>;
-		packageDescs: Map<string, string>;
 		basePreset: string;
 		togglePackage: (name: string, type: string, desc?: string) => void;
 		onPresetChange: (preset: string) => void;
@@ -25,21 +21,42 @@
 		return `${type}:${name}`;
 	}
 
+	const presets = ['minimal', 'developer', 'full', 'scratch'];
+
+	/** Type → dot color, matching the package "DNA" language. */
+	function dotColor(type: string): string {
+		if (type === 'cask') return 'var(--amber)';
+		if (type === 'npm') return '#7aa2e3';
+		if (type === 'tap') return 'var(--text-muted)';
+		return 'var(--accent)';
+	}
+
+	/** "cirruslabs/cli/tart" → "tart" */
+	function displayName(name: string): string {
+		if (name.includes('/')) return name.split('/').pop() as string;
+		return name;
+	}
+
+	// Selected packages in insertion order.
+	const packageList = $derived(
+		Array.from(selectedPackages.entries()).map(([key, type]) => ({
+			name: key.slice(type.length + 1),
+			type
+		}))
+	);
+
+	let searchOpen = $state(false);
 	let searchQuery = $state('');
 	let searchResults = $state<SearchResult[]>([]);
 	let searchLoading = $state(false);
+	let searchInput = $state<HTMLInputElement | null>(null);
 	let searchTimer: ReturnType<typeof setTimeout> | null = null;
 
-	let showImport = $state(false);
-	let brewfileContent = $state('');
-	let importLoading = $state(false);
-	let importError = $state('');
-
 	function isTapPackage(q: string): boolean {
 		return /^[a-z0-9_-]+\/[a-z0-9_-]+\/[a-z0-9_-]+$/i.test(q);
 	}
 
-	async function search(query: string) {
+	async function runSearch(query: string) {
 		if (query.length < 2) {
 			searchResults = [];
 			return;
@@ -48,16 +65,14 @@
 		try {
 			const [brewRes, npmRes] = await Promise.allSettled([
 				fetch(`/api/homebrew/search?q=${encodeURIComponent(query)}`).then((r) => r.json()),
-				fetch(`/api/npm/search?q=${encodeURIComponent(query)}`).then((r) => r.json()),
+				fetch(`/api/npm/search?q=${encodeURIComponent(query)}`).then((r) => r.json())
 			]);
-			const brew: SearchResult[] =
-				brewRes.status === 'fulfilled' ? brewRes.value.results || [] : [];
+			const brew: SearchResult[] = brewRes.status === 'fulfilled' ? brewRes.value.results || [] : [];
 			const npm: SearchResult[] =
 				npmRes.status === 'fulfilled'
 					? (npmRes.value.results || []).map((r: any) => ({ ...r, type: 'npm' as const }))
 					: [];
 			searchResults = [...brew, ...npm];
-
 			if (isTapPackage(query) && !searchResults.some((r) => r.name === query)) {
 				searchResults.unshift({ name: query, desc: 'Third-party tap package', type: 'tap' });
 			}
@@ -76,618 +91,317 @@
 			searchResults = [];
 			return;
 		}
-		searchTimer = setTimeout(() => search(value), 300);
+		searchTimer = setTimeout(() => runSearch(value), 300);
 	}
 
-	/** Extract display name from a package name. "cirruslabs/cli/tart" → "tart" */
-	function displayName(name: string): string {
-		if (name.includes('/')) {
-			const parts = name.split('/');
-			return parts[parts.length - 1];
-		}
-		return name;
+	async function openSearch() {
+		searchOpen = true;
+		await Promise.resolve();
+		searchInput?.focus();
 	}
 
-	const grouped = $derived.by(() => {
-		const apps: string[] = [];
-		const cli: string[] = [];
-		const npm: string[] = [];
-		const taps: string[] = [];
-		for (const [key, type] of selectedPackages) {
-			const name = key.slice(type.length + 1);
-			if (type === 'cask') apps.push(name);
-			else if (type === 'npm') npm.push(name);
-			else if (type === 'tap') taps.push(name);
-			else cli.push(name);
-		}
-		return { apps, cli, npm, taps };
-	});
-
-	const presets = [
-		{ key: 'minimal', label: 'Minimal', desc: 'CLI essentials' },
-		{ key: 'developer', label: 'Developer', desc: 'Ready-to-code' },
-		{ key: 'full', label: 'Full', desc: 'Everything' },
-	];
-
-	async function importBrewfile() {
-		if (!brewfileContent.trim()) {
-			importError = 'Paste your Brewfile content';
-			return;
-		}
-		importLoading = true;
-		importError = '';
-		try {
-			const response = await fetch('/api/brewfile/parse', {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ content: brewfileContent }),
-			});
-			const data = await response.json();
-			if (!response.ok) {
-				importError = data.error || 'Failed to parse';
-				return;
-			}
-			if (data.packages.length === 0) {
-				importError = 'No packages found';
-				return;
-			}
-			const caskSet = new Set<string>(data.casks || []);
-			for (const pkg of data.packages) {
-				const type = caskSet.has(pkg) ? 'cask' : 'formula';
-				if (!selectedPackages.has(pkgKey(pkg, type))) {
-					togglePackage(pkg, type);
-				}
-			}
-			showImport = false;
-			brewfileContent = '';
-		} catch {
-			importError = 'Failed to parse Brewfile';
-		} finally {
-			importLoading = false;
-		}
+	function closeSearch() {
+		searchOpen = false;
+		searchQuery = '';
+		searchResults = [];
 	}
 </script>
 
-<div class="pm">
-	<!-- Preset selector -->
+<div class="card">
+	<div class="field-label">Base preset</div>
 	<div class="presets">
-		{#each presets as p}
-			<button
-				class="preset"
-				class:active={basePreset === p.key}
-				onclick={() => onPresetChange(p.key)}
-			>
-				<span class="preset-name">{p.label}</span>
-				<span class="preset-desc">{p.desc}</span>
-			</button>
+		{#each presets as p (p)}
+			<button class="preset" class:active={basePreset === p} onclick={() => onPresetChange(p)}>{p}</button>
 		{/each}
 	</div>
 
-	<!-- Unified search -->
-	<div class="search-bar">
-		<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-			<circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
-		</svg>
-		<input
-			type="text"
-			class="search-input"
-			value={searchQuery}
-			oninput={handleSearch}
-			placeholder="Search Homebrew & npm packages..."
-		/>
-		<button class="import-btn" onclick={() => (showImport = !showImport)}>
-			Import
-		</button>
-	</div>
-
-	<!-- Search results -->
-	{#if searchLoading}
-		<div class="search-status">Searching...</div>
-	{:else if searchQuery.length >= 2 && searchResults.length === 0}
-		<div class="search-status">No results for "{searchQuery}"</div>
-	{:else if searchResults.length > 0}
-		<div class="results">
-			{#each searchResults as result}
-				<button
-					type="button"
-					class="result-item"
-					class:selected={selectedPackages.has(pkgKey(result.name, result.type))}
-					onclick={() => togglePackage(result.name, result.type, result.desc)}
-				>
-					<span
-						class="result-check"
-						class:checked={selectedPackages.has(pkgKey(result.name, result.type))}
-					>
-						{selectedPackages.has(pkgKey(result.name, result.type)) ? '✓' : ''}
-					</span>
-					<div class="result-info">
-						<div class="result-top">
-							<span class="result-name">{result.name}</span>
-							<span class="result-badge {result.type}">{result.type}</span>
-						</div>
-						{#if result.desc}
-							<span class="result-desc"
-								>{result.desc.slice(0, 80)}{result.desc.length > 80 ? '...' : ''}</span
-							>
-						{/if}
-					</div>
-				</button>
-			{/each}
-		</div>
-	{/if}
-
-	<!-- Import panel -->
-	{#if showImport}
-		<div class="import-panel">
-			{#if importError}
-				<div class="import-error">{importError}</div>
-			{/if}
-			<textarea
-				class="import-textarea"
-				bind:value={brewfileContent}
-				placeholder={'tap "homebrew/cask"\nbrew "git"\ncask "visual-studio-code"'}
-			></textarea>
-			<div class="import-actions">
-				<button class="import-cancel" onclick={() => (showImport = false)}>Cancel</button>
-				<button class="import-go" onclick={importBrewfile}>
-					{importLoading ? 'Parsing...' : 'Import Brewfile'}
-				</button>
-			</div>
-		</div>
-	{/if}
-
-	<!-- Selected packages -->
-	<div class="groups">
-		{#if grouped.apps.length > 0}
-			<div class="group">
-				<div class="group-label">
-					<span class="group-dot" style="background: #3b82f6"></span>
-					APPS
-					<span class="group-count">{grouped.apps.length}</span>
-				</div>
-				<div class="group-tags">
-					{#each grouped.apps as pkg}
-						<button class="tag cask" onclick={() => togglePackage(pkg, 'cask')}>
-							{displayName(pkg)}<span class="tag-x">&times;</span>
-						</button>
-					{/each}
-				</div>
-			</div>
-		{/if}
-
-		{#if grouped.cli.length > 0}
-			<div class="group">
-				<div class="group-label">
-					<span class="group-dot" style="background: #22c55e"></span>
-					CLI
-					<span class="group-count">{grouped.cli.length}</span>
-				</div>
-				<div class="group-tags">
-					{#each grouped.cli as pkg}
-						<button class="tag cli" onclick={() => togglePackage(pkg, 'formula')}>
-							{displayName(pkg)}<span class="tag-x">&times;</span>
-						</button>
-					{/each}
-				</div>
-			</div>
+	<div class="field-label field-label-spaced">Packages</div>
+	<div class="chips">
+		{#each packageList as pk (pk.type + ':' + pk.name)}
+			<span class="chip">
+				<span class="chip-dot" style="background:{dotColor(pk.type)};"></span>{displayName(pk.name)}
+				<button class="chip-x" aria-label="Remove {pk.name}" onclick={() => togglePackage(pk.name, pk.type)}>×</button>
+			</span>
+		{/each}
+		{#if packageList.length === 0}
+			<span class="chips-empty">No packages — pick a preset or add one below.</span>
 		{/if}
+	</div>
 
-		{#if grouped.npm.length > 0}
-			<div class="group">
-				<div class="group-label">
-					<span class="group-dot" style="background: #f97316"></span>
-					NPM
-					<span class="group-count">{grouped.npm.length}</span>
-				</div>
-				<div class="group-tags">
-					{#each grouped.npm as pkg}
-						<button class="tag npm" onclick={() => togglePackage(pkg, 'npm')}>
-							{pkg}<span class="tag-x">&times;</span>
-						</button>
-					{/each}
-				</div>
+	{#if !searchOpen}
+		<button class="add-pkg" onclick={openSearch}>
+			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+			<span>Search Homebrew &amp; npm to add a package…</span>
+		</button>
+	{:else}
+		<div class="search">
+			<div class="search-bar">
+				<svg class="search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
+				<input
+					bind:this={searchInput}
+					class="search-input"
+					value={searchQuery}
+					oninput={handleSearch}
+					onkeydown={(e) => e.key === 'Escape' && closeSearch()}
+					placeholder="Search Homebrew & npm…"
+				/>
+				<button class="search-close" aria-label="Close search" onclick={closeSearch}>×</button>
 			</div>
-		{/if}
-
-		{#if grouped.taps.length > 0}
-			<div class="group">
-				<div class="group-label">
-					<span class="group-dot" style="background: #a855f7"></span>
-					TAPS
-					<span class="group-count">{grouped.taps.length}</span>
-				</div>
-				<div class="group-tags">
-					{#each grouped.taps as pkg}
-						<button class="tag tap" onclick={() => togglePackage(pkg, 'tap')}>
-							{pkg}<span class="tag-x">&times;</span>
+			{#if searchLoading}
+				<div class="search-status">Searching…</div>
+			{:else if searchQuery.length >= 2 && searchResults.length === 0}
+				<div class="search-status">No results for "{searchQuery}"</div>
+			{:else if searchResults.length > 0}
+				<div class="results">
+					{#each searchResults as result (result.type + ':' + result.name)}
+						{@const on = selectedPackages.has(pkgKey(result.name, result.type))}
+						<button class="result" class:on onclick={() => togglePackage(result.name, result.type, result.desc)}>
+							<span class="result-dot" style="background:{dotColor(result.type)};"></span>
+							<span class="result-name">{result.name}</span>
+							{#if result.desc}<span class="result-desc">{result.desc}</span>{/if}
+							<span class="result-mark">{on ? '✓' : '+'}</span>
 						</button>
 					{/each}
 				</div>
-			</div>
-		{/if}
-
-		{#if selectedPackages.size === 0}
-			<div class="empty-packages">No packages selected. Choose a preset or search above.</div>
-		{/if}
-	</div>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
-	.pm {
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
+	.card {
+		background: var(--bg-secondary);
+		border: 1px solid var(--border);
+		border-radius: 14px;
+		padding: 22px;
+	}
+
+	.field-label {
+		font-size: 0.74rem;
+		color: var(--text-secondary);
+		margin-bottom: 11px;
+	}
+
+	.field-label-spaced {
+		margin-top: 22px;
 	}
 
-	/* Presets */
 	.presets {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 10px;
+		display: flex;
+		gap: 8px;
+		flex-wrap: wrap;
 	}
 
 	.preset {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		padding: 14px 16px;
-		background: var(--bg-tertiary);
-		border: 2px solid var(--border);
-		border-radius: 12px;
-		cursor: pointer;
-		transition: all 0.2s;
-		text-align: left;
+		padding: 9px 16px;
+		border-radius: 8px;
 		font-family: inherit;
+		font-size: 0.82rem;
+		cursor: pointer;
+		background: var(--bg-tertiary);
+		color: var(--text-secondary);
+		border: 1px solid var(--border-hover);
+		text-transform: capitalize;
+		transition: all 0.15s ease;
 	}
 
 	.preset:hover {
-		border-color: var(--border-hover);
-		background: var(--bg-hover);
+		color: var(--text-primary);
 	}
 
 	.preset.active {
+		background: var(--accent);
+		color: var(--bg-primary);
 		border-color: var(--accent);
-		background: rgba(34, 197, 94, 0.06);
 	}
 
-	.preset-name {
-		font-size: 0.9rem;
-		font-weight: 700;
-		color: var(--text-primary);
-	}
-
-	.preset-desc {
-		font-size: 0.75rem;
-		color: var(--text-muted);
+	.chips {
+		display: flex;
+		gap: 8px;
+		flex-wrap: wrap;
+		margin-bottom: 14px;
 	}
 
-	/* Search */
-	.search-bar {
-		display: flex;
+	.chip {
+		display: inline-flex;
 		align-items: center;
-		gap: 10px;
-		padding: 0 16px;
+		gap: 8px;
+		padding: 7px 10px 7px 12px;
 		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 12px;
-		transition: border-color 0.2s;
-	}
-
-	.search-bar:focus-within {
-		border-color: var(--accent);
+		border: 1px solid var(--border-hover);
+		border-radius: 8px;
+		font-size: 0.8rem;
+		color: var(--text-primary);
 	}
 
-	.search-icon {
-		color: var(--text-muted);
+	.chip-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
 		flex-shrink: 0;
 	}
 
-	.search-input {
-		flex: 1;
-		padding: 14px 0;
+	.chip-x {
 		background: none;
 		border: none;
-		color: var(--text-primary);
-		font-size: 0.9rem;
-		font-family: inherit;
-		outline: none;
-	}
-
-	.search-input::placeholder {
+		padding: 0 0 0 2px;
 		color: var(--text-muted);
-	}
-
-	.import-btn {
-		padding: 6px 12px;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		color: var(--text-muted);
-		font-size: 0.78rem;
-		font-weight: 600;
 		cursor: pointer;
-		transition: all 0.15s;
 		font-family: inherit;
-		white-space: nowrap;
+		font-size: 0.95rem;
+		line-height: 1;
+		transition: color 0.15s ease;
 	}
 
-	.import-btn:hover {
-		color: var(--text-secondary);
-		border-color: var(--border-hover);
+	.chip-x:hover {
+		color: var(--danger);
 	}
 
-	.search-status {
-		text-align: center;
+	.chips-empty {
+		font-size: 0.8rem;
 		color: var(--text-muted);
-		font-size: 0.85rem;
-		padding: 16px;
 	}
 
-	/* Results */
-	.results {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-		gap: 6px;
-		max-height: 320px;
-		overflow-y: auto;
-		padding: 4px;
-		border-radius: 8px;
-	}
-
-	.result-item {
+	.add-pkg {
+		width: 100%;
 		display: flex;
-		align-items: flex-start;
-		gap: 10px;
-		padding: 10px 12px;
+		align-items: center;
+		gap: 8px;
 		background: var(--bg-tertiary);
-		border: 1.5px solid var(--border);
+		border: 1px dashed var(--border-hover);
 		border-radius: 8px;
+		padding: 10px 12px;
+		font-family: inherit;
 		cursor: pointer;
-		transition: all 0.15s;
 		text-align: left;
-		font-family: inherit;
+		transition: border-color 0.15s ease, background 0.15s ease;
 	}
 
-	.result-item:hover {
-		border-color: var(--border-hover);
+	.add-pkg:hover {
+		border-color: var(--accent);
 		background: var(--bg-hover);
 	}
 
-	.result-item.selected {
-		border-color: var(--accent);
-		background: rgba(34, 197, 94, 0.08);
+	.add-pkg span {
+		font-size: 0.82rem;
+		color: var(--text-muted);
 	}
 
-	.result-check {
-		width: 18px;
-		height: 18px;
-		min-width: 18px;
+	/* search */
+	.search {
 		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 1.5px solid var(--border);
-		border-radius: 4px;
-		font-size: 0.7rem;
-		color: var(--accent);
-		background: var(--bg-secondary);
-		margin-top: 1px;
-	}
-
-	.result-check.checked {
-		background: var(--accent);
-		border-color: var(--accent);
-		color: #000;
-	}
-
-	.result-info {
-		flex: 1;
-		min-width: 0;
+		flex-direction: column;
+		gap: 8px;
 	}
 
-	.result-top {
+	.search-bar {
 		display: flex;
 		align-items: center;
-		gap: 8px;
-	}
-
-	.result-name {
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.82rem;
-		font-weight: 600;
-		color: var(--text-primary);
+		gap: 9px;
+		padding: 0 12px;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--accent);
+		border-radius: 8px;
 	}
 
-	.result-badge {
-		font-size: 0.6rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		padding: 2px 6px;
-		border-radius: 4px;
+	.search-icon {
+		color: var(--text-muted);
 		flex-shrink: 0;
 	}
 
-	.result-badge.formula {
-		background: rgba(34, 197, 94, 0.12);
-		color: #22c55e;
+	.search-input {
+		flex: 1;
+		padding: 10px 0;
+		background: none;
+		border: none;
+		outline: none;
+		font-family: inherit;
+		font-size: 0.84rem;
+		color: var(--text-primary);
 	}
 
-	.result-badge.cask {
-		background: rgba(59, 130, 246, 0.12);
-		color: #3b82f6;
+	.search-input::placeholder {
+		color: var(--text-muted);
 	}
 
-	.result-badge.npm {
-		background: rgba(249, 115, 22, 0.12);
-		color: #f97316;
+	.search-close {
+		background: none;
+		border: none;
+		color: var(--text-muted);
+		cursor: pointer;
+		font-size: 1.1rem;
+		line-height: 1;
+		padding: 0 2px;
+		transition: color 0.15s ease;
 	}
 
-	.result-badge.tap {
-		background: rgba(168, 85, 247, 0.12);
-		color: #a855f7;
+	.search-close:hover {
+		color: var(--text-primary);
 	}
 
-	.result-desc {
-		font-size: 0.74rem;
+	.search-status {
+		font-size: 0.8rem;
 		color: var(--text-muted);
-		line-height: 1.3;
-		display: block;
-		margin-top: 2px;
+		padding: 8px 2px;
 	}
 
-	/* Import */
-	.import-panel {
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 12px;
-		padding: 16px;
+	.results {
 		display: flex;
 		flex-direction: column;
-		gap: 12px;
-	}
-
-	.import-error {
-		color: var(--danger);
-		font-size: 0.82rem;
-		padding: 8px 12px;
-		background: rgba(239, 68, 68, 0.08);
-		border-radius: 6px;
-	}
-
-	.import-textarea {
-		min-height: 140px;
-		padding: 12px;
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: 8px;
-		color: var(--text-primary);
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.82rem;
-		resize: vertical;
-	}
-
-	.import-textarea:focus {
-		outline: none;
-		border-color: var(--accent);
+		gap: 2px;
+		max-height: 280px;
+		overflow-y: auto;
 	}
 
-	.import-actions {
+	.result {
 		display: flex;
-		justify-content: flex-end;
-		gap: 8px;
-	}
-
-	.import-cancel,
-	.import-go {
-		padding: 8px 16px;
+		align-items: center;
+		gap: 9px;
+		width: 100%;
+		padding: 9px 11px;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border);
 		border-radius: 8px;
-		font-size: 0.82rem;
-		font-weight: 600;
 		font-family: inherit;
+		text-align: left;
 		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.import-cancel {
-		background: none;
-		border: 1px solid var(--border);
-		color: var(--text-secondary);
+		transition: border-color 0.15s ease;
 	}
 
-	.import-go {
-		background: var(--accent);
-		border: none;
-		color: #000;
-	}
-
-	.import-go:hover {
-		background: var(--accent-hover);
-	}
-
-	/* Groups */
-	.groups {
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
+	.result:hover {
+		border-color: var(--border-hover);
 	}
 
-	.group-label {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		font-size: 0.68rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		color: var(--text-muted);
-		margin-bottom: 8px;
+	.result.on {
+		border-color: var(--accent);
 	}
 
-	.group-dot {
+	.result-dot {
 		width: 6px;
 		height: 6px;
 		border-radius: 50%;
+		flex-shrink: 0;
 	}
 
-	.group-count {
-		opacity: 0.5;
-		font-weight: 600;
-	}
-
-	.group-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px;
-	}
-
-	.tag {
-		display: inline-flex;
-		align-items: center;
-		gap: 5px;
-		padding: 5px 10px;
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		font-family: 'JetBrains Mono', monospace;
-		font-size: 0.76rem;
-		color: var(--text-secondary);
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.tag:hover {
-		border-color: var(--danger);
-		color: var(--danger);
-	}
-
-	.tag-x {
-		font-size: 0.9rem;
-		font-weight: 700;
-		opacity: 0.4;
-		line-height: 1;
-	}
-
-	.tag:hover .tag-x {
-		opacity: 1;
+	.result-name {
+		font-size: 0.82rem;
+		color: var(--text-primary);
+		flex-shrink: 0;
 	}
 
-	.empty-packages {
-		text-align: center;
-		padding: 24px;
+	.result-desc {
+		font-size: 0.74rem;
 		color: var(--text-muted);
-		font-size: 0.85rem;
-		background: var(--bg-tertiary);
-		border: 1px dashed var(--border);
-		border-radius: 12px;
+		min-width: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
-	@media (max-width: 600px) {
-		.presets {
-			grid-template-columns: 1fr;
-		}
-
-		.results {
-			grid-template-columns: 1fr;
-		}
+	.result-mark {
+		margin-left: auto;
+		flex-shrink: 0;
+		font-size: 0.85rem;
+		color: var(--accent);
 	}
 </style>
diff --git a/src/lib/components/SectionNav.svelte b/src/lib/components/SectionNav.svelte
deleted file mode 100644
index 21866e2..0000000
--- a/src/lib/components/SectionNav.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-
-	interface Section {
-		id: string;
-		label: string;
-	}
-
-	let { sections }: { sections: Section[] } = $props();
-
-	const initialId = sections[0]?.id ?? '';
-	let activeId = $state(initialId);
-	let observer: IntersectionObserver | null = null;
-
-	onMount(() => {
-		observer = new IntersectionObserver(
-			(entries) => {
-				for (const entry of entries) {
-					if (entry.isIntersecting) {
-						activeId = entry.target.id;
-					}
-				}
-			},
-			{ rootMargin: '-20% 0px -60% 0px', threshold: 0 }
-		);
-
-		for (const s of sections) {
-			const el = document.getElementById(s.id);
-			if (el) observer.observe(el);
-		}
-	});
-
-	onDestroy(() => observer?.disconnect());
-
-	function scrollTo(id: string) {
-		const el = document.getElementById(id);
-		if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-	}
-</script>
-
-<nav class="snav" aria-label="Page sections">
-	{#each sections as section}
-		<button
-			class="snav-item"
-			class:active={activeId === section.id}
-			onclick={() => scrollTo(section.id)}
-			title={section.label}
-		>
-			<span class="dot"></span>
-			<span class="lbl">{section.label}</span>
-		</button>
-	{/each}
-</nav>
-
-<style>
-	.snav {
-		position: fixed;
-		right: 28px;
-		top: 50%;
-		transform: translateY(-50%);
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		z-index: 50;
-	}
-
-	.snav-item {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		flex-direction: row-reverse;
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: 4px;
-	}
-
-	.dot {
-		width: 8px;
-		height: 8px;
-		border-radius: 50%;
-		background: var(--border);
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		flex-shrink: 0;
-	}
-
-	.snav-item.active .dot {
-		background: var(--accent);
-		box-shadow: 0 0 10px var(--accent-glow);
-		transform: scale(1.4);
-	}
-
-	.lbl {
-		font-size: 0.68rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.12em;
-		color: var(--text-muted);
-		opacity: 0.5;
-		transition: all 0.2s;
-		white-space: nowrap;
-	}
-
-	.snav-item:hover .lbl {
-		opacity: 1;
-	}
-
-	.snav-item.active .lbl {
-		color: var(--accent);
-		opacity: 1;
-	}
-
-	@media (max-width: 1200px) {
-		.snav {
-			display: none;
-		}
-	}
-</style>
diff --git a/src/lib/components/ShellEditor.svelte b/src/lib/components/ShellEditor.svelte
deleted file mode 100644
index 7d5fcf1..0000000
--- a/src/lib/components/ShellEditor.svelte
+++ /dev/null
@@ -1,183 +0,0 @@
-<script lang="ts">
-	import { browser } from '$app/environment';
-	import { onMount } from 'svelte';
-	import { theme } from '$lib/stores/theme';
-	import type { EditorView } from '@codemirror/view';
-
-	let {
-		value = $bindable(''),
-		placeholder = '',
-	}: {
-		value: string;
-		placeholder?: string;
-	} = $props();
-
-	let container: HTMLDivElement | undefined = $state();
-	let view: EditorView | undefined = $state();
-	let currentTheme: 'light' | 'dark' = $state('dark');
-
-	// Track theme from store
-	theme.subscribe((t) => {
-		currentTheme = t;
-	});
-
-	onMount(() => {
-		if (!browser || !container) return;
-
-		let unsubscribe: (() => void) | undefined;
-
-		async function init() {
-			if (!container) return;
-
-			const { EditorView: EV, keymap, placeholder: placeholderExt, lineNumbers } = await import('@codemirror/view');
-			const { EditorState, Compartment } = await import('@codemirror/state');
-			const { StreamLanguage } = await import('@codemirror/language');
-			const { shell } = await import('@codemirror/legacy-modes/mode/shell');
-			const { indentWithTab } = await import('@codemirror/commands');
-			const { oneDark } = await import('@codemirror/theme-one-dark');
-
-			const themeCompartment = new Compartment();
-
-			const customTheme = EV.theme({
-				'&': {
-					height: '100%',
-					fontSize: '0.82rem',
-					fontFamily: "'JetBrains Mono', monospace",
-				},
-				'.cm-scroller': {
-					overflow: 'auto',
-					fontFamily: "'JetBrains Mono', monospace",
-				},
-				'.cm-content': {
-					padding: '16px 0',
-					caretColor: 'var(--text-primary)',
-				},
-				'.cm-line': {
-					padding: '0 16px',
-				},
-				'.cm-gutters': {
-					background: 'var(--bg-secondary)',
-					color: 'var(--text-muted)',
-					border: 'none',
-					borderRight: '1px solid var(--border)',
-				},
-				'.cm-activeLineGutter': {
-					background: 'var(--bg-hover)',
-				},
-				'.cm-activeLine': {
-					background: 'var(--bg-hover)',
-				},
-				'.cm-cursor': {
-					borderLeftColor: 'var(--text-primary)',
-				},
-				'.cm-selectionBackground': {
-					background: 'var(--accent-glow) !important',
-				},
-				'&.cm-focused .cm-selectionBackground': {
-					background: 'var(--accent-glow) !important',
-				},
-				'.cm-placeholder': {
-					color: 'var(--text-muted)',
-					opacity: '0.4',
-					fontStyle: 'italic',
-				},
-			});
-
-			const lightTheme = EV.theme({
-				'&': {
-					backgroundColor: 'var(--bg-primary)',
-					color: 'var(--text-primary)',
-				},
-				'.cm-gutters': {
-					background: 'var(--bg-secondary)',
-					color: 'var(--text-muted)',
-				},
-			}, { dark: false });
-
-			const darkTheme = EV.theme({
-				'&': {
-					backgroundColor: 'var(--bg-primary)',
-					color: 'var(--text-primary)',
-				},
-				'.cm-gutters': {
-					background: 'var(--bg-secondary)',
-					color: 'var(--text-muted)',
-				},
-			}, { dark: true });
-
-			function getThemeExtensions(isDark: boolean) {
-				return isDark
-					? [oneDark, darkTheme]
-					: [lightTheme];
-			}
-
-			const updateListener = EV.updateListener.of((update) => {
-				if (update.docChanged) {
-					value = update.state.doc.toString();
-				}
-			});
-
-			const state = EditorState.create({
-				doc: value,
-				extensions: [
-					lineNumbers(),
-					StreamLanguage.define(shell),
-					keymap.of([indentWithTab]),
-					customTheme,
-					themeCompartment.of(getThemeExtensions(currentTheme === 'dark')),
-					placeholderExt(placeholder),
-					updateListener,
-					EV.lineWrapping,
-				],
-			});
-
-			view = new EV({ state, parent: container });
-
-			unsubscribe = theme.subscribe((t) => {
-				if (view) {
-					view.dispatch({
-						effects: themeCompartment.reconfigure(getThemeExtensions(t === 'dark')),
-					});
-				}
-			});
-		}
-
-		init();
-
-		return () => {
-			unsubscribe?.();
-			view?.destroy();
-		};
-	});
-
-	// Sync external value changes into the editor
-	$effect(() => {
-		if (view && value !== view.state.doc.toString()) {
-			view.dispatch({
-				changes: {
-					from: 0,
-					to: view.state.doc.length,
-					insert: value,
-				},
-			});
-		}
-	});
-</script>
-
-<div class="shell-editor" bind:this={container}></div>
-
-<style>
-	.shell-editor {
-		height: 100%;
-		width: 100%;
-		overflow: hidden;
-	}
-
-	.shell-editor :global(.cm-editor) {
-		height: 100%;
-	}
-
-	.shell-editor :global(.cm-focused) {
-		outline: none;
-	}
-</style>
diff --git a/src/lib/components/SiteHeader.svelte b/src/lib/components/SiteHeader.svelte
index 9a17b76..855dc12 100644
--- a/src/lib/components/SiteHeader.svelte
+++ b/src/lib/components/SiteHeader.svelte
@@ -18,21 +18,21 @@
 				<a href="/explore" class:active={currentPath === '/explore' || currentPath.startsWith('/explore')}>Explore</a>
 				<a href="/docs" class:active={currentPath === '/docs' || currentPath.startsWith('/docs')}>Docs</a>
 			</nav>
-			<div class="header-actions">
-				{#if children}{@render children()}{/if}
-				<GitHubStarBadge />
-				{#if $auth.loading}
-					
-				{:else if $auth.user}
+		</div>
+		<div class="header-right">
+			{#if children}{@render children()}{/if}
+			<GitHubStarBadge />
+			{#if $auth.loading}
+
+			{:else if $auth.user}
+				<span class="header-auth">
 					<a href="/dashboard" class="header-dashboard-link">Dashboard</a>
 					<span class="header-separator">/</span>
 					<form method="POST" action="/api/auth/logout" style="display:inline"><button type="submit" class="header-logout-link">Logout</button></form>
-				{:else}
-					<a href="/login" class="header-login-link">Sign in</a>
-				{/if}
-			</div>
-		</div>
-		<div class="header-right">
+				</span>
+			{:else}
+				<a href="/login" class="header-login-link">Sign in</a>
+			{/if}
 			<ThemeToggle />
 		</div>
 	</div>
@@ -64,7 +64,7 @@
 	.header-left {
 		display: flex;
 		align-items: center;
-		gap: 26px;
+		gap: 28px;
 	}
 
 	.header-logo {
@@ -124,23 +124,25 @@
 		transform: scaleX(1);
 	}
 
-	.header-actions {
+	.header-right {
 		display: flex;
 		align-items: center;
 		gap: 16px;
 	}
 
-	.header-right {
+	.header-auth {
 		display: flex;
 		align-items: center;
+		gap: 11px;
 	}
 
 	.header-dashboard-link,
 	.header-login-link,
 	.header-logout-link {
 		color: var(--text-secondary);
-		font-size: 0.9rem;
+		font-size: 0.85rem;
 		font-weight: 500;
+		text-transform: lowercase;
 		text-decoration: none;
 		transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 	}
@@ -161,7 +163,7 @@
 
 	.header-separator {
 		color: var(--text-muted);
-		font-size: 0.9rem;
+		font-size: 0.85rem;
 		user-select: none;
 	}
 </style>
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
index d85db87..7733b5d 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -18,24 +18,27 @@
 <style>
 	.theme-toggle {
 		background: none;
-		border: none;
+		border: 1px solid var(--border);
 		cursor: pointer;
-		padding: 8px;
-		border-radius: 6px;
+		width: 30px;
+		height: 30px;
+		border-radius: 7px;
 		color: var(--text-secondary);
-		transition: all 0.2s;
+		transition:
+			color 0.2s,
+			border-color 0.2s;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
 	.theme-toggle:hover {
-		background: var(--bg-tertiary);
+		border-color: var(--border-hover);
 		color: var(--text-primary);
 	}
 
 	.theme-toggle svg {
-		width: 20px;
-		height: 20px;
+		width: 15px;
+		height: 15px;
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3c34a1b..16e6b4d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { auth } from '$lib/stores/auth';
-
 	let copied = $state('');
 
 	function copyCommand(command: string, id: string) {
@@ -8,6 +6,24 @@
 		copied = id;
 		setTimeout(() => (copied = ''), 2000);
 	}
+
+	// Packages shown in the animated terminal demo (package-picker screen)
+	const demoPackages = [
+		{ name: 'curl', desc: 'Transfer data with URLs' },
+		{ name: 'wget', desc: 'Network downloader' },
+		{ name: 'jq', desc: 'JSON processor' },
+		{ name: 'yq', desc: 'YAML processor' },
+		{ name: 'ripgrep', desc: 'Fast grep alternative' },
+		{ name: 'fd', desc: 'Fast find alternative' },
+		{ name: 'bat', desc: 'Cat with syntax highlighting' },
+		{ name: 'eza', desc: 'Modern ls replacement' },
+		{ name: 'fzf', desc: 'Fuzzy finder' },
+		{ name: 'zoxide', desc: 'Smarter cd command' },
+		{ name: 'htop', desc: 'Interactive process viewer' },
+		{ name: 'btop', desc: 'Resource monitor' },
+		{ name: 'tree', desc: 'Directory tree viewer' },
+		{ name: 'tealdeer', desc: 'Simplified man pages (tldr)' }
+	];
 </script>
 
 <svelte:head>
@@ -51,13 +67,13 @@
 						Fresh Mac?<br />Set it up in<br /><span class="accent">one command.</span>
 					</h1>
 					<p class="hero-subtitle">
-						One command installs Git, Node, Docker, VS Code, shell config, dotfiles—everything you'd normally spend your first day installing. Then snapshot your setup and share it with your team so they get the same thing.
+						One command installs Git, Node, Docker, VS Code, shell config, dotfiles — everything you'd normally spend your first day installing. Then snapshot your setup and share it with your team.
 					</p>
 
 					<ul class="features-list">
 						<li class="feature-item"><span class="check">✓</span> Installs Homebrew packages, apps, configures shell + macOS preferences</li>
 						<li class="feature-item"><span class="check">✓</span> Snapshot your current Mac and recreate it on another machine</li>
-						<li class="feature-item"><span class="check">✓</span> Share your exact setup with teammates via a one-line install URL</li>
+						<li class="feature-item"><span class="check">✓</span> Share your exact setup via a one-line install URL</li>
 					</ul>
 
 					<div class="install-section">
@@ -86,17 +102,61 @@
 							<div class="terminal-spacer"></div>
 						</div>
 						<div class="terminal-body">
-							<div class="t-line"><span class="t-accent">✓</span> Checksum verified <span class="t-muted">·</span> Added to PATH</div>
-							<div class="t-line t-head">=== OpenBoot Installer v0.20.0 ===</div>
-							<div class="t-line t-note">[DRY-RUN MODE — no changes will be made]</div>
-							<div class="t-line t-head">=== Step 1: Git configuration ===</div>
-							<div class="t-line t-ok"><span class="t-accent">✓</span> Already configured: <span class="t-strong">jam &lt;jam@hey.com&gt;</span></div>
-							<div class="t-line t-head">=== Step 2: Preset selection ===</div>
-							<div class="t-line t-prompt-label">Choose your preset</div>
-							<div class="t-line t-sel"><span class="t-accent">›</span> <span class="t-strong">developer</span> — Node, Go, Docker, VS Code</div>
-							<div class="t-line t-opt">full — languages, DevOps, databases, AI</div>
-							<div class="t-line t-opt">minimal — CLI essentials only</div>
-							<div class="t-line t-keys">↑ up · ↓ down · / filter · ⏎ submit <span class="t-caret"></span></div>
+							<!-- SCREEN A: bootstrap log -->
+							<div class="t-screen t-screen-a">
+								<div><span class="t-accent">$</span> curl -fsSL openboot.dev/install | bash</div>
+								<div class="t-head t-mt14">OpenBoot Installer</div>
+								<div class="t-accent">==================</div>
+								<div class="t-mt13"><span class="t-accent">✓</span> Xcode Command Line Tools ready</div>
+								<div><span class="t-accent">✓</span> Homebrew ready</div>
+								<div class="t-mt13 t-muted">Detected: darwin/arm64</div>
+								<div class="t-strong">Downloading OpenBoot v0.44.0...</div>
+								<div><span class="t-accent">✓</span> Downloaded to ~/.openboot/bin/openboot</div>
+								<div><span class="t-accent">✓</span> Checksum verified</div>
+								<div><span class="t-accent">✓</span> Added to PATH</div>
+								<div class="t-mt10"><span class="t-caret"></span></div>
+							</div>
+
+							<!-- SCREEN B: package picker TUI -->
+							<div class="t-screen t-screen-b">
+								<div class="tui-tabs">
+									<span class="tui-tab active">Formulae</span>
+									<span class="tui-tab">Casks</span>
+									<span class="tui-tab">NPM</span>
+									<span class="tui-preset">developer preset</span>
+								</div>
+								<div class="tui-list">
+									{#each demoPackages as pkg, i (pkg.name)}
+										<div class="tui-row" class:selected={i === 0}>
+											{#if i === 0}<span class="tui-arrow">›</span>{/if}
+											<span class="t-accent tui-check">[✓]</span>
+											<span class="t-accent tui-name">{pkg.name}</span>
+											<span class="t-muted tui-desc">{pkg.desc}</span>
+										</div>
+									{/each}
+								</div>
+								<div class="tui-selected">Selected: <span class="t-strong">48</span> packages</div>
+								<div class="tui-keys">
+									Tab/←→ switch <span class="tui-sep">•</span> ↑↓ navigate
+									<span class="tui-sep">•</span> Space toggle <span class="tui-sep">•</span> / search
+									<span class="tui-sep">•</span> a all <span class="tui-sep">•</span> ⏎ Enter
+								</div>
+							</div>
+
+							<!-- SCREEN C: installation complete -->
+							<div class="t-screen t-screen-c">
+								<div class="t-head">=== Installation Complete! ===</div>
+								<div class="t-mt14"><span class="t-accent">✓</span> <span class="t-accent">OpenBoot has successfully configured your Mac.</span></div>
+								<div class="t-mt15 t-strong">What was installed:</div>
+								<div class="t-muted t-pl16">– Git configured with your identity</div>
+								<div class="t-muted t-pl16">– <span class="t-strong">28</span> CLI packages</div>
+								<div class="t-muted t-pl16">– <span class="t-strong">14</span> GUI applications</div>
+								<div class="t-muted t-pl16">– <span class="t-strong">5</span> npm global packages</div>
+								<div class="t-mt15 t-strong">Next steps:</div>
+								<div class="t-muted t-pl16">– Restart your terminal to apply changes</div>
+								<div class="t-muted t-pl16">– Run <span class="t-amber">'brew doctor'</span> to verify Homebrew health</div>
+								<div class="t-mt14"><span class="t-accent">$</span> <span class="t-caret"></span></div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -135,26 +195,11 @@
 	</main>
 
 	<footer>
-		<div class="container">
-			<p class="foot-prompt"><span class="accent">openboot</span> $ <span class="caret"></span></p>
-			<div class="footer-cols">
-				<div class="footer-col">
-					<h4>Product</h4>
-					<a href="/explore">Explore configs</a>
-					{#if $auth.user}
-						<a href="/dashboard">Dashboard</a>
-					{:else}
-						<a href="/login">Custom configs</a>
-					{/if}
-					<a href="/docs">Documentation</a>
-				</div>
-				<div class="footer-col">
-					<h4>Open source</h4>
-					<a href="https://github.com/openbootdotdev/openboot" target="_blank" rel="noopener">GitHub</a>
-					<a href="https://github.com/openbootdotdev/openboot/issues" target="_blank" rel="noopener">Issues</a>
-				</div>
-			</div>
-			<p class="footer-legal">Open source, zero telemetry · MIT License · © 2026 OpenBoot</p>
+		<div class="container footer-inner">
+			<p class="foot-tagline">
+				<span class="accent">openboot</span> $ <span class="foot-tagline-text">set up your Mac the way it should be</span>
+			</p>
+			<p class="footer-legal">Open source, zero telemetry · MIT · © 2026</p>
 		</div>
 	</footer>
 </div>
@@ -393,80 +438,160 @@
 	}
 
 	.terminal-body {
+		position: relative;
+		height: 486px;
+		overflow: hidden;
 		background: var(--bg-secondary);
-		padding: 18px 18px 20px;
-		font-size: 0.76rem;
-		line-height: 1.85;
+		font-size: 0.72rem;
+		line-height: 1.6;
 		color: var(--text-secondary);
 	}
 
-	.t-line {
-		white-space: nowrap;
+	/* three demo screens cross-fade on a loop: bootstrap → picker → done */
+	.t-screen {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
 	}
 
-	.t-accent {
-		color: var(--accent);
+	.t-screen-a {
+		padding: 16px 18px;
+		animation: ob-scrA 15s ease infinite;
 	}
 
-	.t-muted {
-		color: var(--text-muted);
+	.t-screen-b {
+		display: flex;
+		flex-direction: column;
+		animation: ob-scrB 15s ease infinite;
 	}
 
-	.t-strong {
-		color: var(--text-primary);
+	.t-screen-c {
+		padding: 16px 18px;
+		animation: ob-scrC 15s ease infinite;
 	}
 
+	.t-accent { color: var(--accent); }
+	.t-muted { color: var(--text-muted); }
+	.t-strong { color: var(--text-primary); }
+	.t-amber { color: var(--amber); }
+
 	.t-head {
 		color: var(--accent);
-		margin-top: 10px;
+		font-weight: 600;
+	}
+
+	.t-mt10 { margin-top: 10px; }
+	.t-mt13 { margin-top: 13px; }
+	.t-mt14 { margin-top: 14px; }
+	.t-mt15 { margin-top: 15px; }
+	.t-pl16 { padding-left: 16px; }
+
+	.t-caret {
+		display: inline-block;
+		width: 7px;
+		height: 1em;
+		background: var(--text-secondary);
+		translate: 0 2px;
+		animation: ob-blink 1s infinite;
+	}
+
+	/* ── package-picker TUI (screen B) ── */
+	.tui-tabs {
+		display: flex;
+		align-items: center;
+		gap: 18px;
+		padding: 14px 16px 9px;
+		border-bottom: 1px solid var(--border);
+		font-size: 0.71rem;
+		white-space: nowrap;
+	}
+
+	.tui-tab { color: var(--text-muted); }
+
+	.tui-tab.active {
+		color: var(--accent);
+		font-weight: 600;
+		border-bottom: 2px solid var(--accent);
+		padding-bottom: 9px;
+		margin-bottom: -11px;
 	}
 
-	.t-note {
+	.tui-preset {
+		margin-left: auto;
 		color: var(--text-muted);
-		margin-top: 8px;
+		font-size: 0.68rem;
+	}
+
+	.tui-list { padding: 9px 14px 4px; }
+
+	.tui-row {
+		position: relative;
+		height: 20px;
+		display: flex;
+		align-items: center;
+		gap: 7px;
+		padding-left: 18px;
+		white-space: nowrap;
+		overflow: hidden;
 	}
 
-	.t-ok {
-		margin-top: 4px;
+	.tui-row.selected {
+		border-radius: 5px;
+		background: var(--accent-glow);
+		box-shadow: inset 2px 0 0 var(--accent);
 	}
 
-	.t-prompt-label {
-		color: var(--amber);
-		margin-top: 6px;
+	.tui-arrow {
+		position: absolute;
+		left: 5px;
+		color: var(--accent);
 	}
 
-	.t-sel {
-		margin-top: 2px;
+	.tui-check { flex-shrink: 0; }
+
+	.tui-name {
+		width: 74px;
+		flex-shrink: 0;
 	}
 
-	.t-opt {
-		color: var(--text-muted);
-		padding-left: 14px;
+	.tui-selected {
+		padding: 6px 16px;
+		color: var(--text-secondary);
 	}
 
-	.t-keys {
+	.tui-keys {
+		margin-top: auto;
+		padding: 9px 16px;
+		border-top: 1px solid var(--border);
 		color: var(--text-muted);
-		margin-top: 10px;
+		font-size: 0.66rem;
 	}
 
-	.t-caret {
-		display: inline-block;
-		width: 7px;
-		height: 1em;
-		background: var(--accent);
-		translate: 0 2px;
-		animation: ob-blink 1s infinite;
-	}
+	.tui-sep { color: var(--border-hover); }
 
 	@keyframes ob-blink {
 		0%,
-		49% {
-			opacity: 1;
-		}
+		49% { opacity: 1; }
 		50%,
-		100% {
-			opacity: 0;
-		}
+		100% { opacity: 0; }
+	}
+
+	@keyframes ob-scrA {
+		0%, 1% { opacity: 0; }
+		4%, 19% { opacity: 1; }
+		23%, 100% { opacity: 0; }
+	}
+
+	@keyframes ob-scrB {
+		0%, 25% { opacity: 0; }
+		28%, 70% { opacity: 1; }
+		73%, 100% { opacity: 0; }
+	}
+
+	@keyframes ob-scrC {
+		0%, 75% { opacity: 0; }
+		78%, 97% { opacity: 1; }
+		99.5%, 100% { opacity: 0; }
 	}
 
 	/* ---------- how it works ---------- */
@@ -542,61 +667,36 @@
 	/* ---------- footer ---------- */
 	footer {
 		border-top: 1px solid var(--border);
-		padding: 66px 0 76px;
-	}
-
-	.foot-prompt {
-		color: var(--text-muted);
-		font-size: 0.88rem;
-		margin: 0 0 46px;
-	}
-
-	.foot-prompt .accent {
-		color: var(--accent);
-	}
-
-	.caret {
-		display: inline-block;
-		width: 7px;
-		height: 1.02em;
-		background: var(--accent);
-		translate: 0 2px;
+		margin-top: 8px;
 	}
 
-	.footer-cols {
+	.footer-inner {
 		display: flex;
-		gap: 90px;
+		align-items: center;
+		justify-content: space-between;
+		gap: 24px;
 		flex-wrap: wrap;
-		margin-bottom: 50px;
+		padding-top: 26px;
+		padding-bottom: 26px;
 	}
 
-	.footer-col h4 {
-		font-size: 0.72rem;
+	.foot-tagline {
+		font-size: 0.82rem;
 		color: var(--text-muted);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		margin: 0 0 18px;
-		font-weight: 500;
+		margin: 0;
 	}
 
-	.footer-col a {
-		display: block;
-		color: var(--text-secondary);
-		font-size: 0.85rem;
-		margin-bottom: 12px;
-		transition: color 0.15s ease;
+	.foot-tagline .accent {
+		color: var(--accent);
 	}
 
-	.footer-col a:hover {
-		color: var(--accent);
+	.foot-tagline-text {
+		color: var(--text-secondary);
 	}
 
 	.footer-legal {
 		color: var(--text-muted);
 		font-size: 0.78rem;
-		border-top: 1px solid var(--border);
-		padding-top: 28px;
-		letter-spacing: 0.01em;
 		margin: 0;
 	}
 
@@ -636,9 +736,5 @@
 		.install-command code {
 			font-size: 0.8rem;
 		}
-
-		.footer-cols {
-			gap: 48px;
-		}
 	}
 </style>
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index 2ec05d4..e4ffbf7 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -332,20 +332,13 @@
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
-		transition:
-			border-color 0.18s ease,
-			box-shadow 0.18s ease;
+		transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 	}
 
 	.config-card:hover {
+		transform: translateY(-4px);
 		border-color: var(--border-hover);
-		box-shadow:
-			0 0 0 1px var(--accent-glow),
-			0 14px 40px -22px var(--shadow);
-	}
-
-	.config-card:hover .config-name {
-		color: var(--accent);
+		box-shadow: 0 16px 34px -16px var(--shadow);
 	}
 
 	.card-header {
@@ -549,14 +542,12 @@
 		text-decoration: none;
 		cursor: pointer;
 		white-space: nowrap;
-		transition:
-			background 0.18s ease,
-			box-shadow 0.18s ease;
+		transition: filter 0.16s ease, transform 0.16s ease;
 	}
 
 	.cta-button:hover {
-		background: var(--accent-hover);
-		box-shadow: 0 0 0 3px var(--accent-glow);
+		filter: brightness(1.08);
+		transform: translateY(-1px);
 	}
 
 	/* ---------- responsive ---------- */
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index a1de88a..efd3312 100644
--- a/src/routes/dashboard/+page.svelte
+++ b/src/routes/dashboard/+page.svelte
@@ -266,10 +266,8 @@
 					<h1 class="page-title">My configurations</h1>
 				<p class="page-stats">
 					{configs.length} config{configs.length !== 1 ? 's' : ''}
-					{#if totalInstalls > 0}
-						<span class="stats-sep">&middot;</span>
-						{totalInstalls} install{totalInstalls !== 1 ? 's' : ''}
-					{/if}
+					<span class="stats-sep">&middot;</span>
+					{totalInstalls} install{totalInstalls !== 1 ? 's' : ''}
 				</p>
 			</div>
 			<div class="header-actions">
@@ -465,7 +463,6 @@
 	.page-stats {
 		color: var(--text-secondary);
 		font-size: 0.85rem;
-		margin-top: 6px;
 		font-variant-numeric: tabular-nums;
 	}
 
@@ -498,8 +495,7 @@
 	}
 
 	.btn-import:hover {
-		border-color: var(--accent-deep);
-		box-shadow: 0 0 0 3px var(--accent-glow);
+		border-color: var(--border-hover);
 	}
 
 	.btn-new {
@@ -515,14 +511,12 @@
 		font-size: 0.84rem;
 		font-weight: 500;
 		cursor: pointer;
-		transition:
-			background 0.18s ease,
-			box-shadow 0.18s ease;
+		transition: filter 0.16s ease, transform 0.16s ease;
 	}
 
 	.btn-new:hover {
-		background: var(--accent-hover);
-		box-shadow: 0 0 0 3px var(--accent-glow);
+		filter: brightness(1.08);
+		transform: translateY(-1px);
 	}
 
 	.plus {
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
index ffbfd7b..9f2da9d 100644
--- a/src/routes/docs/+layout.svelte
+++ b/src/routes/docs/+layout.svelte
@@ -435,16 +435,19 @@
 
 	.docs-layout {
 		display: flex;
-		margin-top: 56px;
+		align-items: flex-start;
+		max-width: 1160px;
+		margin: 56px auto 0;
+		padding: 0 36px;
 		min-height: calc(100vh - 56px);
 	}
 
 	/* ── Left Sidebar ─────────────────────────────────── */
 
 	.sidebar {
-		width: 240px;
+		width: 228px;
 		flex-shrink: 0;
-		background: var(--bg-secondary);
+		background: transparent;
 		border-right: 1px solid var(--border);
 		padding: 28px 0;
 		position: sticky;
@@ -461,12 +464,12 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		font-size: 0.68rem;
+		font-size: 0.66rem;
 		font-weight: 600;
 		text-transform: uppercase;
-		letter-spacing: 0.08em;
+		letter-spacing: 0.1em;
 		color: var(--text-muted);
-		padding: 0 24px;
+		padding: 0 16px;
 		margin-bottom: 8px;
 		margin-top: 24px;
 		background: none;
@@ -503,13 +506,13 @@
 		display: block;
 		width: 100%;
 		text-align: left;
-		padding: 7px 24px;
-		font-size: 0.85rem;
+		padding: 7px 16px;
+		font-size: 0.82rem;
 		font-weight: 450;
 		color: var(--text-secondary);
 		background: none;
 		border: none;
-		border-left: 3px solid transparent;
+		border-left: 2px solid transparent;
 		cursor: pointer;
 		transition: all 0.15s;
 		font-family: inherit;
@@ -525,12 +528,13 @@
 	.sidebar-item.active {
 		color: var(--accent);
 		border-left-color: var(--accent);
+		border-radius: 0 5px 5px 0;
 		background: var(--accent-glow);
 		font-weight: 600;
 	}
 
 	.sidebar-footer {
-		padding: 20px 24px 0;
+		padding: 20px 16px 0;
 		border-top: 1px solid var(--border);
 		margin-top: 20px;
 		display: flex;
@@ -554,21 +558,21 @@
 	/* ── Right TOC ────────────────────────────────────── */
 
 	.toc {
-		width: 220px;
+		width: 196px;
 		flex-shrink: 0;
 		position: sticky;
 		top: 56px;
 		height: calc(100vh - 56px);
 		overflow-y: auto;
-		padding: 32px 16px 32px 0;
+		padding: 40px 16px 32px 0;
 		border-left: 1px solid var(--border);
 	}
 
 	.toc-label {
-		font-size: 0.68rem;
+		font-size: 0.66rem;
 		font-weight: 600;
 		text-transform: uppercase;
-		letter-spacing: 0.08em;
+		letter-spacing: 0.1em;
 		color: var(--text-muted);
 		margin-bottom: 12px;
 		padding-left: 16px;
@@ -589,7 +593,7 @@
 	.toc-item {
 		display: block;
 		padding: 4px 16px;
-		font-size: 0.78rem;
+		font-size: 0.76rem;
 		color: var(--text-muted);
 		text-decoration: none;
 		border-left: 2px solid transparent;
@@ -609,7 +613,7 @@
 
 	.toc-item.toc-h3 {
 		padding-left: 28px;
-		font-size: 0.75rem;
+		font-size: 0.72rem;
 	}
 
 	/* ── Content Area ─────────────────────────────────── */
@@ -617,8 +621,8 @@
 	.docs-content {
 		flex: 1;
 		min-width: 0;
-		padding: 40px 56px 80px;
-		max-width: 800px;
+		padding: 40px 44px 96px;
+		max-width: 780px;
 		view-transition-name: docs-content;
 	}
 
@@ -783,24 +787,22 @@
 
 	.prose :global(.copy-btn) {
 		position: absolute;
-		top: 8px;
-		right: 8px;
-		padding: 4px 10px;
-		font-size: 0.72rem;
+		top: 9px;
+		right: 10px;
+		padding: 3px 9px;
+		font-size: 0.68rem;
 		font-family: 'JetBrains Mono', monospace;
 		font-weight: 500;
 		color: var(--text-muted);
-		background: var(--bg-tertiary);
+		background: transparent;
 		border: 1px solid var(--border);
-		border-radius: 6px;
+		border-radius: 5px;
 		cursor: pointer;
-		opacity: 0;
+		opacity: 1;
 		transition: all 0.15s;
 		z-index: 5;
 	}
 
-	.prose :global(.code-block-wrapper:hover .copy-btn) { opacity: 1; }
-
 	.prose :global(.copy-btn:hover) {
 		color: var(--text-primary);
 		border-color: var(--border-hover);
@@ -815,7 +817,7 @@
 	/* ── Prose ─────────────────────────────────────────── */
 
 	.prose :global(h1) {
-		font-size: 1.9rem;
+		font-size: 2rem;
 		font-weight: 600;
 		letter-spacing: -0.035em;
 		margin-bottom: 12px;
@@ -827,14 +829,14 @@
 		font-size: 1.02rem;
 		color: var(--text-secondary);
 		line-height: 1.7;
-		margin-bottom: 36px;
+		margin-bottom: 40px;
 	}
 
 	.prose :global(h2) {
 		font-size: 1.3rem;
 		font-weight: 600;
 		letter-spacing: -0.025em;
-		margin-top: 48px;
+		margin-top: 44px;
 		margin-bottom: 16px;
 		color: var(--text-primary);
 		padding-bottom: 8px;
@@ -842,9 +844,9 @@
 	}
 
 	.prose :global(h3) {
-		font-size: 1.08rem;
+		font-size: 1.05rem;
 		font-weight: 600;
-		margin-top: 32px;
+		margin-top: 28px;
 		margin-bottom: 12px;
 		color: var(--text-primary);
 	}
@@ -902,10 +904,10 @@
 	}
 
 	.prose :global(pre) {
-		background: var(--code-bg);
+		background: var(--bg-secondary);
 		border: 1px solid var(--border);
-		border-radius: 8px;
-		padding: 20px 24px;
+		border-radius: 9px;
+		padding: 16px 18px;
 		margin-bottom: 24px;
 		overflow-x: auto;
 		position: relative;
@@ -996,6 +998,8 @@
 			left: 0;
 			bottom: 0;
 			z-index: 80;
+			height: auto;
+			background: var(--bg-primary);
 			transform: translateX(-100%);
 			transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 			box-shadow: none;
diff --git a/src/routes/docs/[slug]/+page.svelte b/src/routes/docs/[slug]/+page.svelte
index 4c04a09..fa0ba8c 100644
--- a/src/routes/docs/[slug]/+page.svelte
+++ b/src/routes/docs/[slug]/+page.svelte
@@ -52,6 +52,10 @@
 	})}</script>
 </svelte:head>
 
+<p class="docs-breadcrumb">
+	<span class="accent">&gt;</span> docs{#if meta?.group} / {meta.group.toLowerCase()}{/if}
+</p>
+
 <article class="prose">
 	{#key slug}
 		<Component />
@@ -61,54 +65,51 @@
 <nav class="docs-nav-footer">
 	{#if prev}
 		<a class="nav-btn nav-prev" href="/docs/{prev.slug}">
-			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-				<polyline points="15 18 9 12 15 6" />
-			</svg>
-			<div>
-				<span class="nav-label">Previous</span>
-				<span class="nav-title">{prev.title}</span>
-			</div>
+			<span class="nav-label">← Previous</span>
+			<span class="nav-title">{prev.title}</span>
 		</a>
 	{:else}
-		<div></div>
+		<span class="nav-spacer"></span>
 	{/if}
 	{#if next}
 		<a class="nav-btn nav-next" href="/docs/{next.slug}">
-			<div>
-				<span class="nav-label">Next</span>
-				<span class="nav-title">{next.title}</span>
-			</div>
-			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-				<polyline points="9 18 15 12 9 6" />
-			</svg>
+			<span class="nav-label">Next →</span>
+			<span class="nav-title">{next.title}</span>
 		</a>
 	{:else}
-		<div></div>
+		<span class="nav-spacer"></span>
 	{/if}
 </nav>
 
 <style>
+	.docs-breadcrumb {
+		font-size: 0.8rem;
+		color: var(--text-muted);
+		margin-bottom: 16px;
+	}
+
+	.docs-breadcrumb .accent {
+		color: var(--accent);
+	}
+
 	.docs-nav-footer {
 		display: flex;
 		justify-content: space-between;
-		margin-top: 64px;
-		padding-top: 32px;
+		margin-top: 48px;
+		padding-top: 24px;
 		border-top: 1px solid var(--border);
 		gap: 16px;
 	}
 
 	.nav-btn {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-		padding: 16px 20px;
-		background: var(--bg-secondary);
+		flex: 1;
+		display: block;
+		padding: 16px 18px;
 		border: 1px solid var(--border);
-		border-radius: 12px;
-		cursor: pointer;
-		transition: all 0.2s;
-		font-family: inherit;
-		max-width: 280px;
+		border-radius: 10px;
+		transition:
+			border-color 0.2s,
+			background 0.2s;
 		text-decoration: none;
 		color: inherit;
 	}
@@ -116,41 +117,29 @@
 	.nav-btn:hover {
 		border-color: var(--border-hover);
 		background: var(--bg-tertiary);
-		transform: translateY(-2px);
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 		text-decoration: none;
 	}
 
-	.nav-prev { text-align: left; }
-	.nav-next { text-align: right; margin-left: auto; }
+	.nav-next { text-align: right; }
 
 	.nav-label {
 		display: block;
-		font-size: 0.7rem;
-		font-weight: 500;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
+		font-size: 0.72rem;
 		color: var(--text-muted);
-		margin-bottom: 2px;
 	}
 
 	.nav-title {
 		display: block;
 		font-size: 0.9rem;
-		font-weight: 600;
-		color: var(--accent);
+		margin-top: 4px;
 	}
 
-	.nav-btn svg {
-		flex-shrink: 0;
-		color: var(--text-muted);
-	}
+	.nav-prev .nav-title { color: var(--text-primary); }
+	.nav-next .nav-title { color: var(--accent); }
 
-	.nav-btn:hover svg { color: var(--accent); }
+	.nav-spacer { flex: 1; }
 
 	@media (max-width: 600px) {
 		.docs-nav-footer { flex-direction: column; }
-		.nav-btn { max-width: 100%; }
-		.nav-next { margin-left: 0; }
 	}
 </style>
diff --git a/src/routes/explore/+page.svelte b/src/routes/explore/+page.svelte
index 71a8329..de182da 100644
--- a/src/routes/explore/+page.svelte
+++ b/src/routes/explore/+page.svelte
@@ -23,8 +23,6 @@
 	let total = $state(0);
 	let limit = 24;
 
-	const cardColors = ['#22c55e', '#3b82f6', '#a855f7', '#f97316', '#ec4899', '#06b6d4', '#eab308', '#f43f5e'];
-
 	async function loadConfigs(reset = false) {
 		if (reset) {
 			offset = 0;
@@ -168,24 +166,19 @@
 				</svg>
 				<h3 class="empty-title">No configurations yet</h3>
 				<p class="empty-desc">Be the first to share your setup with <code>openboot snapshot</code></p>
-				<a href="/login" class="empty-cta">Get Started</a>
+				<a href="/login" class="empty-cta">Get started</a>
 			</div>
 		{:else}
 			<div class="configs-grid">
-				{#each configs as config, i}
-					<a 
-						href="/{config.username}/{config.slug}" 
-						class="config-card"
-						style="--card-color: {cardColors[i % cardColors.length]};"
-					>
-						<div class="card-accent"></div>
+				{#each configs as config}
+					<a href="/{config.username}/{config.slug}" class="config-card">
 						<div class="card-header">
 							<div class="user-info">
-								<img 
-									src={config.avatar_url} 
-									alt={config.username} 
-									class="avatar"
-								/>
+								{#if config.avatar_url}
+									<img src={config.avatar_url} alt={config.username} class="avatar" />
+								{:else}
+									<span class="avatar avatar-letter">{config.username.charAt(0)}</span>
+								{/if}
 								<span class="username">@{config.username}</span>
 								{#if config.username === 'openboot'}
 									<span class="official-badge">[official]</span>
@@ -196,9 +189,7 @@
 							{/if}
 						</div>
 						<h3 class="config-name">{config.name}</h3>
-						{#if config.description}
-							<p class="config-description">{config.description}</p>
-						{/if}
+						<p class="config-description">{config.description}</p>
 						<div class="card-footer">
 							{#if getPackageBreakdown(config).cli > 0 || getPackageBreakdown(config).apps > 0}
 								<div class="stat packages">
@@ -232,13 +223,12 @@
 	</div>
 
 	<section class="cta-banner">
-		<div class="cta-glow"></div>
 		<div class="container">
 			<div class="cta-content">
 				<h3 class="cta-title">Create your own config and share it with the community</h3>
 				<p class="cta-desc">Capture your development environment in seconds and share it with a single command</p>
 				<a href="/login?return_to=/dashboard" class="cta-button">
-					Get Started
+					Get started
 					<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="M5 12h14"/><path d="m12 5 7 7-7 7"/>
 					</svg>
@@ -309,7 +299,7 @@
 	}
 
 	.sort-select {
-		padding: 9px 34px 9px 13px;
+		padding: 9px 34px 9px 14px;
 		background: var(--bg-secondary);
 		border: 1px solid var(--border-hover);
 		border-radius: 8px;
@@ -347,7 +337,7 @@
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
 		gap: 16px;
-		margin-bottom: 60px;
+		padding-bottom: 8px;
 	}
 
 	.skeleton-card {
@@ -494,8 +484,9 @@
 		text-decoration: none;
 		color: inherit;
 		transition:
-			border-color 0.18s ease,
-			box-shadow 0.18s ease;
+			transform 0.2s ease,
+			border-color 0.2s ease,
+			box-shadow 0.2s ease;
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
@@ -503,23 +494,10 @@
 		overflow: hidden;
 	}
 
-	.card-accent {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 2px;
-		background: var(--card-color);
-		opacity: 0.8;
-	}
-
 	.config-card:hover {
+		transform: translateY(-4px);
 		border-color: var(--border-hover);
-		box-shadow: 0 0 0 1px var(--accent-glow), 0 14px 40px -22px var(--shadow);
-	}
-
-	.config-card:hover .config-name {
-		color: var(--accent);
+		box-shadow: 0 16px 34px -16px var(--shadow);
 	}
 
 	.card-header {
@@ -541,6 +519,16 @@
 		border: 1px solid var(--border-hover);
 	}
 
+	.avatar-letter {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--bg-tertiary);
+		font-size: 0.72rem;
+		color: var(--text-secondary);
+		text-transform: lowercase;
+	}
+
 	.username {
 		font-size: 0.82rem;
 		color: var(--text-muted);
@@ -575,6 +563,7 @@
 		color: var(--text-secondary);
 		line-height: 1.6;
 		margin: 0;
+		min-height: 2.6em;
 		display: -webkit-box;
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
@@ -670,7 +659,7 @@
 
 	.cta-banner {
 		position: relative;
-		padding: 80px 0;
+		padding: 96px 0 40px;
 		margin-top: 40px;
 		border-top: 1px solid var(--border);
 	}