fix: update style, resolve old css leaks issue

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,76 +5,104 @@
 @import "@fontsource/ibm-plex-mono/400.css";
 @import "@fontsource/ibm-plex-mono/500.css";
 
-/* Минимальный reset (новый дизайн грузится только на preview-маршрутах). */
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-/* Базовая типографика и палитра: без этого весь текст наследует UA-дефолт
-   (Times New Roman / чёрный), что даёт сотни расхождений с рефом. */
-html {
-	color-scheme: light dark;
-	font-family: var(--font-sans);
-	-webkit-text-size-adjust: 100%;
-}
-body {
-	font-family: var(--font-sans);
-	color: var(--foreground);
-	background: var(--background);
-	-webkit-font-smoothing: antialiased;
-	text-rendering: optimizeLegibility;
-}
-
-/* Форм-контролы не наследуют шрифт семьи по умолчанию (браузер ставит Arial). */
-button,
-input,
-select,
-textarea,
-optgroup {
-	font: inherit;
-}
-
-/* Новый дизайн: токены (§2 плана redesign).
-   Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
-   глобально не конфликтует со старым app.css. */
-
-:root {
-	--font-sans: "IBM Plex Sans", sans-serif;
-	--font-mono: "IBM Plex Mono", monospace;
-
-	--background: #eef1f4;
-	--panel: #f8fafb;
-	--foreground: #17212b;
-	--muted: #6d7883;
-	--line: #cbd3da;
-
-	--blue: #1769d2;
-	--cyan: #00a8c7;
-	--amber: #bd7411;
-	--success: rgb(35, 131, 84);
-	--success2: rgb(37, 169, 106);
-	--danger: #e5484d;
-
-	--radius: 4px;
-}
-
-[data-theme="dark"] {
-	--background: #11171d;
-	--panel: #182129;
-	--foreground: #e8eef2;
-	--muted: #91a0ac;
-	--line: #33414c;
-
-	--blue: #54a2ff;
-	--cyan: #00a8c7;
-	--amber: #bd7411;
-	--success: #25a96a;
-	--danger: #ff7479;
+/* Порядок 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,
+	*::after {
+		box-sizing: border-box;
+	}
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+	}
+
+	/* Базовая типографика и палитра: без этого весь текст наследует UA-дефолт
+	   (Times New Roman / чёрный), что даёт сотни расхождений с рефом. */
+	html {
+		color-scheme: light dark;
+		font-family: var(--font-sans);
+		-webkit-text-size-adjust: 100%;
+	}
+	body {
+		font-family: var(--font-sans);
+		color: var(--foreground);
+		background: var(--background);
+		-webkit-font-smoothing: antialiased;
+		text-rendering: optimizeLegibility;
+	}
+
+	/* Форм-контролы не наследуют шрифт семьи по умолчанию (браузер ставит Arial). */
+	button,
+	input,
+	select,
+	textarea,
+	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. */
+
+	:root {
+		--font-sans: "IBM Plex Sans", sans-serif;
+		--font-mono: "IBM Plex Mono", monospace;
+
+		--background: #eef1f4;
+		--panel: #f8fafb;
+		--foreground: #17212b;
+		--muted: #6d7883;
+		--line: #cbd3da;
+
+		--blue: #1769d2;
+		--cyan: #00a8c7;
+		--amber: #bd7411;
+		--success: rgb(35, 131, 84);
+		--success2: rgb(37, 169, 106);
+		--danger: #e5484d;
+
+		--radius: 4px;
+	}
+
+	[data-theme="dark"] {
+		--background: #11171d;
+		--panel: #182129;
+		--foreground: #e8eef2;
+		--muted: #91a0ac;
+		--line: #33414c;
+
+		--blue: #54a2ff;
+		--cyan: #00a8c7;
+		--amber: #bd7411;
+		--success: #25a96a;
+		--danger: #ff7479;
+	}
 }