feat: fix demo page to correspond refs

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

@@ -1,23 +1,34 @@
 <script lang="ts">
-	import { Download } from "@lucide/svelte";
-	import Button from "./Button.svelte";
+	import { Download, ArrowDownToLine } from "@lucide/svelte";
 
 	interface Props {
 		label: string;
-		size?: string;
 		onclick?: () => void;
 	}
-	let { label, size, onclick }: Props = $props();
+	let { label, onclick }: Props = $props();
 </script>
 
-<Button icon={Download} variant="primary" onclick={() => onclick?.()}>
-	{label}{#if size}<span class="dl-size">{size}</span>{/if}
-</Button>
+<button class="download-btn" type="button" onclick={() => onclick?.()}>
+	<Download size={16} />
+	{label}
+	<ArrowDownToLine size={14} />
+</button>
 
 <style>
-	.dl-size {
-		font-family: var(--font-mono);
-		font-size: 10px;
-		opacity: 0.8;
+	.download-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		border: 1px solid var(--blue);
+		background: var(--blue);
+		color: #fff;
+		font: 12px var(--font-mono);
+		letter-spacing: 0.04em;
+		padding: 9px 14px;
+		border-radius: var(--radius);
+		cursor: pointer;
+	}
+	.download-btn:hover {
+		background: color-mix(in srgb, var(--blue) 88%, #000);
 	}
 </style>