Builtins are chips that link to a glossary generated from the registry, and the virtual filesystem is drawn as a tree

#word draws a builtin as a chip on the tag's ground over a rule (Look and
Exec in acme's look green and exec red), a <code class="word"> in HTML,
and links it to its entry in a new Builtins chapter wherever that
chapter is in the same output (the book, the site). The chapter is
drawn from docs/typ/builtins-tty.json and builtins-gui.json, which
`zig build builtins-json -Dplatform=tty|gui` writes from the registry
and the Help rows (src/builtins_json.zig, tools/gen_builtins_json.zig;
summaryOf in ninep/ctl.zig is now pub); style.typ merges them, marking
the window-only words. The doc steps refresh their build's file first,
and each build's unit-test fails when its file is stale. Everyday words
first (`everyday` in style.typ), then groups by leader prefix as Help
has them, then settings, the words with no path, debugging and
internals, and last an A-Z index of every word. `zig build book` joins
the doc steps.

#fstree draws a directory tree with its connectors, a description
column and links to the sections that document each file; reference.typ
draws the served tree with it, each pane, pty and column file on its
own line, and a test in config.zig checks it against ninep/tree.zig's
files both ways. The cheatsheet has a two-level version. On the site
the tree reads as `tree` text in w3m and wraps descriptions under the
names on a phone.

The site's tutor draws its B1, B2, B3 and 1-2 chords as mouse glyphs;
the landing credits Plan 9 and acme, as does the book's title page;
install.typ no longer lists the mirrors (the footer does).

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

1 files changed, 35 insertions, 2 deletions

diff --git a/docs/site/site.css b/docs/site/site.css
index bab762d0..ae59e79a 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -81,8 +81,13 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 /* --- the semantic elements (docs/typ/style.typ) ------------------------------ */
 .key { display:inline-block; padding:0 .3em; border-radius:4px; background:color-mix(in srgb, var(--leaf) 20%, transparent); color:var(--ink); font-size:.82em; white-space:nowrap; line-height:1.4; }
 .key .plus, .key .then { color:var(--leaf); opacity:.8; padding:0 .12em; }
-.word { background:var(--tag); padding:0 .25em; color:var(--dim); }
-.word code { font-size:.82em; color:var(--ink); }
+/* a builtin or tag word: a chip to click, on the tag's ground over a rule
+   (Look and Exec in acme's look green and exec red) */
+:root { --look:#7fd07f; --exec:#ff8a7a; }
+@media (prefers-color-scheme: light) { :root { --look:#006600; --exec:#aa0000; } }
+.content code.word { font-size:.82em; color:var(--ink); background:var(--tag); padding:.05em .3em; border-radius:2px; border-bottom:2px solid var(--leaf); white-space:nowrap; }
+.content code.word.look { border-bottom-color:var(--look); }
+.content code.word.exec { border-bottom-color:var(--exec); }
 .addr code { color:var(--plum); }
 .file code { color:var(--leaf); }
 .btn, .chord { display:inline-flex; align-items:center; gap:2px; vertical-align:-.38em; margin-block:-.3em; }
@@ -157,3 +162,31 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 .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); }
+
+/* a builtin's chip that links to its glossary entry */
+.content a:has(> code.word) { text-decoration:none; }
+.content a:hover > code.word { text-decoration:underline; text-underline-offset:3px; }
+.credit { font-size:18px; color:var(--dim); margin:0 0 .3em; }
+/* the glossary: each entry's name is a small heading over its line */
+main[data-page="builtins"] .content h4 { font:600 18px var(--mono); color:var(--leaf); margin:1.1em 0 .1em; }
+main[data-page="builtins"] .content h4 + p { margin-top:0; }
+.content pre.tutor .btn, .content pre.tutor .chord { vertical-align:-.3em; }
+.all-words { line-height:2.1; }
+
+/* the virtual filesystem as a tree: names and connectors, descriptions
+   in a quiet column; on a phone a description wraps under its name */
+.content pre.fstree { font-size:15px; line-height:1.35; overflow-x:visible; }
+.fstree .row { display:grid; grid-template-columns:var(--name) 1fr; align-items:baseline; }
+.fstree .nl { display:none; }
+.fstree .branch { color:var(--rule); }
+.fstree .dir, .fstree .dir a { color:var(--leaf); font-weight:700; }
+.fstree a { color:var(--amber); text-decoration:none; }
+.fstree a:hover { text-decoration:underline; }
+.fstree .desc { color:var(--dim); font-family:var(--hand); font-size:17px; white-space:normal; line-height:1.3; }
+@media (max-width:600px) {
+  .content pre.fstree { font-size:13px; }
+  .fstree .row { display:block; }
+  .fstree .name { display:block; }
+  /* 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; }
+}