diff --git a/.forgejo/workflows/build.yaml b/.forgejo/workflows/build.yaml
new file mode 100644
index 0000000..99e9331
--- /dev/null
+++ b/.forgejo/workflows/build.yaml
@@ -0,0 +1,41 @@
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build application
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Get NPM cache directory
+        id: npm-cache-dir
+        shell: bash
+        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
+      - uses: actions/cache@v4
+        name: Cache NPM
+        id: npm-cache
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm ci
+        name: Install dependencies
+      - run: npm lint
+        name: Lint code
+      - run: npm build
+        name: Build project
+      - run: npm test
+        name: Test project
+      - run: npm build-storybook
+        name: Build storybook
+      - uses: actions/upload-artifact@v4
+        name: Upload build directories
+        with:
+          name: build-artifacts
+          path: |
+            dist/
+            build/
+            .svelte-kit/
+            storybook-static/
diff --git a/.gitignore b/.gitignore
index 01bf8ae..05ddd1b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+/storybook-static
diff --git a/.storybook/main.js b/.storybook/main.js
index dee51df..0d31a34 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,20 +1,15 @@
-
-
 /** @type { import('@storybook/sveltekit').StorybookConfig } */
 const config = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|ts|svelte)"
-  ],
-  "addons": [
-    "@storybook/addon-svelte-csf",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions"
-  ],
-  "framework": {
-    "name": "@storybook/sveltekit",
-    "options": {}
-  }
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: [
+		'@storybook/addon-svelte-csf',
+		'@storybook/addon-essentials',
+		'@chromatic-com/storybook',
+		'@storybook/addon-interactions'
+	],
+	framework: {
+		name: '@storybook/sveltekit',
+		options: {}
+	}
 };
-export default config;
\ No newline at end of file
+export default config;
diff --git a/.storybook/preview.js b/.storybook/preview.js
index c594202..39cfdc4 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,13 +1,13 @@
 /** @type { import('@storybook/svelte').Preview } */
 const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	}
 };
 
-export default preview;
\ No newline at end of file
+export default preview;
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index a381942..629f094 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,5 +1,3 @@
 {
-    "recommendations": [
-        "inlang.vs-code-extension"
-    ]
-}
\ No newline at end of file
+	"recommendations": ["inlang.vs-code-extension"]
+}
diff --git a/messages/de.json b/messages/de.json
index 2459437..3aaa845 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -1,10 +1,10 @@
 {
-  "$schema": "https://inlang.com/schema/inlang-message-format",
-  "hello_world": "Hello, {name} from de!",
-  "body_part_throat": "Hals",
-  "body_part_thigh": "Oberschenkel",
-  "body_part_ankle": "Knöchel",
-  "body_part_upper_arm": "Oberarm",
-  "action_shock": "Shocken",
-  "action_vibrate": "Vibrieren"
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from de!",
+	"body_part_throat": "Hals",
+	"body_part_thigh": "Oberschenkel",
+	"body_part_ankle": "Knöchel",
+	"body_part_upper_arm": "Oberarm",
+	"action_shock": "Shocken",
+	"action_vibrate": "Vibrieren"
 }
diff --git a/messages/en.json b/messages/en.json
index cfad5e6..2656fb1 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1,10 +1,10 @@
 {
-  "$schema": "https://inlang.com/schema/inlang-message-format",
-  "hello_world": "Hello, {name} from en!",
-  "body_part_throat": "Throat",
-  "body_part_thigh": "Thigh",
-  "body_part_ankle": "Ankle",
-  "body_part_upper_arm": "Upper Arm",
-  "action_shock": "Shock",
-  "action_vibrate": "Vibrate"
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from en!",
+	"body_part_throat": "Throat",
+	"body_part_thigh": "Thigh",
+	"body_part_ankle": "Ankle",
+	"body_part_upper_arm": "Upper Arm",
+	"action_shock": "Shock",
+	"action_vibrate": "Vibrate"
 }
diff --git a/src/app.css b/src/app.css
index be7a6d6..f54b9e0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,48 +1,53 @@
 :root {
-    --padding: 30px;
-    --gap: 20px;
-    --radius: 20px;
-    --width: 700px;
-    --layout-slant: -30deg;
-    --color-base: #fff;
-    --color-primary-100: #331400;
-    --color-primary-300: #cc5200;
-    --color-primary-500: #ff7e29;
-    --color-primary-700: #ffa061;
-    --color-primary-900: #ffc299;
-    --color-secondary-0: #040127;
-    --color-secondary-100: #060240;
-    --color-secondary-300: #0b046c;
-    --color-secondary-500: #170cb6;
-    --color-secondary-700: #4c40e7;
-    --color-secondary-900: #a8a4ea;
-    --color-accent: var(--color-primary-500);
-    --color-accent-contrast: #fff;
-    --color-border: rgba(0, 0, 0, .1);
-    --color-surface: #ececec;
-    --color-dark-surface: rgba(26, 37, 22, .9);
-    --color-dark-surface-text: white;
-    --color-dark-surface-text-dim: #808080;
-    --color-light-surface: rgba(255, 255, 255, .9);
-    --color-light-surface-text: var(--color-text);
-    --color-accent-surface: var(--color-accent);
-    --color-accent-surface-text: var(--color-accent-contrast);
-    --color-highlight-accent: rgba(255, 145, 49, .2);
-    --color-highlight-blue: rgba(10, 10, 255, .2);
-    --color-highlight-white: rgba(200, 200, 200, .2);
-    --color-highlight-grey: rgba(100, 100, 100, .2);
-    --color-highlight-yellow: rgba(255, 230, 10, .2);
-    --color-highlight-green: rgba(10, 255, 10, .2);
-    --color-highlight-red: rgba(255, 10, 10, .2);
-    --color-highlight-pink: rgba(255, 128, 255, .2);
-    --color-highlight-purple: rgba(204, 30, 152, .2);
-    --color-text: black;
-    --color-background: var(--color-base);
-    --nav-space: 95px;
-    --fill-pattern: repeating-linear-gradient( var(--layout-slant), var(--color-base) 0, var(--color-primary-500) .5px 3px, var(--color-base) 3.5px 12px );
-    --filter-gray: grayscale(1);
+	--padding: 30px;
+	--gap: 20px;
+	--radius: 20px;
+	--width: 700px;
+	--layout-slant: -30deg;
+	--color-base: #fff;
+	--color-primary-100: #331400;
+	--color-primary-300: #cc5200;
+	--color-primary-500: #ff7e29;
+	--color-primary-700: #ffa061;
+	--color-primary-900: #ffc299;
+	--color-secondary-0: #040127;
+	--color-secondary-100: #060240;
+	--color-secondary-300: #0b046c;
+	--color-secondary-500: #170cb6;
+	--color-secondary-700: #4c40e7;
+	--color-secondary-900: #a8a4ea;
+	--color-accent: var(--color-primary-500);
+	--color-accent-contrast: #fff;
+	--color-border: rgba(0, 0, 0, 0.1);
+	--color-surface: #ececec;
+	--color-dark-surface: rgba(26, 37, 22, 0.9);
+	--color-dark-surface-text: white;
+	--color-dark-surface-text-dim: #808080;
+	--color-light-surface: rgba(255, 255, 255, 0.9);
+	--color-light-surface-text: var(--color-text);
+	--color-accent-surface: var(--color-accent);
+	--color-accent-surface-text: var(--color-accent-contrast);
+	--color-highlight-accent: rgba(255, 145, 49, 0.2);
+	--color-highlight-blue: rgba(10, 10, 255, 0.2);
+	--color-highlight-white: rgba(200, 200, 200, 0.2);
+	--color-highlight-grey: rgba(100, 100, 100, 0.2);
+	--color-highlight-yellow: rgba(255, 230, 10, 0.2);
+	--color-highlight-green: rgba(10, 255, 10, 0.2);
+	--color-highlight-red: rgba(255, 10, 10, 0.2);
+	--color-highlight-pink: rgba(255, 128, 255, 0.2);
+	--color-highlight-purple: rgba(204, 30, 152, 0.2);
+	--color-text: black;
+	--color-background: var(--color-base);
+	--nav-space: 95px;
+	--fill-pattern: repeating-linear-gradient(
+		var(--layout-slant),
+		var(--color-base) 0,
+		var(--color-primary-500) 0.5px 3px,
+		var(--color-base) 3.5px 12px
+	);
+	--filter-gray: grayscale(1);
 }
 
 body {
-    font-family: 'Roboto Flex Variable', sans-serif;
-}
\ No newline at end of file
+	font-family: 'Roboto Flex Variable', sans-serif;
+}
diff --git a/src/lib/components/ActionCard.svelte b/src/lib/components/ActionCard.svelte
index 3826737..bb90cd8 100644
--- a/src/lib/components/ActionCard.svelte
+++ b/src/lib/components/ActionCard.svelte
@@ -1,53 +1,53 @@
 <script lang="ts">
-	import type { Action } from "$lib/types";
-    import { Coins } from "lucide-svelte";
+	import type { Action } from '$lib/types';
+	import { Coins } from 'lucide-svelte';
 	import * as m from '$lib/paraglide/messages.js';
 
-    export let action: Action;
+	export let action: Action;
 
-    const onclick = (ev: MouseEvent) => {
-        ev.preventDefault();
-    }
+	const onclick = (ev: MouseEvent) => {
+		ev.preventDefault();
+	};
 </script>
 
 <button class="action-card" {onclick}>
-    <span class="body-part">{m[`body_part_${action.bodyPart}`]()}</span>
-    <span class="type">{m[`action_${action.type}`]()}</span>
-    <span class="cost"><Coins /> {action.cost} coins</span>
+	<span class="body-part">{m[`body_part_${action.bodyPart}`]()}</span>
+	<span class="type">{m[`action_${action.type}`]()}</span>
+	<span class="cost"><Coins /> {action.cost} coins</span>
 </button>
 
 <style>
-    .action-card {
-        background-color: var(--color-base);
-        border: thin solid var(--color-border);
-        font: inherit;
-        cursor: pointer;
-        border-radius: var(--radius);
-        padding: var(--padding);
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
+	.action-card {
+		background-color: var(--color-base);
+		border: thin solid var(--color-border);
+		font: inherit;
+		cursor: pointer;
+		border-radius: var(--radius);
+		padding: var(--padding);
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
 
-        .body-part {
-            opacity: .75;
-        }
+		.body-part {
+			opacity: 0.75;
+		}
 
-        .type {
-            font-size: 1.4em;
-            font-weight: 800;
-            color: var(--color-accent);
-            margin-bottom: 10px;
-        }
+		.type {
+			font-size: 1.4em;
+			font-weight: 800;
+			color: var(--color-accent);
+			margin-bottom: 10px;
+		}
 
-        .cost {
-            display: flex;
-            justify-content: center;
-            gap: 5px;
-            opacity: .75;
+		.cost {
+			display: flex;
+			justify-content: center;
+			gap: 5px;
+			opacity: 0.75;
 
-            > :global(svg) {
-                color: var(--color-accent);
-            }
-        }
-    }
+			> :global(svg) {
+				color: var(--color-accent);
+			}
+		}
+	}
 </style>
diff --git a/src/lib/components/StoreGrid.svelte b/src/lib/components/StoreGrid.svelte
index 631623d..eb35d33 100644
--- a/src/lib/components/StoreGrid.svelte
+++ b/src/lib/components/StoreGrid.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { Action } from "$lib/types";
-    import ActionCard from './ActionCard.svelte';
-    export let actions: Action[];
+	import type { Action } from '$lib/types';
+	import ActionCard from './ActionCard.svelte';
+	export let actions: Action[];
 </script>
 
 <div class="store-grid">
-    {#each actions as action}
-        <ActionCard {action} />
-    {/each}
+	{#each actions as action}
+		<ActionCard {action} />
+	{/each}
 </div>
 
 <style>
-    .store-grid {
-        display: grid;
-        grid-template-columns: repeat(6, 1fr);
-        gap: var(--gap);
-    }
-</style>
\ No newline at end of file
+	.store-grid {
+		display: grid;
+		grid-template-columns: repeat(6, 1fr);
+		gap: var(--gap);
+	}
+</style>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index fe5dab1..80d8c6d 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,3 @@
 // Reexport your entry components here
 
-export * from './types';
\ No newline at end of file
+export * from './types';
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 9cfb45b..f5edc55 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,26 +1,26 @@
 /**
  * An action to execute.
  */
-export type ActionType = "shock"|"vibrate";
+export type ActionType = 'shock' | 'vibrate';
 
 /**
  * A body part an action can affect.
  */
-export type BodyPartKey = "throat"|"thigh"|"ankle"|"upper_arm";
+export type BodyPartKey = 'throat' | 'thigh' | 'ankle' | 'upper_arm';
 
 /**
  * Time in seconds or burst.
  */
-export type Time = number|"burst";
+export type Time = number | 'burst';
 
 /**
  * Entry in the coinshop.
  */
 export type Action = {
-    id: string;
-    subject: string;
-    type: ActionType;
-    cost: number;
-    bodyPart: BodyPartKey;
-    time: Time;
-};
\ No newline at end of file
+	id: string;
+	subject: string;
+	type: ActionType;
+	cost: number;
+	bodyPart: BodyPartKey;
+	time: Time;
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3e6de15..de13ada 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { i18n } from '$lib/i18n';
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
-	import "../app.css";
-	
+	import '../app.css';
+
 	import '@fontsource-variable/roboto-flex/full.css';
 
 	let { children } = $props();
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index dd4bc57..e7a5e6e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import StoreGrid from "$lib/components/StoreGrid.svelte";
-	import type { Action } from "$lib/types.js";
+	import StoreGrid from '$lib/components/StoreGrid.svelte';
+	import type { Action } from '$lib/types.js';
 
-    const exampleEntries: Action[] = [
-        {
-            id: "abcd",
-            type: "shock",
-            bodyPart: "thigh",
-            cost: 12,
-            subject: "raider",
-            time: "burst"
-        },
-        {
-            id: "efgh",
-            type: "shock",
-            bodyPart: "ankle",
-            cost: 8,
-            subject: "raider",
-            time: "burst"
-        }
-    ]
+	const exampleEntries: Action[] = [
+		{
+			id: 'abcd',
+			type: 'shock',
+			bodyPart: 'thigh',
+			cost: 12,
+			subject: 'raider',
+			time: 'burst'
+		},
+		{
+			id: 'efgh',
+			type: 'shock',
+			bodyPart: 'ankle',
+			cost: 8,
+			subject: 'raider',
+			time: 'burst'
+		}
+	];
 </script>
 
 <h1>Punish Raider</h1>
 
-<StoreGrid actions={exampleEntries} />
\ No newline at end of file
+<StoreGrid actions={exampleEntries} />
diff --git a/src/stories/Button.stories.svelte b/src/stories/Button.stories.svelte
index 4c8c7cc..d11a56d 100644
--- a/src/stories/Button.stories.svelte
+++ b/src/stories/Button.stories.svelte
@@ -1,24 +1,24 @@
 <script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button from './Button.svelte';
-  import { fn } from '@storybook/test';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from './Button.svelte';
+	import { fn } from '@storybook/test';
 
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    title: 'Example/Button',
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: {
-      backgroundColor: { control: 'color' },
-      size: {
-        control: { type: 'select' },
-        options: ['small', 'medium', 'large'],
-      },
-    },
-    args: {
-      onClick: fn(),
-    }
-  });
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Example/Button',
+		component: Button,
+		tags: ['autodocs'],
+		argTypes: {
+			backgroundColor: { control: 'color' },
+			size: {
+				control: { type: 'select' },
+				options: ['small', 'medium', 'large']
+			}
+		},
+		args: {
+			onClick: fn()
+		}
+	});
 </script>
 
 <!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
diff --git a/src/stories/Button.svelte b/src/stories/Button.svelte
index b2b820e..8941d26 100644
--- a/src/stories/Button.svelte
+++ b/src/stories/Button.svelte
@@ -1,26 +1,26 @@
 <script>
-  import './button.css';
+	import './button.css';
 
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} [primary] Is this the principal call to action on the page?
-   * @property {string} [backgroundColor] What background color to use
-   * @property {'small' | 'medium' | 'large'} [size] How large should the button be?
-   * @property {string} label Button contents
-   * @property {() => void} [onClick] The onclick event handler
-   */
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [primary] Is this the principal call to action on the page?
+	 * @property {string} [backgroundColor] What background color to use
+	 * @property {'small' | 'medium' | 'large'} [size] How large should the button be?
+	 * @property {string} label Button contents
+	 * @property {() => void} [onClick] The onclick event handler
+	 */
 
-  /** @type {Props} */
-  const { primary = false, backgroundColor, size = 'medium', label, onClick } = $props();
+	/** @type {Props} */
+	const { primary = false, backgroundColor, size = 'medium', label, onClick } = $props();
 </script>
 
 <button
-  type="button"
-  class={['storybook-button', `storybook-button--${size}`].join(' ')}
-  class:storybook-button--primary={primary}
-  class:storybook-button--secondary={!primary}
-  style:background-color={backgroundColor}
-  onclick={onClick}
+	type="button"
+	class={['storybook-button', `storybook-button--${size}`].join(' ')}
+	class:storybook-button--primary={primary}
+	class:storybook-button--secondary={!primary}
+	style:background-color={backgroundColor}
+	onclick={onClick}
 >
-  {label}
+	{label}
 </button>
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
index 549973e..f74b88b 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.mdx
@@ -1,35 +1,37 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from '@storybook/blocks';
 
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
+import Github from './assets/github.svg';
+import Discord from './assets/discord.svg';
+import Youtube from './assets/youtube.svg';
+import Tutorials from './assets/tutorials.svg';
+import Styling from './assets/styling.png';
+import Context from './assets/context.png';
+import Assets from './assets/assets.png';
+import Docs from './assets/docs.png';
+import Share from './assets/share.png';
+import FigmaPlugin from './assets/figma-plugin.png';
+import Testing from './assets/testing.png';
+import Accessibility from './assets/accessibility.png';
+import Theming from './assets/theming.png';
+import AddonLibrary from './assets/addon-library.png';
 
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
-      marginLeft: '4px',
-      display: 'inline-block',
-      shapeRendering: 'inherit',
-      verticalAlign: 'middle',
-      fill: 'currentColor',
-      'path fill': 'currentColor'
-    }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+export const RightArrow = () => (
+	<svg
+		viewBox="0 0 14 14"
+		width="8px"
+		height="14px"
+		style={{
+			marginLeft: '4px',
+			display: 'inline-block',
+			shapeRendering: 'inherit',
+			verticalAlign: 'middle',
+			fill: 'currentColor',
+			'path fill': 'currentColor'
+		}}
+	>
+		<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+	</svg>
+);
 
 <Meta title="Configure your project" />
 
@@ -38,6 +40,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -84,6 +87,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -203,10 +207,11 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>
-  {`
+	{`
   .sb-container {
     margin-bottom: 48px;
   }
diff --git a/src/stories/Header.stories.svelte b/src/stories/Header.stories.svelte
index 0130c11..eb4bf24 100644
--- a/src/stories/Header.stories.svelte
+++ b/src/stories/Header.stories.svelte
@@ -1,24 +1,24 @@
 <script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Header from './Header.svelte';
-  import { fn } from '@storybook/test';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Header from './Header.svelte';
+	import { fn } from '@storybook/test';
 
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    title: 'Example/Header',
-    component: Header,
-    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
-    parameters: {
-      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-      layout: 'fullscreen',
-    },
-    args: {
-      onLogin: fn(),
-      onLogout: fn(),
-      onCreateAccount: fn(),
-    }
-  });
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Example/Header',
+		component: Header,
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+		tags: ['autodocs'],
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {
+			onLogin: fn(),
+			onLogout: fn(),
+			onCreateAccount: fn()
+		}
+	});
 </script>
 
 <Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />
diff --git a/src/stories/Header.svelte b/src/stories/Header.svelte
index dba3b78..7af983f 100644
--- a/src/stories/Header.svelte
+++ b/src/stories/Header.svelte
@@ -1,47 +1,47 @@
 <script>
-  import './header.css';
-  import Button from './Button.svelte';
+	import './header.css';
+	import Button from './Button.svelte';
 
-  /**
-   * @typedef {Object} Props
-   * @property {{name: string}} [user] The user object
-   * @property {() => void} [onLogin] The login event handler
-   * @property {() => void} [onLogout] The logout event handler
-   * @property {() => void} [onCreateAccount] The account creation event handler
-   */
+	/**
+	 * @typedef {Object} Props
+	 * @property {{name: string}} [user] The user object
+	 * @property {() => void} [onLogin] The login event handler
+	 * @property {() => void} [onLogout] The logout event handler
+	 * @property {() => void} [onCreateAccount] The account creation event handler
+	 */
 
-  /** @type {Props} */
-  const { user, onLogin, onLogout, onCreateAccount } = $props();
+	/** @type {Props} */
+	const { user, onLogin, onLogout, onCreateAccount } = $props();
 </script>
 
 <header>
-  <div class="storybook-header">
-    <div>
-      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" fill-rule="evenodd">
-          <path
-            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-            fill="#FFF"
-          />
-          <path
-            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-            fill="#555AB9"
-          />
-          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
-        </g>
-      </svg>
-      <h1>Acme</h1>
-    </div>
-    <div>
-      {#if user}
-        <span class="welcome">
-          Welcome, <b>{user.name}</b>!
-        </span>
-        <Button size="small" onClick={onLogout} label="Log out" />
-      {:else}
-        <Button size="small" onClick={onLogin} label="Log in" />
-        <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-      {/if}
-    </div>
-  </div>
+	<div class="storybook-header">
+		<div>
+			<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+				<g fill="none" fill-rule="evenodd">
+					<path
+						d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+						fill="#FFF"
+					/>
+					<path
+						d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+						fill="#555AB9"
+					/>
+					<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+				</g>
+			</svg>
+			<h1>Acme</h1>
+		</div>
+		<div>
+			{#if user}
+				<span class="welcome">
+					Welcome, <b>{user.name}</b>!
+				</span>
+				<Button size="small" onClick={onLogout} label="Log out" />
+			{:else}
+				<Button size="small" onClick={onLogin} label="Log in" />
+				<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+			{/if}
+		</div>
+	</div>
 </header>
diff --git a/src/stories/Page.stories.svelte b/src/stories/Page.stories.svelte
index aa7372c..9e4f4ff 100644
--- a/src/stories/Page.stories.svelte
+++ b/src/stories/Page.stories.svelte
@@ -1,30 +1,32 @@
 <script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { expect, userEvent, waitFor, within } from '@storybook/test';
-  import Page from './Page.svelte';
-  import { fn } from '@storybook/test';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect, userEvent, waitFor, within } from '@storybook/test';
+	import Page from './Page.svelte';
+	import { fn } from '@storybook/test';
 
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    title: 'Example/Page',
-    component: Page,
-    parameters: {
-      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-      layout: 'fullscreen',
-    },
-  });
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Example/Page',
+		component: Page,
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		}
+	});
 </script>
 
-<Story name="Logged In" play={async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
+<Story
+	name="Logged In"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const loginButton = canvas.getByRole('button', { name: /Log in/i });
+		await expect(loginButton).toBeInTheDocument();
+		await userEvent.click(loginButton);
+		await waitFor(() => expect(loginButton).not.toBeInTheDocument());
 
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
-  }}
-  />
+		const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+		await expect(logoutButton).toBeInTheDocument();
+	}}
+/>
 
 <Story name="Logged Out" />
diff --git a/src/stories/Page.svelte b/src/stories/Page.svelte
index 92a95c0..8c9dc4a 100644
--- a/src/stories/Page.svelte
+++ b/src/stories/Page.svelte
@@ -1,70 +1,70 @@
 <script>
-  import './page.css';
-  import Header from './Header.svelte';
+	import './page.css';
+	import Header from './Header.svelte';
 
-  let user = $state(null);
+	let user = $state(null);
 </script>
 
 <article>
-  <Header
-    {user}
-    onLogin={() => (user = { name: 'Jane Doe' })}
-    onLogout={() => (user = null)}
-    onCreateAccount={() => (user = { name: 'Jane Doe' })}
-  />
+	<Header
+		{user}
+		onLogin={() => (user = { name: 'Jane Doe' })}
+		onLogout={() => (user = null)}
+		onCreateAccount={() => (user = { name: 'Jane Doe' })}
+	/>
 
-  <section class="storybook-page">
-    <h2>Pages in Storybook</h2>
-    <p>
-      We recommend building UIs with a
-      <a
-        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <strong>component-driven</strong>
-      </a>
-      process starting with atomic components and ending with pages.
-    </p>
-    <p>
-      Render pages with mock data. This makes it easy to build and review page states without
-      needing to navigate to them in your app. Here are some handy patterns for managing page data
-      in Storybook:
-    </p>
-    <ul>
-      <li>
-        Use a higher-level connected component. Storybook helps you compose such data from the
-        "args" of child component stories
-      </li>
-      <li>
-        Assemble data in the page component from your services. You can mock these services out
-        using Storybook.
-      </li>
-    </ul>
-    <p>
-      Get a guided tutorial on component-driven development at
-      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-        Storybook tutorials
-      </a>
-      . Read more in the
-      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
-      .
-    </p>
-    <div class="tip-wrapper">
-      <span class="tip">Tip</span>
-      Adjust the width of the canvas with the
-      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" fill-rule="evenodd">
-          <path
-            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+	<section class="storybook-page">
+		<h2>Pages in Storybook</h2>
+		<p>
+			We recommend building UIs with a
+			<a
+				href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<strong>component-driven</strong>
+			</a>
+			process starting with atomic components and ending with pages.
+		</p>
+		<p>
+			Render pages with mock data. This makes it easy to build and review page states without
+			needing to navigate to them in your app. Here are some handy patterns for managing page data
+			in Storybook:
+		</p>
+		<ul>
+			<li>
+				Use a higher-level connected component. Storybook helps you compose such data from the
+				"args" of child component stories
+			</li>
+			<li>
+				Assemble data in the page component from your services. You can mock these services out
+				using Storybook.
+			</li>
+		</ul>
+		<p>
+			Get a guided tutorial on component-driven development at
+			<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+				Storybook tutorials
+			</a>
+			. Read more in the
+			<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+			.
+		</p>
+		<div class="tip-wrapper">
+			<span class="tip">Tip</span>
+			Adjust the width of the canvas with the
+			<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+				<g fill="none" fill-rule="evenodd">
+					<path
+						d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
             01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
             010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-            id="a"
-            fill="#999"
-          />
-        </g>
-      </svg>
-      Viewports addon in the toolbar
-    </div>
-  </section>
+						id="a"
+						fill="#999"
+					/>
+				</g>
+			</svg>
+			Viewports addon in the toolbar
+		</div>
+	</section>
 </article>
diff --git a/src/stories/button.css b/src/stories/button.css
index 94d674b..f53a009 100644
--- a/src/stories/button.css
+++ b/src/stories/button.css
@@ -1,30 +1,30 @@
 .storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	display: inline-block;
+	cursor: pointer;
+	border: 0;
+	border-radius: 3em;
+	font-weight: 700;
+	line-height: 1;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
-  color: white;
+	background-color: #1ea7fd;
+	color: white;
 }
 .storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
+	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+	background-color: transparent;
+	color: #333;
 }
 .storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
+	padding: 10px 16px;
+	font-size: 12px;
 }
 .storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
+	padding: 11px 20px;
+	font-size: 14px;
 }
 .storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
+	padding: 12px 24px;
+	font-size: 16px;
 }
diff --git a/src/stories/header.css b/src/stories/header.css
index 5efd46c..d511c66 100644
--- a/src/stories/header.css
+++ b/src/stories/header.css
@@ -1,32 +1,32 @@
 .storybook-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	padding: 15px 20px;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
+	display: inline-block;
+	vertical-align: top;
 }
 
 .storybook-header h1 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 6px 0 6px 10px;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
+	display: inline-block;
+	vertical-align: top;
+	margin: 6px 0 6px 10px;
+	font-weight: 700;
+	font-size: 20px;
+	line-height: 1;
 }
 
 .storybook-header button + button {
-  margin-left: 10px;
+	margin-left: 10px;
 }
 
 .storybook-header .welcome {
-  margin-right: 10px;
-  color: #333;
-  font-size: 14px;
+	margin-right: 10px;
+	color: #333;
+	font-size: 14px;
 }
diff --git a/src/stories/page.css b/src/stories/page.css
index 87f7ecb..9e29b83 100644
--- a/src/stories/page.css
+++ b/src/stories/page.css
@@ -1,69 +1,69 @@
 .storybook-page {
-  margin: 0 auto;
-  padding: 48px 20px;
-  max-width: 600px;
-  color: #333;
-  font-size: 14px;
-  line-height: 24px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	margin: 0 auto;
+	padding: 48px 20px;
+	max-width: 600px;
+	color: #333;
+	font-size: 14px;
+	line-height: 24px;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .storybook-page h2 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0 0 4px;
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
+	display: inline-block;
+	vertical-align: top;
+	margin: 0 0 4px;
+	font-weight: 700;
+	font-size: 32px;
+	line-height: 1;
 }
 
 .storybook-page p {
-  margin: 1em 0;
+	margin: 1em 0;
 }
 
 .storybook-page a {
-  color: #1ea7fd;
-  text-decoration: none;
+	color: #1ea7fd;
+	text-decoration: none;
 }
 
 .storybook-page ul {
-  margin: 1em 0;
-  padding-left: 30px;
+	margin: 1em 0;
+	padding-left: 30px;
 }
 
 .storybook-page li {
-  margin-bottom: 8px;
+	margin-bottom: 8px;
 }
 
 .storybook-page .tip {
-  display: inline-block;
-  vertical-align: top;
-  margin-right: 10px;
-  border-radius: 1em;
-  background: #e7fdd8;
-  padding: 4px 12px;
-  color: #66bf3c;
-  font-weight: 700;
-  font-size: 11px;
-  line-height: 12px;
+	display: inline-block;
+	vertical-align: top;
+	margin-right: 10px;
+	border-radius: 1em;
+	background: #e7fdd8;
+	padding: 4px 12px;
+	color: #66bf3c;
+	font-weight: 700;
+	font-size: 11px;
+	line-height: 12px;
 }
 
 .storybook-page .tip-wrapper {
-  margin-top: 40px;
-  margin-bottom: 40px;
-  font-size: 13px;
-  line-height: 20px;
+	margin-top: 40px;
+	margin-bottom: 40px;
+	font-size: 13px;
+	line-height: 20px;
 }
 
 .storybook-page .tip-wrapper svg {
-  display: inline-block;
-  vertical-align: top;
-  margin-top: 3px;
-  margin-right: 4px;
-  width: 12px;
-  height: 12px;
+	display: inline-block;
+	vertical-align: top;
+	margin-top: 3px;
+	margin-right: 4px;
+	width: 12px;
+	height: 12px;
 }
 
 .storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
+	fill: #1ea7fd;
 }