1 files changed, 72 insertions, 7 deletions
diff --git a/docs/site/site.css b/docs/site/site.css
index bab762d0..a0959d5e 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -63,12 +63,13 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 /* code: a window on the machine, titled in stripes */
 .content code, .content pre, .content kbd, .tag { font-family:var(--mono); }
 .content code { font-size:.82em; overflow-wrap:break-word; hyphens:none; }
-.content pre {
+.content pre:not(.ap-term-text) {
   font-size:15px; line-height:1.45; padding:12px 14px; margin:1em 0; overflow-x:auto;
   background:var(--deep); border:2px solid var(--leaf); border-top-width:8px; box-shadow:5px 5px 0 var(--shadow);
 }
 .content pre code { font-size:inherit; overflow-wrap:normal; }
-@media (prefers-color-scheme: dark) { .content pre span { color:inherit !important; } }
+/* Typst's code highlighting only: the cast player's terminal is a <pre> of coloured spans too */
+@media (prefers-color-scheme: dark) { .content pre:not(.ap-term-text) span { color:inherit !important; } }
 .content pre.tutor { font-size:14px; }
 
 /* tables: rows on alternating tints, a pardes #pairs */
@@ -81,8 +82,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; }
@@ -126,7 +132,6 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 .glossary { margin:1.4em 0; }
 .glossary summary { cursor:pointer; list-style-position:inside; }
 .glossary summary h3, .glossary summary p { display:inline; margin:0; }
-.glossary summary .count { font:20px var(--pixel); color:var(--dim); margin-left:.4em; }
 .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .colophon { font:15px var(--pixel); color:var(--dim); text-align:center; }
 .colophon a { color:var(--leaf); }
@@ -144,8 +149,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; }
@@ -157,3 +162,63 @@ 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; }
+}
+
+/* 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); } }
+.clip figcaption .more { font:15px var(--pixel); color:var(--leaf); margin-left:.3em; white-space:nowrap; }
+.clip { scroll-margin-top:16px; }
+
+/* a pane's box: blank normal, ^ insert, $ raw; filled while unsaved */
+.mode-box { display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; vertical-align:-.15em;
+  font:700 .8em var(--mono); background:var(--tag); color:var(--ink); border:2px solid var(--leaf); border-radius:2px; }
+.mode-box.unsaved { background:var(--amber); border-color:var(--amber); color:#1b120a; }
+/* a recording inside a chapter */
+.content .clip.inline { margin:1.2em 0; max-width:640px; }
+.clip.inline video { display:block; width:100%; height:auto; background:var(--deep); }
+.content .clip.inline.wide { max-width:none; }
+.glossary dl { margin:.6em 0 0; display:grid; grid-template-columns:minmax(8em, max-content) 1fr; }
+.glossary dt, .glossary dd { margin:0; padding:5px 9px; }
+.glossary dt { font-weight:600; color:var(--leaf); }
+.glossary dt:nth-of-type(odd), .glossary dt:nth-of-type(odd) + dd { background:color-mix(in srgb, var(--tag) 70%, transparent); }
+@media (max-width:600px) { .glossary dl { grid-template-columns:1fr; } .glossary dd { padding-top:0; } }