The landing shows each thing once, lists what is in pardes, and the guide opens on an annotated pane

The window shelf drops terminals-are-panes (`landing = false` in
clips.toml; the casts show it) and keeps the PDF, image, make, diff and
9P clips. Captions say what happens: the live-text cast renames a
variable, runs make and lands on the error; the 9P clip is a shell under
9ns where the session is a directory. Casts stack one per row at the
page's width, each showing a frame of itself until it plays. Under the
lead, a row of linked chips names what is in pardes: terminals, PDFs,
images, language servers, diff review, scripting, themes.

Install says how long the first build takes (62 s from a clean cache on
16 cores, measured with the dependencies already fetched), and `project`
in style.typ has a `download` slot (url, sha256, arch) install.typ
shows once a binary exists.

#annotated draws a screenshot with numbered pins and their labels as
text beside it; the guide opens with one of the orchard theme's shot:
the workspace tag, a column's tag, a pane's tag, the box, the body
and the scrollbar, before its glossary.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 40 insertions, 0 deletions

diff --git a/docs/typ/style.typ b/docs/typ/style.typ
index 2f63f3b2..c96b5e39 100644
--- a/docs/typ/style.typ
+++ b/docs/typ/style.typ
@@ -308,6 +308,9 @@
     (name: "git.0x4200.cafe", web: "https://git.0x4200.cafe/pardes", clone: "https://git.0x4200.cafe/pardes.git"),
   ),
   license: "ISC",
+  // a built binary to download, when there is one:
+  // (url: "...", sha256: "...", arch: "x86_64-linux")
+  download: none,
 )
 
 /// A glossary: like #pairs, under its own heading. On paper the heading
@@ -514,3 +517,40 @@
       )).flatten()))
   }
 }
+
+/// A screenshot with numbered pins on it and their labels as text beside
+/// it, so the labels read, search and translate as text. `src` is from
+/// the repository root (the site serves it from the same path under
+/// docs/site/); `size` is its pixel (width, height); each pin is (label,
+/// x, y) in pixels of that image.
+#let annotated(src, size, ..pins) = {
+  let (w, h) = size
+  let pins = pins.pos()
+  context if html-out() {
+    let web = src.trim("/docs/site/", at: start)
+    html.elem("figure", attrs: (class: "annotated"), {
+      html.elem("div", attrs: (class: "frame"), {
+        html.elem("img", attrs: (src: web, alt: "", width: str(w), height: str(h)))
+        for (i, (label, x, y)) in pins.enumerate() {
+          html.elem("span", attrs: (class: "pin", "aria-hidden": "true",
+            style: "left:" + str(calc.round(100 * x / w, digits: 2)) + "%;top:" + str(calc.round(100 * y / h, digits: 2)) + "%"), str(i + 1))
+        }
+      })
+      html.elem("ol", attrs: (class: "pins"), for (label, x, y) in pins { html.elem("li", label) })
+    })
+  } else {
+    let width = 11cm
+    let k = width / w
+    let pin(n) = box(width: 1.25em, height: 1.25em, radius: 50%, fill: palette.mouse,
+      align(center + horizon, text(size: 0.75em, weight: "bold", fill: white, str(n))))
+    block(breakable: false, grid(columns: (width, 1fr), column-gutter: 1.2em, align: horizon,
+      box(width: width, height: h * k, {
+        place(top + left, image(src, width: width))
+        for (i, (label, x, y)) in pins.enumerate() {
+          place(top + left, dx: x * k - 0.625em, dy: y * k - 0.625em, pin(i + 1))
+        }
+      }),
+      enum(..pins.map(p => p.at(0)), spacing: 0.7em),
+    ))
+  }
+}