The landing leads with live text and plays terminal casts first; the Themes page gets a gallery; install starts at the clone

The landing's own words sit in one `landing` record in site.typ: a lead
on the core idea (any text is live: right-click looks, middle-click
runs), where it runs, and a status line whose version is read from
build.zig.zon. Recordings come in two shelves: "In a terminal", asciicast
players from docs/site/casts/casts.toml (the first autoplays; all loop
and fit the width; data inline, so they play from file://), then "In
its own window", the GUI clips. asciinema-player 3.17.0 is vendored in
docs/site/player with its Apache-2.0 licence, from `npm pack`. The
Themes page shows #theme-gallery() from media/themes/themes.toml, a
thumbnail per theme opening the full picture; on paper it is nothing.
Both shelves and the gallery show placeholders until their files exist.

`project` in style.typ lists the mirrors (sourcehut, git.0x4200.cafe);
install.typ clones from the first and names them all, and the footer
links each. The README clones before it builds. The scripting
interface is a virtual filesystem served over 9P, never just a
filesystem, in the tagline, captions and README.

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

1 files changed, 16 insertions, 1 deletions

diff --git a/docs/site/site.css b/docs/site/site.css
index 2435841b..bab762d0 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -107,7 +107,7 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 .toc ol { padding:8px 14px 10px 2.4em; columns:2 14em; font-size:18px; }
 .masthead { font:clamp(56px, 12vw, 104px)/1 var(--pixel) !important; text-shadow:5px 5px 0 var(--amber) !important; margin:.1em 0 .1em !important; }
 .pitch { font-style:italic; font-size:22px; color:var(--dim); margin-top:0; }
-.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:18px; margin:1.4em 0; }
+.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:18px; margin:1em 0 1.4em; }
 .clip { margin:0; border:2px solid var(--leaf); background:var(--deep); box-shadow:5px 5px 0 var(--shadow); }
 .clip video, .clip img { display:block; width:100%; height:auto; aspect-ratio:960/700; background:var(--deep); }
 .clip figcaption { padding:8px 12px; font-size:18px; color:var(--dim); border-top:2px solid var(--leaf); }
@@ -142,3 +142,18 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 }
 /* a shell line wraps on a phone rather than hide its end */
 @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; }
+.cast .player { background:#121314; }
+.cast figcaption strong { color:var(--leaf); }
+.content h2.shelf { font-size:26px; margin:1.2em 0 .4em; }
+
+/* the Themes page gallery: thumbnails that open the full picture */
+.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap:12px; margin:1em 0 1.6em; }
+.shot { margin:0; border:2px solid var(--leaf); background:var(--deep); box-shadow:4px 4px 0 var(--shadow); }
+.shot img { display:block; width:100%; height:auto; aspect-ratio:960/700; object-fit:cover; }
+.shot figcaption { padding:3px 8px; font:16px var(--pixel); color:var(--dim); border-top:2px solid var(--leaf); }
+.shot.light figcaption::after { content:" · light"; color:var(--amber); }
+.shot .pending { aspect-ratio:960/700; display:flex; align-items:center; justify-content:center; font:15px var(--pixel); color:var(--dim); }