perf: fix slow page loads and gate performance in CI

- Ship one hashed Tailwind stylesheet instead of two (one render-blocking)
- Compress responses in-app (brotli/gzip, streaming-safe) and precompress
  the node build so local and CI measurements match production
- Validate the Supabase session once per request
- Render the homepage immediately and stream public stats
- Stream a Pokedex's entries with the page instead of fetching after
  hydration, running the rows and count queries in parallel
- Shrink the avatar and offline placeholder images, fix layout shift,
  contrast, link names and missing meta descriptions
- Add Lighthouse CI (mobile + desktop) with score and metric budgets,
  bundle-size budgets in the build tests, and signed-in speed scenarios

.github/workflows/tests.yml

@@ -80,6 +80,34 @@ jobs:
       - run: npm ci
       - run: npm run test:build
 
+  lighthouse:
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+    strategy:
+      fail-fast: false
+      matrix:
+        preset: [mobile, desktop]
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 24
+          cache: npm
+      - run: npm ci
+      # The homepage streams public stats from the database, so audit against a real stack.
+      - run: npx supabase start
+      - run: npm run test:lighthouse
+        env:
+          LHCI_PRESET: ${{ matrix.preset }}
+      - uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: lighthouse-${{ matrix.preset }}
+          path: .lighthouseci/
+          if-no-files-found: ignore
+      - if: always()
+        run: npx supabase stop
+
   bdd:
     runs-on: ubuntu-latest
     timeout-minutes: 30

.gitignore

@@ -9,6 +9,7 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 /static/output.css
+.lighthouseci
 .netlify
 .features-gen
 coverage

README.md

@@ -40,7 +40,17 @@ The test suite is split by responsibility so a failure points to the correct lay
 - `tests/integration` checks the migrated Supabase schema, views, constraints, RLS, and repositories.
 - `tests/bdd/features` is the executable Gherkin specification for user-visible behaviour. Step
   definitions and browser fixtures live beside it under `tests/bdd`.
-- `tests/build` verifies generated service-worker and manifest artifacts after each supported build.
+- `tests/build` verifies generated service-worker and manifest artifacts after each supported build,
+  and fails if the gzipped JS or CSS every page loads grows past its budget.
+- `lighthouserc.cjs` audits the public pages with Lighthouse CI (`npm run test:lighthouse`, which
+  builds and serves the Node output). PRs fail if Performance, Accessibility, Best Practices or SEO
+  drops below 90, or if LCP, TBT, CLS, script, stylesheet or total transfer size exceeds its budget.
+  CI runs it with both the mobile and desktop profiles (`LHCI_PRESET=desktop`).
+- `tests/bdd/features/performance.feature` holds time budgets for signed-in pages Lighthouse can't
+  reach: opening a Pokédex and switching between it and the Pokédex list.
+
+The budgets sit just above current measurements so regressions fail the PR. If a change genuinely
+needs more, raise the budget in the same PR so the cost is reviewed.
 
 Run the offline suites while developing. `test:fast` includes the coverage run, so there is no need
 to run both:

adapter.mjs

@@ -5,9 +5,10 @@ import AdapterNetlify from '@sveltejs/adapter-netlify';
 export const nodeAdapter = process.env.NODE_ADAPTER === 'true';
 
 // Netlify is the deployment target; the node adapter exists so the service worker
-// build tests can check the `build/client` layout a Node server produces.
+// build tests can check the `build/client` layout a Node server produces, and so Lighthouse CI
+// can audit a production build. Netlify's CDN compresses responses, so precompress here to match.
 export const adapter = nodeAdapter
-	? AdapterNode()
+	? AdapterNode({ precompress: true })
 	: AdapterNetlify({
 			// if true, will create a Netlify Edge Function rather
 			// than using standard Node-based functions

lighthouserc.cjs

@@ -0,0 +1,53 @@
+// Lighthouse CI: `npm run test:lighthouse` builds the Node adapter output, serves it and audits the
+// public pages. Any category below 90 fails the run (and so the PR).
+// Set LHCI_PRESET=desktop to audit with the desktop profile; the default is Lighthouse's mobile
+// profile (slow 4G + CPU throttling), which is the stricter of the two.
+const preset = process.env.LHCI_PRESET === 'desktop' ? 'desktop' : undefined;
+
+module.exports = {
+	ci: {
+		collect: {
+			startServerCommand: 'npm run preview-node',
+			startServerReadyPattern: 'Listening on',
+			url: [
+				'http://localhost:4173/',
+				'http://localhost:4173/signin',
+				'http://localhost:4173/welcome',
+				'http://localhost:4173/offline-guide',
+				'http://localhost:4173/forgot-password'
+			],
+			// Median of three runs smooths out noise from shared CI runners.
+			numberOfRuns: 3,
+			settings: {
+				...(preset ? { preset } : {}),
+				chromeFlags: '--no-sandbox --headless=new'
+			}
+		},
+		assert: {
+			assertions: {
+				'categories:performance': ['error', { minScore: 0.9 }],
+				'categories:accessibility': ['error', { minScore: 0.9 }],
+				'categories:best-practices': ['error', { minScore: 0.9 }],
+				'categories:seo': ['error', { minScore: 0.9 }],
+				// The app compresses its own responses (see src/lib/server/compression.ts and the
+				// precompressed build), so nothing may be served uncompressed.
+				'uses-text-compression': ['error', { minScore: 1 }],
+				// Regression budgets, set a little above what every audited page measured in September
+				// 2026 (mobile profile: LCP 1.4-2.6 s, TBT 0 ms, CLS 0, ~100 KB script, ~14 KB CSS and
+				// ~175 KB in total over the wire). A PR that makes pages meaningfully slower or heavier
+				// fails here even while the category scores stay above 90. When a change legitimately
+				// needs more, raise the number in the same PR so the cost is reviewed.
+				'largest-contentful-paint': ['error', { maxNumericValue: 3000 }],
+				'total-blocking-time': ['error', { maxNumericValue: 200 }],
+				'cumulative-layout-shift': ['error', { maxNumericValue: 0.05 }],
+				'resource-summary:script:size': ['error', { maxNumericValue: 115 * 1024 }],
+				'resource-summary:stylesheet:size': ['error', { maxNumericValue: 20 * 1024 }],
+				'resource-summary:total:size': ['error', { maxNumericValue: 220 * 1024 }]
+			}
+		},
+		upload: {
+			target: 'filesystem',
+			outputDir: '.lighthouseci/reports'
+		}
+	}
+};

package.json

@@ -21,7 +21,8 @@
 		"lint": "prettier --check . && eslint .",
 		"lint-fix": "npm run lint --fix",
 		"format": "prettier --write .",
-		"tailwind": "npx tailwindcss -i ./static/input.css -o ./static/output.css",
+		"tailwind": "npx tailwindcss -i ./static/input.css -o ./static/output.css --minify",
+		"test:lighthouse": "npm run build-inject-manifest-node && lhci autorun",
 		"test:unit": "vitest run tests/unit",
 		"test:data": "vitest run tests/data",
 		"test:coverage": "vitest run tests/unit --coverage",
@@ -46,6 +47,7 @@
 		"dev:supabase": "supabase start && npm run dev"
 	},
 	"devDependencies": {
+		"@lhci/cli": "^0.15.1",
 		"@playwright/test": "1.55.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-netlify": "^4.1.0",

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app.html

@@ -18,7 +18,6 @@
 			})();
 		</script>
 		%sveltekit.head%
-		<link rel="stylesheet" href="%sveltekit.assets%/output.css" />
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

src/hooks.server.ts

@@ -1,6 +1,7 @@
 import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
 import { createServerClient } from '@supabase/ssr';
 import type { Handle } from '@sveltejs/kit';
+import { compressResponse } from '$lib/server/compression';
 
 export const handle: Handle = async ({ event, resolve }) => {
 	event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
@@ -24,24 +25,31 @@ export const handle: Handle = async ({ event, resolve }) => {
 	 * doesn't validate the JWT, this function validates the JWT by first calling
 	 * `getUser` and aborts early if the JWT signature is invalid.
 	 */
-	event.locals.safeGetSession = async () => {
+	// getUser is a network round trip to Supabase Auth. Layout and page loads (and API routes) all
-		const {
+	// ask for the session, so validate once per request and share the result.
-			data: { user },
+	let sessionPromise: ReturnType<App.Locals['safeGetSession']> | null = null;
-			error
+	event.locals.safeGetSession = () => {
-		} = await event.locals.supabase.auth.getUser();
+		sessionPromise ??= (async () => {
-		if (error) {
+			const {
-			return { session: null, user: null };
+				data: { user },
-		}
+				error
+			} = await event.locals.supabase.auth.getUser();
+			if (error) {
+				return { session: null, user: null };
+			}
 
-		const {
+			const {
-			data: { session }
+				data: { session }
-		} = await event.locals.supabase.auth.getSession();
+			} = await event.locals.supabase.auth.getSession();
-		return { session, user };
+			return { session, user };
+		})();
+		return sessionPromise;
 	};
 
-	return resolve(event, {
+	const response = await resolve(event, {
 		filterSerializedResponseHeaders(name) {
 			return name === 'content-range';
 		}
 	});
+	return compressResponse(event.request, response);
 };

src/lib/server/compression.ts

@@ -0,0 +1,73 @@
+import { Readable } from 'node:stream';
+import type { ReadableStream as NodeReadableStream } from 'node:stream/web';
+import { constants, createBrotliCompress, createGzip } from 'node:zlib';
+
+export type Encoding = 'br' | 'gzip';
+
+// Text responses the app renders or returns from API routes. Images, fonts and other binary
+// content is already compressed, so re-compressing it only costs CPU.
+const COMPRESSIBLE = /^(text\/|application\/(json|javascript|xml|manifest\+json)|image\/svg\+xml)/i;
+
+/** Picks the best encoding the client accepts, preferring brotli. Honours `q=0` refusals. */
+export function pickEncoding(acceptEncoding: string | null): Encoding | null {
+	if (!acceptEncoding) return null;
+	const accepted = new Map<string, number>();
+	for (const part of acceptEncoding.split(',')) {
+		const [name, ...params] = part.trim().toLowerCase().split(';');
+		const q = params.map((p) => p.trim()).find((p) => p.startsWith('q='));
+		accepted.set(name, q ? Number(q.slice(2)) : 1);
+	}
+	const allows = (name: Encoding) => (accepted.get(name) ?? accepted.get('*') ?? 0) > 0;
+	if (allows('br')) return 'br';
+	if (allows('gzip')) return 'gzip';
+	return null;
+}
+
+// adapter-netlify's Lambda handler serialises text responses with `response.text()`, which would
+// corrupt a compressed body. Netlify compresses function responses itself, so skip it there.
+// Everywhere else (the Node build, local preview, CI) the app compresses its own responses.
+const serialisesBodiesAsText = () => Boolean(process.env.AWS_LAMBDA_FUNCTION_NAME);
+
+function shouldCompress(request: Request, response: Response): boolean {
+	if (serialisesBodiesAsText()) return false;
+	if (!response.body || request.method === 'HEAD') return false;
+	if (response.status < 200 || response.status === 204 || response.status === 304) return false;
+	if (response.headers.has('content-encoding')) return false;
+	return COMPRESSIBLE.test(response.headers.get('content-type') ?? '');
+}
+
+/**
+ * Compresses a rendered page or API response so its transfer size doesn't depend on the host.
+ * Every chunk is flushed as soon as it is written, so SvelteKit's streamed load data still reaches
+ * the browser progressively instead of waiting for the whole body.
+ */
+export function compressResponse(request: Request, response: Response): Response {
+	if (!shouldCompress(request, response)) return response;
+	const encoding = pickEncoding(request.headers.get('accept-encoding'));
+
+	const headers = new Headers(response.headers);
+	// Caches must key on the request encoding even when this response isn't compressed.
+	headers.append('vary', 'Accept-Encoding');
+	if (!encoding) return new Response(response.body, { status: response.status, headers });
+
+	const compressor =
+		encoding === 'br'
+			? createBrotliCompress({
+					flush: constants.BROTLI_OPERATION_FLUSH,
+					// Quality 11 is for build-time precompression; 5 is fast enough per request.
+					params: { [constants.BROTLI_PARAM_QUALITY]: 5 }
+				})
+			: createGzip({ flush: constants.Z_SYNC_FLUSH, level: 6 });
+
+	const source = Readable.fromWeb(response.body as unknown as NodeReadableStream);
+	source.on('error', (error) => compressor.destroy(error));
+	source.pipe(compressor);
+
+	headers.set('content-encoding', encoding);
+	headers.delete('content-length');
+	return new Response(Readable.toWeb(compressor) as unknown as ReadableStream, {
+		status: response.status,
+		statusText: response.statusText,
+		headers
+	});
+}

src/lib/services/CombinedDataService.ts

@@ -0,0 +1,42 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import CombinedDataRepository from '$lib/repositories/CombinedDataRepository';
+import { resolveDexScopes } from '$lib/services/PokedexDexScopeService';
+import type { Pokedex } from '$lib/models/Pokedex';
+
+export type CombinedDataQuery = {
+	page: number;
+	limit: number;
+	enableForms: boolean;
+	region?: string;
+	game?: string;
+};
+
+/**
+ * Loads one page of a Pokédex's entries joined with the owner's catch records. Shared by the
+ * combined-data API and the Pokédex page's server load so both return exactly the same data.
+ * The caller must already have checked that `userId` owns `pokedex`.
+ */
+export async function loadCombinedDataPage(
+	supabase: SupabaseClient,
+	userId: string,
+	pokedex: Pokedex,
+	{ page, limit, enableForms, region = '', game = '' }: CombinedDataQuery
+) {
+	// Use the pokédex's gameScope as the default filter if no manual game filter is set.
+	const effectiveGame = game || pokedex.gameScope || '';
+	const dexScopes = await resolveDexScopes(supabase, pokedex);
+	const repo = new CombinedDataRepository(supabase, userId, pokedex._id);
+
+	// The rows and the count are independent queries, so run them together.
+	const [combinedData, totalCount] = await Promise.all([
+		repo.findCombinedData(userId, page, limit, enableForms, region, effectiveGame, dexScopes),
+		repo.countCombinedData(enableForms, region, effectiveGame, dexScopes)
+	]);
+
+	return {
+		combinedData,
+		totalPages: Math.ceil(totalCount / limit),
+		currentPage: page,
+		totalCount
+	};
+}

src/routes/+layout.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import 'tailwindcss/tailwind.css';
+	// The only app stylesheet: Vite bundles, minifies and content-hashes it so it is cached for good.
+	// static/output.css is built separately for the credential-free offline.html page only.
+	import '../app.css';
 	import { onDestroy, onMount } from 'svelte';
 	import { user } from '$lib/stores/user.js';
 	import { type User } from '@supabase/auth-js';
@@ -180,7 +182,7 @@
 					{#if localUser}
 						<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
 							<div class="w-10 rounded-full">
-								<img alt="usericon" src="/OIG5.jpg" />
+								<img alt="Account menu" src="/avatar.webp" width="40" height="40" />
 							</div>
 						</div>
 						<ul
@@ -247,8 +249,14 @@
 
 	<footer class="footer items-center p-4 bg-neutral text-neutral-content bottom-0">
 		<aside class="items-center grid-flow-col">
-			<a href="https://github.com/jcreek/LivingDexTracker" target="_blank">
+			<a
+				href="https://github.com/jcreek/LivingDexTracker"
+				target="_blank"
+				rel="noopener noreferrer"
+				aria-label="Living Dex Tracker on GitHub"
+			>
 				<svg
+					aria-hidden="true"
 					width="36"
 					height="36"
 					fill-rule="evenodd"
@@ -269,8 +277,13 @@
 			</p>
 		</aside>
 		<nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
-			<a href="https://discord.gg/SQcJkaXDye" target="_blank"
+			<a
+				href="https://discord.gg/SQcJkaXDye"
+				target="_blank"
+				rel="noopener noreferrer"
+				aria-label="Living Dex Tracker Discord community"
 				><svg
+					aria-hidden="true"
 					xmlns="http://www.w3.org/2000/svg"
 					width="24"
 					height="24"

src/routes/+page.server.ts

@@ -1,17 +1,28 @@
+import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
+export type PublicStats = {
+	pokemonCaught: number;
+	users: number;
+	livingDexesCompleted: number;
+};
+
 /**
  * Server-side load function for the homepage
  *
- * Fetches public statistics from the database and passes them to the page component.
+ * Signed-in users go straight to their Pokédexes. For everyone else the page renders at once and
- * Stats are cached for 24 hours to improve performance.
+ * the public statistics stream in afterwards, so a slow stats query never delays the first paint.
  */
-export const load: PageServerLoad = async ({ fetch }) => {
+export const load: PageServerLoad = async ({ fetch, locals }) => {
-	// Fetch stats from database
+	const { user } = await locals.safeGetSession();
-	const statsResponse = await fetch('/api/stats');
+	if (user) {
-	const statsData = await statsResponse.json();
+		throw redirect(303, '/my-pokedexes');
+	}
 
-	return {
+	const stats: Promise<PublicStats | null> = fetch('/api/stats')
-		stats: statsData.error ? null : statsData
+		.then((response) => response.json())
-	};
+		.then((statsData) => (statsData.error ? null : statsData))
+		.catch(() => null);
+
+	return { stats };
 };

src/routes/+page.svelte

@@ -1,35 +1,12 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import SignUp from '$lib/components/SignUp.svelte';
 	import { goto } from '$app/navigation';
 
+	// Signed-in visitors are redirected by the server load, so the page renders straight away.
 	export let data;
 	let { supabase, stats } = data;
 	$: ({ supabase, stats } = data);
 
-	// Redirection is decided from the live session below, so the user store is not needed here.
-	let isCheckingSession = true;
-
-	onMount(() => {
-		checkSessionAndRedirect();
-	});
-
-	async function checkSessionAndRedirect() {
-		try {
-			const {
-				data: { session }
-			} = await supabase.auth.getSession();
-
-			if (session) {
-				await goto('/my-pokedexes');
-			}
-		} catch (error) {
-			console.error('Error checking session:', error);
-		} finally {
-			isCheckingSession = false;
-		}
-	}
-
 	async function handleSignedUp() {
 		await goto('/welcome');
 	}
@@ -44,16 +21,6 @@
 		}
 		return num.toString();
 	}
-
-	// Get formatted stats or fallback to 0
-	let pokemonCaught = '0';
-	let users = '0';
-	let livingDexesCompleted = '0';
-	$: {
-		pokemonCaught = formatNumber(stats?.pokemonCaught ?? 0);
-		users = formatNumber(stats?.users ?? 0);
-		livingDexesCompleted = formatNumber(stats?.livingDexesCompleted ?? 0);
-	}
 </script>
 
 <svelte:head>
@@ -72,322 +39,319 @@
 	/>
 </svelte:head>
 
-{#if isCheckingSession}
+<!-- Hero Section -->
-	<!-- Loading placeholder while checking session -->
+<div class="hero bg-base-100 my-36">
-	<div class="hero bg-base-100 my-36">
+	<div class="hero-content flex-col lg:flex-row-reverse">
-		<div class="hero-content flex-col">
+		<div class="text-center lg:text-left">
-			<span class="loading loading-spinner loading-lg"></span>
+			<div class="flex flex-wrap gap-2 mb-4">
+				<div class="badge badge-primary badge-lg gap-1">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+					Free
+				</div>
+				<div class="badge badge-secondary badge-lg gap-1">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+						/>
+					</svg>
+					Open Source
+				</div>
+				<a href="/offline-guide" class="badge badge-accent badge-lg gap-1 hover:opacity-80">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+					Offline-friendly
+				</a>
+			</div>
+			<h1 class="text-5xl font-bold mb-6">Start Your Pokédex Journey!</h1>
+			<p class="text-xl mb-6 text-base-content/80">
+				Track your progress towards a complete Living Pokédex — one of every Pokémon, actively
+				maintained across your boxes. Join thousands of trainers worldwide.
+			</p>
+			<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
+				<a
+					href="https://discord.gg/2ytj4pkUPY"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="btn btn-primary btn-lg"
+					aria-label="Join the Living Dex Tracker Discord community"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+					>
+						<path
+							d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+						/>
+					</svg>
+					Join Discord
+				</a>
+				<a
+					href="https://github.com/jcreek/LivingDexTracker"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="btn btn-outline btn-lg"
+					aria-label="View the Living Dex Tracker project on GitHub"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+					>
+						<path
+							d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+						/>
+					</svg>
+					Contribute on GitHub
+				</a>
+			</div>
+		</div>
+		<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-neutral">
+			<div class="card-body">
+				<h2 class="card-title text-2xl mb-4">Get Started Free</h2>
+				<SignUp {supabase} on:signedUp={handleSignedUp} />
+			</div>
 		</div>
 	</div>
-{:else}
+</div>
-	<!-- Hero Section -->
+
-	<div class="hero bg-base-100 my-36">
+<!-- Stats Section -->
-		<div class="hero-content flex-col lg:flex-row-reverse">
+<div class="bg-base-200 py-16">
-			<div class="text-center lg:text-left">
+	<div class="container mx-auto px-4">
-				<div class="flex flex-wrap gap-2 mb-4">
+		<div class="stats stats-vertical lg:stats-horizontal shadow bg-neutral text-center w-full">
-					<div class="badge badge-primary badge-lg gap-1">
+			<div class="stat">
-						<svg
+				<div class="stat-title">Pokémon caught</div>
-							xmlns="http://www.w3.org/2000/svg"
+				<div class="stat-value text-primary">
-							class="h-4 w-4"
+					{#await stats}–{:then value}{formatNumber(value?.pokemonCaught ?? 0)}{/await}
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							aria-hidden="true"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-						Free
-					</div>
-					<div class="badge badge-secondary badge-lg gap-1">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-4 w-4"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							aria-hidden="true"
-						>
-							<path
-								d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-							/>
-						</svg>
-						Open Source
-					</div>
-					<a href="/offline-guide" class="badge badge-accent badge-lg gap-1 hover:opacity-80">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-4 w-4"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							aria-hidden="true"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-						Offline-friendly
-					</a>
-				</div>
-				<h1 class="text-5xl font-bold mb-6">Start Your Pokédex Journey!</h1>
-				<p class="text-xl mb-6 text-base-content/80">
-					Track your progress towards a complete Living Pokédex — one of every Pokémon, actively
-					maintained across your boxes. Join thousands of trainers worldwide.
-				</p>
-				<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
-					<a
-						href="https://discord.gg/2ytj4pkUPY"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="btn btn-primary btn-lg"
-						aria-label="Join the Living Dex Tracker Discord community"
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-5 w-5"
-							viewBox="0 0 24 24"
-							fill="currentColor"
-						>
-							<path
-								d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
-							/>
-						</svg>
-						Join Discord
-					</a>
-					<a
-						href="https://github.com/jcreek/LivingDexTracker"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="btn btn-outline btn-lg"
-						aria-label="View the Living Dex Tracker project on GitHub"
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-5 w-5"
-							viewBox="0 0 24 24"
-							fill="currentColor"
-						>
-							<path
-								d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-							/>
-						</svg>
-						Contribute on GitHub
-					</a>
 				</div>
 			</div>
+			<div class="stat">
+				<div class="stat-title">Users</div>
+				<div class="stat-value text-primary">
+					{#await stats}–{:then value}{formatNumber(value?.users ?? 0)}{/await}
+				</div>
+			</div>
+			<div class="stat">
+				<div class="stat-title">Living Dexes Completed</div>
+				<div class="stat-value text-primary">
+					{#await stats}–{:then value}{formatNumber(value?.livingDexesCompleted ?? 0)}{/await}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- What is a Living Dex Section -->
+<div class="py-16 bg-base-100">
+	<div class="container mx-auto px-4 max-w-4xl">
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title text-3xl mb-4">What is a Living Dex?</h2>
+				<p class="text-lg text-base-content/80">
+					A Living Dex is a complete Pokédex where you keep one of every Pokémon in your boxes
+					(often including forms/variants). Living Dex Tracker helps you build and maintain that
+					collection with filters, notes, and progress tracking.
+				</p>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- Features Section -->
+<div class="py-16 bg-base-200">
+	<div class="container mx-auto px-4 max-w-6xl">
+		<h2 class="text-4xl font-bold mb-12 text-center">Why Choose Living Dex Tracker?</h2>
+
+		<div class="grid md:grid-cols-2 gap-6">
+			<div class="card bg-neutral shadow-xl">
+				<div class="card-body">
+					<div class="flex items-start gap-4">
+						<div class="flex-shrink-0">
+							<svg
+								class="w-10 h-10 text-green-500"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+								aria-hidden="true"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+								></path>
+							</svg>
+						</div>
+						<div>
+							<h2 class="card-title text-xl mb-2">Social & Shareable</h2>
+							<p class="text-base-content/80">
+								Easily share your Pokédex journey with friends, or find theirs. If you'd rather go
+								it alone, that's okay too!
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="card bg-neutral shadow-xl">
+				<div class="card-body">
+					<div class="flex items-start gap-4">
+						<div class="flex-shrink-0">
+							<svg
+								class="w-10 h-10 text-green-500"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+								aria-hidden="true"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+								></path>
+							</svg>
+						</div>
+						<div>
+							<h2 class="card-title text-xl mb-2">Free & Open Source</h2>
+							<p class="text-base-content/80">
+								Completely open source and free to use, enabling the community to contribute updates
+								as soon as new Pokémon are released.
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="card bg-neutral shadow-xl">
+				<div class="card-body">
+					<div class="flex items-start gap-4">
+						<div class="flex-shrink-0">
+							<svg
+								class="w-10 h-10 text-green-500"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+								aria-hidden="true"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+								></path>
+							</svg>
+						</div>
+						<div>
+							<h2 class="card-title text-xl mb-2">Advanced Filtering</h2>
+							<p class="text-base-content/80">
+								Track simple progress or tackle harder variants like a Living Origin Form Dex with
+								our powerful filtering options for targeted catching sessions.
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="card bg-neutral shadow-xl">
+				<div class="card-body">
+					<div class="flex items-start gap-4">
+						<div class="flex-shrink-0">
+							<svg
+								class="w-10 h-10 text-green-500"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+								aria-hidden="true"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								></path>
+							</svg>
+						</div>
+						<div>
+							<h2 class="card-title text-xl mb-2">100% free</h2>
+							<p class="text-base-content/80">
+								Did we mention it's completely free to use? Oh, we did? Good. Because it is.
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- CTA Section -->
+<div class="py-16 bg-base-100">
+	<div class="container mx-auto px-4 text-center">
+		<h2 class="text-4xl font-bold mb-6">Ready to Start Your Journey?</h2>
+		<p class="text-xl mb-8 text-base-content/80 max-w-2xl mx-auto">
+			Get started today with tracking your Living Pokédex progress. It's free, open source, and
+			built with love for the Pokémon community.
+		</p>
+		<div class="flex flex-wrap gap-4 justify-center">
 			<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-neutral">
 				<div class="card-body">
-					<h2 class="card-title text-2xl mb-4">Get Started Free</h2>
+					<h3 class="card-title text-xl mb-4">Sign Up Now</h3>
 					<SignUp {supabase} on:signedUp={handleSignedUp} />
 				</div>
 			</div>
 		</div>
 	</div>
+</div>
 
-	<!-- Stats Section -->
+<!-- Legal Section -->
-	<div class="bg-base-200 py-16">
+<div class="py-8 bg-base-200">
-		<div class="container mx-auto px-4">
+	<div class="container mx-auto px-4 max-w-4xl">
-			<div class="stats stats-vertical lg:stats-horizontal shadow bg-neutral text-center w-full">
+		<div class="card bg-base-100 shadow-xl">
-				<div class="stat">
+			<div class="card-body">
-					<div class="stat-title">Pokémon caught</div>
+				<h2 class="card-title text-lg mb-2">Legal Disclaimer</h2>
-					<div class="stat-value text-primary">{pokemonCaught}</div>
+				<p class="text-sm text-base-content/70">
-				</div>
+					Living Dex Tracker is a fan-made project. We do not claim ownership of any Pokémon
-				<div class="stat">
+					characters, images, or other content featured on this website. This project is not
-					<div class="stat-title">Users</div>
+					affiliated with, endorsed, sponsored, or specifically approved by Nintendo, Game Freak, or
-					<div class="stat-value text-primary">{users}</div>
+					The Pokémon Company.
-				</div>
+				</p>
-				<div class="stat">
-					<div class="stat-title">Living Dexes Completed</div>
-					<div class="stat-value text-primary">{livingDexesCompleted}</div>
-				</div>
 			</div>
 		</div>
 	</div>
-
+</div>
-	<!-- What is a Living Dex Section -->
-	<div class="py-16 bg-base-100">
-		<div class="container mx-auto px-4 max-w-4xl">
-			<div class="card bg-base-100 shadow-xl">
-				<div class="card-body">
-					<h2 class="card-title text-3xl mb-4">What is a Living Dex?</h2>
-					<p class="text-lg text-base-content/80">
-						A Living Dex is a complete Pokédex where you keep one of every Pokémon in your boxes
-						(often including forms/variants). Living Dex Tracker helps you build and maintain that
-						collection with filters, notes, and progress tracking.
-					</p>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<!-- Features Section -->
-	<div class="py-16 bg-base-200">
-		<div class="container mx-auto px-4 max-w-6xl">
-			<h2 class="text-4xl font-bold mb-12 text-center">Why Choose Living Dex Tracker?</h2>
-
-			<div class="grid md:grid-cols-2 gap-6">
-				<div class="card bg-neutral shadow-xl">
-					<div class="card-body">
-						<div class="flex items-start gap-4">
-							<div class="flex-shrink-0">
-								<svg
-									class="w-10 h-10 text-green-500"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-									xmlns="http://www.w3.org/2000/svg"
-									aria-hidden="true"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-									></path>
-								</svg>
-							</div>
-							<div>
-								<h2 class="card-title text-xl mb-2">Social & Shareable</h2>
-								<p class="text-base-content/80">
-									Easily share your Pokédex journey with friends, or find theirs. If you'd rather go
-									it alone, that's okay too!
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="card bg-neutral shadow-xl">
-					<div class="card-body">
-						<div class="flex items-start gap-4">
-							<div class="flex-shrink-0">
-								<svg
-									class="w-10 h-10 text-green-500"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-									xmlns="http://www.w3.org/2000/svg"
-									aria-hidden="true"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-									></path>
-								</svg>
-							</div>
-							<div>
-								<h2 class="card-title text-xl mb-2">Free & Open Source</h2>
-								<p class="text-base-content/80">
-									Completely open source and free to use, enabling the community to contribute
-									updates as soon as new Pokémon are released.
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="card bg-neutral shadow-xl">
-					<div class="card-body">
-						<div class="flex items-start gap-4">
-							<div class="flex-shrink-0">
-								<svg
-									class="w-10 h-10 text-green-500"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-									xmlns="http://www.w3.org/2000/svg"
-									aria-hidden="true"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
-									></path>
-								</svg>
-							</div>
-							<div>
-								<h2 class="card-title text-xl mb-2">Advanced Filtering</h2>
-								<p class="text-base-content/80">
-									Track simple progress or tackle harder variants like a Living Origin Form Dex with
-									our powerful filtering options for targeted catching sessions.
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="card bg-neutral shadow-xl">
-					<div class="card-body">
-						<div class="flex items-start gap-4">
-							<div class="flex-shrink-0">
-								<svg
-									class="w-10 h-10 text-green-500"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-									xmlns="http://www.w3.org/2000/svg"
-									aria-hidden="true"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-									></path>
-								</svg>
-							</div>
-							<div>
-								<h2 class="card-title text-xl mb-2">100% free</h2>
-								<p class="text-base-content/80">
-									Did we mention it's completely free to use? Oh, we did? Good. Because it is.
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<!-- CTA Section -->
-	<div class="py-16 bg-base-100">
-		<div class="container mx-auto px-4 text-center">
-			<h2 class="text-4xl font-bold mb-6">Ready to Start Your Journey?</h2>
-			<p class="text-xl mb-8 text-base-content/80 max-w-2xl mx-auto">
-				Get started today with tracking your Living Pokédex progress. It's free, open source, and
-				built with love for the Pokémon community.
-			</p>
-			<div class="flex flex-wrap gap-4 justify-center">
-				<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-neutral">
-					<div class="card-body">
-						<h3 class="card-title text-xl mb-4">Sign Up Now</h3>
-						<SignUp {supabase} on:signedUp={handleSignedUp} />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<!-- Legal Section -->
-	<div class="py-8 bg-base-200">
-		<div class="container mx-auto px-4 max-w-4xl">
-			<div class="card bg-base-100 shadow-xl">
-				<div class="card-body">
-					<h2 class="card-title text-lg mb-2">Legal Disclaimer</h2>
-					<p class="text-sm text-base-content/70">
-						Living Dex Tracker is a fan-made project. We do not claim ownership of any Pokémon
-						characters, images, or other content featured on this website. This project is not
-						affiliated with, endorsed, sponsored, or specifically approved by Nintendo, Game Freak,
-						or The Pokémon Company.
-					</p>
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}

src/routes/api/pokedexes/[id]/combined-data/+server.ts

@@ -1,9 +1,8 @@
 import { json } from '@sveltejs/kit';
-import CombinedDataRepository from '$lib/repositories/CombinedDataRepository';
 import PokedexRepository from '$lib/repositories/PokedexRepository';
 import { getOptionalUserId } from '$lib/utils/auth';
 import type { RequestEvent } from '@sveltejs/kit';
-import { resolveDexScopes } from '$lib/services/PokedexDexScopeService';
+import { loadCombinedDataPage } from '$lib/services/CombinedDataService';
 
 // GET: Get combined data (pokédex entries + catch records) for specific pokédex
 export const GET = async (event: RequestEvent) => {
@@ -23,48 +22,29 @@ export const GET = async (event: RequestEvent) => {
 		const region = url.searchParams.get('region') || '';
 		const game = url.searchParams.get('game') || '';
 
-		// If authenticated, verify user owns this pokédex and get its gameScope
+		if (!userId) {
-		let pokedex;
-		if (userId) {
-			const pokedexRepo = new PokedexRepository(event.locals.supabase, userId);
-			pokedex = await pokedexRepo.findById(pokedexId);
-
-			if (!pokedex) {
-				// User is authenticated but doesn't own this pokédex (or it doesn't exist)
-				return json({ error: 'Pokedex not found' }, { status: 404 });
-			}
-		} else {
 			// Anonymous users cannot view pokédexes
 			return json({ error: 'Unauthorized' }, { status: 401 });
 		}
 
-		// Use pokédex's gameScope as default filter if no manual game filter is set
+		// Verify the user owns this pokédex and get its gameScope
-		const effectiveGame = game || pokedex.gameScope || '';
+		const pokedexRepo = new PokedexRepository(event.locals.supabase, userId);
-		const dexScopes = await resolveDexScopes(event.locals.supabase, pokedex);
+		const pokedex = await pokedexRepo.findById(pokedexId);
 
-		const repo = new CombinedDataRepository(event.locals.supabase, userId, pokedexId);
+		if (!pokedex) {
+			// User is authenticated but doesn't own this pokédex (or it doesn't exist)
+			return json({ error: 'Pokedex not found' }, { status: 404 });
+		}
 
-		// Get paginated combined data
+		return json(
-		const combinedData = await repo.findCombinedData(
+			await loadCombinedDataPage(event.locals.supabase, userId, pokedex, {
-			userId!,
+				page,
-			page,
+				limit,
-			limit,
+				enableForms,
-			enableForms,
+				region,
-			region,
+				game
-			effectiveGame,
+			})
-			dexScopes
 		);
-
-		// Get total count for pagination
-		const totalCount = await repo.countCombinedData(enableForms, region, effectiveGame, dexScopes);
-		const totalPages = Math.ceil(totalCount / limit);
-
-		return json({
-			combinedData,
-			totalPages,
-			currentPage: page,
-			totalCount
-		});
 	} catch (err) {
 		console.error(err);
 		if (err && typeof err === 'object' && 'status' in err) {

src/routes/api/stats/+server.ts

@@ -27,6 +27,10 @@ export const GET = async (event: RequestEvent) => {
 		}
 
 		const stats = data[0];
+		// The figures refresh at most daily, so let browsers and the CDN reuse them.
+		event.setHeaders({
+			'cache-control': 'public, max-age=300, s-maxage=3600, stale-while-revalidate=86400'
+		});
 		return json({
 			pokemonCaught: stats.pokemon_caught,
 			users: stats.total_users,

src/routes/offline-guide/+page.svelte

@@ -15,6 +15,10 @@
 
 <svelte:head>
 	<title>Using Offline - Living Dex Tracker</title>
+	<meta
+		name="description"
+		content="How Living Dex Tracker keeps your Pokédexes and artwork available offline, and how to save everything before you lose signal."
+	/>
 </svelte:head>
 
 <div class="container mx-auto p-4 max-w-screen-lg">

src/routes/pokedex/[id]/+page.server.ts

@@ -1,7 +1,11 @@
 import { error, redirect } from '@sveltejs/kit';
 import PokedexRepository from '$lib/repositories/PokedexRepository';
+import { loadCombinedDataPage } from '$lib/services/CombinedDataService';
 import type { PageServerLoad } from './$types';
 
+// Must match the page's itemsPerPage: the box view needs the whole dex in one page.
+const INITIAL_PAGE_SIZE = 9999;
+
 export const load: PageServerLoad = async ({ locals, params }) => {
 	const { safeGetSession, supabase } = locals;
 	const { session, user } = await safeGetSession();
@@ -22,7 +26,22 @@ export const load: PageServerLoad = async ({ locals, params }) => {
 		throw error(404, 'Pokédex not found');
 	}
 
+	// Streamed rather than awaited: the page shell renders straight away and the entries arrive in
+	// the same response, instead of the browser requesting them after hydration. A failure resolves
+	// to null so the page falls back to fetching (and reporting) through the API.
+	const initialCombinedData = loadCombinedDataPage(supabase, user.id, pokedex, {
+		page: 1,
+		limit: INITIAL_PAGE_SIZE,
+		enableForms: pokedex.isFormDex
+	})
+		.then((result) => result.combinedData)
+		.catch((err) => {
+			console.error('Unable to preload combined data', err);
+			return null;
+		});
+
 	return {
-		pokedex
+		pokedex,
+		initialCombinedData
 	};
 };

src/routes/pokedex/[id]/+page.svelte

@@ -502,8 +502,35 @@
 		});
 	}
 
-	// Fetch data whenever pagination controls change (client-side only)
+	// Show data whenever the dex or pagination changes (client-side only). The first page is streamed
-	$: if (browser && pokedexId) getData({ page: currentPage, perPage: itemsPerPage });
+	// from the server load, so it only needs fetching when that failed or the page changes.
+	let shownKey = '';
+	function showPage(
+		id: string,
+		page: number,
+		perPage: number,
+		initial: Promise<CombinedData[] | null> | undefined
+	) {
+		const key = `${id}:${page}:${perPage}`;
+		if (key === shownKey) return;
+		shownKey = key;
+		if (page !== 1 || !initial) {
+			void getData({ page, perPage });
+			return;
+		}
+		combinedData = null;
+		void initial.then((rows) => {
+			if (shownKey !== key) return;
+			if (!rows) {
+				void getData({ page, perPage });
+				return;
+			}
+			combinedData = rows;
+			boxNumbers = calculateBoxNumbers(rows.length);
+		});
+	}
+	$: if (browser && pokedexId)
+		showPage(pokedexId, currentPage, itemsPerPage, data?.initialCombinedData);
 
 	onMount(() => {
 		if (!browser) return;

src/routes/welcome/+page.svelte

@@ -22,8 +22,12 @@
 <div class="min-h-[calc(100vh-16rem)] bg-base-100 py-8 md:py-16 px-4 sm:px-6 lg:px-8">
 	<div class="max-w-6xl mx-auto">
 		<!-- Success Badge -->
-		{#if showSuccess}
+		<!-- Always rendered (faded in) so the hero doesn't jump down when the badge appears. -->
-			<div class="flex justify-center mb-8 animate-fade-in">
+		<div
+			class="flex justify-center mb-8 transition-opacity duration-500"
+			class:opacity-0={!showSuccess}
+		>
+			<div class="flex justify-center">
 				<div class="badge badge-success badge-lg gap-2 p-6 shadow-lg">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -42,7 +46,7 @@
 					<span class="text-lg font-semibold">Account Created Successfully!</span>
 				</div>
 			</div>
-		{/if}
+		</div>
 
 		<!-- Hero Content -->
 		<div class="hero">
@@ -315,21 +319,6 @@
 </div>
 
 <style>
-	@keyframes fade-in {
-		from {
-			opacity: 0;
-			transform: translateY(-10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.animate-fade-in {
-		animation: fade-in 0.5s ease-out forwards;
-	}
-
 	@keyframes pulse {
 		0%,
 		100% {
@@ -346,7 +335,6 @@
 
 	/* Respect user's motion preferences */
 	@media (prefers-reduced-motion: reduce) {
-		.animate-fade-in,
 		.animate-pulse {
 			animation: none;
 		}

tailwind.config.js

@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: [
-		'./src/routes/**/*.{svelte,js,ts}',
+		'./src/**/*.{html,svelte,js,ts}',
-		'./src/routes/**/**/*.{svelte,js,ts}',
+		'./static/offline.html',
-		'./src/lib/components/**/*.{svelte,js,ts}'
+		'./static/offline-viewer.js'
 	],
 	theme: {
 		extend: {}
@@ -16,11 +16,16 @@ export default {
 			'dracula',
 			{
 				pokeball: {
-					primary: '#ee1515',
+					// A slightly deeper Poké Ball red: #ee1515 gave white text only 4.3:1 contrast, below
+					// the WCAG AA 4.5:1 minimum that the Lighthouse accessibility gate checks.
+					primary: '#d31111',
 					'primary-content': '#ffffff',
 					secondary: '#ffd700',
 					'secondary-content': '#ffffff',
 					accent: '#3b82c4',
+					// daisyUI's default info blue is too light for text on the base colours.
+					info: '#0369a1',
+					'info-content': '#ffffff',
 					neutral: '#ffffff',
 					'base-100': '#f0f0f0',
 					'base-content': '#222224'

tests/bdd/features/performance.feature

@@ -0,0 +1,19 @@
+Feature: Signed-in page speed
+  As a trainer
+  I want my Pokédexes to open and switch quickly
+  So that tracking catches never feels sluggish
+
+  Lighthouse CI covers the public pages; these budgets cover the signed-in ones it can't reach.
+
+  Background:
+    Given I am signed in
+    And I have a Living Dex named "Speed Check"
+
+  Scenario: A Pokédex opens without a second round trip for its entries
+    When I load the Pokédex page directly
+    Then its entries appear within 5 seconds
+    And the browser did not request the entries separately
+
+  Scenario: Moving between my Pokédex list and a Pokédex is quick
+    When I switch between my Pokédex list and the Pokédex
+    Then each switch finishes within 3 seconds

tests/bdd/steps/performance.steps.ts

@@ -0,0 +1,77 @@
+import { createBdd } from 'playwright-bdd';
+import type { Page } from '@playwright/test';
+import { test, expect } from '../fixtures';
+
+const { When, Then } = createBdd(test);
+
+// Per-page scratch values; scenarios run one at a time (workers: 1).
+const timings = new WeakMap<
+	Page,
+	{ entriesMs?: number; switchMs: number[]; entryRequests: number }
+>();
+
+function entriesVisible(page: Page) {
+	return expect(page.getByRole('button', { name: /^View details for / }).first()).toBeVisible({
+		timeout: 30_000
+	});
+}
+
+When('I load the Pokédex page directly', async ({ page, state }) => {
+	if (!state.pokedexId) throw new Error('A Pokédex must exist before it can be opened');
+	const record = { switchMs: [], entryRequests: 0 };
+	timings.set(page, record);
+	// Only requests made while the page first loads matter; the page's 60s reconciliation refetch
+	// can't fire within this window.
+	const countEntryRequests = (request: { url(): string }) => {
+		if (/\/api\/pokedexes\/[^/]+\/combined-data/.test(request.url())) record.entryRequests++;
+	};
+	page.on('request', countEntryRequests);
+
+	const started = Date.now();
+	await page.goto(`/pokedex/${state.pokedexId}`);
+	await entriesVisible(page);
+	(record as { entriesMs?: number }).entriesMs = Date.now() - started;
+	page.off('request', countEntryRequests);
+});
+
+Then('its entries appear within {int} seconds', async ({ page }, seconds: number) => {
+	const entriesMs = timings.get(page)?.entriesMs;
+	expect(entriesMs, 'entries never became visible').toBeDefined();
+	expect(entriesMs!).toBeLessThan(seconds * 1000);
+});
+
+Then('the browser did not request the entries separately', async ({ page }) => {
+	// The server load streams the first page of entries with the HTML, so the page must not make
+	// the old hydrate-then-fetch round trip.
+	expect(timings.get(page)?.entryRequests).toBe(0);
+});
+
+When('I switch between my Pokédex list and the Pokédex', async ({ page, state }) => {
+	if (!state.pokedexName) throw new Error('A Pokédex must exist before switching to it');
+	const record = { switchMs: [] as number[], entryRequests: 0 };
+	timings.set(page, record);
+	await page.goto('/my-pokedexes');
+	const card = page.locator('.card').filter({ hasText: state.pokedexName }).first();
+	await expect(card).toBeVisible();
+
+	for (let round = 0; round < 2; round++) {
+		// List -> Pokédex: a client-side navigation through the card's View button.
+		let started = Date.now();
+		await card.getByRole('button', { name: 'View', exact: true }).click();
+		await page.waitForURL('**/pokedex/**');
+		await entriesVisible(page);
+		record.switchMs.push(Date.now() - started);
+
+		// Pokédex -> list: back navigation is also handled by the client router.
+		started = Date.now();
+		await page.goBack();
+		await expect(card).toBeVisible();
+		record.switchMs.push(Date.now() - started);
+	}
+});
+
+Then('each switch finishes within {int} seconds', async ({ page }, seconds: number) => {
+	const switchMs = timings.get(page)?.switchMs ?? [];
+	expect(switchMs).toHaveLength(4);
+	for (const ms of switchMs) expect(ms).toBeLessThan(seconds * 1000);
+});

tests/build/build.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
-import { existsSync, readFileSync } from 'node:fs';
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { gzipSync } from 'node:zlib';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { generateSW } from '../../pwa.mjs';
@@ -44,4 +45,44 @@ describe(`test-build: ${nodeAdapter ? 'node' : 'static'} adapter`, () => {
 			expect(match === null, 'found server/ entries in sw precache manifest').toBeTruthy();
 		}
 	});
+
+	const outputRoot = `./build/${nodeAdapter ? 'client/' : ''}`;
+	const nodesDir = './.svelte-kit/output/server/nodes/';
+	const gzippedSize = (path: string) => gzipSync(readFileSync(`${outputRoot}${path}`)).length;
+
+	/** The client files a route node makes the browser load (its imports and stylesheets). */
+	function assetsLoadedBy(node: string, extension: 'js' | 'css'): string[] {
+		const pattern = new RegExp(`_app/immutable/[^"']+\\.${extension}`, 'g');
+		return [...new Set(readFileSync(`${nodesDir}${node}`, 'utf-8').match(pattern) ?? [])];
+	}
+
+	it('ships the app stylesheet once, hashed and small', () => {
+		const referenced = new Set(
+			readdirSync(nodesDir).flatMap((node) => assetsLoadedBy(node, 'css'))
+		);
+		// Every page loads Tailwind's preflight; exactly one served stylesheet may contain it.
+		const withPreflight = [...referenced].filter((path) =>
+			readFileSync(`${outputRoot}${path}`, 'utf-8').includes('--tw-content')
+		);
+		expect(withPreflight, 'Tailwind is bundled more than once').toHaveLength(1);
+
+		// The un-hashed output.css exists only for offline.html; pages must not block on it.
+		const appHtml = readFileSync('./src/app.html', 'utf-8');
+		expect(appHtml).not.toMatch(/output\.css/);
+	});
+
+	// Regression budgets for what every page downloads before it can render: the root layout's
+	// scripts and stylesheets. Unlike Lighthouse timings these sizes don't vary between runs, so any
+	// growth past the budget fails the PR. Measured September 2026: 95.7 KB JS and 15.7 KB CSS
+	// gzipped. Raise a budget in the same PR only when the extra weight is deliberate.
+	it.each([
+		['js', 105 * 1024],
+		['css', 18 * 1024]
+	] as const)('keeps the layout %s loaded on every page within budget', (extension, budget) => {
+		const total = assetsLoadedBy('0.js', extension).reduce(
+			(sum, path) => sum + gzippedSize(path),
+			0
+		);
+		expect(total, `layout ${extension} is ${total} bytes gzipped`).toBeLessThan(budget);
+	});
 });

tests/unit/combinedDataService.test.ts

@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Pokedex } from '$lib/models/Pokedex';
+
+const findCombinedData = vi.fn();
+const countCombinedData = vi.fn();
+const constructed: unknown[][] = [];
+
+vi.mock('$lib/repositories/CombinedDataRepository', () => ({
+	default: class {
+		constructor(...args: unknown[]) {
+			constructed.push(args);
+		}
+		findCombinedData = findCombinedData;
+		countCombinedData = countCombinedData;
+	}
+}));
+vi.mock('$lib/services/PokedexDexScopeService', () => ({
+	resolveDexScopes: vi.fn(async () => ['national'])
+}));
+
+const { loadCombinedDataPage } = await import('$lib/services/CombinedDataService');
+
+const supabase = {} as never;
+const pokedex = { _id: 'dex-1', gameScope: 'Black' } as unknown as Pokedex;
+
+describe('loadCombinedDataPage', () => {
+	beforeEach(() => {
+		constructed.length = 0;
+		findCombinedData.mockReset().mockResolvedValue([{ id: 'row' }]);
+		countCombinedData.mockReset().mockResolvedValue(45);
+	});
+
+	it("defaults to the Pokédex's game scope and reports pagination", async () => {
+		const result = await loadCombinedDataPage(supabase, 'user-1', pokedex, {
+			page: 2,
+			limit: 20,
+			enableForms: true
+		});
+
+		expect(constructed).toEqual([[supabase, 'user-1', 'dex-1']]);
+		expect(findCombinedData).toHaveBeenCalledWith('user-1', 2, 20, true, '', 'Black', ['national']);
+		expect(countCombinedData).toHaveBeenCalledWith(true, '', 'Black', ['national']);
+		expect(result).toEqual({
+			combinedData: [{ id: 'row' }],
+			totalPages: 3,
+			currentPage: 2,
+			totalCount: 45
+		});
+	});
+
+	it('prefers an explicit game and region filter', async () => {
+		await loadCombinedDataPage(supabase, 'user-1', pokedex, {
+			page: 1,
+			limit: 9999,
+			enableForms: false,
+			region: 'unova',
+			game: 'White'
+		});
+
+		expect(countCombinedData).toHaveBeenCalledWith(false, 'unova', 'White', ['national']);
+	});
+
+	it('runs the rows and count queries at the same time', async () => {
+		let releaseRows: (rows: unknown[]) => void = () => {};
+		findCombinedData.mockReturnValue(new Promise((resolve) => (releaseRows = resolve)));
+		const pending = loadCombinedDataPage(supabase, 'user-1', pokedex, {
+			page: 1,
+			limit: 10,
+			enableForms: false
+		});
+
+		// The count starts before the rows query has finished.
+		await vi.waitFor(() => expect(countCombinedData).toHaveBeenCalled());
+		releaseRows([]);
+		await expect(pending).resolves.toMatchObject({ totalCount: 45, totalPages: 5 });
+	});
+});

tests/unit/compression.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest';
+import { brotliDecompressSync, gunzipSync } from 'node:zlib';
+import { compressResponse, pickEncoding } from '$lib/server/compression';
+
+const html = '<!doctype html><p>' + 'Living Dex '.repeat(500) + '</p>';
+
+function request(acceptEncoding?: string, method = 'GET') {
+	return new Request('http://localhost/', {
+		method,
+		headers: acceptEncoding ? { 'accept-encoding': acceptEncoding } : {}
+	});
+}
+
+function page(body: BodyInit | null = html, init: ResponseInit = {}) {
+	return new Response(body, {
+		status: 200,
+		headers: { 'content-type': 'text/html; charset=utf-8', 'content-length': '999' },
+		...init
+	});
+}
+
+async function bytes(response: Response) {
+	return Buffer.from(await response.arrayBuffer());
+}
+
+describe('pickEncoding', () => {
+	it.each([
+		['gzip, deflate, br', 'br'],
+		['gzip', 'gzip'],
+		['br;q=0, gzip', 'gzip'],
+		['*', 'br'],
+		['identity', null],
+		['gzip;q=0', null]
+	])('%s -> %s', (header, expected) => {
+		expect(pickEncoding(header)).toBe(expected);
+	});
+
+	it('returns null when the client sends no Accept-Encoding', () => {
+		expect(pickEncoding(null)).toBeNull();
+	});
+});
+
+describe('compressResponse', () => {
+	it('brotli-compresses HTML and the body round-trips', async () => {
+		const response = compressResponse(request('gzip, br'), page());
+
+		expect(response.headers.get('content-encoding')).toBe('br');
+		expect(response.headers.get('content-length')).toBeNull();
+		expect(response.headers.get('vary')).toMatch(/Accept-Encoding/);
+		const body = await bytes(response);
+		expect(body.length).toBeLessThan(html.length / 4);
+		expect(brotliDecompressSync(body).toString()).toBe(html);
+	});
+
+	it('falls back to gzip for JSON', async () => {
+		const json = JSON.stringify({ rows: Array.from({ length: 200 }, (_, i) => ({ i })) });
+		const response = compressResponse(
+			request('gzip'),
+			new Response(json, { headers: { 'content-type': 'application/json' } })
+		);
+
+		expect(response.headers.get('content-encoding')).toBe('gzip');
+		expect(gunzipSync(await bytes(response)).toString()).toBe(json);
+	});
+
+	it('keeps set-cookie headers and the status', async () => {
+		const original = page(html, { status: 404 });
+		original.headers.append('set-cookie', 'a=1; Path=/');
+		original.headers.append('set-cookie', 'b=2; Path=/');
+		const response = compressResponse(request('br'), original);
+
+		expect(response.status).toBe(404);
+		expect(response.headers.getSetCookie()).toEqual(['a=1; Path=/', 'b=2; Path=/']);
+	});
+
+	it('flushes each streamed chunk rather than buffering the whole body', async () => {
+		let sendRest: () => void = () => {};
+		const stream = new ReadableStream<Uint8Array>({
+			start(controller) {
+				controller.enqueue(new TextEncoder().encode('<p>shell</p>'));
+				sendRest = () => {
+					controller.enqueue(new TextEncoder().encode('<p>streamed data</p>'));
+					controller.close();
+				};
+			}
+		});
+		const response = compressResponse(request('gzip'), page(stream));
+		const reader = response.body!.getReader();
+
+		// The shell arrives while the stream is still open.
+		const first = await reader.read();
+		expect(gunzipSync(Buffer.from(first.value!), { finishFlush: 2 }).toString()).toBe(
+			'<p>shell</p>'
+		);
+
+		sendRest();
+		const rest: Uint8Array[] = [Buffer.from(first.value!)];
+		for (let chunk = await reader.read(); !chunk.done; chunk = await reader.read()) {
+			rest.push(chunk.value);
+		}
+		expect(gunzipSync(Buffer.concat(rest)).toString()).toBe('<p>shell</p><p>streamed data</p>');
+	});
+
+	it('passes responses through inside a Netlify (Lambda) function', () => {
+		// adapter-netlify reads text bodies with response.text(), which would corrupt compressed bytes.
+		process.env.AWS_LAMBDA_FUNCTION_NAME = 'sveltekit-render';
+		try {
+			const original = page();
+			expect(compressResponse(request('br'), original)).toBe(original);
+		} finally {
+			delete process.env.AWS_LAMBDA_FUNCTION_NAME;
+		}
+	});
+
+	it.each([
+		['a client that accepts no encoding', request(), page()],
+		['a HEAD request', request('br', 'HEAD'), page(null)],
+		['an image', request('br'), new Response('png', { headers: { 'content-type': 'image/png' } })],
+		['a 304', request('br'), new Response(null, { status: 304 })],
+		[
+			'an already-encoded body',
+			request('br'),
+			new Response('x', { headers: { 'content-type': 'text/html', 'content-encoding': 'gzip' } })
+		]
+	])('leaves %s uncompressed', async (_label, req, res) => {
+		const response = compressResponse(req, res);
+		expect(response.headers.get('content-encoding')).toBe(res.headers.get('content-encoding'));
+	});
+});

tests/unit/hooksSession.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from 'vitest';
+
+const getUser = vi.fn();
+const getSession = vi.fn();
+
+vi.mock('$env/static/public', () => ({
+	PUBLIC_SUPABASE_URL: 'http://127.0.0.1:54321',
+	PUBLIC_SUPABASE_ANON_KEY: 'anon'
+}));
+vi.mock('@supabase/ssr', () => ({
+	createServerClient: () => ({ auth: { getUser, getSession } })
+}));
+
+const { handle } = await import('../../src/hooks.server');
+
+async function runHandle() {
+	const event = {
+		cookies: { getAll: () => [], set: vi.fn() },
+		locals: {}
+	} as unknown as Parameters<typeof handle>[0]['event'];
+	await handle({ event, resolve: vi.fn(async () => new Response()) } as never);
+	return event.locals;
+}
+
+describe('safeGetSession', () => {
+	it('validates the session with Supabase Auth only once per request', async () => {
+		getUser.mockReset().mockResolvedValue({ data: { user: { id: 'user-1' } }, error: null });
+		getSession.mockReset().mockResolvedValue({ data: { session: { access_token: 't' } } });
+		const locals = await runHandle();
+
+		const [first, second] = await Promise.all([locals.safeGetSession(), locals.safeGetSession()]);
+		const third = await locals.safeGetSession();
+
+		expect(getUser).toHaveBeenCalledTimes(1);
+		expect(first.user?.id).toBe('user-1');
+		expect(second).toBe(first);
+		expect(third).toBe(first);
+	});
+
+	it('does not share a session between requests', async () => {
+		getUser.mockReset().mockResolvedValue({ data: { user: { id: 'user-1' } }, error: null });
+		getSession.mockReset().mockResolvedValue({ data: { session: {} } });
+		await (await runHandle()).safeGetSession();
+		await (await runHandle()).safeGetSession();
+
+		expect(getUser).toHaveBeenCalledTimes(2);
+	});
+
+	it('returns no session when the JWT is rejected', async () => {
+		getUser.mockReset().mockResolvedValue({ data: { user: null }, error: new Error('bad jwt') });
+		getSession.mockReset();
+		const locals = await runHandle();
+
+		await expect(locals.safeGetSession()).resolves.toEqual({ session: null, user: null });
+		expect(getSession).not.toHaveBeenCalled();
+	});
+});