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, 18 insertions, 2 deletions

diff --git a/docs/site/site.css b/docs/site/site.css
index 7d6d0660..6e4a2e93 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -150,8 +150,8 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 @media (max-width:600px) { .cmd pre { white-space:pre-wrap; overflow-wrap:anywhere; } }
 
 /* terminal recordings: the first across the page, the rest two by two */
-.casts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:18px; margin:1em 0 1.4em; }
-.casts .first { grid-column:1 / -1; }
+/* one per row at the page's full width: a terminal at half width is unreadable */
+.casts { display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; margin:1em 0 1.4em; }
 .cast .player { background:#121314; }
 .cast figcaption strong { color:var(--leaf); }
 .content h2.shelf { font-size:26px; margin:1.2em 0 .4em; }
@@ -191,3 +191,19 @@ main[data-page="builtins"] .content h4 + p { margin-top:0; }
   /* under the name: its prefix is --cols cells of the 13px mono font */
   .fstree .desc { display:block; padding-left:calc(var(--cols) * 7.8px); font-size:15px; margin-bottom:.15em; }
 }
+
+/* what's in it: a row of linked chips under the lead */
+.inside { display:flex; flex-wrap:wrap; gap:8px 10px; margin:.2em 0 1.1em; padding:0; list-style:none; }
+.inside a { display:inline-block; padding:2px 10px; font:17px var(--pixel); color:var(--leaf); background:var(--tag); border:2px solid var(--leaf); text-decoration:none; }
+.inside a:hover { color:var(--amber); border-color:var(--amber); }
+
+/* a screenshot with numbered pins, their labels listed beside it */
+.annotated { margin:1.2em 0 1.6em; display:grid; grid-template-columns:minmax(0, 3fr) minmax(12em, 2fr); gap:14px 22px; align-items:center; }
+.annotated .frame { position:relative; border:2px solid var(--leaf); box-shadow:5px 5px 0 var(--shadow); }
+.annotated img { display:block; width:100%; height:auto; }
+.annotated .pin { position:absolute; transform:translate(-50%, -50%); width:1.5em; height:1.5em; border-radius:50%;
+  display:flex; align-items:center; justify-content:center; font:700 14px var(--mono); background:var(--amber); color:#1b120a; box-shadow:0 0 0 2px var(--panel); }
+.annotated .pins { margin:0; padding-left:1.8em; font-size:18px; }
+.annotated .pins li { margin:.25em 0; }
+.annotated .pins li::marker { font:700 15px var(--mono); color:var(--amber); }
+@media (max-width:600px) { .annotated { grid-template-columns:minmax(0, 1fr); } }