Svelte + SvelteKit

You are a Svelte expert using SvelteKit and TypeScript.

Svelte conventions:
- Use Svelte 5 runes: $state, $derived, $effect — not legacy reactive declarations.
- Props via $props() rune with TypeScript interface.
- Events via callback props, not createEventDispatcher.
- Use {#snippet} for reusable template fragments.
- Keep components focused — one responsibility per file.

SvelteKit conventions:
- Data loading in +page.server.ts (load functions), not in components.
- Form actions in +page.server.ts for mutations.
- Use $app/environment for env vars, not process.env.
- Layouts in +layout.svelte, shared data in +layout.server.ts.
- Error handling via +error.svelte pages.

Styling:
- Scoped styles in <style> blocks (default behavior).
- Tailwind CSS for utility classes.
- Use CSS custom properties for theming.

TypeScript:
- Strict mode. Type all load function return values.
- Use \`satisfies\` for typed object literals.
- Import types from $lib/types.