diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 2d369fa..2636ccd 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,78 +1,63 @@
-import type { CheckResponse } from "@cleanhashtags/shared";
 import { useState } from "react";
-import { checkHashtags, errorMessage } from "./api/client";
+import { Footer } from "./components/Footer";
 import { HashtagForm } from "./components/HashtagForm";
 import { Header } from "./components/Header";
 import { ResultsList } from "./components/ResultsList";
-
-// A discriminated union: `status` says which of the four situations we are in,
-// and TypeScript only lets us read `response` or `message` when they exist.
-type CheckState =
-  | { status: "idle" }
-  | { status: "loading"; count: number }
-  | { status: "success"; response: CheckResponse }
-  | { status: "error"; message: string };
+import { useHashtagCheck } from "./hooks/useHashtagCheck";
 
 // A component is a function that returns JSX. React calls it to find out what
 // to show; the capitalised name is how JSX tells components from HTML tags.
 export function App() {
-  // Lifted state: the textarea's text used to live inside HashtagForm. Reset
-  // (in ResultsList) must clear it, so it moves up to the closest common
-  // parent of both components and is passed down as props.
+  // Lifted state: Reset (in ResultsList) must clear the textarea, so the text
+  // lives here, in the closest common parent, and is passed down as props.
   const [text, setText] = useState("");
-  const [check, setCheck] = useState<CheckState>({ status: "idle" });
-
-  // The request starts because the user submitted the form, so it lives in the
-  // event handler. No useEffect needed: nothing has to "sync" after rendering.
-  async function runCheck(tags: string[]) {
-    setCheck({ status: "loading", count: tags.length });
-    try {
-      const response = await checkHashtags(tags);
-      setCheck({ status: "success", response });
-    } catch (error) {
-      setCheck({ status: "error", message: errorMessage(error) });
-    }
-  }
+  // All request state (loading, results, errors) now lives in a custom hook.
+  const { state, check, reset } = useHashtagCheck();
 
-  function reset() {
+  function handleReset() {
     setText("");
-    setCheck({ status: "idle" });
+    reset();
   }
 
   return (
-    <>
+    <div className="page">
       <Header
         title="CleanHashtags"
         tagline="Check your Instagram hashtags before you post."
       />
-      <main>
+      <main className="stack">
         <HashtagForm
           text={text}
           onTextChange={setText}
           // `void` marks the returned promise as deliberately not awaited;
-          // runCheck handles its own errors.
-          onSubmit={(tags) => void runCheck(tags)}
-          busy={check.status === "loading"}
+          // `check` handles its own errors.
+          onSubmit={(tags) => void check(tags)}
+          busy={state.status === "loading"}
         />
 
-        {check.status === "loading" && (
-          <p role="status">
-            Checking {check.count} {check.count === 1 ? "hashtag" : "hashtags"}…
+        {state.status === "loading" && (
+          <p role="status" className="notice">
+            Checking {state.count} {state.count === 1 ? "hashtag" : "hashtags"}…
           </p>
         )}
 
-        {check.status === "error" && <p role="alert">{check.message}</p>}
+        {state.status === "error" && (
+          <p role="alert" className="notice notice-error">
+            {state.message}
+          </p>
+        )}
 
-        {check.status === "success" && (
+        {state.status === "success" && (
           // A new key per response makes React start ResultsList fresh, so
           // its local "Copied" message does not carry over to the next check.
           <ResultsList
-            key={check.response.checkedAt}
-            response={check.response}
-            onReset={reset}
+            key={state.response.checkedAt}
+            response={state.response}
+            onReset={handleReset}
           />
         )}
       </main>
-    </>
+      <Footer />
+    </div>
   );
 }
diff --git a/apps/web/src/components/Footer.test.tsx b/apps/web/src/components/Footer.test.tsx
new file mode 100644
index 0000000..2605b75
--- /dev/null
+++ b/apps/web/src/components/Footer.test.tsx
@@ -0,0 +1,13 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Footer } from "./Footer";
+
+describe("Footer", () => {
+  it("explains how fresh and reliable verdicts are", () => {
+    render(<Footer />);
+
+    const footer = screen.getByRole("contentinfo");
+    expect(footer).toHaveTextContent(/can be out of date/);
+    expect(footer).toHaveTextContent(/not that it is guaranteed safe/);
+  });
+});
diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
new file mode 100644
index 0000000..6d709c1
--- /dev/null
+++ b/apps/web/src/components/Footer.tsx
@@ -0,0 +1,14 @@
+export function Footer() {
+  return (
+    <footer className="footer">
+      <p>
+        Results come from a curated list of community reports and manual checks.
+        Instagram does not publish which hashtags it limits, so any result can
+        be out of date: check the &ldquo;verified&rdquo; date.
+        &ldquo;Unknown&rdquo; means a hashtag is not in the list, not that it is
+        guaranteed safe.
+      </p>
+      <p>Not affiliated with Instagram or Meta.</p>
+    </footer>
+  );
+}
diff --git a/apps/web/src/components/HashtagForm.tsx b/apps/web/src/components/HashtagForm.tsx
index 0650153..761b385 100644
--- a/apps/web/src/components/HashtagForm.tsx
+++ b/apps/web/src/components/HashtagForm.tsx
@@ -36,10 +36,13 @@ export function HashtagForm({
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <label htmlFor={id}>Hashtags</label>
+    <form className="card stack" onSubmit={handleSubmit}>
+      <label className="label" htmlFor={id}>
+        Hashtags
+      </label>
       {/* Controlled input: React owns the value, onChange reports each edit. */}
       <textarea
+        className="input"
         id={id}
         value={text}
         onChange={(event) => onTextChange(event.target.value)}
@@ -48,34 +51,42 @@ export function HashtagForm({
         aria-describedby={`${hintId} ${counterId}`}
         aria-invalid={overLimit}
       />
-      <p id={hintId}>
+      <p className="hint" id={hintId}>
         Separate hashtags with spaces, commas or new lines. The # is optional.
       </p>
 
-      <p id={counterId} aria-live="polite">
+      <p
+        id={counterId}
+        className={overLimit ? "hint hint-error" : "hint"}
+        aria-live="polite"
+      >
         {tags.length}/{MAX_TAGS} hashtags
         {overLimit && ` (remove ${tags.length - MAX_TAGS} to check)`}
       </p>
 
       {tags.length > 0 && (
-        <ul aria-label="Hashtags to check">
+        <ul className="chips" aria-label="Hashtags to check">
           {/* Each tag is unique after parsing, so it works as a stable key. */}
           {tags.map((tag) => (
-            <li key={tag}>#{tag}</li>
+            <li key={tag} className="chip">
+              #{tag}
+            </li>
           ))}
         </ul>
       )}
 
       {invalid.length > 0 && (
-        <div>
+        <div className="invalid">
           <p>
             {invalid.length === 1
               ? "This is not a valid hashtag and will be skipped:"
               : "These are not valid hashtags and will be skipped:"}
           </p>
-          <ul aria-label="Invalid hashtags">
+          <ul className="chips" aria-label="Invalid hashtags">
             {invalid.map((token) => (
-              <li key={token}>{token}</li>
+              <li key={token} className="chip chip-invalid">
+                {token}
+              </li>
             ))}
           </ul>
           <p>
@@ -84,7 +95,11 @@ export function HashtagForm({
         </div>
       )}
 
-      <button type="submit" disabled={!canSubmit}>
+      <button
+        className="button button-primary"
+        type="submit"
+        disabled={!canSubmit}
+      >
         {busy ? "Checking…" : "Check hashtags"}
       </button>
     </form>
diff --git a/apps/web/src/components/Header.tsx b/apps/web/src/components/Header.tsx
index e715bd5..3fa83d7 100644
--- a/apps/web/src/components/Header.tsx
+++ b/apps/web/src/components/Header.tsx
@@ -7,7 +7,7 @@ type HeaderProps = {
 
 export function Header({ title, tagline }: HeaderProps) {
   return (
-    <header>
+    <header className="header">
       <h1>{title}</h1>
       {/* `&&` renders the paragraph only when a tagline was passed. */}
       {tagline && <p>{tagline}</p>}
diff --git a/apps/web/src/components/ResultsList.tsx b/apps/web/src/components/ResultsList.tsx
index ad765c6..8e6e7a8 100644
--- a/apps/web/src/components/ResultsList.tsx
+++ b/apps/web/src/components/ResultsList.tsx
@@ -42,10 +42,10 @@ export function ResultsList({ response, onReset }: ResultsListProps) {
   }
 
   return (
-    <section aria-labelledby="results-heading">
+    <section className="card stack" aria-labelledby="results-heading">
       <h2 id="results-heading">Results</h2>
 
-      <p>
+      <p className="summary">
         Checked {results.length} {results.length === 1 ? "hashtag" : "hashtags"}
         :{" "}
         {counts
@@ -54,30 +54,33 @@ export function ResultsList({ response, onReset }: ResultsListProps) {
         .
       </p>
 
-      <ul aria-label="Results">
+      <ul className="results" aria-label="Results">
         {/* key: the hashtag is unique within one response and stable. */}
         {results.map((result) => {
           const fresh = freshness(result, checkedAt);
           return (
-            <li key={result.hashtag}>
-              <strong>#{result.hashtag}</strong>{" "}
+            <li key={result.hashtag} className="result">
+              <strong className="result-tag">#{result.hashtag}</strong>{" "}
               <StatusBadge status={result.status} />
-              {result.source && <span> Source: {result.source}.</span>}
-              {fresh && <span> {fresh}.</span>}
+              <span className="result-meta">
+                {result.source && <span> Source: {result.source}.</span>}
+                {fresh && <span> {fresh}.</span>}
+              </span>
             </li>
           );
         })}
       </ul>
 
-      <div>
+      <div className="actions">
         <button
+          className="button button-primary"
           type="button"
           onClick={() => void handleCopy()}
           disabled={safeTags.length === 0}
         >
           Copy safe hashtags ({safeTags.length})
         </button>{" "}
-        <button type="button" onClick={onReset}>
+        <button className="button" type="button" onClick={onReset}>
           Reset
         </button>
       </div>
@@ -89,12 +92,13 @@ export function ResultsList({ response, onReset }: ResultsListProps) {
       </p>
       {copyState === "failed" && (
         <textarea
+          className="input"
           aria-label="Safe hashtags"
           readOnly
           value={safeTags.join(" ")}
         />
       )}
-      <p>
+      <p className="hint">
         Safe means Clear or Unknown. Unknown hashtags are not in our list, which
         is not a guarantee.
       </p>
diff --git a/apps/web/src/components/StatusBadge.tsx b/apps/web/src/components/StatusBadge.tsx
index f52e653..69def01 100644
--- a/apps/web/src/components/StatusBadge.tsx
+++ b/apps/web/src/components/StatusBadge.tsx
@@ -1,30 +1,12 @@
 import type { HashtagStatus } from "@cleanhashtags/shared";
-import type { CSSProperties } from "react";
 import { STATUS_INFO } from "../lib/status";
 
-// Inline styles are plain objects. Fine for a few values; step 14 moves
-// styling into a stylesheet.
-const COLOURS: Record<HashtagStatus, CSSProperties> = {
-  banned: { background: "#fde2e1", color: "#8a1c14" },
-  restricted: { background: "#fdeccf", color: "#7a4500" },
-  reported: { background: "#fff6c7", color: "#5c4a00" },
-  clear: { background: "#dcf5e3", color: "#14532d" },
-  unknown: { background: "#e8eaee", color: "#33373d" },
-};
-
 // The label is always written out, so the status never relies on colour alone.
+// The colours come from `.badge-<status>` in styles.css.
 export function StatusBadge({ status }: { status: HashtagStatus }) {
   const { label, description } = STATUS_INFO[status];
   return (
-    <span
-      title={description}
-      style={{
-        ...COLOURS[status],
-        borderRadius: "999px",
-        padding: "0.1em 0.6em",
-        fontWeight: 600,
-      }}
-    >
+    <span className={`badge badge-${status}`} title={description}>
       {label}
     </span>
   );
diff --git a/apps/web/src/hooks/useHashtagCheck.test.ts b/apps/web/src/hooks/useHashtagCheck.test.ts
new file mode 100644
index 0000000..88cc620
--- /dev/null
+++ b/apps/web/src/hooks/useHashtagCheck.test.ts
@@ -0,0 +1,103 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { checkResponse, jsonResponse, mockFetch } from "../test/fetch";
+import { useHashtagCheck } from "./useHashtagCheck";
+
+// Lets a test decide when each fetch call resolves.
+function deferredFetch() {
+  const fetchMock = mockFetch();
+  const pending: ((response: Response) => void)[] = [];
+  fetchMock.mockImplementation(
+    (_input, init) =>
+      new Promise<Response>((resolve, reject) => {
+        pending.push(resolve);
+        init?.signal?.addEventListener("abort", () => {
+          reject(new DOMException("Aborted", "AbortError"));
+        });
+      }),
+  );
+  return { fetchMock, pending };
+}
+
+const travel = checkResponse([{ hashtag: "travel", status: "unknown" }]);
+const sunset = checkResponse([{ hashtag: "sunset", status: "clear" }]);
+
+describe("useHashtagCheck", () => {
+  it("goes idle -> loading -> success", async () => {
+    const { pending } = deferredFetch();
+    const { result } = renderHook(() => useHashtagCheck());
+    expect(result.current.state).toEqual({ status: "idle" });
+
+    act(() => void result.current.check(["travel"]));
+    expect(result.current.state).toEqual({ status: "loading", count: 1 });
+
+    act(() => pending[0]?.(jsonResponse(travel)));
+    await waitFor(() =>
+      expect(result.current.state).toEqual({
+        status: "success",
+        response: travel,
+      }),
+    );
+  });
+
+  it("reports errors as a message", async () => {
+    mockFetch().mockRejectedValue(new TypeError("Failed to fetch"));
+    const { result } = renderHook(() => useHashtagCheck());
+
+    await act(() => result.current.check(["travel"]));
+
+    expect(result.current.state).toMatchObject({ status: "error" });
+  });
+
+  it("aborts an older request when a newer one starts", async () => {
+    const { fetchMock, pending } = deferredFetch();
+    const { result } = renderHook(() => useHashtagCheck());
+
+    act(() => void result.current.check(["travel"]));
+    act(() => void result.current.check(["sunset"]));
+    const firstSignal = fetchMock.mock.calls[0]?.[1]?.signal;
+    expect(firstSignal?.aborted).toBe(true);
+
+    act(() => pending[1]?.(jsonResponse(sunset)));
+    await waitFor(() =>
+      expect(result.current.state).toEqual({
+        status: "success",
+        response: sunset,
+      }),
+    );
+  });
+
+  it("reset cancels the request and returns to idle", async () => {
+    const { fetchMock, pending } = deferredFetch();
+    const { result } = renderHook(() => useHashtagCheck());
+
+    act(() => void result.current.check(["travel"]));
+    act(() => result.current.reset());
+    act(() => pending[0]?.(jsonResponse(travel)));
+
+    expect(fetchMock.mock.calls[0]?.[1]?.signal?.aborted).toBe(true);
+    await Promise.resolve();
+    expect(result.current.state).toEqual({ status: "idle" });
+  });
+
+  it("aborts the request on unmount", () => {
+    const { fetchMock } = deferredFetch();
+    const { result, unmount } = renderHook(() => useHashtagCheck());
+
+    act(() => void result.current.check(["travel"]));
+    unmount();
+
+    expect(fetchMock.mock.calls[0]?.[1]?.signal?.aborted).toBe(true);
+  });
+
+  it("keeps check and reset stable between renders", () => {
+    mockFetch();
+    const { result, rerender } = renderHook(() => useHashtagCheck());
+    const { check, reset } = result.current;
+
+    rerender();
+
+    expect(result.current.check).toBe(check);
+    expect(result.current.reset).toBe(reset);
+  });
+});
diff --git a/apps/web/src/hooks/useHashtagCheck.ts b/apps/web/src/hooks/useHashtagCheck.ts
new file mode 100644
index 0000000..c34b56d
--- /dev/null
+++ b/apps/web/src/hooks/useHashtagCheck.ts
@@ -0,0 +1,56 @@
+import type { CheckResponse } from "@cleanhashtags/shared";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { checkHashtags, errorMessage } from "../api/client";
+
+// A discriminated union: `status` says which of the four situations we are in,
+// and TypeScript only lets us read `response` or `message` when they exist.
+export type CheckState =
+  | { status: "idle" }
+  | { status: "loading"; count: number }
+  | { status: "success"; response: CheckResponse }
+  | { status: "error"; message: string };
+
+/**
+ * Request state for POST /api/check. A custom hook is a function whose name
+ * starts with `use` and that calls other hooks; each component that calls it
+ * gets its own independent copy of the state.
+ */
+export function useHashtagCheck() {
+  const [state, setState] = useState<CheckState>({ status: "idle" });
+
+  // A ref holds a value across renders without causing a re-render when it
+  // changes: right for the AbortController, which the UI never displays.
+  const controllerRef = useRef<AbortController | null>(null);
+
+  // The one effect in the app: when the component using this hook unmounts,
+  // cancel any request still in flight. The returned function is the cleanup.
+  useEffect(() => () => controllerRef.current?.abort(), []);
+
+  // useCallback keeps the same function between renders, so components that
+  // receive `check` or `reset` as props do not see a "new" prop every time.
+  const check = useCallback(async (tags: string[]) => {
+    // A newer check wins: cancel the previous request so its late response
+    // cannot overwrite these results.
+    controllerRef.current?.abort();
+    const controller = new AbortController();
+    controllerRef.current = controller;
+
+    setState({ status: "loading", count: tags.length });
+    try {
+      const response = await checkHashtags(tags, { signal: controller.signal });
+      if (!controller.signal.aborted) setState({ status: "success", response });
+    } catch (error) {
+      if (!controller.signal.aborted) {
+        setState({ status: "error", message: errorMessage(error) });
+      }
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    controllerRef.current?.abort();
+    controllerRef.current = null;
+    setState({ status: "idle" });
+  }, []);
+
+  return { state, check, reset };
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 34f4772..eefaec7 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,6 +1,8 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
+// Importing a CSS file from JavaScript tells Vite to bundle it with the app.
+import "./styles.css";
 
 // Entry point: Vite loads this file from index.html. createRoot takes over the
 // <div id="root"> element and React renders the component tree inside it.
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
new file mode 100644
index 0000000..a26c393
--- /dev/null
+++ b/apps/web/src/styles.css
@@ -0,0 +1,306 @@
+/* One global stylesheet. Class names are plain strings in JSX (`className`).
+   Colours are CSS custom properties so dark mode only swaps the values. */
+
+:root {
+  color-scheme: light dark;
+  --bg: #f6f7f9;
+  --surface: #ffffff;
+  --text: #1d2026;
+  --muted: #5b616b;
+  --border: #d9dde3;
+  --accent: #2b2d42;
+  --accent-text: #ffffff;
+  --danger: #b42318;
+  --danger-bg: #fde2e1;
+  --focus: #3b82f6;
+  --radius: 10px;
+
+  --banned-bg: #fde2e1;
+  --banned-fg: #8a1c14;
+  --restricted-bg: #fdeccf;
+  --restricted-fg: #7a4500;
+  --reported-bg: #fff6c7;
+  --reported-fg: #5c4a00;
+  --clear-bg: #dcf5e3;
+  --clear-fg: #14532d;
+  --unknown-bg: #e8eaee;
+  --unknown-fg: #33373d;
+}
+
+/* Follows the operating system setting; no JavaScript needed. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #14161a;
+    --surface: #1d2026;
+    --text: #e8eaee;
+    --muted: #a3a9b3;
+    --border: #343941;
+    --accent: #c7cbe8;
+    --accent-text: #14161a;
+    --danger: #ff8a80;
+    --danger-bg: #3d1714;
+    --focus: #7aa7ff;
+
+    --banned-bg: #4a1612;
+    --banned-fg: #ffb4ab;
+    --restricted-bg: #4a2c06;
+    --restricted-fg: #ffcc80;
+    --reported-bg: #3f3605;
+    --reported-fg: #f5e27a;
+    --clear-bg: #123a22;
+    --clear-fg: #9be3b0;
+    --unknown-bg: #2c3037;
+    --unknown-fg: #d0d4db;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  line-height: 1.5;
+}
+
+p {
+  margin: 0;
+}
+
+.page {
+  max-width: 44rem;
+  margin: 0 auto;
+  padding: 1.5rem 1rem 2rem;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+main.stack {
+  gap: 1rem;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 1.75rem;
+}
+
+.header p {
+  color: var(--muted);
+}
+
+.header {
+  margin-bottom: 1.25rem;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+}
+
+.card h2 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.label {
+  font-weight: 600;
+}
+
+.input {
+  width: 100%;
+  font: inherit;
+  color: inherit;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.6rem 0.75rem;
+  resize: vertical;
+}
+
+.input[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+
+.hint {
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+
+.hint-error {
+  color: var(--danger);
+  font-weight: 600;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 0.1rem 0.6rem;
+  font-size: 0.875rem;
+}
+
+.chip-invalid {
+  border-color: var(--danger);
+  color: var(--danger);
+  text-decoration: line-through;
+}
+
+.invalid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.button {
+  font: inherit;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.5rem 1rem;
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.button-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+form .button-primary {
+  align-self: flex-start;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.notice {
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.notice-error {
+  background: var(--danger-bg);
+  border-color: var(--danger);
+}
+
+.summary {
+  font-weight: 600;
+}
+
+.results {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.result {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 0.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.result:last-child {
+  border-bottom: none;
+}
+
+.result-tag {
+  word-break: break-all;
+}
+
+.result-meta {
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+
+/* On narrow screens the details go on their own line under the tag. */
+@media (max-width: 30rem) {
+  .result-meta {
+    flex-basis: 100%;
+  }
+}
+
+.badge {
+  border-radius: 999px;
+  padding: 0.05rem 0.6rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.badge-banned {
+  background: var(--banned-bg);
+  color: var(--banned-fg);
+}
+
+.badge-restricted {
+  background: var(--restricted-bg);
+  color: var(--restricted-fg);
+}
+
+.badge-reported {
+  background: var(--reported-bg);
+  color: var(--reported-fg);
+}
+
+.badge-clear {
+  background: var(--clear-bg);
+  color: var(--clear-fg);
+}
+
+.badge-unknown {
+  background: var(--unknown-bg);
+  color: var(--unknown-fg);
+}
+
+.footer {
+  margin-top: 2rem;
+  color: var(--muted);
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
diff --git a/docs/learning/05-custom-hooks-and-styling.md b/docs/learning/05-custom-hooks-and-styling.md
new file mode 100644
index 0000000..57a5b99
--- /dev/null
+++ b/docs/learning/05-custom-hooks-and-styling.md
@@ -0,0 +1,103 @@
+# 05 — Custom hooks and styling
+
+Step 14 moves the request logic out of `App` into a custom hook, fixes the "late response"
+problem from note 03, and gives the app a stylesheet with a responsive layout, dark mode and
+a footer. Line numbers refer to the code as of this step's commit (`git show <sha>:<path>`
+shows that version).
+
+## Custom hooks
+
+`useHashtagCheck` (`apps/web/src/hooks/useHashtagCheck.ts:18-56`) is a plain function whose
+name starts with `use` and that calls other hooks. It returns `{ state, check, reset }`
+(`useHashtagCheck.ts:55`), and `App` just uses it (`App.tsx:15`):
+
+```tsx
+const { state, check, reset } = useHashtagCheck();
+```
+
+What a custom hook gives you:
+
+- **Separation**: `App` now describes the screen; the hook describes how a check works.
+  Each can be read and tested on its own (`useHashtagCheck.test.ts` uses `renderHook`,
+  no UI involved).
+- **Reuse of logic, not state**: two components calling `useHashtagCheck()` each get their
+  own independent state. Hooks share _behaviour_; to share _data_, lift state up (note 04)
+  or use context.
+- The usual hook rules apply inside it: call hooks at the top level, never conditionally.
+
+`App` still owns the textarea `text`, so its `handleReset` (`App.tsx:17-20`) clears the
+text and then calls the hook's `reset`.
+
+## useRef: memory that does not re-render
+
+`controllerRef` (`useHashtagCheck.ts:23`) holds the current `AbortController`. Changing
+`controllerRef.current` does not re-render, which is right because nothing on screen
+depends on it. Rule of thumb: if the UI shows it, `useState`; if it is bookkeeping for event
+handlers or effects (timers, controllers, DOM nodes), `useRef`. Do not read or write refs
+during rendering.
+
+## Cancelling stale requests
+
+`check` (`useHashtagCheck.ts:31-47`) aborts the previous request before starting a new one
+(`:34`) and only sets state if its own request was not aborted (`:41,43`). So a slow first
+response can no longer overwrite the results of a newer check, and a click on Reset while
+loading (`:49-53`) really cancels. `checkHashtags` passes the `signal` to `fetch`
+(`api/client.ts`), which rejects with an `AbortError` that the hook ignores.
+
+## The first useEffect
+
+```tsx
+useEffect(() => () => controllerRef.current?.abort(), []);
+```
+
+(`useHashtagCheck.ts:27`) The effect itself does nothing; it returns a _cleanup_ function,
+which React runs when the component unmounts. With `[]` as dependencies it runs once on
+mount and cleans up once on unmount. This is a real "sync with something outside React"
+case: a network request that should not outlive the component. In development
+`StrictMode` mounts, unmounts and remounts once on purpose, to check that cleanups like
+this one are correct.
+
+## useCallback
+
+`check` and `reset` are wrapped in `useCallback(fn, [])` (`useHashtagCheck.ts:31,49`) so
+they are the same function on every render (tested in `useHashtagCheck.test.ts`). It
+matters when a function is passed to a memoised child or used in another hook's dependency
+list; for a hook meant to be reused it is a sensible default. Do not sprinkle it everywhere
+in components: it adds noise without benefit when nothing compares the function.
+
+## Styling
+
+- One global stylesheet, `apps/web/src/styles.css`, imported once from `main.tsx:5`. Vite
+  bundles it into `dist/assets/*.css`. In JSX the attribute is `className`, not `class`
+  (`class` is a reserved word in JavaScript).
+- Classes are composed with template strings, e.g. ``className={`badge badge-${status}`}``
+  (`components/StatusBadge.tsx:9`), replacing the inline `style` objects from step 13.
+- Colours are CSS custom properties on `:root` (`styles.css:4-29`). Dark mode is a
+  `@media (prefers-color-scheme: dark)` block that only swaps those values
+  (`styles.css:31-55`); `color-scheme: light dark` (`:5`) makes form controls and
+  scrollbars match. No JavaScript needed.
+- Responsive layout: a centred column with a max width (`.page`, `styles.css:80-84`),
+  wrapping flex rows for chips, results and buttons, and one breakpoint that moves result
+  details under the tag on narrow screens (`styles.css:261-265`).
+- Status badges still show their label as text, so colour is never the only signal.
+
+Alternatives you will meet: **CSS Modules** (`Button.module.css`, imported as an object, so
+class names are scoped to one component and cannot clash), utility frameworks like
+Tailwind, and CSS-in-JS. A single stylesheet is the simplest to learn on; switching one
+component to a CSS Module is a good exercise (below).
+
+## Footer
+
+`Footer` (`components/Footer.tsx`) states where verdicts come from and that they can be out
+of date, and that "Unknown" is not a guarantee. It renders a `<footer>`, which screen
+readers expose as the page's "contentinfo" landmark (that is the role its test queries).
+
+## Try this
+
+1. Convert `StatusBadge` to a CSS Module: create `StatusBadge.module.css`, move the
+   `.badge*` rules there, `import styles from "./StatusBadge.module.css"` and use
+   `styles.badge`. Inspect the generated class name in the browser dev tools.
+2. Add a theme toggle that overrides the system setting. Where does the choice live (state
+   in `App`? a custom `useTheme` hook?), and how does it reach the CSS (hint: a
+   `data-theme` attribute on `<html>` set in a `useEffect`)? Persisting it in
+   `localStorage` is a second `useEffect`, or part of the same one.