fix: update some styles

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

@@ -37,12 +37,12 @@
 		min-height: clamp(300px, 22vw, 430px);
 		overflow: hidden;
 		aspect-ratio: 1.35;
-		background-color: #e4e8eb;
+		background-color: var(--checker-background);
 		background-image:
-			linear-gradient(45deg, #d2d8dc 25%, #0000 25%),
-			linear-gradient(-45deg, #d2d8dc 25%, #0000 25%),
-			linear-gradient(45deg, #0000 75%, #d2d8dc 75%),
-			linear-gradient(-45deg, #0000 75%, #d2d8dc 75%);
+			linear-gradient(45deg, var(--checker-background-cross) 25%, #0000 25%),
+			linear-gradient(-45deg, var(--checker-background-cross) 25%, #0000 25%),
+			linear-gradient(45deg, #0000 75%, var(--checker-background-cross) 75%),
+			linear-gradient(-45deg, #0000 75%, var(--checker-background-cross) 75%);
 		background-position:
 			0 0,
 			0 7px,

web/src/lib/components/kit/layout/PageGrid.svelte

@@ -17,7 +17,7 @@
 <style>
 	.page-grid {
 		display: grid;
-		grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
+		grid-template-columns: repeat(auto-fit, minmax(calc(50% - 28px), 1fr));
 		align-items: start;
 		gap: 56px;
 		width: 100%;

web/src/lib/styles/design2.css

@@ -1,136 +0,0 @@
-@import "@fontsource/ibm-plex-sans/400.css";
-@import "@fontsource/ibm-plex-sans/500.css";
-@import "@fontsource/ibm-plex-sans/600.css";
-@import "@fontsource/ibm-plex-sans/700.css";
-@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,
-	*::after,
-	::backdrop {
-		box-sizing: border-box;
-		border: 0 solid;
-		margin: 0;
-		padding: 0;
-	}
-
-	* {
-		border-color: var(--line);
-	}
-
-	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%;
-		line-height: 1.5;
-	}
-
-	body {
-		font-family: var(--font-sans);
-		color: var(--foreground);
-		background: var(--background);
-		-webkit-font-smoothing: antialiased;
-		text-rendering: optimizeLegibility;
-	}
-
-	button,
-	input,
-	select,
-	optgroup,
-	textarea {
-		font: inherit;
-		font-feature-settings: inherit;
-		font-variation-settings: inherit;
-		letter-spacing: inherit;
-		color: inherit;
-		opacity: 1;
-		background-color: #0000;
-		border-radius: 0;
-	}
-
-	button,
-	input:where([type="button"], [type="reset"], [type="submit"]) {
-		appearance: button;
-	}
-
-	/* Перебивки глобальных правил старого 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;
-	}
-	svg {
-		vertical-align: middle;
-	}
-
-	/* Новый дизайн: токены (§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;
-	}
-}