diff --git a/.gitignore b/.gitignore
index 711f827..969a1e3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ secret.env
 /backend/coverage.out
 /web/node_modules/
 /web/dist/
+/web/dist-demo/
diff --git a/README.md b/README.md
index 75551ad..607cd6d 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 Raidy is a raid scheduling project for Discord statics: the web console is where everyone plans, and Discord carries the announcements. One Go process runs the Discord bot, web API, scheduler, and production web assets, backed by PostgreSQL.
 
-**Status:** `v0.0.15` is an early development snapshot.
+**Status:** `v0.0.16` is an early development snapshot.
 
 ```text
 backend/     Go service, Discord interactions, web API, PostgreSQL migrations
diff --git a/web/e2e/demo.spec.ts b/web/e2e/demo.spec.ts
new file mode 100644
index 0000000..de1959a
--- /dev/null
+++ b/web/e2e/demo.spec.ts
@@ -0,0 +1,68 @@
+import { expect, test, type Page } from "@playwright/test";
+
+// Monday 09:00 in Tokyo: this week's raids are Wed 4, Thu 5 and Fri 6.
+const monday = new Date("2026-11-02T00:00:00Z");
+
+async function openDemo(page: Page) {
+  const requests: string[] = [];
+  // The demo must never reach a server.
+  await page.route("**/api/**", (route) => {
+    requests.push(route.request().url());
+    return route.abort();
+  });
+  await page.clock.setFixedTime(monday);
+  await page.goto("/demo/");
+  await expect(page.getByRole("table", { name: /availability/i })).toBeVisible();
+  return requests;
+}
+
+const counts = (page: Page) => page.getByTestId("available-count");
+
+test("opens signed in on sample data without any server", async ({ page }) => {
+  const requests = await openDemo(page);
+  await expect(page.getByRole("note")).toContainText("Sample data");
+  await expect(page.getByRole("link", { name: "Sign in with Discord" })).toHaveCount(0);
+  const grid = page.getByRole("table", { name: /availability/i });
+  await expect(grid.getByRole("rowheader").first()).toContainText("You");
+  await expect(counts(page)).toHaveText(["8/8 — everyone is available", "7/8", "5/8"]);
+  await expect(page).toHaveURL(/\/demo\/\?team=1$/);
+  expect(requests).toEqual([]);
+});
+
+test("a vote updates the counts and flags the confirmed date", async ({ page }) => {
+  await openDemo(page);
+  await page.getByRole("button", { name: "Edit my availability" }).click();
+  await page.getByRole("button", { name: "Available on Wed 4" }).click();
+  await page.getByRole("button", { name: "Save availability" }).click();
+  await expect(page.getByText("Availability saved")).toBeVisible();
+  await expect(counts(page).first()).toHaveText("7/8");
+  await expect(page.getByText("Needs attention")).toBeVisible();
+});
+
+test("the leader cancels a date", async ({ page }) => {
+  await openDemo(page);
+  await page.getByRole("button", { name: "Actions for Fri 6" }).click();
+  await page.getByRole("button", { name: "Cancel date" }).click();
+  await expect(page.getByText("Cancelled", { exact: true })).toBeVisible();
+});
+
+test("a new raid time moves the open week's dates", async ({ page }) => {
+  await openDemo(page);
+  await page.getByRole("button", { name: "Schedule" }).click();
+  await page.getByRole("combobox", { name: "Start time" }).click();
+  await page.getByRole("option", { name: "20:00" }).click();
+  await page.getByRole("button", { name: "Save schedule" }).click();
+  await expect(page.getByText("Schedule saved")).toBeVisible();
+  await page.getByRole("button", { name: "Availability" }).click();
+  await expect(page.getByRole("columnheader").nth(1)).toContainText("20:00");
+});
+
+test("reloading starts over from the sample data", async ({ page }) => {
+  await openDemo(page);
+  await page.getByRole("button", { name: "Actions for Fri 6" }).click();
+  await page.getByRole("button", { name: "Cancel date" }).click();
+  await expect(page.getByText("Cancelled", { exact: true })).toBeVisible();
+  await page.reload();
+  await expect(counts(page)).toHaveText(["8/8 — everyone is available", "7/8", "5/8"]);
+  await expect(page.getByText("Cancelled", { exact: true })).toHaveCount(0);
+});
diff --git a/web/index.html b/web/index.html
index 85a9a5b..a2c12ed 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#fafaf9" />
     <meta name="description" content="Raidy static-team scheduling for Discord" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>Raidy</title>
     <script>
       (() => {
diff --git a/web/package-lock.json b/web/package-lock.json
index bc8ff71..04b1bc3 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "raidy-web",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "raidy-web",
-      "version": "0.0.15",
+      "version": "0.0.16",
       "dependencies": {
         "@fontsource-variable/geist": "^5.3.0",
         "@fontsource-variable/geist-mono": "^5.3.0",
diff --git a/web/package.json b/web/package.json
index fd7b93b..52d962b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "raidy-web",
   "private": true,
-  "version": "0.0.15",
+  "version": "0.0.16",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,7 +9,8 @@
     "check": "tsc -b --pretty false",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "build:demo": "tsc -b && vite build --mode demo --base /demo/ --outDir dist-demo"
   },
   "dependencies": {
     "@fontsource-variable/geist": "^5.3.0",
diff --git a/web/playwright.config.ts b/web/playwright.config.ts
index c116d33..25f93f6 100644
--- a/web/playwright.config.ts
+++ b/web/playwright.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
 const port = 5179;
+const demoPort = 5180;
 
 export default defineConfig({
   testDir: "e2e",
@@ -14,12 +15,25 @@ export default defineConfig({
     launchOptions: { executablePath: process.env.PLAYWRIGHT_CHROMIUM_PATH || undefined }
   },
   projects: [
-    { name: "desktop", use: { ...devices["Desktop Chrome"] } },
-    { name: "mobile", use: { ...devices["Pixel 7"] } }
+    { name: "desktop", testIgnore: "demo.spec.ts", use: { ...devices["Desktop Chrome"] } },
+    { name: "mobile", testIgnore: "demo.spec.ts", use: { ...devices["Pixel 7"] } },
+    // The demo build runs the real app against in-browser sample data.
+    {
+      name: "demo",
+      testMatch: "demo.spec.ts",
+      use: { ...devices["Desktop Chrome"], baseURL: `http://127.0.0.1:${demoPort}` }
+    }
   ],
-  webServer: {
-    command: `npx vite --host 127.0.0.1 --port ${port} --strictPort`,
-    url: `http://127.0.0.1:${port}`,
-    reuseExistingServer: !process.env.CI
-  }
+  webServer: [
+    {
+      command: `npx vite --host 127.0.0.1 --port ${port} --strictPort`,
+      url: `http://127.0.0.1:${port}`,
+      reuseExistingServer: !process.env.CI
+    },
+    {
+      command: `npx vite --mode demo --base /demo/ --host 127.0.0.1 --port ${demoPort} --strictPort`,
+      url: `http://127.0.0.1:${demoPort}/demo/`,
+      reuseExistingServer: !process.env.CI
+    }
+  ]
 });
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
new file mode 100644
index 0000000..d217777
--- /dev/null
+++ b/web/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#0f6e66"/><path d="M11 24V13.5h3.1v1.9c.5-1.3 1.7-2.1 3.3-2.1.5 0 .9 0 1.3.2v2.9a4 4 0 0 0-1.5-.3c-1.9 0-3 1.2-3 3.4V24z" fill="#fff"/><rect x="20" y="20.6" width="3.4" height="3.4" rx="1" fill="#9be3d9"/></svg>
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 391f8b8..470fb83 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -10,6 +10,7 @@ import { Overview } from "@/features/overview/overview";
 import { SchedulePanel } from "@/features/schedule/schedule-panel";
 import { TeamPanel } from "@/features/team/team-panel";
 import { message } from "@/lib/format";
+import { isDemo, teamURL } from "@/lib/paths";
 import { applyTheme, type Theme, type ThemePreference } from "@/lib/theme";
 import { cn } from "@/lib/utils";
 
@@ -47,7 +48,7 @@ export default function App() {
     const wanted = preferred || teamID || fromURL;
     const selected = values.find((team) => team.id === wanted)?.id ?? values[0]?.id ?? null;
     setTeamID(selected);
-    if (selected) history.replaceState(null, "", `/app?team=${selected}`);
+    if (selected) history.replaceState(null, "", teamURL(selected));
   }
 
   useEffect(() => {
@@ -85,7 +86,7 @@ export default function App() {
     setTeamID(id);
     setCreating(false);
     setTab("overview");
-    history.replaceState(null, "", `/app?team=${id}`);
+    history.replaceState(null, "", teamURL(id));
   }
 
   async function changed(id?: number) {
@@ -122,6 +123,7 @@ export default function App() {
 
   return (
     <div className="min-h-screen">
+      {isDemo && <DemoBanner />}
       <header className="border-b bg-background">
         <div className="mx-auto flex h-14 max-w-6xl items-center gap-2 px-4 sm:px-6">
           <Wordmark className="text-base" />
@@ -222,6 +224,22 @@ export default function App() {
   );
 }
 
+function DemoBanner() {
+  return (
+    <div className="border-b bg-primary/10 text-sm" role="note">
+      <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-4 gap-y-1 px-4 py-2 sm:px-6">
+        <span>
+          <span className="font-medium">Demo</span>
+          <span className="text-muted-foreground"> · Sample data. Changes reset when you reload.</span>
+        </span>
+        <a href="/" className="font-medium text-primary underline-offset-4 hover:underline">
+          About Raidy
+        </a>
+      </div>
+    </div>
+  );
+}
+
 function NoServers({ inviteUrl }: { inviteUrl: string }) {
   return (
     <div className="max-w-lg">
diff --git a/web/src/api.ts b/web/src/api.ts
index 6c5f04b..5e4b548 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -1,3 +1,5 @@
+import { isDemo } from "@/lib/paths";
+
 export class ApiError extends Error {
   constructor(
     public status: number,
@@ -8,6 +10,11 @@ export class ApiError extends Error {
 }
 
 export async function api<T>(path: string, options: RequestInit = {}): Promise<T | null> {
+  if (isDemo) {
+    // The demo runs entirely in the browser against sample data.
+    const { demoApi } = await import("./demo/backend");
+    return (await demoApi(path, options)) as T | null;
+  }
   const headers = new Headers(options.headers);
   if (options.body) headers.set("Content-Type", "application/json");
   let response: Response;
diff --git a/web/src/demo/backend.ts b/web/src/demo/backend.ts
new file mode 100644
index 0000000..ad945a1
--- /dev/null
+++ b/web/src/demo/backend.ts
@@ -0,0 +1,371 @@
+import { ApiError, type Occurrence, type Poll, type Schedule, type Team } from "@/api";
+import {
+  createState,
+  type DemoOccurrence,
+  type DemoPoll,
+  type DemoSchedule,
+  type DemoState,
+  type DemoTeam
+} from "./data";
+import { addDays, localDate, raidTimes, weekday } from "./time";
+
+/**
+ * An in-browser stand-in for the Raidy API, so the real web app runs as a
+ * demo with no server. It follows the server's rules closely enough that the
+ * app behaves the same; state resets on reload.
+ */
+let state: DemoState = createState();
+
+const rosterLimit = 8;
+
+export async function demoApi(path: string, options: RequestInit = {}): Promise<unknown> {
+  await new Promise((resolve) => setTimeout(resolve, 150 + Math.random() * 150));
+  const method = (options.method ?? "GET").toUpperCase();
+  const url = new URL(path, "http://demo");
+  const body = typeof options.body === "string" ? JSON.parse(options.body) : {};
+  const parts = url.pathname.split("/").filter(Boolean).slice(1);
+  const pattern = parts.map((part, index) =>
+    /^\d+$/.test(part) ? ":id" : parts[0] === "guilds" && index === 1 ? ":guild" : part
+  );
+  const route = `${method} /${pattern.join("/")}`;
+  const id = Number(parts.find((part) => /^\d+$/.test(part)));
+
+  switch (route) {
+    case "GET /config":
+      return { inviteUrl: "" };
+    case "GET /auth/me":
+      return state.user;
+    case "POST /auth/logout":
+      return null;
+    case "GET /guilds":
+      return state.guilds;
+    case "GET /guilds/:guild/members": {
+      const query = (url.searchParams.get("q") ?? "").toLowerCase();
+      return state.people.filter((person) => person.name.toLowerCase().includes(query));
+    }
+    case "GET /guilds/:guild/channels":
+      return state.channels;
+    case "GET /teams":
+      return state.teams.map(teamJSON);
+    case "POST /teams":
+      return createTeam(body);
+    case "PATCH /teams/:id":
+      return updateTeam(leaderTeam(id), body);
+    case "DELETE /teams/:id":
+      return deleteTeam(leaderTeam(id));
+    case "GET /teams/:id/schedule": {
+      const saved = state.schedules[team(id).id];
+      return saved ? scheduleJSON(team(id), saved) : null;
+    }
+    case "PUT /teams/:id/schedule":
+      return saveSchedule(leaderTeam(id), body);
+    case "POST /teams/:id/schedule/preview":
+      return previewSchedule(leaderTeam(id), body);
+    case "POST /teams/:id/schedule/enabled":
+      scheduleFor(leaderTeam(id)).enabled = Boolean(body.enabled);
+      return null;
+    case "POST /teams/:id/publish":
+      return publish(leaderTeam(id));
+    case "POST /teams/:id/republish":
+      leaderTeam(id);
+      return null;
+    case "GET /teams/:id/polls":
+      return openPolls(team(id)).map(pollJSON);
+    case "POST /occurrences/:id/status":
+      return setStatus(id, body.action);
+    case "PUT /polls/:id/availability":
+      return setAvailability(id, body.available);
+    default:
+      throw new ApiError(404, "Not found");
+  }
+}
+
+function team(id: number) {
+  const value = state.teams.find((candidate) => candidate.id === id);
+  if (!value) throw new ApiError(404, "Team not found");
+  return value;
+}
+
+function leaderTeam(id: number) {
+  const value = team(id);
+  if (value.leaderId !== state.user.id) throw new ApiError(403, "Only the team leader can do that");
+  return value;
+}
+
+function member(id: string) {
+  return state.people.find((person) => person.id === id) ?? { id, name: "Former member" };
+}
+
+function teamJSON(value: DemoTeam): Team {
+  return {
+    id: value.id,
+    guildId: value.guildId,
+    guildName: state.guilds.find((guild) => guild.id === value.guildId)?.name ?? "",
+    name: value.name,
+    timezone: value.timezone,
+    leaderId: value.leaderId,
+    isLeader: value.leaderId === state.user.id,
+    members: value.memberIds.map(member)
+  };
+}
+
+function roster(memberIds: unknown): string[] {
+  const ids = [state.user.id, ...(Array.isArray(memberIds) ? memberIds.map(String) : [])];
+  const unique = [...new Set(ids)];
+  if (unique.length > rosterLimit) throw new ApiError(400, `a team can have at most ${rosterLimit} members`);
+  return unique;
+}
+
+function teamName(name: unknown, guildId: string, except?: number) {
+  const value = String(name ?? "")
+    .trim()
+    .replace(/\s+/g, " ");
+  if (!value) throw new ApiError(400, "team name is required");
+  const taken = state.teams.some(
+    (other) => other.id !== except && other.guildId === guildId && other.name.toLowerCase() === value.toLowerCase()
+  );
+  if (taken) throw new ApiError(409, "a team with this name already exists in this server");
+  return value;
+}
+
+function createTeam(body: { guildId?: string; name?: string; timezone?: string; memberIds?: string[] }) {
+  const guildId = body.guildId ?? "g1";
+  const value: DemoTeam = {
+    id: state.nextID++,
+    guildId,
+    name: teamName(body.name, guildId),
+    timezone: body.timezone || "UTC",
+    leaderId: state.user.id,
+    memberIds: roster(body.memberIds)
+  };
+  state.teams.push(value);
+  return teamJSON(value);
+}
+
+function updateTeam(value: DemoTeam, body: { name?: string; memberIds?: string[] }) {
+  value.name = teamName(body.name, value.guildId, value.id);
+  value.memberIds = roster(body.memberIds);
+  // Open periods follow the roster: newcomers start unanswered, leavers' votes go.
+  for (const poll of openPolls(value)) {
+    for (const occurrence of poll.occurrences) {
+      for (const memberId of Object.keys(occurrence.votes)) {
+        if (!value.memberIds.includes(memberId)) delete occurrence.votes[memberId];
+      }
+    }
+    refreshStatuses(poll, value);
+  }
+  return teamJSON(value);
+}
+
+function deleteTeam(value: DemoTeam) {
+  state.teams = state.teams.filter((other) => other.id !== value.id);
+  state.polls = state.polls.filter((poll) => poll.teamId !== value.id);
+  delete state.schedules[value.id];
+  return null;
+}
+
+function scheduleFor(value: DemoTeam) {
+  const saved = state.schedules[value.id];
+  if (!saved) throw new ApiError(404, "This team has no schedule yet");
+  return saved;
+}
+
+function occurrencesFor(value: DemoTeam, schedule: DemoSchedule, periodStart: string) {
+  const result: { startsAt: string; endsAt: string }[] = [];
+  for (let day = 0; day < schedule.cadenceDays; day++) {
+    const date = addDays(periodStart, day);
+    if (schedule.weekdays.includes(weekday(date))) {
+      result.push(raidTimes(date, schedule.startTime, schedule.endTime, value.timezone));
+    }
+  }
+  return result;
+}
+
+function publishAt(value: DemoTeam, schedule: DemoSchedule, periodStart: string) {
+  const first = occurrencesFor(value, schedule, periodStart)[0];
+  const at = new Date(first?.startsAt ?? `${periodStart}T00:00:00Z`);
+  at.setUTCDate(at.getUTCDate() - schedule.publishLeadDays);
+  return at.toISOString();
+}
+
+function scheduleJSON(value: DemoTeam, schedule: DemoSchedule): Schedule {
+  return {
+    timezone: value.timezone,
+    cadenceDays: schedule.cadenceDays,
+    weekdays: schedule.weekdays,
+    startTime: schedule.startTime,
+    endTime: schedule.endTime,
+    publishLeadDays: schedule.publishLeadDays,
+    firstPeriodStart: schedule.firstPeriodStart,
+    nextPublishAt: publishAt(value, schedule, schedule.firstPeriodStart),
+    channelId: schedule.channelId,
+    channelName: state.channels.find((channel) => channel.id === schedule.channelId)?.name ?? "",
+    enabled: schedule.enabled
+  };
+}
+
+type ScheduleInput = Omit<DemoSchedule, "enabled"> & { timezone: string };
+
+function scheduleInput(value: DemoTeam, body: Partial<ScheduleInput>) {
+  const timezone = body.timezone || value.timezone;
+  const input: DemoSchedule = {
+    cadenceDays: Number(body.cadenceDays),
+    weekdays: [...new Set((body.weekdays ?? []).map(Number))].sort(),
+    startTime: String(body.startTime ?? ""),
+    endTime: String(body.endTime ?? ""),
+    publishLeadDays: Number(body.publishLeadDays) || 3,
+    firstPeriodStart: String(body.firstPeriodStart ?? ""),
+    channelId: String(body.channelId ?? ""),
+    enabled: true
+  };
+  if (input.cadenceDays !== 7 && input.cadenceDays !== 14)
+    throw new ApiError(400, "cadence must be weekly or biweekly");
+  if (input.weekdays.length === 0) throw new ApiError(400, "select at least one weekday");
+  if (!/^\d{2}:\d{2}$/.test(input.startTime) || !/^\d{2}:\d{2}$/.test(input.endTime)) {
+    throw new ApiError(400, "choose a start and end time");
+  }
+  if (input.startTime === input.endTime) throw new ApiError(400, "start and end time must differ");
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(input.firstPeriodStart)) throw new ApiError(400, "choose a valid first period date");
+  if (input.firstPeriodStart < localDate(new Date(), timezone)) {
+    throw new ApiError(400, "first period date cannot be in the past");
+  }
+  if (!state.channels.some((channel) => channel.id === input.channelId)) throw new ApiError(400, "choose a channel");
+  return { timezone, input };
+}
+
+function previewSchedule(value: DemoTeam, body: Partial<ScheduleInput>) {
+  const { timezone, input } = scheduleInput(value, body);
+  const draft = { ...value, timezone };
+  return {
+    ...scheduleJSON(draft, input),
+    occurrences: occurrencesFor(draft, input, input.firstPeriodStart).map((times) => ({ ...times, status: "proposed" }))
+  };
+}
+
+function saveSchedule(value: DemoTeam, body: Partial<ScheduleInput>) {
+  const { timezone, input } = scheduleInput(value, body);
+  const previousTimezone = value.timezone;
+  // A new raid time moves upcoming dates in open periods and keeps their
+  // votes; weekday changes start with the next period.
+  for (const poll of openPolls(value)) {
+    for (const occurrence of poll.occurrences) {
+      if (new Date(occurrence.startsAt) <= new Date()) continue;
+      const date = localDate(new Date(occurrence.startsAt), previousTimezone);
+      Object.assign(occurrence, raidTimes(date, input.startTime, input.endTime, timezone));
+    }
+  }
+  value.timezone = timezone;
+  state.schedules[value.id] = { ...input, enabled: state.schedules[value.id]?.enabled ?? true };
+  return scheduleJSON(value, state.schedules[value.id]);
+}
+
+function publish(value: DemoTeam) {
+  const schedule = scheduleFor(value);
+  const today = localDate(new Date(), value.timezone);
+  if (state.polls.some((poll) => poll.teamId === value.id && poll.periodStart >= today)) {
+    throw new ApiError(409, "the next period is already published; use Republish to restore its message");
+  }
+  state.polls.push({
+    id: state.nextID++,
+    teamId: value.id,
+    periodStart: schedule.firstPeriodStart,
+    cadenceDays: schedule.cadenceDays,
+    occurrences: occurrencesFor(value, schedule, schedule.firstPeriodStart).map((times) => ({
+      id: state.nextID++,
+      ...times,
+      status: "proposed",
+      votes: {}
+    }))
+  });
+  schedule.firstPeriodStart = addDays(schedule.firstPeriodStart, schedule.cadenceDays);
+  return null;
+}
+
+function openPolls(value: DemoTeam) {
+  const now = new Date();
+  return state.polls
+    .filter((poll) => poll.teamId === value.id && poll.occurrences.some((o) => new Date(o.startsAt) > now))
+    .sort((a, b) => a.periodStart.localeCompare(b.periodStart));
+}
+
+function pollJSON(poll: DemoPoll): Poll {
+  const value = team(poll.teamId);
+  return {
+    id: poll.id,
+    periodStart: poll.periodStart,
+    periodEnd: addDays(poll.periodStart, poll.cadenceDays - 1),
+    timezone: value.timezone,
+    occurrences: poll.occurrences.map((occurrence): Occurrence => {
+      const votes = value.memberIds.map((memberId) => ({
+        memberId,
+        status: (memberId in occurrence.votes
+          ? occurrence.votes[memberId]
+            ? "available"
+            : "unavailable"
+          : "pending") as "available" | "unavailable" | "pending"
+      }));
+      const count = (status: string) => votes.filter((vote) => vote.status === status).length;
+      return {
+        id: occurrence.id,
+        startsAt: occurrence.startsAt,
+        endsAt: occurrence.endsAt,
+        status: occurrence.status,
+        available: count("available"),
+        unavailable: count("unavailable"),
+        pending: count("pending"),
+        votes
+      };
+    })
+  };
+}
+
+function findOccurrence(id: number) {
+  for (const poll of state.polls) {
+    const occurrence = poll.occurrences.find((value) => value.id === id);
+    if (occurrence) return { poll, occurrence };
+  }
+  throw new ApiError(404, "Raid date not found");
+}
+
+function everyoneAvailable(occurrence: DemoOccurrence, value: DemoTeam) {
+  return value.memberIds.every((memberId) => occurrence.votes[memberId] === true);
+}
+
+/** Confirmed dates turn to Attention required when someone can no longer make it, and back. */
+function refreshStatuses(poll: DemoPoll, value: DemoTeam) {
+  for (const occurrence of poll.occurrences) {
+    if (new Date(occurrence.startsAt) <= new Date()) continue;
+    if (occurrence.status === "confirmed" || occurrence.status === "attention_required") {
+      occurrence.status = everyoneAvailable(occurrence, value) ? "confirmed" : "attention_required";
+    }
+  }
+}
+
+function setStatus(id: number, action: string) {
+  const { poll, occurrence } = findOccurrence(id);
+  const value = leaderTeam(poll.teamId);
+  if (new Date(occurrence.startsAt) <= new Date()) {
+    throw new ApiError(409, "this raid date has already started or its timetable has closed");
+  }
+  const next = { confirm: "", cancel: "cancelled", reopen: "proposed" }[action];
+  if (next === undefined) throw new ApiError(400, "invalid occurrence action");
+  occurrence.status = next || (everyoneAvailable(occurrence, value) ? "confirmed" : "attention_required");
+  return null;
+}
+
+function setAvailability(pollID: number, available: unknown) {
+  const poll = state.polls.find((value) => value.id === pollID);
+  if (!poll) throw new ApiError(404, "Timetable not found");
+  const value = team(poll.teamId);
+  if (!value.memberIds.includes(state.user.id)) throw new ApiError(403, "You are not on this team");
+  if (!Array.isArray(available)) throw new ApiError(400, "available must be a list of raid dates");
+  const wanted = new Set(available.map(Number));
+  const upcoming = poll.occurrences.filter((occurrence) => new Date(occurrence.startsAt) > new Date());
+  if (upcoming.length === 0) throw new ApiError(409, "this raid date has already started or its timetable has closed");
+  if ([...wanted].some((id) => !upcoming.some((occurrence) => occurrence.id === id))) {
+    throw new ApiError(400, "invalid occurrence");
+  }
+  for (const occurrence of upcoming) occurrence.votes[state.user.id] = wanted.has(occurrence.id);
+  refreshStatuses(poll, value);
+  return null;
+}
diff --git a/web/src/demo/data.ts b/web/src/demo/data.ts
new file mode 100644
index 0000000..b5b35a0
--- /dev/null
+++ b/web/src/demo/data.ts
@@ -0,0 +1,138 @@
+import { type Channel, type Guild, type Member, type User } from "@/api";
+import { addDays, localDate, raidTimes, weekday } from "./time";
+
+export type DemoOccurrence = {
+  id: number;
+  startsAt: string;
+  endsAt: string;
+  status: string;
+  /** Member ID to whether they can attend; missing means no answer yet. */
+  votes: Record<string, boolean>;
+};
+export type DemoPoll = {
+  id: number;
+  teamId: number;
+  periodStart: string;
+  cadenceDays: number;
+  occurrences: DemoOccurrence[];
+};
+export type DemoTeam = {
+  id: number;
+  guildId: string;
+  name: string;
+  timezone: string;
+  leaderId: string;
+  memberIds: string[];
+};
+export type DemoSchedule = {
+  cadenceDays: number;
+  weekdays: number[];
+  startTime: string;
+  endTime: string;
+  publishLeadDays: number;
+  firstPeriodStart: string;
+  channelId: string;
+  enabled: boolean;
+};
+export type DemoState = {
+  user: User;
+  guilds: Guild[];
+  people: Member[];
+  channels: Channel[];
+  teams: DemoTeam[];
+  schedules: Record<number, DemoSchedule>;
+  polls: DemoPoll[];
+  nextID: number;
+};
+
+const people: Member[] = [
+  "Alisaie",
+  "Estinien",
+  "G'raha",
+  "Thancred",
+  "Urianger",
+  "Y'shtola",
+  "Alphinaud",
+  "Krile",
+  "Tataru",
+  "Lyse",
+  "Aymeric",
+  "Hien",
+  "Lucia",
+  "Wuk Lamat"
+].map((name, index) => ({ id: `u${index}`, name }));
+
+/** Votes per raid night, as the indexes of members who can and can't make it. */
+const answers: { yes: number[]; no: number[] }[][] = [
+  [
+    { yes: [0, 1, 2, 3, 4, 5, 6, 7], no: [] },
+    { yes: [0, 1, 2, 3, 4, 5, 6], no: [7] },
+    { yes: [0, 1, 2, 3, 5], no: [4] }
+  ],
+  [
+    { yes: [1, 2, 5], no: [] },
+    { yes: [1, 3], no: [6] },
+    { yes: [2], no: [1] }
+  ]
+];
+
+/**
+ * Sample static in Tokyo with this week's voting open and next week's opened
+ * early. Dates follow today, so the demo never looks stale.
+ */
+export function createState(now = new Date()): DemoState {
+  const timezone = "Asia/Tokyo";
+  const schedule: DemoSchedule = {
+    cadenceDays: 7,
+    weekdays: [3, 4, 5],
+    startTime: "21:00",
+    endTime: "23:00",
+    publishLeadDays: 3,
+    firstPeriodStart: "",
+    channelId: "c1",
+    enabled: true
+  };
+  const today = localDate(now, timezone);
+  let monday = addDays(today, -((weekday(today) + 6) % 7));
+  // Once Friday's raid has started, this week is over; show next week instead.
+  if (new Date(raidTimes(addDays(monday, 4), schedule.startTime, schedule.endTime, timezone).startsAt) <= now) {
+    monday = addDays(monday, 7);
+  }
+  let nextID = 100;
+  const memberIds = people.slice(0, 8).map((person) => person.id);
+  const polls = answers.map((week, index): DemoPoll => {
+    const periodStart = addDays(monday, index * 7);
+    return {
+      id: nextID++,
+      teamId: 1,
+      periodStart,
+      cadenceDays: 7,
+      occurrences: week.map((answer, day) => {
+        const votes: Record<string, boolean> = {};
+        for (const member of answer.yes) votes[memberIds[member]] = true;
+        for (const member of answer.no) votes[memberIds[member]] = false;
+        return {
+          id: nextID++,
+          ...raidTimes(addDays(periodStart, 2 + day), schedule.startTime, schedule.endTime, timezone),
+          status: index === 0 && day === 0 ? "confirmed" : "proposed",
+          votes
+        };
+      })
+    };
+  });
+  schedule.firstPeriodStart = addDays(monday, 14);
+  return {
+    user: { id: "u0", username: "alisaie", globalName: "Alisaie", avatar: "" },
+    guilds: [{ id: "g1", name: "Scions of the Seventh Dawn", icon: "" }],
+    people,
+    channels: [
+      { id: "c1", name: "raid-schedule" },
+      { id: "c2", name: "general" },
+      { id: "c3", name: "announcements" }
+    ],
+    teams: [{ id: 1, guildId: "g1", name: "The Echo", timezone, leaderId: "u0", memberIds }],
+    schedules: { 1: schedule },
+    polls,
+    nextID
+  };
+}
diff --git a/web/src/demo/time.ts b/web/src/demo/time.ts
new file mode 100644
index 0000000..849a85b
--- /dev/null
+++ b/web/src/demo/time.ts
@@ -0,0 +1,52 @@
+/** Date helpers for the demo backend. Dates are "YYYY-MM-DD" in a team's timezone. */
+
+export function localDate(at: Date, timezone: string) {
+  return new Intl.DateTimeFormat("en-CA", { timeZone: timezone }).format(at);
+}
+
+export function addDays(date: string, days: number) {
+  const value = new Date(`${date}T00:00:00Z`);
+  value.setUTCDate(value.getUTCDate() + days);
+  return value.toISOString().slice(0, 10);
+}
+
+export function weekday(date: string) {
+  return new Date(`${date}T00:00:00Z`).getUTCDay();
+}
+
+function offsetMinutes(at: number, timezone: string) {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone: timezone,
+    hourCycle: "h23",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).formatToParts(at);
+  const part = (type: string) => Number(parts.find((value) => value.type === type)?.value);
+  const wall = Date.UTC(part("year"), part("month") - 1, part("day"), part("hour"), part("minute"));
+  return Math.round((wall - Math.floor(at / 60_000) * 60_000) / 60_000);
+}
+
+/** The instant a wall-clock time occurs on a local date. */
+export function zoned(date: string, minutes: number, timezone: string) {
+  const [year, month, day] = date.split("-").map(Number);
+  const wall = Date.UTC(year, month - 1, day, 0, minutes);
+  let instant = wall - offsetMinutes(wall, timezone) * 60_000;
+  instant = wall - offsetMinutes(instant, timezone) * 60_000;
+  return new Date(instant);
+}
+
+export function minutes(clock: string) {
+  const [hours, mins] = clock.split(":").map(Number);
+  return hours * 60 + mins;
+}
+
+/** A raid's start and end on a local date; an end at or before the start is the next day. */
+export function raidTimes(date: string, startTime: string, endTime: string, timezone: string) {
+  const start = zoned(date, minutes(startTime), timezone);
+  let end = zoned(date, minutes(endTime), timezone);
+  if (end <= start) end = zoned(addDays(date, 1), minutes(endTime), timezone);
+  return { startsAt: start.toISOString(), endsAt: end.toISOString() };
+}
diff --git a/web/src/lib/paths.ts b/web/src/lib/paths.ts
new file mode 100644
index 0000000..1f16715
--- /dev/null
+++ b/web/src/lib/paths.ts
@@ -0,0 +1,7 @@
+/** True in the demo build, which runs the app against in-browser sample data. */
+export const isDemo = import.meta.env.MODE === "demo";
+
+/** The app URL for a team: /app?team=N normally, /demo/?team=N in the demo. */
+export function teamURL(teamID: number) {
+  return `${import.meta.env.BASE_URL}${isDemo ? "" : "app"}?team=${teamID}`;
+}
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />