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; }
+}