Started working on adding mobile buzzers, a lot of rewriting

src/lib/components/ToastContainer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { toastStore } from "$lib/stores/toast.svelte";
+</script>
+
+{#each toastStore.notifications as notification (notification.id)}
+    <div
+        class="fixed bottom-8 left-1/2 -translate-x-1/2 z-[200] px-6 py-4 rounded-lg shadow-lg
+               font-[family-name:var(--kv-font-button)] text-lg uppercase
+               {notification.type === 'error'
+            ? 'bg-red-600 text-kv-white'
+            : notification.type === 'success'
+              ? 'bg-green-600 text-kv-white'
+              : 'bg-blue-600 text-kv-white'}"
+        role="alert"
+        style="bottom: calc(2rem + {toastStore.notifications.indexOf(notification) * 4}rem)"
+    >
+        <div class="flex items-center gap-3">
+            <span>{notification.message}</span>
+            <button
+                onclick={() => toastStore.dismiss(notification.id)}
+                class="ml-2 opacity-70 hover:opacity-100"
+                aria-label="Dismiss"
+            >
+                ✕
+            </button>
+        </div>
+    </div>
+{/each}