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