fix: update design with references

web/src/routes/preview/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import "$lib/styles/design2.css";
 	import type { Snippet } from "svelte";
+	import { page } from "$app/stores";
 	import AppShell from "$lib/components/kit/AppShell.svelte";
 	import TopBar from "$lib/components/kit/TopBar.svelte";
 
@@ -10,13 +11,40 @@
 
 	let { children }: Props = $props();
 
-	let theme = $state<"light" | "dark">("light");
+	type Theme = "light" | "dark";
+	const stored =
+		typeof localStorage !== "undefined"
+			? (localStorage.getItem("easy-png-tools:theme") as Theme | null)
+			: null;
+	let theme = $state<Theme>(stored ?? "light");
+
 	function toggle() {
 		theme = theme === "light" ? "dark" : "light";
 	}
+
+	$effect(() => {
+		document.documentElement.dataset.theme = theme;
+		try {
+			localStorage.setItem("easy-png-tools:theme", theme);
+		} catch {
+			/* ignore */
+		}
+	});
+
+	let crumb = $derived(toCrumb($page.url.pathname));
+
+	function toCrumb(path: string): string {
+		const seg = path
+			.replace(/^\/preview/, "")
+			.replace(/^\//, "")
+			.split("/")
+			.filter(Boolean);
+		const label = seg.length ? seg.join(" / ").toUpperCase() : "PREVIEW";
+		return "/ " + label;
+	}
 </script>
 
 <div class="preview-root" data-theme={theme}>
-	<TopBar {theme} ontoggle={toggle} />
+	<TopBar {theme} {crumb} ontoggle={toggle} />
 	<AppShell>{@render children()}</AppShell>
 </div>

web/src/routes/preview/demo/+page.svelte

@@ -250,8 +250,8 @@
 		grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
 		align-items: start;
 		gap: 56px;
-		max-width: 1680px;
-		margin: 0 auto;
+		max-width: none;
+		margin: auto;
 		padding: 60px clamp(24px, 4vw, 72px) 72px;
 	}
 	.workspace {

web/src/routes/preview/kit/+page.svelte

@@ -214,9 +214,9 @@
 
 <style>
 	.showcase {
-		max-width: 880px;
+		max-width: none;
 		margin: 0 auto;
-		padding: 2.5rem 1.25rem 4rem;
+		padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
 		display: flex;
 		flex-direction: column;
 		gap: 1.25rem;

web/src/routes/preview/list-tools/+page.svelte

@@ -50,9 +50,9 @@
 
 <style>
 	.catalog {
-		max-width: 880px;
+		max-width: none;
 		margin: 0 auto;
-		padding: 2.5rem 1.25rem 4rem;
+		padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
 		display: flex;
 		flex-direction: column;
 		gap: 1.25rem;