fix: update style, resolve old css leaks issue

web/src/app.css

@@ -1,3 +1,4 @@
+@layer app {
 	:root {
 		color-scheme: light;
 
@@ -279,3 +280,4 @@ input.control[type="number"] {
 			padding-top: var(--space-4);
 		}
 	}
+}

web/src/lib/components/kit/ToolCard.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
 	import { ArrowUpRight } from "@lucide/svelte";
 	import type { Component } from "svelte";
 	import Icon from "./Icon.svelte";
-	import { resolve } from "$app/paths";
 
 	interface Props {
 		title: string;
@@ -12,9 +12,11 @@
 		icon?: Component<{ size?: number; class?: string }>;
 	}
 	let { title, href, description, index, icon }: Props = $props();
+
+	let normalizedHref = $derived(href === "#" ? "/" : href);
 </script>
 
-<a class="tool-card" href={resolve(href)}>
+<a class="tool-card" href={resolve(normalizedHref)}>
 	{#if icon}<span class="tool-icon"><Icon {icon} size={19} /></span>{/if}
 	<span class="tool-copy">
 		<strong>{title}</strong>

web/src/lib/components/kit/TopBar.svelte

@@ -77,6 +77,7 @@
 		gap: 10px;
 		font: 600 14px var(--font-mono);
 		color: var(--foreground);
+		text-decoration: none;
 	}
 	.brand-mark {
 		background: var(--blue);
@@ -101,7 +102,7 @@
 	}
 	.nav a {
 		color: var(--muted);
-		font: 12px var(--font-mono);
+		font: 10px var(--font-mono);
 		text-decoration: none;
 	}
 	.nav a:hover {

web/src/lib/styles/design2.css

@@ -5,6 +5,14 @@
 @import "@fontsource/ibm-plex-mono/400.css";
 @import "@fontsource/ibm-plex-mono/500.css";
 
+/* Порядок cascade-слоёв (дубль из корневого +layout.svelte — идемпотентен и
+   страхует случай, когда design2.css грузится раньше корневого layout): */
+@layer app, design;
+
+/* Новый дизайн — слой design. В слое design правила выигрывают у того же
+   правила из слоя app (старый app.css) по слою, а не по порядку <link>,
+   поэтому утечка app.css на /preview при SPA-переходе не перебивает design2. */
+@layer design {
 	/* Минимальный reset (новый дизайн грузится только на preview-маршрутах). */
 	*,
 	*::before,
@@ -41,6 +49,25 @@ optgroup {
 		font: inherit;
 	}
 
+	/* Перебивки глобальных правил старого app.css (слой app ниже), чтобы при
+	   утечке app.css на /preview новый дизайн не получал старую типографику.
+	   Пустые — заполни при необходимости. */
+	a,
+	a:hover {
+		/* color: inherit; text-decoration: none; */
+	}
+	h1,
+	h2 {
+		/* font-size: revert; line-height: revert; letter-spacing: revert; */
+	}
+	p,
+	label {
+		/* font-size: revert; */
+	}
+	:focus-visible {
+		/* outline: revert; */
+	}
+
 	/* Новый дизайн: токены (§2 плана redesign).
 	   Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
 	   глобально не конфликтует со старым app.css. */
@@ -78,3 +105,4 @@ optgroup {
 		--success: #25a96a;
 		--danger: #ff7479;
 	}
+}

web/src/routes/+layout.svelte

@@ -17,3 +17,12 @@
 </svelte:head>
 
 {@render children()}
+
+<style>
+	/* Порядок cascade-слоёв для всего документа (грузится на всех маршрутах):
+	   app = старый дизайн ((old)), design = новый (preview/*). design выигрывает
+	   у app на совпадающих правилах независимо от порядка <link> / истории
+	   SPA-навигации. Содержимое слоёв — в app.css (@layer app) и design2.css
+	   (@layer design). */
+	@layer app, design;
+</style>

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

@@ -1,29 +1,29 @@
 <script lang="ts">
+	import Badge from "$lib/components/kit/Badge.svelte";
+	import Button from "$lib/components/kit/Button.svelte";
+	import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
+	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
+	import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
+	import ColorField from "$lib/components/kit/ColorField.svelte";
+	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
+	import EmptyState from "$lib/components/kit/EmptyState.svelte";
+	import IconButton from "$lib/components/kit/IconButton.svelte";
+	import ImageCard from "$lib/components/kit/ImageCard.svelte";
+	import MetaList from "$lib/components/kit/MetaList.svelte";
 	import Panel from "$lib/components/kit/Panel.svelte";
 	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
+	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
+	import Segmented from "$lib/components/kit/Segmented.svelte";
+	import SelectField from "$lib/components/kit/SelectField.svelte";
 	import SettingGroup from "$lib/components/kit/SettingGroup.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
-	import MetaList from "$lib/components/kit/MetaList.svelte";
-	import Badge from "$lib/components/kit/Badge.svelte";
-	import Segmented from "$lib/components/kit/Segmented.svelte";
-	import StepCard from "$lib/components/kit/StepCard.svelte";
-	import ToolCard from "$lib/components/kit/ToolCard.svelte";
-	import ImageCard from "$lib/components/kit/ImageCard.svelte";
-	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
-	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
-	import StatusLine from "$lib/components/kit/StatusLine.svelte";
-	import Button from "$lib/components/kit/Button.svelte";
-	import IconButton from "$lib/components/kit/IconButton.svelte";
 	import SliderField from "$lib/components/kit/SliderField.svelte";
-	import ColorField from "$lib/components/kit/ColorField.svelte";
+	import StatusLine from "$lib/components/kit/StatusLine.svelte";
+	import StepCard from "$lib/components/kit/StepCard.svelte";
 	import TextField from "$lib/components/kit/TextField.svelte";
-	import SelectField from "$lib/components/kit/SelectField.svelte";
-	import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
 	import Toggle from "$lib/components/kit/Toggle.svelte";
-	import EmptyState from "$lib/components/kit/EmptyState.svelte";
-	import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
-	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
-	import { Plus, Trash2, Download, ImageOff, Palette } from "@lucide/svelte";
+	import ToolCard from "$lib/components/kit/ToolCard.svelte";
+	import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
 
 	let mode = $state("preview");
 	let radius = $state(8);
@@ -85,7 +85,7 @@
 			</SettingGroup>
 		</div>
 		<SettingsFooter>
-			<DownloadButton label="Download PNG" size="1.2 MB" onclick={() => {}} />
+			<DownloadButton label="Download PNG" onclick={() => {}} />
 		</SettingsFooter>
 	</Panel>
 
@@ -174,10 +174,10 @@
 			<ImageCard label="result.png · 512×512">
 				<CheckerCanvas size="sm" />
 			</ImageCard>
-			<PreviewTile label="tile-01">
+			<PreviewTile label="tile-01" caption="caption-01">
 				<CheckerCanvas size="sm" />
 			</PreviewTile>
-			<PreviewTile label="tile-02">
+			<PreviewTile label="tile-02" caption="caption-01">
 				<CheckerCanvas size="sm" />
 			</PreviewTile>
 		</div>