diff --git a/app/globals.css b/app/globals.css
index 2278181..92e4bc3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -657,7 +657,7 @@ button:disabled {
 .tutorial-examples {
   display: grid;
   gap: 12px;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .tutorial-example-card {
   background: #f4f1e9;
@@ -672,8 +672,12 @@ button:disabled {
   display: block;
   height: 160px;
   image-rendering: pixelated;
+  object-fit: contain;
   width: 100%;
 }
+.tutorial-example-card .tutorial-yoke-preview {
+  image-rendering: auto;
+}
 .tutorial-example-card > div {
   align-content: start;
   border-top: 1px solid var(--line);
@@ -704,6 +708,29 @@ button:disabled {
   justify-self: start;
   margin-top: auto;
 }
+.tutorial-example-card .tutorial-yoke-shortcut {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--accent-deep);
+  font-size: 12px;
+  font-weight: 600;
+  margin-top: 7px;
+  min-height: 28px;
+  padding: 3px 6px;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.tutorial-example-card .tutorial-yoke-shortcut:hover:not(:disabled) {
+  background: var(--accent-soft);
+  border-color: transparent;
+  box-shadow: none;
+  transform: none;
+}
+.tutorial-example-card .tutorial-yoke-shortcut:focus-visible {
+  outline: 2px solid var(--accent-deep);
+  outline-offset: 2px;
+}
 .tutorial-limit-note {
   color: #943f32;
   font-size: 11px;
@@ -717,6 +744,21 @@ button:disabled {
   position: fixed;
   z-index: 60;
 }
+.tour-layer-guided {
+  pointer-events: auto;
+}
+.yoke-tour-editor {
+  background: var(--panel);
+  inset: 0;
+  overflow: auto;
+  padding: 18px;
+  position: fixed;
+  z-index: 46;
+}
+.yoke-tour-editor > h2 {
+  font-size: 16px;
+  margin: 0 0 12px;
+}
 .tour-dim {
   background: rgba(31, 36, 33, 0.62);
   inset: 0;
@@ -741,10 +783,18 @@ button:disabled {
   border-radius: 13px;
   box-shadow: 0 18px 48px rgba(28, 34, 30, 0.28);
   display: grid;
+  max-height: calc(100dvh - 24px);
+  overflow: auto;
   padding: 17px;
   pointer-events: auto;
   position: fixed;
 }
+.tour-card.tour-card-centered {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: min(350px, calc(100vw - 24px));
+}
 .tour-card-progress {
   align-items: center;
   color: var(--muted);
@@ -5094,8 +5144,6 @@ select:focus {
     border-top: 0;
   }
   .tour-card {
-    max-height: calc(100vh - 24px);
-    overflow: auto;
     width: auto;
   }
 }
diff --git a/components/chart-maker.tsx b/components/chart-maker.tsx
index f8a050c..b3f6491 100644
--- a/components/chart-maker.tsx
+++ b/components/chart-maker.tsx
@@ -165,6 +165,7 @@ export function ChartMaker({
     useState<SelectionClipboard | null>(null);
   const [knitModeOpen, setKnitModeOpen] = useState(false);
   const [newYokeOpen, setNewYokeOpen] = useState(false);
+  const [tourFileOpen, setTourFileOpen] = useState(false);
   const [patternImporterOpen, setPatternImporterOpen] = useState(false);
   const [dimensionDraft, setDimensionDraft] = useSyncedDraft(
     `${activeTabId}:${document.width}:${document.height}`,
@@ -1178,10 +1179,12 @@ export function ChartMaker({
             onImportPattern={() => setPatternImporterOpen(true)}
             onNewBlank={addTab}
             onNewYoke={() => setNewYokeOpen(true)}
+            tourOpen={tourFileOpen}
             tabsFull={tabs.length >= MAX_CHART_TABS}
             onNavigateAway={confirmLeavingEditor}
           />
           <OnboardingTour
+            onTourFileOpen={setTourFileOpen}
             tabsFull={tabs.length >= MAX_CHART_TABS}
             onOpenExample={openTutorialExample}
           />
diff --git a/components/export-tools.tsx b/components/export-tools.tsx
index 3b7336e..f2dbd3a 100644
--- a/components/export-tools.tsx
+++ b/components/export-tools.tsx
@@ -30,6 +30,7 @@ type Props = {
   onNewBlank?: () => void;
   onNewYoke?: () => void;
   tabsFull?: boolean;
+  tourOpen?: boolean;
   onNavigateAway?: (event: { preventDefault(): void }) => void;
 };
 
@@ -210,6 +211,7 @@ export function ExportTools({
   onNewBlank,
   onNewYoke,
   tabsFull,
+  tourOpen = false,
   onNavigateAway,
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -354,7 +356,7 @@ export function ExportTools({
         />
         <button
           className="secondary-button"
-          aria-expanded={open}
+          aria-expanded={open || tourOpen}
           onClick={() => {
             setOpen((value) => !value);
             setChoosingChartImage(false);
@@ -365,7 +367,7 @@ export function ExportTools({
         >
           File
         </button>
-        {open ? (
+        {open || tourOpen ? (
           <div
             className="file-menu-popover"
             role="menu"
@@ -384,6 +386,7 @@ export function ExportTools({
             </button>
             <button
               role="menuitem"
+              data-tour="new-circular-yoke"
               disabled={tabsFull || !onNewYoke}
               onClick={() => {
                 setOpen(false);
diff --git a/components/onboarding-tour.tsx b/components/onboarding-tour.tsx
index db6c097..8203b77 100644
--- a/components/onboarding-tour.tsx
+++ b/components/onboarding-tour.tsx
@@ -2,6 +2,7 @@
 
 import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
 import type { ChartDocument } from "@/lib/chart";
+import { YokeTourScene, type YokeTourSceneName } from "./yoke-tour-scene";
 import {
   tutorialExamples,
   type TutorialExample,
@@ -10,13 +11,14 @@ import {
 const TUTORIAL_STORAGE_KEY = "knitplot-tutorial-v1";
 
 type TourStep = {
-  target: string;
+  target?: string;
+  scene?: "file" | YokeTourSceneName;
   eyebrow: string;
   title: string;
   body: string;
 };
 
-const steps: TourStep[] = [
+const regularSteps: TourStep[] = [
   {
     target: "colours",
     eyebrow: "Choose your yarn colours",
@@ -73,12 +75,73 @@ const steps: TourStep[] = [
   },
 ];
 
+const yokeSteps: TourStep[] = [
+  {
+    target: "new-circular-yoke",
+    scene: "file",
+    eyebrow: "Yoke Design Studio",
+    title: "Open the Yoke Design Studio",
+    body: "Choose File → Circular yoke to start a new design. This walkthrough uses a sample and won’t change your charts.",
+  },
+  {
+    target: "yoke-measurements",
+    scene: "measurements",
+    eyebrow: "Yoke Design Studio",
+    title: "Start with your measurements",
+    body: "Enter body measurements plus ease, or finished sweater measurements directly. Use the diagrams if you’re unsure, then enter your gauge and choose Calculate targets.",
+  },
+  {
+    target: "yoke-increase-schedule",
+    scene: "schedule",
+    eyebrow: "Yoke Design Studio",
+    title: "Move or spread out increases",
+    body: "Check the neckline and sleeve split counts first. In Increase schedule, change Round to move a set of increases, or edit the stitch positions to move individual increases within the repeat.",
+  },
+  {
+    target: "yoke-short-rows",
+    scene: "preview",
+    eyebrow: "Yoke Design Studio",
+    title: "Preview the shape and short rows",
+    body: "Choose Preview yoke to check the shape and adjust any back-neck short-row turns before creating the chart. You can return to these settings with Edit shaping.",
+  },
+  {
+    target: "yoke-views",
+    scene: "editor",
+    eyebrow: "Yoke Design Studio",
+    title: "Choose a drawing view",
+    body: "Use Standard chart for a straight grid, One repeat for detail, or Half yoke and Whole yoke to see how your design sits around the sweater.",
+  },
+  {
+    target: "yoke-editing-scope",
+    scene: "editor",
+    eyebrow: "Yoke Design Studio",
+    title: "Choose which repeats to edit",
+    body: "Viewing repeat controls which repeat you see up close. Edit controls where new strokes go: this repeat, selected repeats (such as the front), or all repeats. To spread an existing motif, use Copy repeat instead.",
+  },
+  {
+    target: "stitches",
+    scene: "editor",
+    eyebrow: "Yoke Design Studio",
+    title: "Refine your shaping as you draw",
+    body: "Use Stitches to draft shaping changes directly on the chart, then choose Review shaping changes to check the stitch counts before applying. Open Tidal Fish Yoke from Help and examples to try it on a finished design.",
+  },
+];
+
+const fullTour = [...regularSteps, ...yokeSteps];
+
 type Props = {
   tabsFull: boolean;
   onOpenExample: (id: TutorialExample["id"]) => void;
+  onTourFileOpen: (open: boolean) => void;
 };
 
-type TargetRect = { top: number; left: number; width: number; height: number };
+type TargetRect = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  cardHeight: number;
+};
 
 function designBounds(document: ChartDocument) {
   if (!document.instructions.trimBackground) {
@@ -129,6 +192,31 @@ function ExamplePreview({ example }: { example: TutorialExample }) {
     const context = canvas.getContext("2d");
     if (!context) return;
     const { document, previewRepeats } = example;
+    if (document.yoke) {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      const { cells, palette } = document.yoke;
+      const center = canvas.width / 2;
+      const innerRadius = 22;
+      const rowHeight = (center - 10 - innerRadius) / cells.length;
+      cells.forEach((row, round) => {
+        const radius = innerRadius + (round + 0.5) * rowHeight;
+        const pitch = (2 * Math.PI) / row.length;
+        context.lineWidth = rowHeight + 0.5;
+        row.forEach((colour, stitch) => {
+          context.strokeStyle = palette[colour];
+          context.beginPath();
+          context.arc(
+            center,
+            center,
+            radius,
+            stitch * pitch,
+            (stitch + 1) * pitch + 0.003,
+          );
+          context.stroke();
+        });
+      });
+      return;
+    }
     const bounds = designBounds(document);
     const sourceRows = bounds.endRow - bounds.startRow + 1;
     const sourceColumns = bounds.endColumn - bounds.startColumn + 1;
@@ -174,18 +262,27 @@ function ExamplePreview({ example }: { example: TutorialExample }) {
   return (
     <canvas
       ref={canvasRef}
-      width="360"
-      height="170"
+      width="320"
+      height="320"
+      className={example.document.yoke ? "tutorial-yoke-preview" : undefined}
       aria-label={`Preview of ${example.title}`}
       role="img"
     />
   );
 }
 
-export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
+export function OnboardingTour({
+  tabsFull,
+  onOpenExample,
+  onTourFileOpen,
+}: Props) {
   const [view, setView] = useState<"closed" | "welcome" | "tour">("closed");
   const [stepIndex, setStepIndex] = useState(0);
+  const [yokeOnly, setYokeOnly] = useState(false);
+  const steps = yokeOnly ? yokeSteps : fullTour;
+  const step = steps[stepIndex];
   const [targetRect, setTargetRect] = useState<TargetRect | null>(null);
+  const tourCardRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
     let timer: number | null = null;
@@ -220,11 +317,19 @@ export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
     }
     setView("closed");
     setTargetRect(null);
-  }, []);
+    onTourFileOpen(false);
+  }, [onTourFileOpen]);
+
+  function goToStep(index: number, route = steps) {
+    setTargetRect(null);
+    setStepIndex(index);
+    onTourFileOpen(route[index].scene === "file");
+  }
 
-  function startTour() {
+  function startTour(onlyYoke = false) {
     rememberTour();
-    setStepIndex(0);
+    setYokeOnly(onlyYoke);
+    goToStep(0, onlyYoke ? yokeSteps : fullTour);
     setView("tour");
   }
 
@@ -237,8 +342,14 @@ export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
 
   useEffect(() => {
     if (view !== "tour") return;
-    const selector = `[data-tour="${steps[stepIndex].target}"]`;
-    const element = window.document.querySelector<HTMLElement>(selector);
+    const { target, scene } = step;
+    const root =
+      scene && scene !== "file"
+        ? window.document.querySelector("[data-yoke-tour-scene]")
+        : window.document;
+    const element = target
+      ? root?.querySelector<HTMLElement>(`[data-tour="${target}"]`)
+      : null;
     if (!element) {
       // eslint-disable-next-line react-hooks/set-state-in-effect -- Clear measurements when the external DOM target no longer exists.
       setTargetRect(null);
@@ -259,19 +370,23 @@ export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
         left: rect.left,
         width: rect.width,
         height: rect.height,
+        cardHeight: tourCardRef.current?.offsetHeight ?? 0,
       });
     };
+    const observer = new ResizeObserver(update);
+    if (tourCardRef.current) observer.observe(tourCardRef.current);
     const timer = window.setTimeout(update, 280);
     update();
     window.addEventListener("resize", update);
     window.addEventListener("scroll", update, true);
     return () => {
       window.clearTimeout(timer);
+      observer.disconnect();
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update, true);
       if (details && !detailsWasOpen) details.open = false;
     };
-  }, [view, stepIndex]);
+  }, [view, step]);
 
   useEffect(() => {
     if (view === "closed") return;
@@ -295,13 +410,11 @@ export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
       ),
     );
     const below = targetRect.top + targetRect.height + 16;
-    const top =
-      below + 210 < window.innerHeight
-        ? below
-        : Math.max(16, targetRect.top - 226);
+    const above = targetRect.top - targetRect.cardHeight - 16;
+    const maxTop = window.innerHeight - targetRect.cardHeight - 12;
+    const top = Math.max(12, Math.min(maxTop, below <= maxTop ? below : above));
     return { left, top, width } satisfies CSSProperties;
   })();
-  const step = steps[stepIndex];
 
   return (
     <>
@@ -339,7 +452,7 @@ export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
                 examples.
               </p>
               <div className="tutorial-welcome-actions">
-                <button className="primary-button" onClick={startTour}>
+                <button className="primary-button" onClick={() => startTour()}>
                   Show me around
                 </button>
                 <button onClick={closeTutorial}>I’ll explore myself</button>
@@ -351,7 +464,9 @@ export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
                   <ExamplePreview example={example} />
                   <div>
                     <span>
-                      {example.document.width} × {example.document.height}
+                      {example.document.yoke
+                        ? `Circular yoke · ${example.document.height} rounds`
+                        : `${example.document.width} × ${example.document.height}`}
                     </span>
                     <h2>{example.title}</h2>
                     <p>{example.description}</p>
@@ -361,6 +476,14 @@ export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
                     >
                       Open example
                     </button>
+                    {example.id === "tidal-fish-yoke" ? (
+                      <button
+                        className="tutorial-yoke-shortcut"
+                        onClick={() => startTour(true)}
+                      >
+                        Yoke tutorial
+                      </button>
+                    ) : null}
                   </div>
                 </article>
               ))}
@@ -375,60 +498,71 @@ export function OnboardingTour({ tabsFull, onOpenExample }: Props) {
       ) : null}
 
       {view === "tour" ? (
-        <div className="tour-layer" aria-live="polite">
-          {targetRect ? (
-            <div
-              className="tour-highlight"
-              style={{
-                top: targetRect.top - 7,
-                left: targetRect.left - 7,
-                width: targetRect.width + 14,
-                height: targetRect.height + 14,
-              }}
-            />
-          ) : (
-            <div className="tour-dim" />
-          )}
-          <section
-            className="tour-card"
-            style={bubbleStyle}
-            role="dialog"
-            aria-label={`Tutorial step ${stepIndex + 1} of ${steps.length}`}
+        <>
+          {step.scene && step.scene !== "file" ? (
+            <YokeTourScene scene={step.scene} />
+          ) : null}
+          <div
+            className={
+              step.scene ? "tour-layer tour-layer-guided" : "tour-layer"
+            }
+            aria-live="polite"
           >
-            <div className="tour-card-progress">
-              <span>
-                {stepIndex + 1} of {steps.length}
-              </span>
-              <button aria-label="Skip tutorial" onClick={closeTutorial}>
-                ×
-              </button>
-            </div>
-            <p className="eyebrow">{step.eyebrow}</p>
-            <h2>{step.title}</h2>
-            <p>{step.body}</p>
-            <div className="tour-card-actions">
-              <button onClick={closeTutorial}>Skip tour</button>
-              <div>
-                {stepIndex > 0 ? (
+            {targetRect ? (
+              <div
+                className="tour-highlight"
+                style={{
+                  top: targetRect.top - 7,
+                  left: targetRect.left - 7,
+                  width: targetRect.width + 14,
+                  height: targetRect.height + 14,
+                }}
+              />
+            ) : (
+              <div className="tour-dim" />
+            )}
+            <section
+              ref={tourCardRef}
+              className={
+                targetRect ? "tour-card" : "tour-card tour-card-centered"
+              }
+              style={bubbleStyle}
+              role="dialog"
+              aria-label={`Tutorial step ${stepIndex + 1} of ${steps.length}`}
+            >
+              <div className="tour-card-progress">
+                <span>
+                  {stepIndex + 1} of {steps.length}
+                </span>
+                <button aria-label="Skip tutorial" onClick={closeTutorial}>
+                  ×
+                </button>
+              </div>
+              <p className="eyebrow">{step.eyebrow}</p>
+              <h2>{step.title}</h2>
+              <p>{step.body}</p>
+              <div className="tour-card-actions">
+                <button onClick={closeTutorial}>Skip tour</button>
+                <div>
+                  {stepIndex > 0 ? (
+                    <button onClick={() => goToStep(stepIndex - 1)}>
+                      Back
+                    </button>
+                  ) : null}
                   <button
-                    onClick={() => setStepIndex((current) => current - 1)}
+                    className="primary-button"
+                    onClick={() => {
+                      if (stepIndex === steps.length - 1) closeTutorial();
+                      else goToStep(stepIndex + 1);
+                    }}
                   >
-                    Back
+                    {stepIndex === steps.length - 1 ? "Start creating" : "Next"}
                   </button>
-                ) : null}
-                <button
-                  className="primary-button"
-                  onClick={() => {
-                    if (stepIndex === steps.length - 1) closeTutorial();
-                    else setStepIndex((current) => current + 1);
-                  }}
-                >
-                  {stepIndex === steps.length - 1 ? "Start creating" : "Next"}
-                </button>
+                </div>
               </div>
-            </div>
-          </section>
-        </div>
+            </section>
+          </div>
+        </>
       ) : null}
     </>
   );
diff --git a/components/yoke-editor.tsx b/components/yoke-editor.tsx
index a149d9c..34de0f0 100644
--- a/components/yoke-editor.tsx
+++ b/components/yoke-editor.tsx
@@ -225,6 +225,7 @@ export function YokeEditor({
           />
           <div
             className="yoke-view-tabs"
+            data-tour="yoke-views"
             role="group"
             aria-label="Yoke drawing view"
           >
diff --git a/components/yoke-plan-dialog.tsx b/components/yoke-plan-dialog.tsx
index bc4e794..0d87a85 100644
--- a/components/yoke-plan-dialog.tsx
+++ b/components/yoke-plan-dialog.tsx
@@ -87,12 +87,14 @@ export function YokePlanDialog({
   tabsFull,
   onCommit,
   onClose,
+  tourStage,
 }: {
   document?: ChartDocument;
   initialMeasurements?: YokeMeasurements;
   tabsFull: boolean;
   onCommit: (document: ChartDocument, newTab: boolean) => boolean;
   onClose: () => void;
+  tourStage?: "measurements" | "schedule" | "preview";
 }) {
   const [base] = useState(() => document);
   const measurements =
@@ -103,10 +105,11 @@ export function YokePlanDialog({
       calculateYokeTargets(measurements),
       measurements.repeats,
     );
-  const [pending, setPending] = useState<{
+  const [draft, setPending] = useState<{
     measurements: YokeMeasurements;
     events: IncreaseEvent[];
   } | null>(null);
+  const pending = tourStage === "preview" ? { measurements, events } : draft;
   const [mode, setMode] = useState<"keep" | "scale">("keep");
   const [shortRows, setShortRows] = useState<YokeShortRows>();
   const [error, setError] = useState("");
@@ -189,6 +192,7 @@ export function YokePlanDialog({
               </p>
             ) : null}
             <YokePlanner
+              tourShowSchedule={tourStage === "schedule"}
               measurements={measurements}
               events={events}
               inputId={id}
@@ -264,8 +268,8 @@ export function YokePlanDialog({
                 label={base ? "Proposed" : "Your yoke"}
               />
             </div>
-            <details>
-              <summary>Neckline short rows</summary>
+            <details open={tourStage === "preview" ? true : undefined}>
+              <summary data-tour="yoke-short-rows">Neckline short rows</summary>
               <YokeShortRowPlanner
                 key={JSON.stringify([
                   proposal.measurements,
diff --git a/components/yoke-planner.tsx b/components/yoke-planner.tsx
index cafab50..6bc4e92 100644
--- a/components/yoke-planner.tsx
+++ b/components/yoke-planner.tsx
@@ -32,6 +32,7 @@ type Candidate = {
   source: string;
 };
 type Props = {
+  tourShowSchedule?: boolean;
   applyLabel?: string;
   measurements: YokeMeasurements;
   events: IncreaseEvent[];
@@ -42,6 +43,7 @@ type Props = {
 };
 
 export function YokePlanner({
+  tourShowSchedule = false,
   applyLabel = "Apply plan to drawing",
   measurements,
   events,
@@ -55,19 +57,12 @@ export function YokePlanner({
     measurements.measurementMode ?? "body",
   );
   const [values, setValues] = useState(() => drafts(measurements));
-  const [candidate, setCandidate] = useState<Candidate | null>(null);
+  const [calculated, setCandidate] = useState<Candidate | null>(null);
   const [schedule, setSchedule] = useState(scheduleDrafts(events));
   const [increaseRounds, setIncreaseRounds] = useState(String(events.length));
   const [automatic, setAutomatic] = useState(true);
   const [error, setError] = useState("");
   const [roundingAccepted, setRoundingAccepted] = useState(false);
-  const rounding = useMemo(
-    () =>
-      candidate
-        ? yokeRoundingReview(candidate.measurements, candidate.targets)
-        : null,
-    [candidate],
-  );
   const source = JSON.stringify({
     values,
     unit,
@@ -75,6 +70,21 @@ export function YokePlanner({
     automatic,
     increaseRounds,
   });
+  const candidate = useMemo(
+    () =>
+      calculated ??
+      (tourShowSchedule
+        ? { measurements, targets: calculateYokeTargets(measurements), source }
+        : null),
+    [calculated, tourShowSchedule, measurements, source],
+  );
+  const rounding = useMemo(
+    () =>
+      candidate
+        ? yokeRoundingReview(candidate.measurements, candidate.targets)
+        : null,
+    [candidate],
+  );
   const fields = yokeMeasurementFields(mode);
   const dirty = candidate !== null && candidate.source !== source;
   const number = (value: number) => value.toFixed(1);
@@ -151,7 +161,10 @@ export function YokePlanner({
       </p>
       <div className="yoke-planner-measurements">
         <form onSubmit={calculate}>
-          <div className="yoke-measurement-control">
+          <div
+            className="yoke-measurement-control"
+            data-tour="yoke-measurements"
+          >
             <span>Measurement input</span>
             <label className="knit-wake-toggle yoke-measurement-toggle">
               <span>Body + ease</span>
@@ -326,7 +339,7 @@ export function YokePlanner({
               }}
             />
           ) : null}
-          <h3>Increase schedule</h3>
+          <h3 data-tour="yoke-increase-schedule">Increase schedule</h3>
           <p>
             {schedule.length} increase rounds calculated.
             {candidate.targets.shoulder
diff --git a/components/yoke-repeat-controls.tsx b/components/yoke-repeat-controls.tsx
index 8d2ba75..ea9bcf3 100644
--- a/components/yoke-repeat-controls.tsx
+++ b/components/yoke-repeat-controls.tsx
@@ -46,7 +46,7 @@ export function YokeRepeatControls({
 
   return (
     <>
-      <div className="yoke-editing-scope">
+      <div className="yoke-editing-scope" data-tour="yoke-editing-scope">
         <label>
           Viewing&nbsp;repeat
           <select
diff --git a/components/yoke-tour-scene.tsx b/components/yoke-tour-scene.tsx
new file mode 100644
index 0000000..1e64c9d
--- /dev/null
+++ b/components/yoke-tour-scene.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { tutorialExampleDocument } from "@/lib/tutorial-examples";
+import { emptyStitchDraft } from "@/components/use-yoke-stitches";
+import { YokeEditor } from "./yoke-editor";
+import { YokePlanDialog } from "./yoke-plan-dialog";
+
+export type YokeTourSceneName =
+  "measurements" | "schedule" | "preview" | "editor";
+
+const noChange = () => {};
+const noCommit = () => false;
+
+export function YokeTourScene({ scene }: { scene: YokeTourSceneName }) {
+  const example =
+    scene === "editor" ? tutorialExampleDocument("tidal-fish-yoke") : null;
+  return createPortal(
+    <div data-yoke-tour-scene={scene} inert>
+      {scene === "editor" ? (
+        example && (
+          <div className="yoke-tour-editor">
+            <h2>{example.title} · tutorial preview</h2>
+            <div className="workspace">
+              <YokeEditor
+                document={example.document}
+                view="chart"
+                onViewChange={noChange}
+                onChange={noChange}
+                onCreate={noCommit}
+                onStrokeStart={noChange}
+                undo={noChange}
+                redo={noChange}
+                canUndo={false}
+                canRedo={false}
+                tabsFull={false}
+                stitchDraft={emptyStitchDraft}
+                onStitchDraftChange={noChange}
+              />
+            </div>
+          </div>
+        )
+      ) : (
+        <YokePlanDialog
+          tourStage={scene}
+          tabsFull={false}
+          onCommit={noCommit}
+          onClose={noChange}
+        />
+      )}
+    </div>,
+    document.body,
+  );
+}
diff --git a/e2e/editor.spec.ts b/e2e/editor.spec.ts
index 451790e..c669cf7 100644
--- a/e2e/editor.spec.ts
+++ b/e2e/editor.spec.ts
@@ -13,6 +13,93 @@ test.beforeEach(async ({ page }) => {
   );
 });
 
+test("first visit and Help offer the yoke tour and an editable example", async ({
+  context,
+}) => {
+  const page = await context.newPage();
+  await page.goto("/");
+  const welcome = page.getByRole("dialog", {
+    name: "Plot something wonderful.",
+  });
+  const example = welcome
+    .getByRole("article")
+    .filter({ hasText: "Tidal Fish Yoke" });
+  await expect(example.getByRole("img")).toBeVisible();
+  await welcome.getByRole("button", { name: "Show me around" }).click();
+  const yokeStep = page.getByRole("heading", {
+    name: "Open the Yoke Design Studio",
+  });
+  for (let i = 0; i < 9; i++) {
+    await page.getByRole("button", { name: "Next", exact: true }).click();
+  }
+  await expect(yokeStep).toBeVisible();
+  await expect(page.getByText(/Choose File → Circular yoke/)).toBeVisible();
+  await expect(
+    page.getByRole("menuitem", { name: "Circular yoke", exact: true }),
+  ).toBeVisible();
+  await page.getByRole("button", { name: "Skip tour" }).click();
+  await page.setViewportSize({ width: 900, height: 440 });
+  await page.getByRole("button", { name: "Help and examples" }).click();
+  await example.getByRole("button", { name: "Yoke tutorial" }).click();
+  await expect(yokeStep).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Back", exact: true }),
+  ).toHaveCount(0);
+  for (const title of [
+    "Start with your measurements",
+    "Move or spread out increases",
+    "Preview the shape and short rows",
+    "Choose a drawing view",
+    "Choose which repeats to edit",
+    "Refine your shaping as you draw",
+  ]) {
+    await page.getByRole("button", { name: "Next", exact: true }).click();
+    await expect(page.getByRole("heading", { name: title })).toBeVisible();
+    const scene = page.locator("[data-yoke-tour-scene]");
+    await expect(scene).toBeAttached();
+    if (title === "Start with your measurements")
+      await expect(
+        scene.getByText("Measurement input", { exact: true }),
+      ).toBeVisible();
+    if (title === "Move or spread out increases")
+      await expect(
+        scene.locator('[data-tour="yoke-increase-schedule"]'),
+      ).toBeVisible();
+    if (title === "Preview the shape and short rows")
+      await expect(
+        scene.locator('[data-tour="yoke-short-rows"]'),
+      ).toBeVisible();
+    if (title === "Choose which repeats to edit")
+      await expect(
+        scene.locator('select[aria-label="Edit scope"]'),
+      ).toBeVisible();
+  }
+  const finish = page.getByRole("button", { name: "Start creating" });
+  const lastStep = page.getByRole("dialog", { name: "Tutorial step 7 of 7" });
+  await expect(lastStep).toBeInViewport({ ratio: 1 });
+  await expect(finish).toBeInViewport({ ratio: 1 });
+  await page.setViewportSize({ width: 390, height: 500 });
+  await expect(lastStep).toBeInViewport({ ratio: 1 });
+  await expect(finish).toBeInViewport({ ratio: 1 });
+  await finish.click();
+  await expect(page.locator("[data-yoke-tour-scene]")).toHaveCount(0);
+  await expect(page.getByRole("tab")).toHaveCount(1);
+  await page.getByRole("button", { name: "Help and examples" }).click();
+  await example.getByRole("button", { name: "Open example" }).click();
+  await expect(page.getByRole("textbox", { name: "Chart name" })).toHaveValue(
+    "Tidal Fish Yoke",
+  );
+  await expect(
+    page.getByRole("button", { name: "Whole yoke", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("tab", { name: "Untitled chart", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByText("Yoke tutorial: drawing", { exact: true }),
+  ).toHaveCount(0);
+});
+
 test("anonymous editor supports draw, undo, redo, and immediate save/reload", async ({
   page,
 }) => {
diff --git a/lib/tutorial-examples.ts b/lib/tutorial-examples.ts
index eb6a87c..d808e00 100644
--- a/lib/tutorial-examples.ts
+++ b/lib/tutorial-examples.ts
@@ -3,9 +3,16 @@ import {
   cloneDocument,
   defaultInstructionSettings,
 } from "@/lib/chart";
+import { yokeDocument } from "./yoke-document";
+import {
+  calculateYokeTargets,
+  defaultYokeMeasurements,
+  suggestYokeSchedule,
+} from "./yoke-plan";
+import { createYokeProject } from "./yoke-project";
 
 export type TutorialExample = {
-  id: "dutch-bunny" | "simple-repeat";
+  id: "dutch-bunny" | "simple-repeat" | "tidal-fish-yoke";
   title: string;
   description: string;
   document: ChartDocument;
@@ -135,6 +142,49 @@ const simpleRepeat = makeDocument({
   ],
 });
 
+// One repeat of the supplied chart, indexed by round from the neckline.
+const tidalFishRounds: Partial<Record<number, string>> = {
+  5: "2222222222222222",
+  7: "3333333333333333",
+  30: "00000000000000022200000000000000",
+  31: "00000000000000221200000000000000",
+  32: "00000000000000111111000000000000",
+  33: "00000220000011111111110000000000",
+  34: "0000000222001111121111111100000000000",
+  35: "0000000022211111211111110110000000000",
+  36: "0000000002211111211111111111000000000",
+  37: "0000000022211111211111111110000000000",
+  38: "0000000222001111121111111100000000000",
+  39: "0000000220000011111111110000000000000",
+  40: "0000000000000000111111000000000000000",
+  41: "0000000000000000022200000000000000000",
+  47: "00022000000002200000000220000000022000000",
+  48: "00200200000020020000002002000000200200000",
+  49: "22000020000200002000020000200002000020000",
+  50: "00000002002000000200200000020020000002002",
+  51: "00000000220000000022000000002200000000220",
+  55: "33333333333333333333333333333333333333333",
+  57: "22222222222222222222222222222222222222222",
+};
+
+function makeExampleYoke() {
+  const measurements = { ...defaultYokeMeasurements, repeats: 8 };
+  const plan = calculateYokeTargets(measurements);
+  const project = createYokeProject(
+    measurements,
+    suggestYokeSchedule(plan, measurements.repeats),
+  );
+  project.palette = ["#192e40", "#f3dec0", "#78b4aa", "#d49a55"];
+  project.cells = project.cells.map((row, index) => {
+    const motif = tidalFishRounds[index + 1];
+    if (!motif) return row;
+    return Array.from(motif.repeat(measurements.repeats), Number);
+  });
+  return yokeDocument(project, "Tidal Fish Yoke");
+}
+
+const tidalFishYoke = makeExampleYoke();
+
 export const tutorialExamples: TutorialExample[] = [
   {
     id: "dutch-bunny",
@@ -150,6 +200,13 @@ export const tutorialExamples: TutorialExample[] = [
     document: simpleRepeat,
     previewRepeats: { x: 2, y: 2 },
   },
+  {
+    id: "tidal-fish-yoke",
+    title: tidalFishYoke.name,
+    description: "Cream fish and sea-glass waves on a deep navy circular yoke.",
+    document: tidalFishYoke,
+    previewRepeats: { x: 1, y: 1 },
+  },
 ];
 
 export function tutorialExampleDocument(id: TutorialExample["id"]) {