feat: WIP: add css fixes

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

@@ -32,10 +32,15 @@
 		gap: 8px;
 	}
 	label {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 8px;
 		font: 10px var(--font-mono);
-		letter-spacing: 0.1em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
 		color: var(--muted);
+		margin-bottom: 8px;
 	}
 	.color-field {
 		display: flex;

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

@@ -14,19 +14,31 @@
 </div>
 
 <style>
+	/* Реф раскладывает контролы горизонтальным рядом ячеек, каждая с
+	   верхней границей-разделителем (≈189px, font-size 16px). */
 	.controls {
-		display: flex;
+		display: grid;
-		flex-direction: column;
+		grid-auto-flow: column;
-		gap: 14px;
+		grid-auto-columns: minmax(0, 1fr);
+		gap: 0 24px;
 	}
 	.controls.compact {
 		display: grid;
-		grid-template-columns: 1fr 1fr;
+		grid-auto-flow: column;
-		gap: 14px;
+		grid-auto-columns: minmax(0, 1fr);
+		gap: 0 16px;
+	}
+	/* Верхняя граница-разделитель на каждой ячейке контрола. */
+	.controls > :global(*) {
+		border-top: 1px solid var(--line);
+		padding-top: 10px;
+		min-width: 0;
 	}
 	@media (max-width: 800px) {
+		.controls,
 		.controls.compact {
-			grid-template-columns: 1fr;
+			grid-auto-flow: row;
+			grid-auto-columns: auto;
 		}
 	}
 </style>

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

@@ -33,7 +33,7 @@
 	.control-block {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: 0;
 	}
 	label {
 		display: flex;
@@ -41,9 +41,10 @@
 		justify-content: space-between;
 		gap: 0.5rem;
 		font: 10px var(--font-mono);
-		letter-spacing: 0.1em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
 		color: var(--muted);
+		margin-bottom: 8px;
 	}
 	output {
 		font: 11px var(--font-mono);

web/src/lib/styles/design2.css

@@ -17,6 +17,25 @@ body {
 	padding: 0;
 }
 
+/* Базовая типографика и палитра: без этого весь текст наследует UA-дефолт
+   (Times New Roman / чёрный), что даёт сотни расхождений с рефом. */
+html {
+	color-scheme: light dark;
+	font-family: var(--font-sans);
+	font-size: 16px;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+}
+body {
+	font-family: var(--font-sans);
+	font-size: 16px;
+	line-height: 1.5;
+	color: var(--foreground);
+	background: var(--background);
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+}
+
 /* Форм-контролы не наследуют шрифт семьи по умолчанию (браузер ставит Arial). */
 button,
 input,

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

@@ -59,13 +59,13 @@
 	<meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<WorkspaceLayout
+<WorkspaceLayout
-	columns="minmax(0, 1.05fr) minmax(520px, 0.95fr)"
+	columns="minmax(0, 1.05fr) minmax(520px, 0.95fr)"
-	gap="56px"
+	gap="56px"
-	padding="60px clamp(24px, 4vw, 72px) 72px"
+	padding="60px clamp(24px, 4vw, 72px) 72px"
-	maxWidth="none"
+	maxWidth="1200px"
-	stickyTop="24px"
+	stickyTop="24px"
-	padMobile="36px 16px 48px"
+	padMobile="36px 16px 48px"
 >
 	{#snippet settings()}
 		<WorkspaceHeader