diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 0000000..84f63e5
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,33 @@
+# Product
+
+## Register
+
+brand
+
+## Users
+
+Straif players and prospective players visiting from desktop or mobile. They want to understand the game quickly, watch the official trailer, see representative maps, and inspect global records across movement, target, and aim disciplines without learning internal API terminology.
+
+## Product Purpose
+
+Present Straif as a precise, movement-focused 3D platforming shooter while making every leaderboard entry accessible. Success means the homepage communicates the game through real footage and map imagery, and the leaderboard lets visitors reach, filter, restore, and paginate every supported ranking.
+
+## Brand Personality
+
+Cinematic, precise, restrained. The voice is factual and confident, with the game and its records carrying the experience rather than slogans or ornamental gaming language.
+
+## Anti-references
+
+Avoid neon esports styling, gaming HUD ornament, decorative gradients, glow effects, glass surfaces, heavy shadows, rounded dashboard cards, pill controls, generic SaaS landing-page sections, dense contact-sheet galleries, and unsupported marketing claims.
+
+## Design Principles
+
+1. Show the game first through the official trailer and real map imagery.
+2. Treat records as primary content, with quiet presentation and complete access.
+3. Use factual copy and remove any word that does not help visitors understand the game or data.
+4. Preserve a cinematic editorial rhythm without compromising semantic structure or navigation.
+5. Keep route state durable so links, refreshes, and browser history reproduce the same leaderboard.
+
+## Accessibility & Inclusion
+
+Use semantic landmarks, one route-level main region, meaningful heading order, real tables with captions and scoped headers, labeled navigation and controls, keyboard-accessible overflow, visible focus, explicit loading/empty/error states, and reduced-motion behavior. Maintain readable contrast and preserve image-then-caption order on narrow screens.
diff --git a/README.md b/README.md
index 42af4ce..9f6f275 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,18 @@ It is heavily inspired by source engine games such as Counter Strike: Source, le
 - [Steam Deployment](#steam-deployment)
 
 ## Website
-The straif leaderboard can be viewed at [straif.pumped.software](https://straif.pumped.software/).
+
+The Straif website includes a trailer-led game overview and complete Movement,
+Target, Aim, and Overall leaderboards at
+[straif.pumped.software](https://straif.pumped.software/).
+
+Run it locally:
+
+```bash
+cd website
+pnpm install
+pnpm dev
+```
 
 ## Web Api
 The straif [web api](https://straifapi.pumped.software) is public and [documentation](https://straifapi.pumped.software/docs) can be viewed as well.
diff --git a/server/src/leaderboard_pagination.test.ts b/server/src/leaderboard_pagination.test.ts
new file mode 100644
index 0000000..62c272c
--- /dev/null
+++ b/server/src/leaderboard_pagination.test.ts
@@ -0,0 +1,76 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+  LeaderboardPaginationQuery,
+  get_leaderboard_offset,
+  paginate_leaderboard,
+} from './leaderboard_pagination';
+
+void test('leaderboard pagination preserves the compatibility defaults', () => {
+  assert.deepEqual(LeaderboardPaginationQuery.parse({}), {
+    page: 0,
+    limit: 10,
+  });
+});
+
+void test('leaderboard pagination coerces valid query strings', () => {
+  assert.deepEqual(
+    LeaderboardPaginationQuery.parse({ page: '2', limit: '25' }),
+    { page: 2, limit: 25 }
+  );
+});
+
+void test('leaderboard pagination rejects invalid and excessive values', () => {
+  assert.equal(
+    LeaderboardPaginationQuery.safeParse({ page: '-1', limit: '25' }).success,
+    false
+  );
+  assert.equal(
+    LeaderboardPaginationQuery.safeParse({ page: '0', limit: '0' }).success,
+    false
+  );
+  assert.equal(
+    LeaderboardPaginationQuery.safeParse({ page: '0', limit: '101' }).success,
+    false
+  );
+});
+
+void test('get_leaderboard_offset uses zero-based pages', () => {
+  assert.equal(get_leaderboard_offset({ page: 3, limit: 25 }), 75);
+});
+
+void test('leaderboard pagination accepts the website page size', () => {
+  const parsed = LeaderboardPaginationQuery.parse({
+    page: '1',
+    limit: '25',
+  });
+
+  assert.equal(parsed.limit, 25);
+  assert.equal(get_leaderboard_offset(parsed), 25);
+});
+
+void test('paginate_leaderboard preserves order and reports the unsliced total', () => {
+  const result = paginate_leaderboard(
+    ['first', 'second', 'third', 'fourth', 'fifth'],
+    { page: 1, limit: 2 }
+  );
+
+  assert.deepEqual(result, {
+    rows: ['third', 'fourth'],
+    total: 5,
+  });
+});
+
+void test('paginate_leaderboard can expose every overall entry across pages', () => {
+  const entries = Array.from({ length: 53 }, (_, index) => ({
+    rank: index + 1,
+  }));
+
+  const first = paginate_leaderboard(entries, { page: 0, limit: 25 });
+  const last = paginate_leaderboard(entries, { page: 2, limit: 25 });
+
+  assert.equal(first.rows.length, 25);
+  assert.equal(last.rows.length, 3);
+  assert.equal(last.rows[0].rank, 51);
+  assert.equal(last.total, 53);
+});
diff --git a/server/src/leaderboard_pagination.ts b/server/src/leaderboard_pagination.ts
new file mode 100644
index 0000000..c32c6d7
--- /dev/null
+++ b/server/src/leaderboard_pagination.ts
@@ -0,0 +1,63 @@
+import type { DescribeRouteOptions } from 'hono-openapi';
+import { z } from 'zod';
+
+type OpenApiParameter = Exclude<
+  NonNullable<DescribeRouteOptions['parameters']>[number],
+  { $ref: string }
+>;
+
+export const LEADERBOARD_DEFAULT_LIMIT = 10;
+export const LEADERBOARD_MAX_LIMIT = 100;
+
+export const LeaderboardPaginationQuery = z.object({
+  page: z.coerce.number().int().min(0).default(0),
+  limit: z.coerce
+    .number()
+    .int()
+    .min(1)
+    .max(LEADERBOARD_MAX_LIMIT)
+    .default(LEADERBOARD_DEFAULT_LIMIT),
+});
+
+export type LeaderboardPagination = z.infer<typeof LeaderboardPaginationQuery>;
+
+export const LeaderboardPaginationParameters = [
+  {
+    name: 'page',
+    in: 'query',
+    required: false,
+    schema: {
+      type: 'integer',
+      minimum: 0,
+      default: 0,
+    },
+    description: 'Zero-based leaderboard page number.',
+  },
+  {
+    name: 'limit',
+    in: 'query',
+    required: false,
+    schema: {
+      type: 'integer',
+      minimum: 1,
+      maximum: LEADERBOARD_MAX_LIMIT,
+      default: LEADERBOARD_DEFAULT_LIMIT,
+    },
+    description: 'Rows per page.',
+  },
+] satisfies OpenApiParameter[];
+
+export function get_leaderboard_offset({ page, limit }: LeaderboardPagination) {
+  return page * limit;
+}
+
+export function paginate_leaderboard<T>(
+  entries: readonly T[],
+  pagination: LeaderboardPagination
+) {
+  const offset = get_leaderboard_offset(pagination);
+  return {
+    rows: entries.slice(offset, offset + pagination.limit),
+    total: entries.length,
+  };
+}
diff --git a/server/src/routes/aim_leaderboard.ts b/server/src/routes/aim_leaderboard.ts
index 59524e1..a1b338c 100644
--- a/server/src/routes/aim_leaderboard.ts
+++ b/server/src/routes/aim_leaderboard.ts
@@ -15,6 +15,11 @@ import {
   parseAimScenario,
   type AimScenario,
 } from '../aim_leaderboard';
+import {
+  get_leaderboard_offset,
+  LeaderboardPaginationParameters,
+  LeaderboardPaginationQuery,
+} from '../leaderboard_pagination';
 
 const app = new Hono<{ Variables: Variables }>();
 
@@ -41,10 +46,6 @@ const AimScoreInput = z.object({
   username: z.string().trim().min(1).max(64),
 });
 
-const PaginationQuery = z.object({
-  page: z.coerce.number().int().min(0).default(0),
-});
-
 const ScenarioPathParameter = {
   name: 'scenario',
   in: 'path',
@@ -56,18 +57,6 @@ const ScenarioPathParameter = {
   description: 'The aim scenario to operate on.',
 } satisfies OpenApiParameter;
 
-const PageQueryParameter = {
-  name: 'page',
-  in: 'query',
-  required: false,
-  schema: {
-    type: 'integer',
-    minimum: 0,
-    default: 0,
-  },
-  description: 'Zero-based leaderboard page number.',
-} satisfies OpenApiParameter;
-
 const AimScoreRequestBody = {
   required: true,
   content: {
@@ -155,10 +144,13 @@ const AimOverallScore = z.object({
 const AimOverallLeaderboardResponse = z.object({
   data: z.object({
     scores: z.array(AimOverallScore),
+    total: z.number().int().min(0),
   }),
 });
 
 const CountAll = sql<number>`count(*)`.mapWith(Number);
+const DistinctPlayerCount =
+  sql<number>`count(distinct ${aim_scores.steam_id})`.mapWith(Number);
 const TotalScoreExpression = sql`sum(${aim_scores.score})`;
 const TotalScore = TotalScoreExpression.mapWith(Number).as('total_score');
 const ScenariosCompletedExpression = sql`count(*)`;
@@ -346,19 +338,18 @@ app.get(
     'Fetches a paginated leaderboard for a single aim scenario ordered by score descending, then accuracy descending, then average reaction time ascending.',
     AimScenarioLeaderboardResponse,
     {
-      parameters: [ScenarioPathParameter, PageQueryParameter],
+      parameters: [ScenarioPathParameter, ...LeaderboardPaginationParameters],
     }
   ),
   zValidator('param', ScenarioParamInput),
-  zValidator('query', PaginationQuery),
+  zValidator('query', LeaderboardPaginationQuery),
   async (c) => {
     const parsedScenario = getValidatedScenario(c.req.valid('param').scenario);
     if (!parsedScenario) {
       return c.json({ error: 'Invalid aim scenario.' }, 400);
     }
 
-    const { page } = c.req.valid('query');
-    const offset = page * 10;
+    const pagination = c.req.valid('query');
 
     try {
       const [scores, totalRows] = await Promise.all([
@@ -381,8 +372,8 @@ app.get(
             asc(aim_scores.avg_reaction_ms),
             asc(aim_scores.steam_id)
           )
-          .limit(10)
-          .offset(offset),
+          .limit(pagination.limit)
+          .offset(get_leaderboard_offset(pagination)),
         db
           .select({
             count: CountAll,
@@ -394,7 +385,10 @@ app.get(
       return c.json({
         data: {
           scores: scores.map((score, index) =>
-            formatAimScoreRow(score, offset + index + 1)
+            formatAimScoreRow(
+              score,
+              get_leaderboard_offset(pagination) + index + 1
+            )
           ),
           total: totalRows[0].count,
         },
@@ -410,33 +404,42 @@ app.get(
   '/overall',
   describe_leaderboard_route(
     'Fetches the overall aim leaderboard by aggregating each player’s best score from every completed scenario.',
-    AimOverallLeaderboardResponse
+    AimOverallLeaderboardResponse,
+    { parameters: LeaderboardPaginationParameters }
   ),
+  zValidator('query', LeaderboardPaginationQuery),
   async (c) => {
+    const pagination = c.req.valid('query');
+
     try {
-      const scores = await db
-        .select({
-          steam_id: aim_scores.steam_id,
-          username: DeterministicUsername,
-          total_score: TotalScore,
-          scenarios_completed: ScenariosCompleted,
-          accuracy: AccuracyAverage,
-          avg_reaction_ms: AvgReaction,
-        })
-        .from(aim_scores)
-        .groupBy(aim_scores.steam_id)
-        .orderBy(
-          desc(TotalScoreExpression),
-          desc(ScenariosCompletedExpression),
-          desc(AccuracyAverageExpression),
-          asc(AvgReactionExpression),
-          asc(aim_scores.steam_id)
-        )
-        .limit(10);
+      const [scores, totals] = await Promise.all([
+        db
+          .select({
+            steam_id: aim_scores.steam_id,
+            username: DeterministicUsername,
+            total_score: TotalScore,
+            scenarios_completed: ScenariosCompleted,
+            accuracy: AccuracyAverage,
+            avg_reaction_ms: AvgReaction,
+          })
+          .from(aim_scores)
+          .groupBy(aim_scores.steam_id)
+          .orderBy(
+            desc(TotalScoreExpression),
+            desc(ScenariosCompletedExpression),
+            desc(AccuracyAverageExpression),
+            asc(AvgReactionExpression),
+            asc(aim_scores.steam_id)
+          )
+          .limit(pagination.limit)
+          .offset(get_leaderboard_offset(pagination)),
+        db.select({ count: DistinctPlayerCount }).from(aim_scores),
+      ]);
 
       return c.json({
         data: {
           scores,
+          total: totals[0].count,
         },
       });
     } catch (e) {
diff --git a/server/src/routes/leaderboard.ts b/server/src/routes/leaderboard.ts
index 75fcfb4..e3ef0cf 100644
--- a/server/src/routes/leaderboard.ts
+++ b/server/src/routes/leaderboard.ts
@@ -15,6 +15,12 @@ import { ChannelType, TextChannel } from 'discord.js';
 import { type Variables } from '../index';
 import { hide_route, describe_leaderboard_route } from './common';
 import { get_maps_of_mode, type RunMode } from '../maps';
+import {
+  get_leaderboard_offset,
+  LeaderboardPaginationParameters,
+  LeaderboardPaginationQuery,
+  paginate_leaderboard,
+} from '../leaderboard_pagination';
 import {
   is_new_world_record,
   recent_world_records,
@@ -50,16 +56,22 @@ const PlayerPoints = z.object({
   points: z.number(),
 });
 
-const OverallLeaderboard = z.array(PlayerPoints);
+const OverallLeaderboardResponse = z.object({
+  data: z.array(PlayerPoints),
+  total: z.number().int().min(0),
+});
 
 app.get(
   '/mode/:mode_name/overall',
   describe_leaderboard_route(
     'Fetches the overall leaderboard for a specific mode.',
-    z.array(PlayerPoints)
+    OverallLeaderboardResponse,
+    { parameters: LeaderboardPaginationParameters }
   ),
+  zValidator('query', LeaderboardPaginationQuery),
   async (c) => {
     const mode = coerce_to_run_mode(c.req.param('mode_name'));
+    const pagination = c.req.valid('query');
     const maps = get_maps_of_mode(mode);
     const points_per_position = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
     const points_map = new Map<string, z.infer<typeof PlayerPoints>>();
@@ -92,12 +104,15 @@ app.get(
       });
     }
 
-    const leaderboard = Array.from(points_map.values())
-      .sort((a, b) => b.points - a.points)
-      .slice(0, 10);
+    const sorted_leaderboard = Array.from(points_map.values()).sort(
+      (a, b) => b.points - a.points || a.steam_id.localeCompare(b.steam_id)
+    );
+    const page = paginate_leaderboard(sorted_leaderboard, pagination);
 
-    const data: z.infer<typeof OverallLeaderboard> = leaderboard;
-    return c.json({ data: data });
+    return c.json({
+      data: page.rows,
+      total: page.total,
+    });
   }
 );
 
@@ -216,16 +231,15 @@ function format_date(date: Date) {
 app.get(
   '/mode/:mode_name/maps/:map_name/runs',
   describe_leaderboard_route(
-    'Retrieves a paginated leaderboard of runs for the specified map. Returns run details sorted by time in ascending order. Accepts a page query parameter to navigate through leaderboard pages.',
-    MapRunsResponse
+    'Retrieves a paginated leaderboard of runs for the specified map.',
+    MapRunsResponse,
+    { parameters: LeaderboardPaginationParameters }
   ),
+  zValidator('query', LeaderboardPaginationQuery),
   async (c) => {
     const map_name = c.req.param('map_name');
-    const page_string = c.req.query('page');
     const run_mode = coerce_to_run_mode(c.req.param('mode_name'));
-
-    let page = 0;
-    if (page_string) page = parseInt(page_string);
+    const pagination = c.req.valid('query');
 
     try {
       const runs_result = await db
@@ -238,21 +252,20 @@ app.get(
         .from(runs)
         .where(and(eq(runs.map_name, map_name), eq(runs.mode, run_mode)))
         .orderBy(asc(runs.time_ms))
-        .limit(10)
-        .offset(page * 10);
+        .limit(pagination.limit)
+        .offset(get_leaderboard_offset(pagination));
 
       const formatted_result = runs_result.map((run) => ({
         ...run,
         created_at: format_date(run.created_at),
       }));
 
-      const data: z.infer<typeof MapRunsResponse> = {
+      return c.json({
         data: {
           runs: formatted_result,
           total: await get_run_count(run_mode, map_name),
         },
-      };
-      return c.json(data);
+      });
     } catch (e) {
       console.log(e);
       return c.json({ error: 'Internal server error' }, 500);
diff --git a/website/index.html b/website/index.html
index 0ec9161..0f5dad6 100644
--- a/website/index.html
+++ b/website/index.html
@@ -1,9 +1,20 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/icon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta
+      name="description"
+      content="Straif is a fast-paced 3D platforming shooter built around movement and global leaderboards."
+    >
+    <meta name="theme-color" content="#050505">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap"
+    >
     <title>Straif</title>
   </head>
   <body>
diff --git a/website/package.json b/website/package.json
index 6549216..50ca173 100644
--- a/website/package.json
+++ b/website/package.json
@@ -10,14 +10,19 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
-    "vue": "^3.5.18"
+    "vue": "^3.5.18",
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^29.1.1",
     "vite": "^7.0.6",
-    "vite-plugin-vue-devtools": "^8.0.5"
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vitest": "^4.1.10"
   }
 }
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index 7ffa5ff..9f69e0b 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -11,16 +11,28 @@ importers:
       vue:
         specifier: ^3.5.18
         version: 3.5.18
+      vue-router:
+        specifier: ^4.6.4
+        version: 4.6.4(vue@3.5.18)
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^6.0.1
         version: 6.0.1(vite@7.1.0)(vue@3.5.18)
+      '@vue/test-utils':
+        specifier: ^2.4.11
+        version: 2.4.11(@vue/compiler-dom@3.5.18)(@vue/server-renderer@3.5.18(vue@3.5.18))(vue@3.5.18)
+      jsdom:
+        specifier: ^29.1.1
+        version: 29.1.1
       vite:
         specifier: ^7.0.6
         version: 7.1.0
       vite-plugin-vue-devtools:
         specifier: ^8.0.5
         version: 8.1.5(vite@7.1.0)(vue@3.5.18)
+      vitest:
+        specifier: ^4.1.10
+        version: 4.1.10(jsdom@29.1.1)(vite@7.1.0)
 
 packages:
 
@@ -28,6 +40,21 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@asamuzakjp/css-color@5.1.11':
+    resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    resolution: {integrity: sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/generational-cache@1.0.1':
+    resolution: {integrity: sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -168,6 +195,46 @@ packages:
     resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
     engines: {node: '>=6.9.0'}
 
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
+  '@csstools/color-helpers@6.1.0':
+    resolution: {integrity: sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==}
+    engines: {node: '>=20.19.0'}
+
+  '@csstools/css-calc@3.2.1':
+    resolution: {integrity: sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-color-parser@4.1.9':
+    resolution: {integrity: sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.6':
+    resolution: {integrity: sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
+
   '@esbuild/aix-ppc64@0.25.8':
     resolution: {integrity: sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA==}
     engines: {node: '>=18'}
@@ -324,6 +391,19 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@exodus/bytes@1.15.1':
+    resolution: {integrity: sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
   '@jridgewell/gen-mapping@0.3.12':
     resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
 
@@ -334,9 +414,19 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.4':
     resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@jridgewell/trace-mapping@0.3.29':
     resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
 
+  '@one-ini/wasm@0.1.1':
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -454,6 +544,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -464,6 +563,35 @@ packages:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
       vue: ^3.2.25
 
+  '@vitest/expect@4.1.10':
+    resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==}
+
+  '@vitest/mocker@4.1.10':
+    resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.1.10':
+    resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==}
+
+  '@vitest/runner@4.1.10':
+    resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==}
+
+  '@vitest/snapshot@4.1.10':
+    resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==}
+
+  '@vitest/spy@4.1.10':
+    resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==}
+
+  '@vitest/utils@4.1.10':
+    resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
+
   '@vue/babel-helper-vue-transform-on@1.4.0':
     resolution: {integrity: sha512-mCokbouEQ/ocRce/FpKCRItGo+013tHg7tixg3DUNS+6bmIchPt66012kBMm476vyEIJPafrvOf4E5OYj3shSw==}
 
@@ -492,6 +620,9 @@ packages:
   '@vue/compiler-ssr@3.5.18':
     resolution: {integrity: sha512-xM16Ak7rSWHkM3m22NlmcdIM+K4BMyFARAfV9hYFl+SFuRzrZ3uGMNW05kA5pmeMa0X9X963Kgou7ufdbpOP9g==}
 
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
   '@vue/devtools-core@8.1.5':
     resolution: {integrity: sha512-5e5jQOEssCdZA1wlFEUkIDtb+cAOWuLNWJ52fm4PBWbF7e3oTnM2fneaL42E5lJoolAaUQ678tv/XEb3h4e86Q==}
     peerDependencies:
@@ -520,16 +651,59 @@ packages:
   '@vue/shared@3.5.18':
     resolution: {integrity: sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==}
 
+  '@vue/test-utils@2.4.11':
+    resolution: {integrity: sha512-GDqaqZsA6m2E5vNzej0aYiIb6BX8xV9pNSbbbXKOfEYwg7ZNblVX8suyqmUBThq8VIrgAJNxn+z72hVtUeiWHA==}
+    peerDependencies:
+      '@vue/compiler-dom': 3.x
+      '@vue/server-renderer': 3.x
+      vue: 3.x
+    peerDependenciesMeta:
+      '@vue/server-renderer':
+        optional: true
+
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
   ansis@4.3.1:
     resolution: {integrity: sha512-BJ8/l4R5LRE7hW9WdSuGYrLSHi2ynxeFpDFbH0K/CgNeY/tyhk+vO6TYxXC5r5CpUhNVX310xzPsN/H9lCdfOA==}
     engines: {node: '>=14'}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   birpc@2.9.0:
     resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
 
   birpc@4.0.0:
     resolution: {integrity: sha512-LShSxJP0KTmd101b6DRyGBj57LZxSDYWKitQNW/mi8GRMvZb078Uf9+pveax1DrVL89vm7mWe+TovdI/UDOuPw==}
 
+  brace-expansion@2.1.2:
+    resolution: {integrity: sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==}
+
   browserslist@4.25.1:
     resolution: {integrity: sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -542,12 +716,42 @@ packages:
   caniuse-lite@1.0.30001731:
     resolution: {integrity: sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   debug@4.4.1:
     resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
     engines: {node: '>=6.0'}
@@ -557,6 +761,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
   default-browser-id@5.0.0:
     resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
     engines: {node: '>=18'}
@@ -569,16 +776,37 @@ packages:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
 
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  editorconfig@1.0.7:
+    resolution: {integrity: sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   electron-to-chromium@1.5.198:
     resolution: {integrity: sha512-G5COfnp3w+ydVu80yprgWSfmfQaYRh9DOxfhAxstLyetKaLyl55QrNjx8C38Pc/C+RaDmb1M0Lk8wPEMQ+bGgQ==}
 
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
   error-stack-parser-es@1.0.5:
     resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
+  es-module-lexer@2.3.1:
+    resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==}
+
   esbuild@0.25.8:
     resolution: {integrity: sha512-vVC0USHGtMi8+R4Kz8rt6JhEWLxsv9Rnu/lGYbPR8u47B+DCBksq9JarW0zOO7bs37hyOK1l2/oqtbciutL5+Q==}
     engines: {node: '>=18'}
@@ -591,6 +819,13 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
   fdir@6.4.6:
     resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
     peerDependencies:
@@ -599,6 +834,19 @@ packages:
       picomatch:
         optional: true
 
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -608,14 +856,30 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  glob@10.5.0:
+    resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+    hasBin: true
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
   is-docker@3.0.0:
     resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
   is-in-ssh@1.0.0:
     resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
     engines: {node: '>=20'}
@@ -625,13 +889,39 @@ packages:
     engines: {node: '>=14.16'}
     hasBin: true
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-wsl@3.1.0:
     resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
     engines: {node: '>=16'}
 
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  js-cookie@3.0.8:
+    resolution: {integrity: sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  jsdom@29.1.1:
+    resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -645,12 +935,33 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@11.5.2:
+    resolution: {integrity: sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==}
+    engines: {node: 20 || >=22}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
+  minimatch@9.0.9:
+    resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -666,6 +977,11 @@ packages:
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
+  nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   obug@2.1.3:
     resolution: {integrity: sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==}
     engines: {node: '>=12.20.0'}
@@ -677,6 +993,20 @@ packages:
     resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
     engines: {node: '>=20'}
 
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  parse5@8.0.1:
+    resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -702,6 +1032,17 @@ packages:
     resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
     engines: {node: '>=20'}
 
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
   rollup@4.46.2:
     resolution: {integrity: sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -711,10 +1052,34 @@ packages:
     resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
     engines: {node: '>=18'}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
   sirv@3.0.2:
     resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
     engines: {node: '>=18'}
@@ -723,14 +1088,73 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@4.2.0:
+    resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@1.2.4:
+    resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.14:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@7.4.9:
+    resolution: {integrity: sha512-DxKfPBI52p2msTEu7MPhdpdDTBhhVQg1a/8PjQckeyAvO13eMYElX545grIp6nnTGIMZlRvFZPvFhvI/WIz2Vg==}
+
+  tldts@7.4.9:
+    resolution: {integrity: sha512-3kZ8wQQ/k5DrChD4X4FVvr2D7E5uoRgAqkPyLpSCGUvqOvqu+JEdr3mwMUaVWb+vMHZaKhF5fp2PBigKsui7hA==}
+    hasBin: true
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
+  tough-cookie@6.0.2:
+    resolution: {integrity: sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==}
+    engines: {node: '>=16'}
+
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
+  undici@7.28.0:
+    resolution: {integrity: sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==}
+    engines: {node: '>=20.18.1'}
+
   unplugin-utils@0.3.2:
     resolution: {integrity: sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==}
     engines: {node: '>=20.19.0'}
@@ -812,6 +1236,55 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.1.10:
+    resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.10
+      '@vitest/browser-preview': 4.1.10
+      '@vitest/browser-webdriverio': 4.1.10
+      '@vitest/coverage-istanbul': 4.1.10
+      '@vitest/coverage-v8': 4.1.10
+      '@vitest/ui': 4.1.10
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  vue-component-type-helpers@3.3.7:
+    resolution: {integrity: sha512-Skkhw9agYSgsWqv7bxSOGJZa9SaiJbZVGdXuFWnrzKaQYHnw9qbjD630rw6RyMqDbp54nfLCLw5SZA55if7JLg==}
+
+  vue-router@4.6.4:
+    resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
+    peerDependencies:
+      vue: ^3.5.0
+
   vue@3.5.18:
     resolution: {integrity: sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==}
     peerDependencies:
@@ -820,10 +1293,51 @@ packages:
       typescript:
         optional: true
 
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
   wsl-utils@0.3.1:
     resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
     engines: {node: '>=20'}
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -834,6 +1348,26 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.12
       '@jridgewell/trace-mapping': 0.3.29
 
+  '@asamuzakjp/css-color@5.1.11':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+
+  '@asamuzakjp/generational-cache@1.0.1': {}
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -1025,6 +1559,34 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+
+  '@csstools/color-helpers@6.1.0': {}
+
+  '@csstools/css-calc@3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-color-parser@4.1.9(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.1.0
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.6(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+
+  '@csstools/css-tokenizer@4.0.0': {}
+
   '@esbuild/aix-ppc64@0.25.8':
     optional: true
 
@@ -1103,6 +1665,17 @@ snapshots:
   '@esbuild/win32-x64@0.25.8':
     optional: true
 
+  '@exodus/bytes@1.15.1': {}
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.2.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
   '@jridgewell/gen-mapping@0.3.12':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.4
@@ -1112,11 +1685,18 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.4': {}
 
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
   '@jridgewell/trace-mapping@0.3.29':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.4
 
+  '@one-ini/wasm@0.1.1': {}
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
   '@polka/url@1.0.0-next.29': {}
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
@@ -1181,6 +1761,15 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.46.2':
     optional: true
 
+  '@standard-schema/spec@1.1.0': {}
+
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree@1.0.8': {}
 
   '@vitejs/plugin-vue@6.0.1(vite@7.1.0)(vue@3.5.18)':
@@ -1189,6 +1778,47 @@ snapshots:
       vite: 7.1.0
       vue: 3.5.18
 
+  '@vitest/expect@4.1.10':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
+
+  '@vitest/mocker@4.1.10(vite@7.1.0)':
+    dependencies:
+      '@vitest/spy': 4.1.10
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.1.0
+
+  '@vitest/pretty-format@4.1.10':
+    dependencies:
+      tinyrainbow: 3.1.0
+
+  '@vitest/runner@4.1.10':
+    dependencies:
+      '@vitest/utils': 4.1.10
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.10':
+    dependencies:
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/utils': 4.1.10
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.10': {}
+
+  '@vitest/utils@4.1.10':
+    dependencies:
+      '@vitest/pretty-format': 4.1.10
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
   '@vue/babel-helper-vue-transform-on@1.4.0': {}
 
   '@vue/babel-plugin-jsx@1.4.0(@babel/core@7.28.0)':
@@ -1248,6 +1878,8 @@ snapshots:
       '@vue/compiler-dom': 3.5.18
       '@vue/shared': 3.5.18
 
+  '@vue/devtools-api@6.6.4': {}
+
   '@vue/devtools-core@8.1.5(vue@3.5.18)':
     dependencies:
       '@vue/devtools-kit': 8.1.5
@@ -1287,12 +1919,45 @@ snapshots:
 
   '@vue/shared@3.5.18': {}
 
+  '@vue/test-utils@2.4.11(@vue/compiler-dom@3.5.18)(@vue/server-renderer@3.5.18(vue@3.5.18))(vue@3.5.18)':
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      js-beautify: 1.15.4
+      vue: 3.5.18
+      vue-component-type-helpers: 3.3.7
+    optionalDependencies:
+      '@vue/server-renderer': 3.5.18(vue@3.5.18)
+
+  abbrev@2.0.0: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.3: {}
+
   ansis@4.3.1: {}
 
+  assertion-error@2.0.1: {}
+
+  balanced-match@1.0.2: {}
+
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   birpc@2.9.0: {}
 
   birpc@4.0.0: {}
 
+  brace-expansion@2.1.2:
+    dependencies:
+      balanced-match: 1.0.2
+
   browserslist@4.25.1:
     dependencies:
       caniuse-lite: 1.0.30001731
@@ -1306,14 +1971,49 @@ snapshots:
 
   caniuse-lite@1.0.30001731: {}
 
+  chai@6.2.2: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  commander@10.0.1: {}
+
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
   convert-source-map@2.0.0: {}
 
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
   csstype@3.1.3: {}
 
+  data-urls@7.0.0:
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   debug@4.4.1:
     dependencies:
       ms: 2.1.3
 
+  decimal.js@10.6.0: {}
+
   default-browser-id@5.0.0: {}
 
   default-browser@5.5.0:
@@ -1323,12 +2023,29 @@ snapshots:
 
   define-lazy-prop@3.0.0: {}
 
+  eastasianwidth@0.2.0: {}
+
+  editorconfig@1.0.7:
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.9
+      semver: 7.8.5
+
   electron-to-chromium@1.5.198: {}
 
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
   entities@4.5.0: {}
 
+  entities@8.0.0: {}
+
   error-stack-parser-es@1.0.5: {}
 
+  es-module-lexer@2.3.1: {}
+
   esbuild@0.25.8:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.8
@@ -1362,37 +2079,121 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  expect-type@1.4.0: {}
+
   fdir@6.4.6(picomatch@4.0.3):
     optionalDependencies:
       picomatch: 4.0.3
 
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
   fsevents@2.3.3:
     optional: true
 
   gensync@1.0.0-beta.2: {}
 
+  glob@10.5.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.9
+      minipass: 7.1.3
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
   hookable@5.5.3: {}
 
+  html-encoding-sniffer@6.0.0:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  ini@1.3.8: {}
+
   is-docker@3.0.0: {}
 
+  is-fullwidth-code-point@3.0.0: {}
+
   is-in-ssh@1.0.0: {}
 
   is-inside-container@1.0.0:
     dependencies:
       is-docker: 3.0.0
 
+  is-potential-custom-element-name@1.0.1: {}
+
   is-wsl@3.1.0:
     dependencies:
       is-inside-container: 1.0.0
 
+  isexe@2.0.0: {}
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  js-beautify@1.15.4:
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.7
+      glob: 10.5.0
+      js-cookie: 3.0.8
+      nopt: 7.2.1
+
+  js-cookie@3.0.8: {}
+
   js-tokens@4.0.0: {}
 
+  jsdom@29.1.1:
+    dependencies:
+      '@asamuzakjp/css-color': 5.1.11
+      '@asamuzakjp/dom-selector': 7.1.1
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.6(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.1
+      css-tree: 3.2.1
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.5.2
+      parse5: 8.0.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.2
+      undici: 7.28.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   jsesc@3.1.0: {}
 
   json5@2.2.3: {}
 
   kolorist@1.8.0: {}
 
+  lru-cache@10.4.3: {}
+
+  lru-cache@11.5.2: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -1401,6 +2202,18 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.4
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  mdn-data@2.27.1: {}
+
+  minimatch@9.0.9:
+    dependencies:
+      brace-expansion: 2.1.2
+
+  minipass@7.1.3: {}
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -1409,6 +2222,10 @@ snapshots:
 
   node-releases@2.0.19: {}
 
+  nopt@7.2.1:
+    dependencies:
+      abbrev: 2.0.0
+
   obug@2.1.3: {}
 
   ohash@2.0.11: {}
@@ -1422,6 +2239,19 @@ snapshots:
       powershell-utils: 0.1.0
       wsl-utils: 0.3.1
 
+  package-json-from-dist@1.0.1: {}
+
+  parse5@8.0.1:
+    dependencies:
+      entities: 8.0.0
+
+  path-key@3.1.1: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.3
+
   pathe@2.0.3: {}
 
   perfect-debounce@2.1.0: {}
@@ -1440,6 +2270,12 @@ snapshots:
 
   powershell-utils@0.1.0: {}
 
+  proto-list@1.2.4: {}
+
+  punycode@2.3.1: {}
+
+  require-from-string@2.0.2: {}
+
   rollup@4.46.2:
     dependencies:
       '@types/estree': 1.0.8
@@ -1468,8 +2304,24 @@ snapshots:
 
   run-applescript@7.0.0: {}
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   semver@6.3.1: {}
 
+  semver@7.8.5: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  siginfo@2.0.0: {}
+
+  signal-exit@4.1.0: {}
+
   sirv@3.0.2:
     dependencies:
       '@polka/url': 1.0.0-next.29
@@ -1478,13 +2330,66 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  stackback@0.0.2: {}
+
+  std-env@4.2.0: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.2.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  symbol-tree@3.2.4: {}
+
+  tinybench@2.9.0: {}
+
+  tinyexec@1.2.4: {}
+
   tinyglobby@0.2.14:
     dependencies:
       fdir: 6.4.6(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
+  tinyrainbow@3.1.0: {}
+
+  tldts-core@7.4.9: {}
+
+  tldts@7.4.9:
+    dependencies:
+      tldts-core: 7.4.9
+
   totalist@3.0.1: {}
 
+  tough-cookie@6.0.2:
+    dependencies:
+      tldts: 7.4.9
+
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
+  undici@7.28.0: {}
+
   unplugin-utils@0.3.2:
     dependencies:
       pathe: 2.0.3
@@ -1559,6 +2464,40 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  vitest@4.1.10(jsdom@29.1.1)(vite@7.1.0):
+    dependencies:
+      '@vitest/expect': 4.1.10
+      '@vitest/mocker': 4.1.10(vite@7.1.0)
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/runner': 4.1.10
+      '@vitest/snapshot': 4.1.10
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      es-module-lexer: 2.3.1
+      expect-type: 1.4.0
+      magic-string: 0.30.21
+      obug: 2.1.3
+      pathe: 2.0.3
+      picomatch: 4.0.5
+      std-env: 4.2.0
+      tinybench: 2.9.0
+      tinyexec: 1.2.4
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.0
+      vite: 7.1.0
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      jsdom: 29.1.1
+    transitivePeerDependencies:
+      - msw
+
+  vue-component-type-helpers@3.3.7: {}
+
+  vue-router@4.6.4(vue@3.5.18):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.18
+
   vue@3.5.18:
     dependencies:
       '@vue/compiler-dom': 3.5.18
@@ -1567,9 +2506,50 @@ snapshots:
       '@vue/server-renderer': 3.5.18(vue@3.5.18)
       '@vue/shared': 3.5.18
 
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  webidl-conversions@8.0.1: {}
+
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.2.0
+
   wsl-utils@0.3.1:
     dependencies:
       is-wsl: 3.1.0
       powershell-utils: 0.1.0
 
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
   yallist@3.1.1: {}
diff --git a/website/src/App.vue b/website/src/App.vue
index 774faf0..b985cb3 100644
--- a/website/src/App.vue
+++ b/website/src/App.vue
@@ -1,232 +1,11 @@
 <script setup>
-import { onMounted, ref } from 'vue';
-
-const BASE_URL = 'https://straifapi.pumped.software';
-const PAGE_SIZE = 10;
-const runs = ref([]);
-const total_count = ref(0);
-const current_page = ref(1);
-const current_map = ref('map_rooftops');
-const current_mode = ref('target');
-
-const MAP_LABELS = {
-  Tutorial: 'Tutorial',
-  map_rooftops: 'Rooftops',
-  map_streets: 'Streets',
-  map_flow: 'Flow',
-  map_line: 'Line',
-  map_rookie: 'Rookie',
-  map_dawn: 'Dawn',
-  map_structure: 'Structure',
-  map_graybox: 'Graybox',
-  map_graybox2: 'Graybox 2',
-  map_subway: 'Subway',
-  map_rooftops2: 'Rooftops 2',
-  map_slope: 'Slope',
-  map_taurus: 'Taurus',
-};
-
-const MODE_MAP_REF = {
-  target: [
-    'Tutorial',
-    'map_rooftops',
-    'map_streets',
-    'map_flow',
-    'map_structure',
-    'map_graybox',
-    'map_graybox2',
-    'map_subway',
-    'map_rooftops2',
-  ],
-  bhop: [
-    'Tutorial',
-    'map_rooftops',
-    'map_streets',
-    'map_flow',
-    'map_line',
-    'map_rookie',
-    'map_dawn',
-    'map_structure',
-    'map_graybox',
-    'map_graybox2',
-    'map_subway',
-    'map_rooftops2',
-    'map_slope',
-    'map_taurus',
-  ],
-};
-
-async function load_runs() {
-  let res = await fetch(
-    `${BASE_URL}/leaderboard/mode/${current_mode.value}/maps/${current_map.value}/runs?page=${current_page.value - 1}`
-  );
-  let json = await res.json();
-  runs.value = json.data.runs;
-  total_count.value = Math.ceil(json.data.total / PAGE_SIZE);
-  modify_page(0);
-}
-
-function modify_page(amount) {
-  const old = current_page.value;
-  current_page.value += amount;
-  current_page.value = Math.min(
-    Math.max(current_page.value, 1),
-    Math.max(total_count.value, 1)
-  );
-
-  if (current_page.value != old) {
-    load_runs();
-  }
-}
-
-onMounted(load_runs);
+import SiteFooter from '@/components/layout/SiteFooter.vue';
+import SiteHeader from '@/components/layout/SiteHeader.vue';
 </script>
 
 <template>
-  <div class="hero flex-col">
-    <h1>Straif Leaderboard</h1>
-
-    <div class="flex">
-      <label for="mode"> Mode: </label>
-      <select id="mode" v-model="current_mode" @change="load_runs()">
-        <option value="target">Target</option>
-        <option value="bhop">Bhop</option>
-      </select>
-      <label for="map"> Map: </label>
-      <select id="map" v-model="current_map" @change="load_runs()">
-        <option
-          v-for="map in MODE_MAP_REF[current_mode]"
-          :key="map"
-          :value="map"
-        >
-          {{ MAP_LABELS[map] }}
-        </option>
-      </select>
-    </div>
-
-    <table>
-      <thead>
-        <tr>
-          <th>Position</th>
-          <th>Player Name</th>
-          <th>Time (s)</th>
-          <th>Date Submitted</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr v-if="runs.length === 0">
-          <td colspan="4" style="text-align: center">Unavailable</td>
-        </tr>
-        <tr v-else v-for="(run, index) in runs" :key="run.id || index">
-          <th>{{ (current_page - 1) * PAGE_SIZE + index + 1 }}</th>
-          <th>{{ run.username }}</th>
-          <th>{{ run.time_ms / 1000 }}</th>
-          <th>{{ run.created_at.slice(0, '2025-08-05'.length) }}</th>
-        </tr>
-      </tbody>
-    </table>
-
-    <div class="flex">
-      <button @click="modify_page(-1)">&lt</button>
-      <p>Page {{ current_page }} of {{ total_count }}</p>
-      <button @click="modify_page(1)">&gt</button>
-    </div>
-  </div>
+  <a class="skip-link" href="#main-content">Skip to content</a>
+  <SiteHeader />
+  <RouterView />
+  <SiteFooter />
 </template>
-
-<style>
-body {
-  margin: 0;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: lightgray;
-}
-
-.hero {
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 2rem;
-}
-
-h1 {
-  font-size: 2rem;
-  font-weight: bold;
-  margin-bottom: 1.5rem;
-  color: black;
-}
-
-.flex {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  align-items: center;
-}
-
-select {
-  padding: 0.4rem 0.6rem;
-  border-radius: 6px;
-  border: 1px solid #ccc;
-  background-color: white;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: border-color 0.2s;
-}
-
-select:hover {
-  border-color: black;
-}
-
-table {
-  width: 100%;
-  max-width: 800px;
-  border-collapse: collapse;
-  margin-top: 1rem;
-  background-color: white;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-thead {
-  background-color: gray;
-  color: white;
-}
-
-th,
-td {
-  padding: 0.75rem 1rem;
-  text-align: left;
-}
-
-tbody tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-
-tbody tr:hover {
-  background-color: #c3c8ce;
-}
-
-button {
-  padding: 0.4rem 0.8rem;
-  border: none;
-  border-radius: 6px;
-  background-color: gray;
-  color: white;
-  font-weight: bold;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-button:hover {
-  background-color: darkgray;
-}
-
-p {
-  margin: 0 1rem;
-  font-weight: bold;
-}
-</style>
diff --git a/website/src/assets/maps/map_rooftops.png b/website/src/assets/maps/map_rooftops.png
new file mode 100644
index 0000000..617eaed
Binary files /dev/null and b/website/src/assets/maps/map_rooftops.png differ
diff --git a/website/src/assets/maps/map_streets.png b/website/src/assets/maps/map_streets.png
new file mode 100644
index 0000000..3d616e2
Binary files /dev/null and b/website/src/assets/maps/map_streets.png differ
diff --git a/website/src/assets/maps/map_taurus.png b/website/src/assets/maps/map_taurus.png
new file mode 100644
index 0000000..4cada10
Binary files /dev/null and b/website/src/assets/maps/map_taurus.png differ
diff --git a/website/src/components/home/GameIntro.vue b/website/src/components/home/GameIntro.vue
new file mode 100644
index 0000000..4b43f83
--- /dev/null
+++ b/website/src/components/home/GameIntro.vue
@@ -0,0 +1,9 @@
+<template>
+  <section class="game-intro" aria-labelledby="game-intro-title">
+    <h2 id="game-intro-title">Built around movement.</h2>
+    <p>
+      Straif is a fast-paced 3D platforming shooter with hand-crafted maps,
+      precise movement, and global leaderboards for movement, target, and aim.
+    </p>
+  </section>
+</template>
diff --git a/website/src/components/home/MapGallery.vue b/website/src/components/home/MapGallery.vue
new file mode 100644
index 0000000..49f4550
--- /dev/null
+++ b/website/src/components/home/MapGallery.vue
@@ -0,0 +1,39 @@
+<script setup>
+import rooftopsImage from '@/assets/maps/map_rooftops.png';
+import streetsImage from '@/assets/maps/map_streets.png';
+import taurusImage from '@/assets/maps/map_taurus.png';
+
+const maps = [
+  { name: 'Streets', modes: 'Movement and target', image: streetsImage },
+  { name: 'Taurus', modes: 'Movement', image: taurusImage },
+  { name: 'Rooftops', modes: 'Movement and target', image: rooftopsImage },
+];
+</script>
+
+<template>
+  <section class="map-gallery" aria-labelledby="maps-title">
+    <header class="section-heading">
+      <div>
+        <p class="eyebrow">Selected maps</p>
+        <h2 id="maps-title">Environments</h2>
+      </div>
+      <p class="eyebrow">14 maps</p>
+    </header>
+    <div class="map-list">
+      <figure v-for="map in maps" :key="map.name" class="map-feature">
+        <img
+          :src="map.image"
+          :alt="`${map.name} map in Straif`"
+          width="1920"
+          height="1080"
+          loading="lazy"
+        />
+        <figcaption>
+          <p class="eyebrow">{{ map.modes }}</p>
+          <h3>{{ map.name }}</h3>
+          <p>{{ map.modes }} leaderboards are available.</p>
+        </figcaption>
+      </figure>
+    </div>
+  </section>
+</template>
diff --git a/website/src/components/home/TrailerHero.test.js b/website/src/components/home/TrailerHero.test.js
new file mode 100644
index 0000000..69d89d2
--- /dev/null
+++ b/website/src/components/home/TrailerHero.test.js
@@ -0,0 +1,18 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import TrailerHero from './TrailerHero.vue';
+
+describe('TrailerHero', () => {
+  it('loads the privacy-enhanced embed only after activation', async () => {
+    const wrapper = mount(TrailerHero);
+    expect(wrapper.find('iframe').exists()).toBe(false);
+    await wrapper
+      .get('button[aria-label="Play the Straif trailer"]')
+      .trigger('click');
+    const iframe = wrapper.get('iframe');
+    expect(iframe.attributes('src')).toContain(
+      'https://www.youtube-nocookie.com/embed/CfzotZZ3Sd0'
+    );
+    expect(iframe.attributes('title')).toBe('Straif official trailer');
+  });
+});
diff --git a/website/src/components/home/TrailerHero.vue b/website/src/components/home/TrailerHero.vue
new file mode 100644
index 0000000..d7a8238
--- /dev/null
+++ b/website/src/components/home/TrailerHero.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+
+const isPlaying = ref(false);
+const trailerSrc =
+  'https://www.youtube-nocookie.com/embed/CfzotZZ3Sd0?autoplay=1&rel=0';
+</script>
+
+<template>
+  <section class="trailer-hero" aria-labelledby="trailer-title">
+    <div class="trailer-hero__copy">
+      <p>Official trailer · YouTube</p>
+      <h1 id="trailer-title">Straif</h1>
+      <p>Watch film</p>
+    </div>
+
+    <div class="trailer-hero__media">
+      <template v-if="isPlaying">
+        <iframe
+          :src="trailerSrc"
+          title="Straif official trailer"
+          allow="
+            accelerometer;
+            autoplay;
+            clipboard-write;
+            encrypted-media;
+            gyroscope;
+            picture-in-picture;
+            web-share;
+          "
+          allowfullscreen
+        />
+      </template>
+      <template v-else>
+        <img
+          src="https://i.ytimg.com/vi/CfzotZZ3Sd0/maxresdefault.jpg"
+          alt=""
+          width="1280"
+          height="720"
+          fetchpriority="high"
+        />
+        <button
+          type="button"
+          aria-label="Play the Straif trailer"
+          @click="isPlaying = true"
+        >
+          Play trailer
+        </button>
+      </template>
+    </div>
+  </section>
+</template>
diff --git a/website/src/components/layout/SiteFooter.vue b/website/src/components/layout/SiteFooter.vue
new file mode 100644
index 0000000..e7697db
--- /dev/null
+++ b/website/src/components/layout/SiteFooter.vue
@@ -0,0 +1,10 @@
+<template>
+  <footer class="site-footer">
+    <p>© {{ new Date().getFullYear() }} Straif</p>
+    <nav aria-label="Footer navigation">
+      <RouterLink to="/">Home</RouterLink>
+      <RouterLink to="/leaderboard">Leaderboard</RouterLink>
+      <a href="https://straifapi.pumped.software/docs">API</a>
+    </nav>
+  </footer>
+</template>
diff --git a/website/src/components/layout/SiteHeader.vue b/website/src/components/layout/SiteHeader.vue
new file mode 100644
index 0000000..0541d46
--- /dev/null
+++ b/website/src/components/layout/SiteHeader.vue
@@ -0,0 +1,11 @@
+<template>
+  <header class="site-header">
+    <RouterLink class="wordmark" to="/" aria-label="Straif home"
+      >Straif</RouterLink
+    >
+    <nav aria-label="Primary navigation">
+      <RouterLink to="/">Home</RouterLink>
+      <RouterLink to="/leaderboard">Leaderboard</RouterLink>
+    </nav>
+  </header>
+</template>
diff --git a/website/src/components/leaderboard/LeaderboardCategoryTabs.vue b/website/src/components/leaderboard/LeaderboardCategoryTabs.vue
new file mode 100644
index 0000000..47fa07e
--- /dev/null
+++ b/website/src/components/leaderboard/LeaderboardCategoryTabs.vue
@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  categories: { type: Array, required: true },
+  modelValue: { type: String, required: true },
+});
+const emit = defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <nav class="leaderboard-tabs" aria-label="Leaderboard categories">
+    <button
+      v-for="category in categories"
+      :key="category.value"
+      type="button"
+      :data-category="category.value"
+      :aria-current="category.value === modelValue ? 'page' : undefined"
+      @click="emit('update:modelValue', category.value)"
+    >
+      {{ category.label }}
+    </button>
+  </nav>
+</template>
diff --git a/website/src/components/leaderboard/LeaderboardFilters.vue b/website/src/components/leaderboard/LeaderboardFilters.vue
new file mode 100644
index 0000000..65550c9
--- /dev/null
+++ b/website/src/components/leaderboard/LeaderboardFilters.vue
@@ -0,0 +1,59 @@
+<script setup>
+defineProps({
+  category: { type: String, required: true },
+  map: { type: String, default: '' },
+  scenario: { type: String, default: '' },
+  discipline: { type: String, default: '' },
+  maps: { type: Array, required: true },
+  scenarios: { type: Array, required: true },
+  disciplines: { type: Array, required: true },
+});
+defineEmits(['update:map', 'update:scenario', 'update:discipline']);
+</script>
+
+<template>
+  <div class="leaderboard-filters">
+    <label v-if="category === 'movement' || category === 'target'">
+      <span>Map</span>
+      <select :value="map" @change="$emit('update:map', $event.target.value)">
+        <option
+          v-for="option in maps"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+    <label v-else-if="category === 'aim'">
+      <span>Scenario</span>
+      <select
+        :value="scenario"
+        @change="$emit('update:scenario', $event.target.value)"
+      >
+        <option
+          v-for="option in scenarios"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+    <label v-else>
+      <span>Discipline</span>
+      <select
+        :value="discipline"
+        @change="$emit('update:discipline', $event.target.value)"
+      >
+        <option
+          v-for="option in disciplines"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </label>
+  </div>
+</template>
diff --git a/website/src/components/leaderboard/LeaderboardPagination.test.js b/website/src/components/leaderboard/LeaderboardPagination.test.js
new file mode 100644
index 0000000..4b00206
--- /dev/null
+++ b/website/src/components/leaderboard/LeaderboardPagination.test.js
@@ -0,0 +1,18 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import LeaderboardPagination from './LeaderboardPagination.vue';
+
+describe('LeaderboardPagination', () => {
+  it('labels navigation and emits the selected page', async () => {
+    const wrapper = mount(LeaderboardPagination, {
+      props: { page: 2, total: 76, pageSize: 25 },
+    });
+
+    expect(wrapper.get('nav').attributes('aria-label')).toBe(
+      'Leaderboard pages'
+    );
+    expect(wrapper.text()).toContain('26–50 of 76');
+    await wrapper.get('button[aria-label="Go to page 3"]').trigger('click');
+    expect(wrapper.emitted('update:page')).toEqual([[3]]);
+  });
+});
diff --git a/website/src/components/leaderboard/LeaderboardPagination.vue b/website/src/components/leaderboard/LeaderboardPagination.vue
new file mode 100644
index 0000000..04cf6b6
--- /dev/null
+++ b/website/src/components/leaderboard/LeaderboardPagination.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  page: { type: Number, required: true },
+  total: { type: Number, required: true },
+  pageSize: { type: Number, required: true },
+});
+const emit = defineEmits(['update:page']);
+
+const totalPages = computed(() =>
+  Math.max(Math.ceil(props.total / props.pageSize), 1)
+);
+const start = computed(() =>
+  props.total ? (props.page - 1) * props.pageSize + 1 : 0
+);
+const end = computed(() => Math.min(props.page * props.pageSize, props.total));
+const pages = computed(() => {
+  const first = Math.max(1, Math.min(props.page - 2, totalPages.value - 4));
+  const last = Math.min(totalPages.value, first + 4);
+  return Array.from({ length: last - first + 1 }, (_, index) => first + index);
+});
+</script>
+
+<template>
+  <nav class="pagination" aria-label="Leaderboard pages">
+    <p>{{ start }}–{{ end }} of {{ total }}</p>
+    <div class="pagination-controls">
+      <button
+        type="button"
+        :disabled="page === 1"
+        aria-label="Go to previous page"
+        @click="emit('update:page', page - 1)"
+      >
+        ←
+      </button>
+      <button
+        v-for="pageNumber in pages"
+        :key="pageNumber"
+        type="button"
+        :aria-current="pageNumber === page ? 'page' : undefined"
+        :aria-label="`Go to page ${pageNumber}`"
+        @click="emit('update:page', pageNumber)"
+      >
+        {{ pageNumber }}
+      </button>
+      <button
+        type="button"
+        :disabled="page === totalPages"
+        aria-label="Go to next page"
+        @click="emit('update:page', page + 1)"
+      >
+        →
+      </button>
+    </div>
+  </nav>
+</template>
diff --git a/website/src/components/leaderboard/LeaderboardPreview.vue b/website/src/components/leaderboard/LeaderboardPreview.vue
new file mode 100644
index 0000000..02d2355
--- /dev/null
+++ b/website/src/components/leaderboard/LeaderboardPreview.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from 'vue';
+import LeaderboardStatus from './LeaderboardStatus.vue';
+import LeaderboardTable from './LeaderboardTable.vue';
+import { useLeaderboard } from '@/composables/useLeaderboard';
+import { getLeaderboardColumns } from '@/data/leaderboards';
+
+const request = computed(() => ({
+  category: 'movement',
+  map: 'map_rooftops',
+  page: 1,
+}));
+const { rows, status, error, reload } = useLeaderboard(request);
+const columns = getLeaderboardColumns(request.value).filter(
+  (column) => column.key !== 'date'
+);
+const previewRows = computed(() => rows.value.slice(0, 5));
+</script>
+
+<template>
+  <section class="leaderboard-preview" aria-labelledby="preview-title">
+    <header class="section-heading">
+      <div>
+        <p class="eyebrow">Current records</p>
+        <h2 id="preview-title">Rooftops · Bhop</h2>
+      </div>
+      <RouterLink
+        :to="{
+          name: 'leaderboard',
+          query: { category: 'movement', map: 'map_rooftops', page: '1' },
+        }"
+        >Full leaderboard</RouterLink
+      >
+    </header>
+    <LeaderboardStatus
+      v-if="status !== 'success'"
+      :status="status"
+      :error="error"
+      @retry="reload"
+    />
+    <LeaderboardTable
+      v-else
+      caption="Rooftops Bhop leaderboard preview"
+      :columns="columns"
+      :rows="previewRows"
+    />
+  </section>
+</template>
diff --git a/website/src/components/leaderboard/LeaderboardStatus.vue b/website/src/components/leaderboard/LeaderboardStatus.vue
new file mode 100644
index 0000000..1c2b42e
--- /dev/null
+++ b/website/src/components/leaderboard/LeaderboardStatus.vue
@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  status: { type: String, required: true },
+  error: { type: String, default: '' },
+});
+defineEmits(['retry']);
+</script>
+
+<template>
+  <div class="leaderboard-status" aria-live="polite">
+    <p v-if="status === 'loading'">Loading leaderboard…</p>
+    <p v-else-if="status === 'empty'">No records exist for this selection.</p>
+    <div v-else-if="status === 'error'">
+      <p>{{ error }}</p>
+      <button type="button" @click="$emit('retry')">Try again</button>
+    </div>
+  </div>
+</template>
diff --git a/website/src/components/leaderboard/LeaderboardTable.test.js b/website/src/components/leaderboard/LeaderboardTable.test.js
new file mode 100644
index 0000000..4661c2e
--- /dev/null
+++ b/website/src/components/leaderboard/LeaderboardTable.test.js
@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import LeaderboardTable from './LeaderboardTable.vue';
+
+describe('LeaderboardTable', () => {
+  it('renders a caption, scoped headers, and formatted cells', () => {
+    const wrapper = mount(LeaderboardTable, {
+      props: {
+        caption: 'Rooftops Bhop leaderboard',
+        columns: [
+          { key: 'rank', label: 'Rank', format: (row) => row.rank },
+          { key: 'username', label: 'Player', format: (row) => row.username },
+          { key: 'time', label: 'Time', format: (row) => `${row.time_ms}ms` },
+        ],
+        rows: [{ id: '1', rank: 1, username: 'Alice', time_ms: 18442 }],
+      },
+    });
+
+    expect(wrapper.get('caption').text()).toBe('Rooftops Bhop leaderboard');
+    expect(wrapper.findAll('th[scope="col"]')).toHaveLength(3);
+    expect(wrapper.get('tbody th[scope="row"]').text()).toBe('1');
+    expect(wrapper.text()).toContain('Alice');
+  });
+});
diff --git a/website/src/components/leaderboard/LeaderboardTable.vue b/website/src/components/leaderboard/LeaderboardTable.vue
new file mode 100644
index 0000000..6c83367
--- /dev/null
+++ b/website/src/components/leaderboard/LeaderboardTable.vue
@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  caption: { type: String, required: true },
+  columns: { type: Array, required: true },
+  rows: { type: Array, required: true },
+});
+</script>
+
+<template>
+  <div class="table-scroll" tabindex="0" aria-label="Scrollable leaderboard">
+    <table class="leaderboard-table">
+      <caption>
+        {{
+          caption
+        }}
+      </caption>
+      <thead>
+        <tr>
+          <th v-for="column in columns" :key="column.key" scope="col">
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in rows" :key="row.id">
+          <template v-for="(column, index) in columns" :key="column.key">
+            <th v-if="index === 0" scope="row">{{ column.format(row) }}</th>
+            <td v-else>{{ column.format(row) }}</td>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/website/src/composables/useLeaderboard.js b/website/src/composables/useLeaderboard.js
new file mode 100644
index 0000000..b3cdde1
--- /dev/null
+++ b/website/src/composables/useLeaderboard.js
@@ -0,0 +1,49 @@
+import { onScopeDispose, ref, watch } from 'vue';
+import { fetchLeaderboard } from '@/services/leaderboardApi';
+
+export function useLeaderboard(request, loader = fetchLeaderboard) {
+  const rows = ref([]);
+  const total = ref(0);
+  const status = ref('loading');
+  const error = ref('');
+  let controller;
+
+  async function load() {
+    controller?.abort();
+    const activeController = new AbortController();
+    controller = activeController;
+    status.value = 'loading';
+    error.value = '';
+
+    try {
+      const result = await loader(request.value, {
+        signal: activeController.signal,
+      });
+
+      if (activeController !== controller || activeController.signal.aborted) {
+        return;
+      }
+
+      rows.value = result.rows;
+      total.value = result.total;
+      status.value = result.rows.length === 0 ? 'empty' : 'success';
+    } catch (cause) {
+      if (cause?.name === 'AbortError' || activeController.signal.aborted) {
+        return;
+      }
+
+      rows.value = [];
+      total.value = 0;
+      error.value =
+        cause instanceof Error
+          ? cause.message
+          : 'Could not load the leaderboard.';
+      status.value = 'error';
+    }
+  }
+
+  watch(request, load, { deep: true, immediate: true });
+  onScopeDispose(() => controller?.abort());
+
+  return { rows, total, status, error, reload: load };
+}
diff --git a/website/src/composables/useLeaderboard.test.js b/website/src/composables/useLeaderboard.test.js
new file mode 100644
index 0000000..902cf88
--- /dev/null
+++ b/website/src/composables/useLeaderboard.test.js
@@ -0,0 +1,43 @@
+import { computed, effectScope, nextTick, ref } from 'vue';
+import { describe, expect, it, vi } from 'vitest';
+import { useLeaderboard } from './useLeaderboard';
+
+describe('useLeaderboard', () => {
+  it('loads rows and exposes success state', async () => {
+    const request = ref({ category: 'movement', map: 'map_rooftops', page: 1 });
+    const loader = vi.fn().mockResolvedValue({ rows: [{ id: '1' }], total: 1 });
+    const scope = effectScope();
+    const state = scope.run(() =>
+      useLeaderboard(
+        computed(() => request.value),
+        loader
+      )
+    );
+
+    await vi.waitFor(() => expect(state.status.value).toBe('success'));
+    expect(state.rows.value).toEqual([{ id: '1' }]);
+    scope.stop();
+  });
+
+  it('aborts the stale request when filters change', async () => {
+    const request = ref({ category: 'movement', map: 'map_rooftops', page: 1 });
+    const signals = [];
+    const loader = vi.fn((_query, { signal }) => {
+      signals.push(signal);
+      return new Promise(() => {});
+    });
+    const scope = effectScope();
+    scope.run(() =>
+      useLeaderboard(
+        computed(() => request.value),
+        loader
+      )
+    );
+
+    request.value = { category: 'movement', map: 'map_streets', page: 1 };
+    await nextTick();
+
+    expect(signals[0].aborted).toBe(true);
+    scope.stop();
+  });
+});
diff --git a/website/src/data/leaderboards.js b/website/src/data/leaderboards.js
new file mode 100644
index 0000000..78ac8c0
--- /dev/null
+++ b/website/src/data/leaderboards.js
@@ -0,0 +1,175 @@
+import {
+  formatDate,
+  formatInteger,
+  formatPercentage,
+  formatReaction,
+  formatTime,
+} from '@/utils/formatters';
+
+export const PAGE_SIZE = 25;
+
+export const CATEGORIES = [
+  { value: 'movement', label: 'Movement' },
+  { value: 'target', label: 'Target' },
+  { value: 'aim', label: 'Aim' },
+  { value: 'overall', label: 'Overall' },
+];
+
+export const MAPS = [
+  ['Tutorial', 'Tutorial', ['movement', 'target']],
+  ['map_rooftops', 'Rooftops', ['movement', 'target']],
+  ['map_streets', 'Streets', ['movement', 'target']],
+  ['map_flow', 'Flow', ['movement', 'target']],
+  ['map_line', 'Line', ['movement']],
+  ['map_rookie', 'Rookie', ['movement']],
+  ['map_dawn', 'Dawn', ['movement']],
+  ['map_structure', 'Structure', ['movement', 'target']],
+  ['map_graybox', 'Graybox', ['movement', 'target']],
+  ['map_graybox2', 'Graybox 2', ['movement', 'target']],
+  ['map_subway', 'Subway', ['movement', 'target']],
+  ['map_rooftops2', 'Rooftops 2', ['movement', 'target']],
+  ['map_slope', 'Slope', ['movement']],
+  ['map_taurus', 'Taurus', ['movement']],
+].map(([value, label, categories]) => ({ value, label, categories }));
+
+export const AIM_SCENARIOS = [
+  { value: 'gridshot', label: 'Gridshot' },
+  { value: 'flick', label: 'Flick' },
+  { value: 'tracking', label: 'Tracking' },
+];
+
+export const OVERALL_DISCIPLINES = [
+  { value: 'movement', label: 'Movement' },
+  { value: 'target', label: 'Target' },
+  { value: 'aim', label: 'Aim' },
+];
+
+const rankColumn = {
+  key: 'rank',
+  label: 'Rank',
+  format: (row) => row.rank,
+};
+
+const playerColumn = {
+  key: 'player',
+  label: 'Player',
+  format: (row) => row.username,
+};
+
+export function getCategoryMaps(category) {
+  return MAPS.filter((map) => map.categories.includes(category));
+}
+
+export function getLeaderboardColumns(query) {
+  if (query.category === 'aim') {
+    return [
+      rankColumn,
+      playerColumn,
+      {
+        key: 'score',
+        label: 'Score',
+        format: (row) => formatInteger(row.score),
+      },
+      {
+        key: 'accuracy',
+        label: 'Accuracy',
+        format: (row) => formatPercentage(row.accuracy),
+      },
+      {
+        key: 'reaction',
+        label: 'Reaction',
+        format: (row) => formatReaction(row.avg_reaction_ms),
+      },
+      {
+        key: 'date',
+        label: 'Date',
+        format: (row) => formatDate(row.created_at),
+      },
+    ];
+  }
+
+  if (query.category === 'overall' && query.discipline === 'aim') {
+    return [
+      rankColumn,
+      playerColumn,
+      {
+        key: 'total-score',
+        label: 'Total score',
+        format: (row) => formatInteger(row.total_score),
+      },
+      {
+        key: 'scenarios',
+        label: 'Scenarios',
+        format: (row) => formatInteger(row.scenarios_completed),
+      },
+      {
+        key: 'accuracy',
+        label: 'Accuracy',
+        format: (row) => formatPercentage(row.accuracy),
+      },
+      {
+        key: 'reaction',
+        label: 'Reaction',
+        format: (row) => formatReaction(row.avg_reaction_ms),
+      },
+    ];
+  }
+
+  if (query.category === 'overall') {
+    return [
+      rankColumn,
+      playerColumn,
+      {
+        key: 'points',
+        label: 'Points',
+        format: (row) => formatInteger(row.points),
+      },
+    ];
+  }
+
+  return [
+    rankColumn,
+    playerColumn,
+    {
+      key: 'time',
+      label: 'Time',
+      format: (row) => formatTime(row.time_ms),
+    },
+    {
+      key: 'date',
+      label: 'Date',
+      format: (row) => formatDate(row.created_at),
+    },
+  ];
+}
+
+export function normalizeLeaderboardQuery(query = {}) {
+  const category = CATEGORIES.some((entry) => entry.value === query.category)
+    ? query.category
+    : 'movement';
+  const page = Math.max(Number.parseInt(query.page, 10) || 1, 1);
+
+  if (category === 'aim') {
+    const scenario = AIM_SCENARIOS.some(
+      (entry) => entry.value === query.scenario
+    )
+      ? query.scenario
+      : 'gridshot';
+    return { category, scenario, page };
+  }
+
+  if (category === 'overall') {
+    const discipline = OVERALL_DISCIPLINES.some(
+      (entry) => entry.value === query.discipline
+    )
+      ? query.discipline
+      : 'movement';
+    return { category, discipline, page };
+  }
+
+  const maps = getCategoryMaps(category);
+  const map = maps.some((entry) => entry.value === query.map)
+    ? query.map
+    : 'map_rooftops';
+  return { category, map, page };
+}
diff --git a/website/src/data/leaderboards.test.js b/website/src/data/leaderboards.test.js
new file mode 100644
index 0000000..d13392f
--- /dev/null
+++ b/website/src/data/leaderboards.test.js
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { getCategoryMaps, normalizeLeaderboardQuery } from './leaderboards';
+
+describe('leaderboard metadata', () => {
+  it('excludes bhop-only maps from Target', () => {
+    expect(getCategoryMaps('target').map((map) => map.value)).not.toContain(
+      'map_taurus'
+    );
+    expect(getCategoryMaps('movement').map((map) => map.value)).toContain(
+      'map_taurus'
+    );
+  });
+
+  it('normalizes incompatible route values', () => {
+    expect(
+      normalizeLeaderboardQuery({
+        category: 'aim',
+        scenario: 'unknown',
+        page: '-4',
+      })
+    ).toEqual({
+      category: 'aim',
+      scenario: 'gridshot',
+      page: 1,
+    });
+  });
+});
diff --git a/website/src/main.js b/website/src/main.js
index 684d042..0e5ce98 100644
--- a/website/src/main.js
+++ b/website/src/main.js
@@ -1,4 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import { createStraifRouter } from './router';
+import './styles/base.css';
 
-createApp(App).mount('#app');
+createApp(App).use(createStraifRouter()).mount('#app');
diff --git a/website/src/router/index.js b/website/src/router/index.js
new file mode 100644
index 0000000..70d2710
--- /dev/null
+++ b/website/src/router/index.js
@@ -0,0 +1,47 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: () => import('@/views/HomeView.vue'),
+    meta: {
+      title: 'Straif',
+      description:
+        'Straif is a fast-paced 3D platforming shooter built around movement and global leaderboards.',
+    },
+  },
+  {
+    path: '/leaderboard',
+    name: 'leaderboard',
+    component: () => import('@/views/LeaderboardView.vue'),
+    meta: {
+      title: 'Leaderboard — Straif',
+      description:
+        'Browse Straif movement, target, aim, and overall leaderboards.',
+    },
+  },
+];
+
+function getDescriptionMetaTag() {
+  let metaDescription = document.querySelector('meta[name="description"]');
+
+  if (!metaDescription) {
+    metaDescription = document.createElement('meta');
+    metaDescription.setAttribute('name', 'description');
+    document.head.appendChild(metaDescription);
+  }
+
+  return metaDescription;
+}
+
+export function createStraifRouter(history = createWebHistory()) {
+  const router = createRouter({ history, routes });
+
+  router.afterEach((to) => {
+    document.title = to.meta.title;
+    getDescriptionMetaTag().setAttribute('content', to.meta.description);
+  });
+
+  return router;
+}
diff --git a/website/src/router/index.test.js b/website/src/router/index.test.js
new file mode 100644
index 0000000..26f18a3
--- /dev/null
+++ b/website/src/router/index.test.js
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { createMemoryHistory } from 'vue-router';
+import { createStraifRouter } from './index';
+
+describe('Straif router', () => {
+  it('defines home and leaderboard routes with document metadata', async () => {
+    const router = createStraifRouter(createMemoryHistory());
+
+    await router.push('/leaderboard');
+    await router.isReady();
+
+    expect(router.currentRoute.value.name).toBe('leaderboard');
+    expect(router.currentRoute.value.meta.title).toBe('Leaderboard — Straif');
+    expect(router.getRoutes().map((route) => route.path)).toEqual(
+      expect.arrayContaining(['/', '/leaderboard'])
+    );
+  });
+
+  it('updates document title and description metadata after navigation', async () => {
+    document.head.innerHTML = '';
+
+    const router = createStraifRouter(createMemoryHistory());
+
+    await router.push('/leaderboard');
+    await router.isReady();
+
+    expect(document.title).toBe('Leaderboard — Straif');
+    expect(
+      document
+        .querySelector('meta[name="description"]')
+        ?.getAttribute('content')
+    ).toBe('Browse Straif movement, target, aim, and overall leaderboards.');
+  });
+});
diff --git a/website/src/services/leaderboardApi.js b/website/src/services/leaderboardApi.js
new file mode 100644
index 0000000..d1f0a10
--- /dev/null
+++ b/website/src/services/leaderboardApi.js
@@ -0,0 +1,71 @@
+import { PAGE_SIZE } from '@/data/leaderboards';
+
+const BASE_URL =
+  import.meta.env.VITE_API_BASE_URL ?? 'https://straifapi.pumped.software';
+
+function endpointFor(query) {
+  const params = new URLSearchParams({
+    page: String(query.page - 1),
+    limit: String(PAGE_SIZE),
+  });
+
+  if (query.category === 'aim') {
+    return `/leaderboard/aim/scenarios/${query.scenario}/scores?${params}`;
+  }
+
+  if (query.category === 'overall') {
+    if (query.discipline === 'aim') {
+      return `/leaderboard/aim/overall?${params}`;
+    }
+    const mode = query.discipline === 'target' ? 'target' : 'bhop';
+    return `/leaderboard/mode/${mode}/overall?${params}`;
+  }
+
+  const mode = query.category === 'target' ? 'target' : 'bhop';
+  return `/leaderboard/mode/${mode}/maps/${query.map}/runs?${params}`;
+}
+
+function normalizeRows(query, body) {
+  if (query.category === 'aim') return body.data.scores;
+  if (query.category === 'overall' && query.discipline === 'aim') {
+    return body.data.scores;
+  }
+  if (query.category === 'overall') return body.data;
+  return body.data.runs;
+}
+
+function normalizeTotal(query, body) {
+  if (query.category === 'aim') return body.data.total;
+  if (query.category === 'overall' && query.discipline === 'aim') {
+    return body.data.total;
+  }
+  if (query.category === 'overall') return body.total;
+  return body.data.total;
+}
+
+export async function fetchLeaderboard(
+  query,
+  { signal, fetchImpl = fetch } = {}
+) {
+  const response = await fetchImpl(`${BASE_URL}${endpointFor(query)}`, {
+    signal,
+  });
+  const body = await response.json();
+
+  if (!response.ok) {
+    throw new Error(body.error ?? 'Could not load the leaderboard.');
+  }
+
+  const offset = (query.page - 1) * PAGE_SIZE;
+  return {
+    rows: normalizeRows(query, body).map((row, index) => {
+      const rank = row.position ?? offset + index + 1;
+      return {
+        ...row,
+        id: String(rank),
+        rank,
+      };
+    }),
+    total: normalizeTotal(query, body),
+  };
+}
diff --git a/website/src/services/leaderboardApi.test.js b/website/src/services/leaderboardApi.test.js
new file mode 100644
index 0000000..379bf52
--- /dev/null
+++ b/website/src/services/leaderboardApi.test.js
@@ -0,0 +1,95 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fetchLeaderboard } from './leaderboardApi';
+
+function response(body, ok = true) {
+  return { ok, json: vi.fn().mockResolvedValue(body) };
+}
+
+describe('fetchLeaderboard', () => {
+  it('requests a 25-row Movement page and normalizes ranks', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(
+      response({
+        data: {
+          runs: [
+            {
+              steam_id: '1',
+              username: 'Alice',
+              time_ms: 18442,
+              created_at: '2026-07-18',
+            },
+            {
+              steam_id: '1',
+              username: 'Alice',
+              time_ms: 18510,
+              created_at: '2026-07-18',
+            },
+          ],
+          total: 26,
+        },
+      })
+    );
+
+    const result = await fetchLeaderboard(
+      { category: 'movement', map: 'map_rooftops', page: 2 },
+      { fetchImpl }
+    );
+
+    expect(fetchImpl).toHaveBeenCalledWith(
+      expect.stringContaining(
+        '/leaderboard/mode/bhop/maps/map_rooftops/runs?page=1&limit=25'
+      ),
+      expect.objectContaining({ signal: undefined })
+    );
+    expect(result.rows[0]).toMatchObject({
+      id: '26',
+      rank: 26,
+      username: 'Alice',
+      time_ms: 18442,
+    });
+    expect(result.rows.map((row) => row.id)).toEqual(['26', '27']);
+    expect(result.total).toBe(26);
+  });
+
+  it('normalizes overall Aim scores', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(
+      response({
+        data: {
+          scores: [
+            {
+              steam_id: '2',
+              username: 'Bob',
+              total_score: 84220,
+              scenarios_completed: 3,
+              accuracy: 92.4,
+              avg_reaction_ms: 240,
+            },
+          ],
+          total: 1,
+        },
+      })
+    );
+
+    const result = await fetchLeaderboard(
+      { category: 'overall', discipline: 'aim', page: 1 },
+      { fetchImpl }
+    );
+
+    expect(result.rows[0].total_score).toBe(84220);
+    expect(result.total).toBe(1);
+  });
+
+  it('throws the API message for failed requests', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        response({ error: 'Leaderboard unavailable.' }, false)
+      );
+
+    await expect(
+      fetchLeaderboard(
+        { category: 'aim', scenario: 'gridshot', page: 1 },
+        { fetchImpl }
+      )
+    ).rejects.toThrow('Leaderboard unavailable.');
+  });
+});
diff --git a/website/src/styles/base.css b/website/src/styles/base.css
new file mode 100644
index 0000000..1410333
--- /dev/null
+++ b/website/src/styles/base.css
@@ -0,0 +1,841 @@
+:root {
+  --color-background: oklch(0.115 0 0);
+  --color-surface: oklch(0.145 0 0);
+  --color-text: oklch(0.96 0.007 100);
+  --color-muted: oklch(0.68 0.008 100);
+  --color-subtle: oklch(0.56 0.008 100);
+  --color-border: oklch(0.28 0 0);
+  --color-border-strong: oklch(0.39 0.006 100);
+  --color-local-shadow: oklch(0.07 0 0 / 0.82);
+  --font-primary: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
+  --font-data: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  --content-width: 82rem;
+  --page-gutter: clamp(1rem, 4vw, 3.5rem);
+  --section-space: clamp(4rem, 10vw, 8.5rem);
+  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  color-scheme: dark;
+  font-family: var(--font-primary);
+  font-synthesis: none;
+  background: var(--color-background);
+  color: var(--color-text);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  background: var(--color-background);
+  scroll-behavior: smooth;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  overflow-x: clip;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-primary);
+  font-size: 1rem;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+#app {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+#app > main {
+  width: 100%;
+  min-width: 0;
+  flex: 1;
+}
+
+::selection {
+  background: var(--color-border-strong);
+  color: var(--color-text);
+}
+
+:where(h1, h2, h3, p, figure) {
+  margin: 0;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+button,
+select {
+  font: inherit;
+}
+
+button {
+  color: inherit;
+}
+
+a {
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-text);
+  outline-offset: 4px;
+}
+
+.skip-link {
+  position: fixed;
+  z-index: 1000;
+  top: -6rem;
+  left: 1rem;
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-surface);
+  color: var(--color-text);
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.skip-link:focus {
+  top: 1rem;
+}
+
+.site-header,
+.site-footer,
+.page-heading,
+.leaderboard-tabs,
+.leaderboard-filters,
+.leaderboard-results,
+.game-intro,
+.map-gallery,
+.leaderboard-preview {
+  width: min(100%, var(--content-width));
+  margin-inline: auto;
+  padding-inline: var(--page-gutter);
+}
+
+.site-header,
+.site-footer {
+  display: flex;
+  min-height: 4rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.site-header {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.site-footer {
+  margin-top: clamp(3rem, 8vw, 7rem);
+  border-top: 1px solid var(--color-border);
+  padding-block: 1.25rem;
+}
+
+.site-header nav,
+.site-footer nav {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.wordmark {
+  flex: none;
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.05em;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.site-header nav a,
+.site-footer nav a {
+  color: var(--color-muted);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.site-header nav a {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.site-header nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+.site-footer p,
+.site-footer nav {
+  color: var(--color-subtle);
+  font-family: var(--font-data);
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.trailer-hero {
+  position: relative;
+  isolation: isolate;
+  width: min(100%, 100rem, calc(177.7778vh - 7.1111rem));
+  max-height: calc(100vh - 4rem);
+  margin-inline: auto;
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  background: var(--color-surface);
+}
+
+.trailer-hero__media {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+}
+
+.trailer-hero__media img,
+.trailer-hero__media iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.trailer-hero__media img {
+  object-fit: cover;
+  filter: saturate(0.62) contrast(1.07);
+}
+
+.trailer-hero__media iframe {
+  border: 0;
+}
+
+.trailer-hero__media button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  width: 4rem;
+  height: 4rem;
+  place-items: center;
+  border: 1px solid oklch(0.96 0.007 100 / 0.56);
+  border-radius: 50%;
+  background: oklch(0.115 0 0 / 0.66);
+  padding: 0;
+  font-size: 0;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.trailer-hero__media button::before {
+  width: 0;
+  height: 0;
+  margin-left: 0.2rem;
+  border-top: 0.45rem solid transparent;
+  border-bottom: 0.45rem solid transparent;
+  border-left: 0.72rem solid var(--color-text);
+  content: '';
+}
+
+.trailer-hero__media button:active {
+  transform: translate(-50%, -50%) scale(0.98);
+}
+
+.trailer-hero__copy {
+  position: absolute;
+  z-index: 2;
+  right: var(--page-gutter);
+  bottom: var(--page-gutter);
+  left: var(--page-gutter);
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1.5rem;
+  pointer-events: none;
+}
+
+.trailer-hero__copy > p {
+  width: 10rem;
+  color: var(--color-text);
+  font-family: var(--font-data);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  line-height: 1.4;
+  text-shadow: 0 1px 12px var(--color-local-shadow);
+  text-transform: uppercase;
+}
+
+.trailer-hero__copy > p:last-child {
+  text-align: right;
+}
+
+.trailer-hero h1,
+.page-heading h1 {
+  font-size: clamp(3rem, 8vw, 7.5rem);
+  font-weight: 600;
+  letter-spacing: -0.075em;
+  line-height: 0.88;
+}
+
+.trailer-hero h1 {
+  text-shadow: 0 2px 18px var(--color-local-shadow);
+}
+
+.eyebrow,
+.leaderboard-table thead th,
+.leaderboard-filters label > span,
+.pagination {
+  font-family: var(--font-data);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.eyebrow {
+  color: var(--color-subtle);
+}
+
+.game-intro {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  gap: clamp(2rem, 7vw, 7rem);
+  align-items: start;
+  border-bottom: 1px solid var(--color-border);
+  padding-block: var(--section-space);
+}
+
+.game-intro h2,
+.section-heading h2 {
+  font-size: clamp(2.5rem, 6vw, 5.5rem);
+  font-weight: 500;
+  letter-spacing: -0.06em;
+  line-height: 0.94;
+}
+
+.game-intro > p {
+  max-width: 65ch;
+  color: var(--color-muted);
+  font-size: clamp(1.125rem, 2vw, 1.375rem);
+  line-height: 1.7;
+}
+
+.map-gallery {
+  padding-block: var(--section-space);
+}
+
+.section-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.section-heading .eyebrow + h2 {
+  margin-top: 0.75rem;
+}
+
+.section-heading > p {
+  flex: none;
+  color: var(--color-subtle);
+}
+
+.map-list {
+  display: grid;
+  gap: 2rem;
+}
+
+.map-feature {
+  display: grid;
+  min-height: 28rem;
+  grid-template-columns: 3fr 2fr;
+}
+
+.map-feature > img {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 22rem;
+  grid-column: 1;
+  grid-row: 1;
+  object-fit: cover;
+  filter: saturate(0.62) contrast(1.07);
+}
+
+.map-feature figcaption {
+  display: flex;
+  min-width: 0;
+  grid-column: 2;
+  grid-row: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+  border: 1px solid var(--color-border);
+  padding: clamp(1.5rem, 4vw, 4rem);
+}
+
+.map-feature:nth-child(even) > img {
+  grid-column: 2;
+}
+
+.map-feature:nth-child(even) figcaption {
+  grid-column: 1;
+}
+
+.map-feature figcaption .eyebrow {
+  margin-bottom: auto;
+}
+
+.map-feature h3 {
+  font-size: clamp(2.5rem, 5vw, 5rem);
+  font-weight: 500;
+  letter-spacing: -0.06em;
+  line-height: 0.92;
+}
+
+.map-feature figcaption > p:last-child {
+  max-width: 38ch;
+  margin-top: 1rem;
+  color: var(--color-muted);
+  line-height: 1.7;
+}
+
+.leaderboard-preview {
+  border-block: 1px solid var(--color-border);
+  padding-block: var(--section-space);
+}
+
+.leaderboard-preview .section-heading > a {
+  flex: none;
+  border-bottom: 1px solid var(--color-border-strong);
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition:
+    border-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.page-heading {
+  padding-block: var(--section-space) clamp(3rem, 7vw, 6rem);
+}
+
+.page-heading .eyebrow {
+  margin-bottom: 1rem;
+}
+
+.page-heading > p:last-child {
+  max-width: 65ch;
+  margin-top: 1.5rem;
+  color: var(--color-muted);
+  font-size: clamp(1rem, 1.8vw, 1.25rem);
+  line-height: 1.7;
+}
+
+.leaderboard-tabs {
+  display: flex;
+  gap: 2rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.leaderboard-tabs button {
+  flex: none;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  margin-bottom: -1px;
+  background: transparent;
+  padding: 0 0 1rem;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.leaderboard-tabs button[aria-current='page'] {
+  border-bottom-color: var(--color-text);
+  color: var(--color-text);
+}
+
+.leaderboard-tabs button:active {
+  transform: translateY(1px);
+}
+
+.leaderboard-filters {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  gap: 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+  padding-block: 1.5rem;
+}
+
+.leaderboard-filters label {
+  display: grid;
+  min-width: 0;
+  gap: 0.5rem;
+}
+
+.leaderboard-filters label > span {
+  color: var(--color-muted);
+}
+
+.leaderboard-filters select {
+  width: 100%;
+  min-height: 3rem;
+  border: 1px solid var(--color-border-strong);
+  border-radius: 0;
+  background: var(--color-surface);
+  color: var(--color-text);
+  padding: 0.75rem 0.875rem;
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+.leaderboard-results {
+  padding-top: clamp(3.5rem, 8vw, 7rem);
+}
+
+.leaderboard-results .section-heading > p {
+  font-family: var(--font-data);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.leaderboard-results .section-heading h2:focus {
+  scroll-margin-top: 2rem;
+}
+
+.leaderboard-status {
+  display: grid;
+  min-height: 14rem;
+  align-content: center;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-muted);
+}
+
+.leaderboard-status > p,
+.leaderboard-status > div {
+  max-width: 70ch;
+}
+
+.leaderboard-status > div {
+  display: grid;
+  justify-items: start;
+  gap: 1.25rem;
+}
+
+.leaderboard-status button {
+  min-height: 2.75rem;
+  border: 1px solid var(--color-border-strong);
+  border-radius: 0;
+  background: transparent;
+  padding-inline: 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+.leaderboard-status button:active {
+  transform: translateY(1px);
+}
+
+.table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  border-top: 1px solid var(--color-border);
+  scrollbar-color: var(--color-border-strong) var(--color-surface);
+  scrollbar-width: thin;
+}
+
+.leaderboard-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+.leaderboard-table caption {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.leaderboard-table th,
+.leaderboard-table td {
+  border-bottom: 1px solid var(--color-border);
+  padding: 1rem clamp(0.75rem, 2vw, 1.5rem);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.leaderboard-table th:first-child,
+.leaderboard-table td:first-child {
+  padding-left: 0;
+}
+
+.leaderboard-table th:last-child,
+.leaderboard-table td:last-child {
+  padding-right: 0;
+}
+
+.leaderboard-table thead th {
+  color: var(--color-subtle);
+}
+
+.leaderboard-table tbody th {
+  width: 5rem;
+  color: var(--color-subtle);
+  font-family: var(--font-primary);
+  font-weight: 400;
+}
+
+.leaderboard-table tbody td:nth-child(2) {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.leaderboard-table tbody td {
+  color: var(--color-muted);
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding-top: 1.5rem;
+  color: var(--color-subtle);
+}
+
+.pagination-controls {
+  display: flex;
+  max-width: 100%;
+  gap: 0.5rem;
+}
+
+.pagination button {
+  display: grid;
+  width: 2.75rem;
+  height: 2.75rem;
+  flex: none;
+  place-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--color-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.pagination button[aria-current='page'] {
+  border-color: var(--color-text);
+  color: var(--color-text);
+}
+
+.pagination button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.pagination button:not(:disabled):active {
+  transform: translateY(1px);
+}
+
+@media (hover: hover) {
+  .site-header nav a:hover,
+  .site-footer nav a:hover,
+  .leaderboard-preview .section-heading > a:hover {
+    color: var(--color-text);
+  }
+
+  .leaderboard-preview .section-heading > a:hover {
+    border-bottom-color: var(--color-text);
+  }
+
+  .trailer-hero__media button:hover {
+    border-color: var(--color-text);
+    background: oklch(0.115 0 0 / 0.82);
+    transform: translate(-50%, -50%) scale(1.04);
+  }
+
+  .leaderboard-tabs button:hover {
+    color: var(--color-text);
+  }
+
+  .leaderboard-filters select:hover,
+  .leaderboard-status button:hover,
+  .pagination button:not(:disabled):hover {
+    border-color: var(--color-text);
+  }
+
+  .leaderboard-status button:hover,
+  .pagination button:not(:disabled):hover {
+    background: var(--color-surface);
+    color: var(--color-text);
+  }
+
+  .leaderboard-table tbody tr:hover {
+    background: oklch(0.2 0 0 / 0.38);
+  }
+}
+
+@media (max-width: 48rem) {
+  .site-header,
+  .site-footer,
+  .section-heading {
+    align-items: flex-start;
+  }
+
+  .site-header {
+    padding-block: 1.25rem;
+  }
+
+  .site-footer {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .site-footer nav {
+    flex-wrap: wrap;
+  }
+
+  .trailer-hero__copy {
+    right: 1rem;
+    bottom: 1rem;
+    left: 1rem;
+    gap: 1rem;
+  }
+
+  .trailer-hero__copy > p {
+    width: min(9rem, 42vw);
+    font-size: 0.625rem;
+  }
+
+  .trailer-hero__copy > p:last-child {
+    display: none;
+  }
+
+  .game-intro {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2rem;
+    padding-block: clamp(3.5rem, 14vw, 5.5rem);
+  }
+
+  .map-gallery,
+  .leaderboard-preview {
+    padding-block: clamp(3.5rem, 14vw, 5.5rem);
+  }
+
+  .section-heading {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .map-feature,
+  .map-feature:nth-child(even) {
+    min-height: 0;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .map-feature > img,
+  .map-feature:nth-child(even) > img {
+    height: clamp(13rem, 56vw, 20rem);
+    min-height: 0;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .map-feature figcaption,
+  .map-feature:nth-child(even) figcaption {
+    min-height: 14rem;
+    grid-column: 1;
+    grid-row: 2;
+    padding: 1.5rem;
+  }
+
+  .page-heading {
+    padding-block: clamp(4rem, 15vw, 6rem) clamp(3rem, 10vw, 4.5rem);
+  }
+
+  .leaderboard-tabs {
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
+  .leaderboard-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .leaderboard-filters {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .leaderboard-results {
+    padding-top: clamp(3.5rem, 14vw, 5.5rem);
+  }
+
+  .leaderboard-table {
+    min-width: 42rem;
+  }
+
+  .pagination {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .pagination-controls {
+    width: 100%;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    padding-block: 0.25rem;
+    scrollbar-width: thin;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/website/src/utils/formatters.js b/website/src/utils/formatters.js
new file mode 100644
index 0000000..bdaf970
--- /dev/null
+++ b/website/src/utils/formatters.js
@@ -0,0 +1,10 @@
+const integerFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 0,
+});
+
+export const formatInteger = (value) => integerFormatter.format(value);
+export const formatTime = (value) => `${(value / 1000).toFixed(3)}s`;
+export const formatPercentage = (value) => `${Number(value).toFixed(2)}%`;
+export const formatReaction = (value) => `${Math.round(value)}ms`;
+export const formatDate = (value) =>
+  new Date(value).toISOString().slice(0, 10).replaceAll('-', '.');
diff --git a/website/src/utils/formatters.test.js b/website/src/utils/formatters.test.js
new file mode 100644
index 0000000..f942f46
--- /dev/null
+++ b/website/src/utils/formatters.test.js
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import {
+  formatDate,
+  formatInteger,
+  formatPercentage,
+  formatReaction,
+  formatTime,
+} from './formatters';
+
+describe('leaderboard formatters', () => {
+  it('formats leaderboard metrics consistently', () => {
+    expect(formatTime(18_442)).toBe('18.442s');
+    expect(formatInteger(84220)).toBe('84,220');
+    expect(formatPercentage(92.456)).toBe('92.46%');
+    expect(formatReaction(243.6)).toBe('244ms');
+    expect(formatDate('2026-07-18T11:00:00.000Z')).toBe('2026.07.18');
+  });
+});
diff --git a/website/src/views/HomeView.test.js b/website/src/views/HomeView.test.js
new file mode 100644
index 0000000..ea23a9b
--- /dev/null
+++ b/website/src/views/HomeView.test.js
@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import HomeView from './HomeView.vue';
+
+vi.mock('@/components/leaderboard/LeaderboardPreview.vue', () => ({
+  default: { template: '<section aria-label="Leaderboard preview" />' },
+}));
+
+describe('HomeView', () => {
+  it('uses one main landmark and semantic content sections', () => {
+    const wrapper = mount(HomeView, {
+      global: {
+        stubs: {
+          RouterLink: { template: '<a><slot /></a>' },
+        },
+      },
+    });
+
+    expect(wrapper.findAll('main')).toHaveLength(1);
+    expect(wrapper.get('h1').text()).toBe('Straif');
+    expect(wrapper.get('[aria-labelledby="game-intro-title"]').exists()).toBe(
+      true
+    );
+    expect(wrapper.findAll('figure')).toHaveLength(3);
+  });
+});
diff --git a/website/src/views/HomeView.vue b/website/src/views/HomeView.vue
new file mode 100644
index 0000000..f700693
--- /dev/null
+++ b/website/src/views/HomeView.vue
@@ -0,0 +1,15 @@
+<script setup>
+import GameIntro from '@/components/home/GameIntro.vue';
+import MapGallery from '@/components/home/MapGallery.vue';
+import TrailerHero from '@/components/home/TrailerHero.vue';
+import LeaderboardPreview from '@/components/leaderboard/LeaderboardPreview.vue';
+</script>
+
+<template>
+  <main id="main-content">
+    <TrailerHero />
+    <GameIntro />
+    <MapGallery />
+    <LeaderboardPreview />
+  </main>
+</template>
diff --git a/website/src/views/LeaderboardView.test.js b/website/src/views/LeaderboardView.test.js
new file mode 100644
index 0000000..a811d27
--- /dev/null
+++ b/website/src/views/LeaderboardView.test.js
@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils';
+import { createMemoryHistory } from 'vue-router';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createStraifRouter } from '@/router';
+import { fetchLeaderboard } from '@/services/leaderboardApi';
+import LeaderboardView from './LeaderboardView.vue';
+
+vi.mock('@/services/leaderboardApi', () => ({
+  fetchLeaderboard: vi.fn(),
+}));
+
+describe('LeaderboardView', () => {
+  const originalMatchMedia = window.matchMedia;
+  const originalScrollIntoView = Element.prototype.scrollIntoView;
+
+  beforeEach(() => {
+    vi.mocked(fetchLeaderboard).mockResolvedValue({
+      rows: [
+        {
+          id: '1',
+          rank: 1,
+          username: 'Alice',
+          time_ms: 18_442,
+          created_at: '2026-07-18T11:00:00.000Z',
+        },
+      ],
+      total: 1,
+    });
+
+    window.matchMedia = vi.fn().mockReturnValue({
+      matches: false,
+      media: '(prefers-reduced-motion: reduce)',
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    });
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+    Element.prototype.scrollIntoView = originalScrollIntoView;
+  });
+
+  it('normalizes incompatible query parameters on mount', async () => {
+    const router = createStraifRouter(createMemoryHistory());
+
+    await router.push('/leaderboard?category=target&map=map_taurus&page=0');
+    await router.isReady();
+
+    mount(LeaderboardView, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await vi.waitFor(() => {
+      expect(router.currentRoute.value.query).toEqual({
+        category: 'target',
+        map: 'map_rooftops',
+        page: '1',
+      });
+    });
+  });
+
+  it('resets the map and page when switching categories', async () => {
+    const router = createStraifRouter(createMemoryHistory());
+
+    await router.push('/leaderboard?category=movement&map=map_taurus&page=3');
+    await router.isReady();
+
+    const wrapper = mount(LeaderboardView, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await wrapper.get('button[data-category="target"]').trigger('click');
+
+    await vi.waitFor(() => {
+      expect(router.currentRoute.value.query).toEqual({
+        category: 'target',
+        map: 'map_rooftops',
+        page: '1',
+      });
+    });
+  });
+});
diff --git a/website/src/views/LeaderboardView.vue b/website/src/views/LeaderboardView.vue
new file mode 100644
index 0000000..f5bd229
--- /dev/null
+++ b/website/src/views/LeaderboardView.vue
@@ -0,0 +1,154 @@
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import LeaderboardCategoryTabs from '@/components/leaderboard/LeaderboardCategoryTabs.vue';
+import LeaderboardFilters from '@/components/leaderboard/LeaderboardFilters.vue';
+import LeaderboardPagination from '@/components/leaderboard/LeaderboardPagination.vue';
+import LeaderboardStatus from '@/components/leaderboard/LeaderboardStatus.vue';
+import LeaderboardTable from '@/components/leaderboard/LeaderboardTable.vue';
+import { useLeaderboard } from '@/composables/useLeaderboard';
+import {
+  AIM_SCENARIOS,
+  CATEGORIES,
+  OVERALL_DISCIPLINES,
+  PAGE_SIZE,
+  getCategoryMaps,
+  getLeaderboardColumns,
+  normalizeLeaderboardQuery,
+} from '@/data/leaderboards';
+
+const route = useRoute();
+const router = useRouter();
+const resultsHeading = ref(null);
+
+function stringifyQuery(query) {
+  return Object.fromEntries(
+    Object.entries(query).map(([key, value]) => [key, String(value)])
+  );
+}
+
+function serializeQuery(query) {
+  return JSON.stringify(
+    Object.entries(stringifyQuery(query)).sort(([left], [right]) =>
+      left.localeCompare(right)
+    )
+  );
+}
+
+function getLabel(options, value, fallback) {
+  return options.find((option) => option.value === value)?.label ?? fallback;
+}
+
+const normalized = computed(() => normalizeLeaderboardQuery(route.query));
+const serialized = computed(() => serializeQuery(normalized.value));
+
+watch(
+  serialized,
+  () => {
+    if (serializeQuery(route.query) === serialized.value) return;
+    router.replace({
+      name: 'leaderboard',
+      query: stringifyQuery(normalized.value),
+    });
+  },
+  { immediate: true }
+);
+
+const maps = computed(() => getCategoryMaps(normalized.value.category));
+const columns = computed(() => getLeaderboardColumns(normalized.value));
+const boardTitle = computed(() => {
+  if (normalized.value.category === 'aim') {
+    return getLabel(AIM_SCENARIOS, normalized.value.scenario, 'Gridshot');
+  }
+
+  if (normalized.value.category === 'overall') {
+    return getLabel(
+      OVERALL_DISCIPLINES,
+      normalized.value.discipline,
+      'Movement'
+    );
+  }
+
+  return getLabel(maps.value, normalized.value.map, 'Rooftops');
+});
+const caption = computed(() => `${boardTitle.value} leaderboard`);
+const { rows, total, status, error, reload } = useLeaderboard(normalized);
+
+async function setQuery(patch, resetPage = false) {
+  const nextQuery = normalizeLeaderboardQuery({
+    ...normalized.value,
+    ...patch,
+    page: resetPage ? 1 : (patch.page ?? normalized.value.page),
+  });
+
+  await router.push({ name: 'leaderboard', query: stringifyQuery(nextQuery) });
+}
+
+async function setPage(page) {
+  await setQuery({ page });
+  await nextTick();
+
+  const heading = resultsHeading.value;
+
+  if (!heading) return;
+
+  heading.focus();
+  const prefersReducedMotion =
+    window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false;
+
+  heading.scrollIntoView?.({
+    behavior: prefersReducedMotion ? 'auto' : 'smooth',
+    block: 'start',
+  });
+}
+</script>
+
+<template>
+  <main id="main-content" class="leaderboard-page">
+    <header class="page-heading">
+      <p class="eyebrow">Global records</p>
+      <h1>Leaderboard</h1>
+      <p>Movement, target, aim, and overall rankings.</p>
+    </header>
+    <LeaderboardCategoryTabs
+      :categories="CATEGORIES"
+      :model-value="normalized.category"
+      @update:model-value="setQuery({ category: $event }, true)"
+    />
+    <LeaderboardFilters
+      :category="normalized.category"
+      :map="normalized.map"
+      :scenario="normalized.scenario"
+      :discipline="normalized.discipline"
+      :maps="maps"
+      :scenarios="AIM_SCENARIOS"
+      :disciplines="OVERALL_DISCIPLINES"
+      @update:map="setQuery({ map: $event }, true)"
+      @update:scenario="setQuery({ scenario: $event }, true)"
+      @update:discipline="setQuery({ discipline: $event }, true)"
+    />
+    <section class="leaderboard-results" aria-labelledby="results-title">
+      <div class="section-heading">
+        <h2 id="results-title" ref="resultsHeading" tabindex="-1">
+          {{ boardTitle }}
+        </h2>
+        <p>{{ total }} entries</p>
+      </div>
+      <LeaderboardStatus
+        v-if="status !== 'success'"
+        :status="status"
+        :error="error"
+        @retry="reload"
+      />
+      <template v-else>
+        <LeaderboardTable :caption="caption" :columns="columns" :rows="rows" />
+        <LeaderboardPagination
+          :page="normalized.page"
+          :total="total"
+          :page-size="PAGE_SIZE"
+          @update:page="setPage"
+        />
+      </template>
+    </section>
+  </main>
+</template>
diff --git a/website/vite.config.js b/website/vite.config.js
index a757ca9..df84cc6 100644
--- a/website/vite.config.js
+++ b/website/vite.config.js
@@ -11,4 +11,8 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  test: {
+    environment: 'jsdom',
+    clearMocks: true,
+  },
 });