diff --git a/index.html b/index.html
index f25cf3e..514013e 100644
--- a/index.html
+++ b/index.html
@@ -19,49 +19,56 @@ <h1>Touchwright</h1>
       </p>
     </header>
 
-    <main id="main">
-      <section aria-labelledby="load-heading">
-        <h2 id="load-heading">Load your layout</h2>
-        <p>
-          Export your layout from the MoErgo Layout Editor and choose the file here. Nothing is
-          uploaded anywhere; the file is read in your browser.
-        </p>
-        <p>
-          <label class="field">
-            <span>Layout export (JSON)</span>
-            <input id="layout-file" type="file" accept="application/json,.json" />
-          </label>
-        </p>
-        <p id="layout-status" role="status" aria-live="polite"></p>
-        <div id="layout-error" role="alert" hidden></div>
-      </section>
+    <nav id="section-nav" class="section-nav" aria-label="Sections" hidden>
+      <ul>
+        <li><a href="#drill-section">Practise</a></li>
+        <li><a href="#sprint-section">Sprint</a></li>
+        <li><a href="#ladder-section">Ladder</a></li>
+        <li><a href="#stats-section">Statistics</a></li>
+        <li><a href="#progress-section">Saving</a></li>
+      </ul>
+    </nav>
 
-      <section id="summary" aria-labelledby="summary-heading" hidden>
-        <h2 id="summary-heading">What that layout looks like</h2>
-        <dl id="summary-list"></dl>
-      </section>
-
-      <!--
-        The diagram is decorative reinforcement and is marked aria-hidden, so
-        everything it shows is stated here in text as well: the highlighted key in
-        #board-next, the finger colours in #board-legend, and every cap's hand,
-        finger and row in #board-key-list.
-      -->
-      <section id="board-section" aria-labelledby="board-heading" hidden>
-        <h2 id="board-heading">Where those keys are</h2>
-        <p id="board-next"></p>
-        <div id="board-figure"></div>
-        <p id="board-legend-intro">
-          Each cap is outlined in the colour of the finger that owns it.
-        </p>
-        <ul id="board-legend" class="board-legend"></ul>
-        <details id="board-key-detail" class="board-key-detail">
-          <summary>Every key on the board, in words</summary>
-          <ul id="board-key-list" class="board-key-list"></ul>
-        </details>
-      </section>
+    <main id="main">
+      <div class="setup">
+        <section aria-labelledby="load-heading" class="setup-load">
+          <h2 id="load-heading">Load your layout</h2>
+          <p id="load-intro">
+            Export your layout from the MoErgo Layout Editor and choose the file here. Nothing is
+            uploaded anywhere; the file is read in your browser.
+          </p>
+          <p>
+            <label class="field">
+              <span>Layout export (JSON)</span>
+              <input id="layout-file" type="file" accept="application/json,.json" />
+            </label>
+          </p>
+          <p id="layout-status" role="status" aria-live="polite"></p>
+          <div id="layout-error" role="alert" hidden></div>
+        </section>
+
+        <section id="summary" aria-labelledby="summary-heading" hidden>
+          <h2 id="summary-heading">What that layout looks like</h2>
+          <dl id="summary-list"></dl>
+        </section>
+      </div>
+
+      <div class="workspace">
+        <section id="board-section" aria-labelledby="board-heading" hidden>
+          <h2 id="board-heading">Where those keys are</h2>
+          <p id="board-next"></p>
+          <div id="board-figure"></div>
+          <p id="board-legend-intro">
+            Each cap is outlined in the colour of the finger that owns it.
+          </p>
+          <ul id="board-legend" class="board-legend"></ul>
+          <details id="board-key-detail" class="board-key-detail">
+            <summary>Every key on the board, in words</summary>
+            <ul id="board-key-list" class="board-key-list"></ul>
+          </details>
+        </section>
 
-      <!--
+        <!--
         The drill surface.
 
         How to escape the keyboard capture is stated here in visible text, not in
@@ -70,20 +77,20 @@ <h2 id="board-heading">Where those keys are</h2>
         row in words and is the primary channel; the board highlight above only
         reinforces it.
       -->
-      <section id="drill-section" aria-labelledby="drill-heading" hidden>
-        <h2 id="drill-heading">Practise</h2>
-        <p id="drill-how">
-          Choose <em>Start drill</em> and type what you see.
-          <strong>Press Escape at any time to give the keyboard back.</strong> The page then works
-          as usual, and <em>Resume drill</em> picks up exactly where you left off. Tab always moves
-          focus, even while the drill has the keyboard.
-        </p>
-        <p class="drill-controls">
-          <button id="drill-start" type="button" class="button button-solid">Start drill</button>
-          <button id="drill-reset" type="button" class="button button-outline">Start over</button>
-        </p>
-        <p id="drill-next" class="drill-next"></p>
-        <!--
+        <section id="drill-section" aria-labelledby="drill-heading" hidden>
+          <h2 id="drill-heading">Practise</h2>
+          <p id="drill-how">
+            Choose <em>Start drill</em> and type what you see.
+            <strong>Press Escape at any time to give the keyboard back.</strong> The page then works
+            as usual, and <em>Resume drill</em> picks up exactly where you left off. Tab always
+            moves focus, even while the drill has the keyboard.
+          </p>
+          <p class="drill-controls">
+            <button id="drill-start" type="button" class="button button-solid">Start drill</button>
+            <button id="drill-reset" type="button" class="button button-outline">Start over</button>
+          </p>
+          <p id="drill-next" class="drill-next"></p>
+          <!--
           The sprint countdown.
 
           It sits here, directly above the text, because that is where the eyes
@@ -94,36 +101,37 @@ <h2 id="drill-heading">Practise</h2>
           would be unusable. The other channel is #sprint-warning below, a polite
           region written only at a handful of milestones.
         -->
-        <p id="sprint-countdown" class="sprint-countdown" role="timer" hidden></p>
-        <div
-          id="drill-surface"
-          class="drill-surface"
-          tabindex="0"
-          role="group"
-          aria-label="Drill text"
-          aria-describedby="drill-next drill-escape"
-        >
-          <p id="drill-text" class="drill-text"></p>
-        </div>
-        <p id="drill-escape" class="drill-hint">
-          Escape releases the keyboard from anywhere in the drill.
-        </p>
-        <p id="drill-capture" class="drill-hint" role="status" aria-live="polite"></p>
-        <p id="sprint-warning" class="drill-hint" role="status" aria-live="polite"></p>
-        <p id="drill-progress" class="drill-progress" role="status" aria-live="polite"></p>
-        <p id="drill-error" class="drill-error" role="alert" hidden></p>
-
-        <div id="drill-result" class="drill-result" hidden>
-          <h3>How that went</h3>
-          <p id="drill-result-summary" class="drill-result-summary" role="alert"></p>
-          <dl id="drill-result-detail"></dl>
-          <p id="drill-result-why"></p>
-          <p class="drill-controls">
-            <button id="drill-continue" type="button" class="button button-solid"></button>
-            <span class="drill-hint">Or press any key to start the next drill.</span>
+          <p id="sprint-countdown" class="sprint-countdown" role="timer" hidden></p>
+          <div
+            id="drill-surface"
+            class="drill-surface"
+            tabindex="0"
+            role="group"
+            aria-label="Drill text"
+            aria-describedby="drill-next drill-escape"
+          >
+            <p id="drill-text" class="drill-text"></p>
+          </div>
+          <p id="drill-escape" class="drill-hint">
+            Escape releases the keyboard from anywhere in the drill.
           </p>
-        </div>
-      </section>
+          <p id="drill-capture" class="drill-hint" role="status" aria-live="polite"></p>
+          <p id="sprint-warning" class="drill-hint" role="status" aria-live="polite"></p>
+          <p id="drill-progress" class="drill-progress" role="status" aria-live="polite"></p>
+          <p id="drill-error" class="drill-error" role="alert" hidden></p>
+
+          <div id="drill-result" class="drill-result" hidden>
+            <h3>How that went</h3>
+            <p id="drill-result-summary" class="drill-result-summary" role="alert"></p>
+            <dl id="drill-result-detail"></dl>
+            <p id="drill-result-why"></p>
+            <p class="drill-controls">
+              <button id="drill-continue" type="button" class="button button-solid"></button>
+              <span class="drill-hint">Or press any key to start the next drill.</span>
+            </p>
+          </div>
+        </section>
+      </div>
 
       <!--
         Sprint mode.
diff --git a/src/ui/drill-view.ts b/src/ui/drill-view.ts
index bcc83bb..40ab5a2 100644
--- a/src/ui/drill-view.ts
+++ b/src/ui/drill-view.ts
@@ -831,7 +831,11 @@ export function createDrillView(options: DrillViewOptions): DrillView {
     if (current.isFinished) {
       if (!current.requestContinue(event.key).accepted) return;
       event.preventDefault();
-      startDrill();
+      // Through onContinue, not straight to startDrill: the result card may be
+      // offering the next lesson or a repair drill, and a keyboard learner must
+      // get the same thing the button offers. Going direct silently threw the
+      // offer away and started this drill again.
+      onContinue();
       return;
     }
 
diff --git a/src/ui/load-form.ts b/src/ui/load-form.ts
index 52829a5..f391694 100644
--- a/src/ui/load-form.ts
+++ b/src/ui/load-form.ts
@@ -109,6 +109,8 @@ export function wireUp(root: ParentNode = document, options: WireUpOptions = {})
   const legend = required('#board-legend', HTMLElement, root);
   const keyList = required('#board-key-list', HTMLElement, root);
   const drillSection = required('#drill-section', HTMLElement, root);
+  const sectionNav = required('#section-nav', HTMLElement, root);
+  const loadIntro = required('#load-intro', HTMLElement, root);
   const sprintSection = required('#sprint-section', HTMLElement, root);
   const ladderSection = required('#ladder-section', HTMLElement, root);
   const statsSection = required('#stats-section', HTMLElement, root);
@@ -458,6 +460,11 @@ export function wireUp(root: ParentNode = document, options: WireUpOptions = {})
         // The ladder comes before the drill: it decides which lesson the drill is
         // for, and a drill with no lesson could not write its stars anywhere.
         showProgress(keymap);
+        // There is somewhere to go now, and the instructions have been followed,
+        // so one appears and the other stands down. The file input stays: a
+        // learner may want to load a different layout.
+        sectionNav.hidden = false;
+        loadIntro.hidden = true;
         status.textContent = `Loaded ${keymap.title}.`;
       } catch (cause) {
         // Surfaced, never swallowed: a parse failure is the user's problem to
diff --git a/src/ui/theme.css b/src/ui/theme.css
index b1c0c89..6546eb7 100644
--- a/src/ui/theme.css
+++ b/src/ui/theme.css
@@ -21,8 +21,13 @@
   --danger: #a4262c;
   --space: 1rem;
   --radius: 0.375rem;
+
+  /* Comfortable for prose. */
   --measure: 38rem;
 
+  /* The app itself: wide enough to put the board beside the text being typed. */
+  --measure-app: 78rem;
+
   /*
    * The board diagram. Finger colours clear the non-text threshold of 3:1
    * against --board-plate, and cap labels clear AA against --board-cap, in both
@@ -88,7 +93,7 @@ body {
 main,
 .masthead,
 .colophon {
-  max-width: var(--measure);
+  max-width: var(--measure-app);
   padding-inline: var(--space);
   padding-block: var(--space);
   margin-inline: auto;
@@ -514,22 +519,42 @@ dd {
   background: var(--surface-sunken);
 }
 
+/*
+ * A grid rather than one long column. Thirteen rungs stacked full width came to
+ * two and a half thousand pixels, which put the statistics and the saving
+ * controls somewhere nobody would find them. The grid flows in rows, so reading
+ * order and Tab order are unchanged: along, then down.
+ */
 .ladder {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
   gap: 0.5rem;
+  align-content: start;
   padding: 0;
   margin-block: 0.75rem;
   list-style: none;
 }
 
 .ladder-rung {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   padding: 0.75rem;
   border: 1px solid var(--border);
   border-inline-start: 0.25rem solid var(--border);
   border-radius: var(--radius);
 }
 
+/* A rung is already a narrow column; the page-wide prose floor would widen it. */
+.ladder-rung :where(p) {
+  max-width: none;
+}
+
+/* Buttons line up along the bottom of a row whatever the blurb above them. */
+.ladder-rung > :last-child {
+  margin-block-start: auto;
+}
+
 .ladder-rung[data-state='current'] {
   border-color: var(--accent);
   background: var(--surface-sunken);
@@ -799,3 +824,116 @@ dd {
     transition: none;
   }
 }
+
+/* ---- Page layout ----------------------------------------------------------
+ *
+ * Last in the file on purpose: these rules place the sections the rest of the
+ * sheet has already styled, and placing them here keeps every override after
+ * the thing it overrides.
+ */
+
+/*
+ * The board and the drill text, side by side once there is room.
+ *
+ * They have to be visible at the same time: the readout names the next key in
+ * words and the diagram shows where it is, and a learner reading one while the
+ * other is off screen gets neither. Stacked below the breakpoint, board first,
+ * which is also the order they appear in the markup -- so what the eye follows
+ * and what the Tab key follows never disagree.
+ */
+.workspace {
+  display: grid;
+  gap: calc(var(--space) * 1.5);
+  align-items: start;
+}
+
+@media (width >= 62rem) {
+  .workspace {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  }
+
+  /* Both columns stay put while the page scrolls past them. */
+  .workspace > section {
+    position: sticky;
+    top: var(--space);
+  }
+}
+
+/* Grid children default to min-content width; without this the board overflows. */
+.workspace > section {
+  min-width: 0;
+}
+
+/* Anchored sections must not hide under the sticky bar. */
+:where(main section) {
+  scroll-margin-top: 3.5rem;
+}
+
+/*
+ * Choosing a layout and seeing what was found in it: one band of the page, not
+ * two, so the board and the drill start nearer the top.
+ */
+.setup {
+  display: grid;
+  gap: calc(var(--space) * 1.5);
+  align-items: start;
+  margin-block-end: calc(var(--space) * 1.5);
+}
+
+@media (width >= 62rem) {
+  .setup {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  }
+}
+
+.setup > section {
+  min-width: 0;
+}
+
+.setup h2 {
+  margin-block-start: 0;
+}
+
+/* The summary is reference, not reading: denser than body text. */
+#summary-list {
+  gap: 0.25rem 1rem;
+  font-size: 0.9375rem;
+}
+
+/*
+ * Somewhere to go. Everything below the drill was unreachable without a long
+ * scroll and no sign there was anything there.
+ */
+.section-nav {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--surface);
+  border-block-end: 1px solid var(--border);
+}
+
+.section-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  max-width: var(--measure-app);
+  margin-inline: auto;
+  padding: 0.5rem var(--space);
+  list-style: none;
+}
+
+.section-nav a {
+  display: inline-block;
+  padding: 0.25rem 0;
+  color: var(--ink);
+  font-size: 0.9375rem;
+}
+
+/*
+ * Long explanatory text stays readable even in a wide column. Written with
+ * :where() so it is a floor rather than a ceiling: any component that needs a
+ * wider paragraph simply says so and wins.
+ */
+:where(main p, main li, main dd) {
+  max-width: var(--measure);
+}
diff --git a/tests/e2e/drill.spec.ts b/tests/e2e/drill.spec.ts
index 47b968c..bdcca93 100644
--- a/tests/e2e/drill.spec.ts
+++ b/tests/e2e/drill.spec.ts
@@ -314,3 +314,28 @@ test('animates nothing on the drill surface when reduced motion is asked for', a
     0.05,
   );
 });
+
+test('the keyboard takes the same offer the button shows, not a fresh drill', async ({ page }) => {
+  // The result card can offer the next lesson or a repair drill. Pressing a key
+  // to continue used to go straight to "start this drill again", which silently
+  // threw that offer away -- a button saying one thing and the keyboard doing
+  // another is the same failure as a button that lies.
+  await startDrill(page);
+  await page.keyboard.type(expectedDrillText(), { delay: 15 });
+  await expect(page.locator('#drill-result')).toBeVisible();
+
+  // Typed cleanly and briskly, so this earns the advance rather than a repair.
+  await expect(page.locator('#drill-continue')).toContainText('Start');
+  const firstDrill = await page.locator('#drill-text').innerText();
+
+  // Past the grace period that stops an overrun keystroke skipping the result
+  // before it has been read -- regression 4, which refuses the key until then.
+  await page.waitForTimeout(600);
+
+  // Any key continues. It must do what the button says.
+  await page.keyboard.press('Enter');
+  await expect(page.locator('#drill-result')).toBeHidden();
+
+  // The next lesson was offered, so the text must be the next lesson's.
+  await expect(page.locator('#drill-text')).not.toHaveText(firstDrill);
+});
diff --git a/tests/e2e/layout.spec.ts b/tests/e2e/layout.spec.ts
new file mode 100644
index 0000000..113d66e
--- /dev/null
+++ b/tests/e2e/layout.spec.ts
@@ -0,0 +1,110 @@
+/**
+ * The page has to be usable, not merely correct.
+ *
+ * These exist because it was neither: the board sat 770 pixels above the text
+ * being typed, so a learner could see where the next key was or what they were
+ * meant to type, but never both; and the sprint, the ladder and the statistics
+ * were far enough down a five-thousand-pixel page that nobody found them.
+ */
+
+import { expect, test, type Page } from '@playwright/test';
+import { gotoApp, loadReferenceLayout } from './helpers.js';
+
+async function box(page: Page, selector: string): Promise<{ top: number; bottom: number }> {
+  const found = await page.locator(selector).boundingBox();
+  expect(found, `${selector} should be on the page`).not.toBeNull();
+  return { top: found!.y, bottom: found!.y + found!.height };
+}
+
+test.describe('on a desktop-sized window', () => {
+  test.use({ viewport: { width: 1440, height: 900 } });
+
+  test('shows the board and the text being typed at the same time', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+
+    const board = await box(page, '#board-figure');
+    const text = await box(page, '#drill-text');
+
+    // Both inside one viewport height of each other, measured from whichever
+    // starts first to whichever ends last.
+    const spread = Math.max(board.bottom, text.bottom) - Math.min(board.top, text.top);
+    expect(spread, 'the board and the drill text must fit on screen together').toBeLessThanOrEqual(
+      900,
+    );
+  });
+
+  test('puts the board beside the drill rather than above it', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+
+    const board = await page.locator('#board-figure').boundingBox();
+    const text = await page.locator('#drill-text').boundingBox();
+    expect(board).not.toBeNull();
+    expect(text).not.toBeNull();
+    expect(text!.x, 'the drill should sit to the side of the board').toBeGreaterThan(board!.x);
+  });
+
+  test('offers a way to every section once a layout is loaded', async ({ page }) => {
+    await gotoApp(page);
+    await expect(page.locator('#section-nav')).toBeHidden();
+
+    await loadReferenceLayout(page);
+    const nav = page.locator('#section-nav');
+    await expect(nav).toBeVisible();
+
+    for (const target of [
+      '#drill-section',
+      '#sprint-section',
+      '#ladder-section',
+      '#stats-section',
+    ]) {
+      const link = nav.locator(`a[href="${target}"]`);
+      await expect(link).toBeVisible();
+      await link.click();
+      await expect(page.locator(target)).toBeInViewport();
+    }
+  });
+
+  test('keeps the whole page within a few screens', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+
+    const height = await page.evaluate(() => document.documentElement.scrollHeight);
+    // It was over five thousand. This is a ceiling, not a target.
+    expect(height, 'the page should not be an endless scroll').toBeLessThan(4200);
+  });
+});
+
+test.describe('on a narrow window', () => {
+  test.use({ viewport: { width: 380, height: 800 } });
+
+  test('stacks rather than squeezing, and never scrolls sideways', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+
+    const board = await page.locator('#board-figure').boundingBox();
+    const text = await page.locator('#drill-text').boundingBox();
+    expect(board).not.toBeNull();
+    expect(text).not.toBeNull();
+    // Stacked, which is one below the other rather than side by side. Measured
+    // vertically, not by left edges: the drill text sits inside a padded surface
+    // so its box starts a little in from the board's.
+    expect(text!.y, 'the drill should be below the board, not beside it').toBeGreaterThan(
+      board!.y + board!.height,
+    );
+
+    const overflow = await page.evaluate(
+      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    );
+    expect(overflow).toBeLessThanOrEqual(1);
+  });
+
+  test('the section navigation wraps instead of overflowing', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+    const nav = await page.locator('#section-nav').boundingBox();
+    expect(nav).not.toBeNull();
+    expect(nav!.width).toBeLessThanOrEqual(380);
+  });
+});
diff --git a/tests/e2e/pending.spec.ts b/tests/e2e/pending.spec.ts
index 5213e5f..bed5ffd 100644
--- a/tests/e2e/pending.spec.ts
+++ b/tests/e2e/pending.spec.ts
@@ -277,8 +277,15 @@ test.describe('the trainer journeys', () => {
     // must, and the drill is reachable from there without a single click.
     await page.keyboard.press('Tab');
     await expect(page.getByRole('link', { name: 'Skip to main content' })).toBeFocused();
-    await page.keyboard.press('Tab');
-    await expect(page.locator('#layout-file')).toBeFocused();
+
+    // The section navigation sits between the skip link and the content, which is
+    // why the skip link exists: taking it lands on the content directly, so the
+    // nav is never something a keyboard learner has to wade through.
+    await page.keyboard.press('Enter');
+    const stopsToFile = await tabUntil(page, 'layout-file');
+    expect(stopsToFile.at(-1), `tab stops after the skip link were ${stopsToFile.join(', ')}`).toBe(
+      'layout-file',
+    );
 
     const stops = await tabUntil(page, 'drill-start');
     expect(stops.at(-1), `tab stops after the file input were ${stops.join(', ')}`).toBe(