diff --git a/web/src/app.d.ts b/web/src/app.d.ts
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -8,6 +8,7 @@
 				deliberiUrl: string;
 				sitesDomain: string;
 				moderationServiceDid: string;
+				turnstileSiteKey: string;
 				camoEnabled: boolean;
 			};
 		}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -65,7 +65,9 @@
 	};
 
 	const signedIn = $derived(Boolean(auth.currentUser));
-	const isAuthShell = $derived(page.url.pathname === "/login");
+	const isAuthShell = $derived(
+		page.url.pathname === "/login" || page.url.pathname.startsWith("/signup")
+	);
 	// the welcome flow runs its own steps chrome, so the bar and footer step aside
 	const isWelcomeShell = $derived(page.url.pathname === "/welcome");
 	const isMarketingShell = $derived(
diff --git a/web/src/lib/api/signup.test.ts b/web/src/lib/api/signup.test.ts
new file mode 100644
--- /dev/null
+++ b/web/src/lib/api/signup.test.ts
@@ -0,0 +1,171 @@
+import { describe, expect, it, vi, type Mock } from "vitest";
+import { beginSignup, completeSignup, resendSignup } from "./signup";
+
+const calledInit = (mock: Mock<typeof globalThis.fetch>) => mock.mock.calls[0][1] as RequestInit;
+
+describe("beginSignup", () => {
+	it("posts email and turnstile token to the beginSignup nsid without auth", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(new Response("", { status: 200 }));
+		await beginSignup("https://deliberi.test", "alice@example.com", "turnstile-123", fetchMock);
+
+		expect(fetchMock).toHaveBeenCalledTimes(1);
+		const url = new URL(String(fetchMock.mock.calls[0][0]));
+		expect(url.origin).toBe("https://deliberi.test");
+		expect(url.pathname).toBe("/xrpc/org.tangled.temp.account.beginSignup");
+		expect(calledInit(fetchMock).method).toBe("POST");
+		expect(JSON.parse(String(calledInit(fetchMock).body))).toEqual({
+			email: "alice@example.com",
+			turnstileToken: "turnstile-123"
+		});
+		expect(calledInit(fetchMock).headers).not.toHaveProperty("authorization");
+	});
+
+	it("surfaces the server's error message", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(
+				new Response(JSON.stringify({ error: "EmailAlreadyRegistered", message: "an account already exists for this email" }), {
+					status: 409,
+					headers: { "content-type": "application/json" }
+				})
+			);
+		await expect(
+			beginSignup("https://deliberi.test", "a@b.co", "t", fetchMock)
+		).rejects.toThrow("an account already exists for this email");
+	});
+
+	it("falls back to the status when the body is not an xrpc error", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(new Response("nope", { status: 409 }));
+		await expect(
+			beginSignup("https://deliberi.test", "a@b.co", "t", fetchMock)
+		).rejects.toThrow(/could not begin signup: 409/);
+	});
+});
+
+describe("resendSignup", () => {
+	it("posts the email to the resendSignup nsid without auth", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(new Response("", { status: 200 }));
+		await resendSignup("https://deliberi.test", "alice@example.com", fetchMock);
+
+		expect(fetchMock).toHaveBeenCalledTimes(1);
+		const url = new URL(String(fetchMock.mock.calls[0][0]));
+		expect(url.origin).toBe("https://deliberi.test");
+		expect(url.pathname).toBe("/xrpc/org.tangled.temp.account.resendSignup");
+		expect(calledInit(fetchMock).method).toBe("POST");
+		expect(JSON.parse(String(calledInit(fetchMock).body))).toEqual({
+			email: "alice@example.com"
+		});
+		expect(calledInit(fetchMock).headers).not.toHaveProperty("authorization");
+	});
+
+	it("surfaces the server's message when nothing is pending", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(
+				new Response(JSON.stringify({ error: "NoPendingSignup", message: "there is no pending signup for this email; start again from the signup page" }), {
+					status: 404,
+					headers: { "content-type": "application/json" }
+				})
+			);
+		await expect(resendSignup("https://deliberi.test", "a@b.co", fetchMock)).rejects.toThrow(
+			"there is no pending signup for this email"
+		);
+	});
+});
+
+describe("completeSignup", () => {
+	it("posts token, username, and password and parses did/handle", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(
+				new Response(JSON.stringify({ did: "did:plc:x", handle: "alice.tngl.sh" }), {
+					status: 200,
+					headers: { "content-type": "application/json" }
+				})
+			);
+		const out = await completeSignup(
+			"https://deliberi.test",
+			"tok-123",
+			"alice",
+			"password1234",
+			fetchMock
+		);
+
+		expect(out).toEqual({ did: "did:plc:x", handle: "alice.tngl.sh" });
+		const url = new URL(String(fetchMock.mock.calls[0][0]));
+		expect(url.pathname).toBe("/xrpc/org.tangled.temp.account.completeSignup");
+		expect(calledInit(fetchMock).method).toBe("POST");
+		expect(JSON.parse(String(calledInit(fetchMock).body))).toEqual({
+			token: "tok-123",
+			username: "alice",
+			password: "password1234"
+		});
+		expect(calledInit(fetchMock).headers).not.toHaveProperty("authorization");
+	});
+
+	it("surfaces the server's error message", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(
+				new Response(JSON.stringify({ error: "InvalidCode", message: "invalid or expired verification link" }), {
+					status: 400,
+					headers: { "content-type": "application/json" }
+				})
+			);
+		await expect(
+			completeSignup("https://deliberi.test", "bad", "alice", "password1234", fetchMock)
+		).rejects.toThrow("invalid or expired verification link");
+	});
+
+	it("falls back to the status when the body is not an xrpc error", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(new Response("bad", { status: 400 }));
+		await expect(
+			completeSignup("https://deliberi.test", "bad", "alice", "password1234", fetchMock)
+		).rejects.toThrow(/could not complete signup: 400/);
+	});
+
+	it("surfaces the error code when the payload omits the message", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(
+				new Response(JSON.stringify({ error: "InvalidCode" }), {
+					status: 400,
+					headers: { "content-type": "application/json" }
+				})
+			);
+		await expect(
+			completeSignup("https://deliberi.test", "bad", "alice", "password1234", fetchMock)
+		).rejects.toThrow("InvalidCode");
+	});
+
+	it("rejects a 2xx payload missing the handle", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(
+				new Response(JSON.stringify({ did: "did:plc:x" }), {
+					status: 200,
+					headers: { "content-type": "application/json" }
+				})
+			);
+		await expect(
+			completeSignup("https://deliberi.test", "tok", "alice", "password1234", fetchMock)
+		).rejects.toThrow(/invalid response/);
+	});
+
+	it("rejects an empty 2xx body instead of leaking a parse error", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(new Response("", { status: 200 }));
+		await expect(
+			completeSignup("https://deliberi.test", "tok", "alice", "password1234", fetchMock)
+		).rejects.toThrow(/invalid response/);
+	});
+});
diff --git a/web/src/lib/api/signup.ts b/web/src/lib/api/signup.ts
new file mode 100644
--- /dev/null
+++ b/web/src/lib/api/signup.ts
@@ -0,0 +1,73 @@
+import { buildUrl, toResponseError } from "./_request";
+
+const BEGIN_SIGNUP = "org.tangled.temp.account.beginSignup";
+const RESEND_SIGNUP = "org.tangled.temp.account.resendSignup";
+const COMPLETE_SIGNUP = "org.tangled.temp.account.completeSignup";
+
+const errorMessage = async (response: Response, fallback: string): Promise<string> => {
+	const err = await toResponseError(response);
+	if (err.description) return err.description;
+	// "XRPCError" is toResponseError's sentinel for non-JSON bodies, not a service code
+	if (err.error && err.error !== "XRPCError") return err.error;
+	return fallback;
+};
+
+// open endpoints: no service auth, the turnstile challenge guards beginSignup
+export const beginSignup = async (
+	serviceUrl: string,
+	email: string,
+	turnstileToken: string,
+	fetchFn: typeof globalThis.fetch = fetch
+): Promise<void> => {
+	const response = await fetchFn(buildUrl(serviceUrl, BEGIN_SIGNUP), {
+		method: "POST",
+		headers: { "content-type": "application/json", accept: "application/json" },
+		body: JSON.stringify({ email, turnstileToken })
+	});
+	if (!response.ok) {
+		throw new Error(await errorMessage(response, `could not begin signup: ${response.status}`));
+	}
+};
+
+export const resendSignup = async (
+	serviceUrl: string,
+	email: string,
+	fetchFn: typeof globalThis.fetch = fetch
+): Promise<void> => {
+	const response = await fetchFn(buildUrl(serviceUrl, RESEND_SIGNUP), {
+		method: "POST",
+		headers: { "content-type": "application/json", accept: "application/json" },
+		body: JSON.stringify({ email })
+	});
+	if (!response.ok) {
+		throw new Error(await errorMessage(response, `could not resend signup: ${response.status}`));
+	}
+};
+
+export const completeSignup = async (
+	serviceUrl: string,
+	token: string,
+	username: string,
+	password: string,
+	fetchFn: typeof globalThis.fetch = fetch
+): Promise<{ did: string; handle: string }> => {
+	const response = await fetchFn(buildUrl(serviceUrl, COMPLETE_SIGNUP), {
+		method: "POST",
+		headers: { "content-type": "application/json", accept: "application/json" },
+		body: JSON.stringify({ token, username, password })
+	});
+	if (!response.ok) {
+		throw new Error(
+			await errorMessage(response, `could not complete signup: ${response.status}`)
+		);
+	}
+	// a successful signup must return both fields; anything else is a broken
+	// response, and the pages must not render "Account created" for it
+	const body: unknown = await response.json().catch(() => null);
+	const did = (body as { did?: unknown } | null)?.did;
+	const handle = (body as { handle?: unknown } | null)?.handle;
+	if (typeof did !== "string" || typeof handle !== "string") {
+		throw new Error("could not complete signup: the service returned an invalid response");
+	}
+	return { did, handle };
+};
diff --git a/web/src/lib/server/config.ts b/web/src/lib/server/config.ts
--- a/web/src/lib/server/config.ts
+++ b/web/src/lib/server/config.ts
@@ -18,6 +18,7 @@
 	camoSecret: string;
 	avatarSecret: string;
 	moderationServiceDid: string;
+	turnstileSiteKey: string;
 };
 
 export type PublicWebConfig = Pick<
@@ -28,6 +29,7 @@
 	| "deliberiUrl"
 	| "sitesDomain"
 	| "moderationServiceDid"
+	| "turnstileSiteKey"
 > & {
 	/** camo has a secret, so markup can route images through it */
 	camoEnabled: boolean;
@@ -46,6 +48,7 @@
 	AVATAR_URL?: string;
 	AVATAR_SHARED_SECRET?: string;
 	MODERATION_SERVICE_DID?: string;
+	TURNSTILE_SITE_KEY?: string;
 };
 
 export const resolveConfig = (values: WebConfigEnv): WebConfig => ({
@@ -58,7 +61,8 @@
 	avatarUrl: cleanUrl(values.AVATAR_URL, "https://avatar.tangled.sh"),
 	camoSecret: values.CAMO_SHARED_SECRET?.trim() ?? "",
 	avatarSecret: values.AVATAR_SHARED_SECRET?.trim() ?? "",
-	moderationServiceDid: values.MODERATION_SERVICE_DID?.trim() ?? ""
+	moderationServiceDid: values.MODERATION_SERVICE_DID?.trim() ?? "",
+	turnstileSiteKey: values.TURNSTILE_SITE_KEY?.trim() ?? ""
 });
 
 export const getConfig = (): WebConfig => resolveConfig(env as WebConfigEnv);
@@ -74,6 +78,7 @@
 		deliberiUrl: config.deliberiUrl,
 		sitesDomain: config.sitesDomain,
 		moderationServiceDid: config.moderationServiceDid,
+		turnstileSiteKey: config.turnstileSiteKey,
 		camoEnabled: config.camoSecret !== ""
 	};
 };
diff --git a/web/src/routes/signup/+page.svelte b/web/src/routes/signup/+page.svelte
new file mode 100644
--- /dev/null
+++ b/web/src/routes/signup/+page.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
+	import { beginSignup, resendSignup } from "$lib/api/signup";
+	import { createAction } from "$lib/action.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Turnstile from "$lib/components/ui/Turnstile.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+
+	const appPath = (path: string) => resolve(path as "/");
+	const deliberiUrl = $derived(page.data.publicConfig?.deliberiUrl as string | undefined);
+	const turnstileSiteKey = $derived(
+		page.data.publicConfig?.turnstileSiteKey as string | undefined
+	);
+
+	// MarketingHome's legacy form GETs /signup?id=email; pre-fill from it
+	let email = $state(page.url.searchParams.get("id") ?? "");
+	// check the raw value: native type=email rejects padded input too, so the
+	// gate cannot trim where the browser won't
+	const valid = $derived(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email));
+	let turnstileToken = $state("");
+	let sent = $state(false);
+	let resent = $state(false);
+	// snapshot at submit: the field can change while the request is in flight
+	let sentEmail = $state("");
+
+	const submit = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
+		const url = deliberiUrl;
+		const token = turnstileToken;
+		if (!url) throw new Error("Signup is not available right now.");
+		if (!token) throw new Error("Complete the verification challenge first.");
+		const target = email.trim();
+		await beginSignup(url, target, token);
+		sentEmail = target;
+		sent = true;
+	});
+
+	const resend = createAction(async () => {
+		const url = deliberiUrl;
+		if (!url) throw new Error("Signup is not available right now.");
+		await resendSignup(url, sentEmail);
+		resent = true;
+	});
+</script>
+
+<svelte:head>
+	<title>Sign up &middot; Tangled</title>
+</svelte:head>
+
+<section class="w-full max-w-md">
+	<div class="mb-4 flex flex-col items-center">
+		<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
+			<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
+		</a>
+		<p class="text-center typography-heading-4 font-normal text-foreground-default italic">
+			tightly-knit social coding.
+		</p>
+	</div>
+
+	{#if sent}
+		<div class="mt-4 flex flex-col gap-2" role="status">
+			<h1 class="typography-heading-2 text-foreground-default">Check your email</h1>
+			<p class="typography-paragraph-regular text-foreground-default">
+				A verification email was sent to <span class="font-medium">{sentEmail}</span>.
+			</p>
+			<p class="typography-paragraph-regular text-foreground-muted">
+				Click the link in it to complete your signup.
+			</p>
+
+			{#if resent}
+				<p class="typography-paragraph-regular text-foreground-success">Email sent again.</p>
+			{:else}
+				<ErrorAlert label={resend.error} class="mt-2" />
+				<button
+					type="button"
+					class="mt-1 self-start text-foreground-default underline disabled:cursor-not-allowed disabled:text-foreground-subtle"
+					disabled={resend.loading}
+					onclick={resend.run}
+				>
+					{resend.loading ? "Resending…" : "Didn't get it? Resend the email"}
+				</button>
+			{/if}
+
+			<Button href={appPath("/")} class="my-2 mt-4 w-full typography-paragraph-large">
+				Back to home
+			</Button>
+		</div>
+	{:else}
+		<form class="mt-4" onsubmit={submit.run}>
+			<div class="flex flex-col">
+				<label
+					for="signup-email"
+					class="py-2 typography-paragraph-small text-foreground-default"
+				>
+					Email
+				</label>
+				<Input
+					id="signup-email"
+					type="email"
+					size="large"
+					bind:value={email}
+					placeholder="you@example.com"
+					autocomplete="email"
+					required
+					disabled={submit.loading}
+					error={!!submit.error}
+					class="w-full"
+				/>
+				<p class="mt-1 typography-paragraph-small text-foreground-subtle">
+					We'll email you a link to pick your username and password.
+				</p>
+			</div>
+
+			{#if turnstileSiteKey}
+				<div class="mt-4">
+					<Turnstile
+						siteKey={turnstileSiteKey}
+						onToken={(token) => (turnstileToken = token)}
+						onExpire={() => (turnstileToken = "")}
+					/>
+				</div>
+			{:else}
+				<p class="mt-4 typography-paragraph-small text-foreground-danger" role="alert">
+					Signup is temporarily unavailable — the verification service is not configured.
+				</p>
+			{/if}
+
+			{#if submit.error}
+				<ErrorAlert label={submit.error} class="mt-4" />
+			{/if}
+
+			<Button
+				type="submit"
+				loading={submit.loading}
+				disabled={!valid || !turnstileToken}
+				spinnerClass="size-4"
+				aria-label={submit.loading ? "Signing up" : undefined}
+				class="my-2 mt-6 w-full typography-paragraph-large disabled:opacity-100"
+			>
+				Sign up
+			</Button>
+		</form>
+
+		<p class="typography-paragraph-small text-foreground-subtle">
+			Already have an account?
+			<a href={appPath("/login")} class="text-foreground-default underline">Log in</a>
+		</p>
+	{/if}
+</section>
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -21,6 +21,8 @@
 		iconLeft?: Component<SvelteHTMLElements["svg"]>;
 		iconRight?: Component<SvelteHTMLElements["svg"]>;
 		suffix?: string;
+		/** classes for the suffix element; override the default muted text, e.g. a gray chip */
+		suffixClass?: string;
 		element?: HTMLInputElement;
 		class?: string;
 		/** Turn the field into a token editor: it still takes a draft, but what's committed lands
@@ -64,6 +66,7 @@
 		iconLeft,
 		iconRight,
 		suffix,
+		suffixClass,
 		element = $bindable(),
 		class: className,
 		rich = false,
@@ -133,7 +136,7 @@
 			{...rest}
 		/>
 		{#if suffix}
-			<span class="shrink-0 text-foreground-muted select-none">{suffix}</span>
+			<span class="shrink-0 select-none {suffixClass ?? 'text-foreground-muted'}">{suffix}</span>
 		{/if}
 		{#if loading}
 			<Spinner class="{iconSize} shrink-0" />
diff --git a/web/src/lib/components/ui/Turnstile.svelte b/web/src/lib/components/ui/Turnstile.svelte
new file mode 100644
--- /dev/null
+++ b/web/src/lib/components/ui/Turnstile.svelte
@@ -0,0 +1,92 @@
+<!-- One explicit-render script per session; mounts share its load promise so
+     concurrent instances can't clobber each other's onload. -->
+<script module lang="ts">
+	// turnstile ships no typings; this is the surface we use
+	declare global {
+		interface Window {
+			turnstile?: {
+				render: (
+					container: HTMLElement,
+					options: {
+						sitekey: string;
+						callback: (token: string) => void;
+						"expired-callback"?: () => void;
+						"error-callback"?: () => void;
+					}
+				) => string;
+				remove: (widgetId: string) => void;
+			};
+		}
+	}
+
+	let script: HTMLScriptElement | undefined;
+	let loadPromise: Promise<void> | undefined;
+
+	const ensureLoaded = (): Promise<void> => {
+		if (window.turnstile) return Promise.resolve();
+		if (loadPromise) return loadPromise;
+		script = document.createElement("script");
+		script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+		script.async = true;
+		loadPromise = new Promise<void>((resolve, reject) => {
+			script!.addEventListener("load", () => resolve());
+			script!.addEventListener("error", () => reject(new Error("turnstile script failed to load")));
+		});
+		document.head.appendChild(script);
+		return loadPromise;
+	};
+</script>
+
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	interface Props {
+		siteKey: string;
+		onToken: (token: string) => void;
+		/** called when an issued token expires or the challenge errors — the holder must drop it */
+		onExpire?: () => void;
+	}
+
+	let { siteKey, onToken, onExpire }: Props = $props();
+
+	let container = $state<HTMLDivElement>();
+	let widgetId: string | undefined;
+	let failed = $state(false);
+
+	onMount(() => {
+		let cancelled = false;
+		ensureLoaded()
+			.then(() => {
+				if (cancelled) return;
+				const el = container;
+				const api = window.turnstile;
+				if (!el || !api) return;
+				try {
+					widgetId = api.render(el, {
+						sitekey: siteKey,
+						callback: onToken,
+						"expired-callback": () => onExpire?.(),
+						"error-callback": () => onExpire?.()
+					});
+				} catch {
+					failed = true;
+				}
+			})
+			.catch(() => {
+				if (!cancelled) failed = true;
+			});
+
+		return () => {
+			cancelled = true;
+			if (widgetId) window.turnstile?.remove(widgetId);
+		};
+	});
+</script>
+
+{#if failed}
+	<p class="typography-paragraph-small text-foreground-danger" role="alert">
+		Couldn't load the verification widget. Check your connection and try refreshing.
+	</p>
+{:else}
+	<div bind:this={container} class="min-h-16"></div>
+{/if}
diff --git a/web/src/routes/signup/verify/+page.svelte b/web/src/routes/signup/verify/+page.svelte
new file mode 100644
--- /dev/null
+++ b/web/src/routes/signup/verify/+page.svelte
@@ -0,0 +1,172 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
+	import { completeSignup } from "$lib/api/signup";
+	import { createAction } from "$lib/action.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+
+	const appPath = (path: string) => resolve(path as "/");
+
+	const deliberiUrl = $derived(page.data.publicConfig?.deliberiUrl as string | undefined);
+
+	const missingToken = $derived(!page.url.searchParams.get("token"));
+
+	const usernameRegex = /^[a-z0-9]([a-z0-9-]{2,61}[a-z0-9])?$/;
+	let username = $state("");
+	let password = $state("");
+	const valid = $derived(
+		username.length >= 4 &&
+			username.length <= 63 &&
+			usernameRegex.test(username) &&
+			password.length >= 8
+	);
+
+	let done = $state<{ handle: string } | null>(null);
+
+	// same-route SPA navigation across links must not carry an old result
+	const token = $derived(page.url.searchParams.get("token") ?? "");
+	let seenToken: string | null = null;
+	$effect(() => {
+		if (seenToken !== null && token !== seenToken) done = null;
+		seenToken = token;
+	});
+
+	const submit = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
+		const url = deliberiUrl;
+		const submitted = page.url.searchParams.get("token") ?? "";
+		if (!url) throw new Error("Signup is not available right now.");
+		// a same-route navigation to another token mid-request must not let
+		// this response render on (or error) the new token's page
+		const publishing = () => page.url.searchParams.get("token") === submitted;
+		try {
+			const result = await completeSignup(url, submitted, username, password);
+			if (publishing()) done = { handle: result.handle };
+		} catch (cause) {
+			if (publishing()) throw cause;
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Complete signup &middot; Tangled</title>
+</svelte:head>
+
+<section class="w-full max-w-md">
+	<div class="mb-4 flex flex-col items-center">
+		<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
+			<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
+		</a>
+		<p class="text-center typography-heading-4 font-normal text-foreground-default italic">
+			tightly-knit social coding.
+		</p>
+	</div>
+
+	{#if done}
+		<div class="mt-4 flex flex-col gap-2" role="status">
+			<h1 class="typography-heading-2 text-foreground-default">Account created</h1>
+			<p class="typography-paragraph-regular text-foreground-muted">
+				Your handle is <span class="font-medium text-foreground-default">{done.handle}</span>.
+			</p>
+			<p class="typography-paragraph-regular text-foreground-muted">
+				Sign in to get started — you'll just need to enter your password once more.
+			</p>
+			<Button href={appPath("/login")} class="my-2 mt-6 w-full typography-paragraph-large">
+				Sign in
+			</Button>
+		</div>
+	{:else if missingToken}
+		<div class="mt-4 flex flex-col gap-2">
+			<h1 class="typography-heading-2 text-foreground-default">Invalid link</h1>
+			<p class="typography-paragraph-regular text-foreground-muted">
+				This signup link is missing its verification token.
+			</p>
+			<Button href={appPath("/signup")} class="my-2 mt-6 w-full typography-paragraph-large">
+				Get a new link
+			</Button>
+		</div>
+	{:else}
+		<form class="mt-4" onsubmit={submit.run}>
+			<div class="flex flex-col">
+				<label
+					for="signup-username"
+					class="py-2 typography-paragraph-small text-foreground-default"
+				>
+					Username
+				</label>
+				<!-- flush chip: the negative margins cancel the field's gap-2.5 / px-3 / py-1
+				     (size large), so the suffix reads as the box's right segment -->
+				<Input
+					id="signup-username"
+					type="text"
+					size="large"
+					bind:value={username}
+					placeholder="username"
+					autocapitalize="none"
+					spellcheck="false"
+					required
+					autocomplete="username"
+					pattern={usernameRegex.source}
+					title="Lowercase letters, digits, and hyphens; 4-63 characters; cannot start or end with a hyphen"
+					error={!!submit.error}
+					class="w-full"
+					suffix=".tngl.sh"
+					suffixClass="flex items-center self-stretch -my-1 -mr-3 -ml-2.5 rounded-r-sm bg-background-inset px-2 font-mono typography-paragraph-small text-foreground-subtle"
+				/>
+				<p class="mt-1 typography-paragraph-small text-foreground-subtle">
+					Lowercase letters, digits, and hyphens; 4-63 characters.
+				</p>
+			</div>
+
+			<div class="mt-4 flex flex-col">
+				<label
+					for="signup-password"
+					class="py-2 typography-paragraph-small text-foreground-default"
+				>
+					Password
+				</label>
+				<Input
+					id="signup-password"
+					type="password"
+					size="large"
+					bind:value={password}
+					placeholder="at least 8 characters"
+					autocomplete="new-password"
+					required
+					minlength={8}
+					error={!!submit.error}
+					class="w-full"
+				/>
+			</div>
+
+			<input type="hidden" name="token" value={page.url.searchParams.get("token") ?? ""} />
+
+			{#if submit.error}
+				<ErrorAlert label={submit.error} class="mt-4" />
+				<a
+					href={appPath("/signup")}
+					class="mt-2 self-start text-foreground-default underline"
+					>Get a new link</a
+				>
+			{/if}
+
+			<Button
+				type="submit"
+				loading={submit.loading}
+				disabled={!valid}
+				spinnerClass="size-4"
+				aria-label={submit.loading ? "Creating account" : undefined}
+				class="my-2 mt-6 w-full typography-paragraph-large disabled:opacity-100"
+			>
+				Create account
+			</Button>
+		</form>
+
+		<p class="typography-paragraph-small text-foreground-subtle">
+			Changed your mind?
+			<a href={appPath("/signup")} class="text-foreground-default underline">Sign up again</a>
+		</p>
+	{/if}
+</section>