diff --git a/script.html b/script.html
index b99f413..6426ec9 100644
--- a/script.html
+++ b/script.html
@@ -49,6 +49,12 @@
   .tlhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent2);pointer-events:none}
   .tlruler{position:absolute;left:0;right:0;bottom:0;height:14px;font:9px/14px var(--mono);color:var(--muted)}
   .tlruler span{position:absolute;transform:translateX(-50%)}
+  .steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
+  .steps button{background:#0f1117;border:1px solid var(--line);color:var(--muted);
+    border-radius:999px;padding:8px 15px;font:12px/1 var(--mono);cursor:pointer}
+  .steps button.done{color:var(--ink)}
+  .steps button.on{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default}
+  .steps button[disabled]{opacity:.35;cursor:not-allowed}
   .stage{position:relative;width:100%;max-width:300px}
   .stage>video{width:100%;aspect-ratio:9/16;border-radius:10px;background:#000;display:block}
   .ovl{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#000;display:none}
@@ -161,6 +167,38 @@ function shotHtml(s, locked) {
     + '</div></div>';
 }
 
+// Four jobs, one at a time. Which one you are on follows from the project's
+// status; VIEW lets you step back to look at an earlier one without pretending
+// the work has been undone.
+var STAGES = ["The words", "The layout", "Filming", "The cut"];
+var VIEW = null;
+
+function stageOf(st) {
+  if (st === "ready" || st === "film_failed") return 4;
+  if (st === "queued_to_film" || st === "filming") return 3;
+  if (st === "approved") return 2;
+  return 1;
+}
+
+function stepper(stage, view) {
+  return '<div class="steps">' + STAGES.map(function (n, k) {
+    var i = k + 1;
+    var cls = i === view ? "on" : (i <= stage ? "done" : "");
+    return '<button type="button" class="' + cls + '" data-stage="' + i + '"'
+      + (i <= stage ? '' : ' disabled') + '>' + i + ' &middot; ' + esc(n) + '</button>';
+  }).join("") + '</div>';
+}
+
+// Stage one shows the writing and nothing else: no frames, no camera, no
+// settings. Just what the pet actually says.
+function linesHtml(s) {
+  return '<div class="shot" style="grid-template-columns:1fr;padding:16px 20px"><div>'
+    + '<span class="n">Shot ' + (s.index || "") + '</span>'
+    + '<p class="line" style="margin:8px 0 6px">' + esc(s.line || "") + '</p>'
+    + '<p class="foot">' + (s.word_count || 0) + ' words &middot; about '
+    + (s.est_seconds || 0) + 's</p></div></div>';
+}
+
 function render(r) {
   DATA = r;
   var p = r.project, s = r.script, out = document.getElementById("out");
@@ -190,7 +228,12 @@ function render(r) {
   document.getElementById("title").textContent = s.title || "The script";
   document.getElementById("sub").textContent = s.premise || "";
 
-  var locked = p.status === "approved";
+  var stage = stageOf(p.status);
+  if (VIEW === null || VIEW > stage) VIEW = stage;
+  // Shot controls belong to the layout stage. Elsewhere the shots are shown
+  // but not touchable, which is what "locked" means to shotHtml.
+  var locked = VIEW !== 2;
+  var canEditScript = (stage === 1);
   var warn = (s._warnings && s._warnings.length)
     ? '<div class="warn"><strong>Worth a look:</strong> ' + s._warnings.map(esc).join(" · ") + '</div>' : "";
 
@@ -299,8 +342,9 @@ function render(r) {
       + '</div>';
   }
 
-  var actions = locked
-    ? '<div class="card"><p style="margin:0"><strong>Approved.</strong> Filming is switched on once payment is live. Nothing has been charged.</p></div>'
+  var actions = !canEditScript
+    ? '<div class="card"><p style="margin:0"><strong>These words are settled.</strong> '
+      + 'Everything after this arranges how they are shot, so the writing is left alone.</p></div>'
     : '<div class="card">'
       + '<h2 class="sec">Change the words</h2>'
       + '<div class="field"><label for="fb">What would you change</label>'
@@ -312,13 +356,30 @@ function render(r) {
       + '<button class="btn" id="approve" style="margin-left:10px">Approve and lock it</button>'
       + '</div>';
 
-  out.innerHTML = cams + head + warn + full
-    + '<h2 class="sec">The shots</h2>'
-    + s.segments.map(function (x) { return shotHtml(x, locked); }).join("")
-    + own
-    + film
-    + post
-    + actions;
+  var body;
+  if (VIEW === 1) {
+    body = head + warn + full
+      + '<h2 class="sec">The words, shot by shot</h2>'
+      + s.segments.map(linesHtml).join("")
+      + actions;
+  } else if (VIEW === 2) {
+    body = head
+      + '<p class="note" style="margin:0 0 22px"><strong>How it will be laid out.</strong> '
+      + 'Each shot has a setting, a camera move and an opening frame that carries your '
+      + 'pet&rsquo;s likeness. Cutaways sit across the joins so the cut is never on screen. '
+      + 'All of it has been chosen for you &mdash; change anything you disagree with, or '
+      + 'go straight to filming.</p>'
+      + '<h2 class="sec">The shots</h2>'
+      + s.segments.map(function (x) { return shotHtml(x, false); }).join("")
+      + own
+      + film;
+  } else if (VIEW === 3) {
+    body = head + film;
+  } else {
+    body = head + post + film;
+  }
+
+  out.innerHTML = cams + stepper(stage, VIEW) + body;
 
   wire(locked);
 }
@@ -447,6 +508,16 @@ function bindPics() {
 }
 
 function wire(locked) {
+  [].forEach.call(document.querySelectorAll("[data-stage]"), function (b) {
+    b.onclick = function () {
+      var want = parseInt(b.getAttribute("data-stage"), 10);
+      if (want === VIEW) return;
+      VIEW = want;
+      hideMsg("msg");
+      render(DATA);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+  });
   bindPics();
   bindFilm((DATA && DATA.project) || {});
   bindPost();