fix: change style, demo page visual looks as done

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

@@ -25,7 +25,7 @@
 		line-height: normal;
 		font-family: var(--font-mono);
 		font-size: 10px;
-		border: 1px solid var(--line);
+		border: 0px solid var(--line);
 		color: var(--muted);
 	}
 	.badge--accent {

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

@@ -56,6 +56,7 @@
 		padding-left: 8px;
 		padding-right: 8px;
 		height: 32px;
+		border: 1px solid var(--line);
 	}
 	.swatch {
 		width: 14px;

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

@@ -27,6 +27,7 @@
 		gap: 9px;
 		margin-top: 18px;
 		display: flex;
+		white-space: nowrap;
 	}
 	.download-btn:hover {
 		background: color-mix(in srgb, var(--blue) 88%, #000);

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

@@ -4,13 +4,14 @@
 	interface Props {
 		label: string;
 		caption: string;
+		active: boolean;
 		children: Snippet;
 	}
 
-	let { label, caption, children }: Props = $props();
+	let { label, caption, active, children }: Props = $props();
 </script>
 
-<div class="preview-tile">
+<div class="preview-tile" class:active>
 	<div class="tile-canvas">{@render children()}</div>
 	<div class="tile-label">
 		<span>{label}</span>
@@ -25,6 +26,9 @@
 		overflow: hidden;
 		border: 1px solid var(--line);
 		background: var(--background);
+		&.active {
+			border-color: var(--blue);
+		}
 	}
 	.tile-canvas {
 		width: 100%;

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

@@ -36,8 +36,6 @@
 		display: flex;
 		height: 32px;
 		border: 1px solid var(--line);
-		overflow: hidden;
-		background: var(--background);
 	}
 	.segment {
 		border: 0;

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

@@ -49,13 +49,11 @@
 		min-height: 138px;
 		border: 1px solid var(--line);
 		background: var(--panel);
-		overflow: hidden;
 	}
 	.step-index {
 		font: 11px var(--font-mono);
 		color: var(--blue);
 		padding: 17px 0 0px 15px;
-		border-right: 1px solid var(--line);
 	}
 	.step-body {
 		padding: 15px 18px 18px;
@@ -65,7 +63,7 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: 15px;
-		border-bottom: 1px solid var(--line);
+		border-color: var(--line);
 	}
 	.step-type {
 		color: var(--muted);

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

@@ -30,7 +30,7 @@
 		width: 32px;
 		height: 18px;
 		border: 1px solid var(--line);
-		border-radius: 999px;
+		border-radius: 0;
 		background: var(--background);
 		cursor: pointer;
 		padding: 0;
@@ -40,8 +40,6 @@
 		border-color: var(--blue);
 	}
 	.toggle-knob {
-		border-radius: 50%;
-		background: var(--foreground);
 		transition: transform 0.12s ease;
 	}
 	.toggle.on .toggle-knob {

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

@@ -103,6 +103,7 @@
 	.nav a {
 		color: var(--muted);
 		font: 10px var(--font-mono);
+		white-space: nowrap;
 		text-decoration: none;
 	}
 	.nav a:hover {
@@ -125,7 +126,6 @@
 		display: flex;
 		align-items: center;
 		border: 1px solid var(--line);
-		overflow: hidden;
 	}
 	.lang-btn {
 		border: 0;

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

@@ -28,7 +28,7 @@
 	let outlineWidth = $state(2);
 	let outlineColor = $state("#16202B");
 	let radius = $state(18);
-	let preserveAspect = $state(true);
+	let preserveAspect = $state(false);
 
 	const previewTiles = [
 		{ label: "SOURCE", caption: "original.png · 1200 × 800", bg: "#8d9aa5" },
@@ -204,10 +204,13 @@
 
 			<PreviewStack pad="16px 0">
 				{#each previewTiles as tile (tile.label)}
-					<PreviewTile label={tile.label} caption={tile.caption}>
+					<PreviewTile
+						label={tile.label}
+						caption={tile.caption}
+						active={tile.active || false}
+					>
 						<div
 							class="image-preview"
-							class:active={tile.active}
 							style="background:{tile.bg}; border-radius:{tile.radius ??
 								'0'}; box-shadow:{tile.ring ?? 'none'};"
 						>