diff --git a/content/assets/brand.css b/content/assets/brand.css
index 7657c47..290a645 100644
--- a/content/assets/brand.css
+++ b/content/assets/brand.css
@@ -1,20 +1,101 @@
-/* Shared brand primitives loaded on EVERY page via styling.site_css —
-   the calm docs shell and the vibrant landing alike. Keep this file to
-   foundations only (self-hosted fonts); landing-specific gradients and
-   layout live in landing.css (styling.custom_css, landing pages only).
-
-   Fonts are self-hosted under /assets/fonts so they satisfy the CSP
-   font-src 'self'. The body font-family itself is set by tinkerdown from
-   styling.font ("Inter"); these @font-face rules make that family load. */
-
-/* ── Inter (display / body) ── */
-@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
-@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
-@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2')}
-@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-800.woff2') format('woff2')}
-@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/inter-900.woff2') format('woff2')}
-
-/* ── JetBrains Mono (code) ── */
+/* Shared brand foundations, loaded on EVERY page via styling.site_css — the
+   docs shell and the landing alike. Three things live here and nowhere else:
+   the calm design tokens, the self-hosted @font-face rules, and the neutralised
+   prism palette. Page layout is docs.css (imported below) and landing.css
+   (styling.custom_css, landing pages only).
+
+   Load order matters and is load-bearing. tinkerdown emits, in <head>:
+     pico.css → tinkerdown-client.css → theme <style> → styling <style>
+     → prism.css → THIS FILE
+   Being last is what lets a plain token override win at equal specificity. */
+
+/* docs.css can't get its own <link>: styling.site_css is a single path and
+   buildCustomCSSLink emits exactly one <link>. @import is the file split. It
+   also loads on the landing, where none of its selectors match. */
+@import url("/assets/docs.css?v=1");
+
+/* ── IBM Plex Sans (display / body) ──
+   The family is selected by styling.font; these rules make it load. Latin
+   subset from @fontsource/ibm-plex-sans, self-hosted for CSP font-src 'self'. */
+@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plexsans-400.woff2') format('woff2')}
+@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plexsans-500.woff2') format('woff2')}
+@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plexsans-600.woff2') format('woff2')}
+
+/* ── JetBrains Mono (code) ──
+   The design specifies IBM Plex Mono but does not depend on it; JBMono already
+   ships, so we don't add a fourth face for a difference nobody can name. */
 @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jbmono-400.woff2') format('woff2')}
 @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jbmono-500.woff2') format('woff2')}
 @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jbmono-600.woff2') format('woff2')}
+
+/* ── Calm design tokens ──
+   These override tinkerdown's own semantic custom properties rather than
+   hardcoding hexes into rules, so the shell's dark theme keeps working: its
+   [data-theme="dark"] block drives the same variables.
+
+   The :not() is not decoration. [data-theme="dark"] and :root are both
+   specificity (0,1,0), and this file loads AFTER the theme <style> — a bare
+   :root block would beat the dark palette on source order and silently break
+   the theme toggle. Scoping the light values out of dark mode is what keeps
+   both correct. #theme-auto resolves in JS and stamps an explicit light|dark,
+   so there is no third state to handle. */
+:root:not([data-theme="dark"]) {
+  --bg-primary:     #FBFAF8;
+  --bg-secondary:   #FBFAF8;   /* a flat value here is what kills the body gradient */
+  --text-primary:   #4A4842;
+  --text-secondary: #57544D;
+  --text-heading:   #1B1A17;
+  --border-color:   #E7E4DD;
+  --card-bg:        #FFFFFF;
+  --card-border:    #DCD8D0;
+  --card-shadow:    transparent;
+  --code-bg:        #F1EFE9;   /* inline code */
+  --code-border:    #E7E4DD;
+  --pre-bg:         #F4F2ED;   /* code blocks */
+  --pre-text:       #33312C;
+}
+
+/* Tokens the design needs that tinkerdown has no equivalent for. Not scoped to
+   light: they are referenced only by rules that already carry their own theme
+   handling, and leaving them defined in both modes avoids silent unset vars. */
+:root {
+  --lt-line-soft:    #EDEAE3;  /* list + table row rules */
+  --lt-meta:         #6B6862;  /* 11.5-13px mono meta. The contrast floor: no
+                                  text at or below 13px may be lighter. */
+  --lt-bg-sunk:      #F7F5F1;  /* footer, note callouts */
+  --lt-danger:       #9A3B32;
+  --lt-ok:           #5C9169;  /* live-demo status dot — never used for text */
+  --lt-accent-hover: #1B3E60;
+
+  /* Syntax highlighting, reduced to four hues over --pre-text: enough that
+     structure reads at a glance, not so much that a code block becomes a paint
+     chart. All four are darker than --lt-meta, because code blocks set
+     12.5-13px and that is inside the range the contrast floor governs. */
+  --lt-code-comment: #6B6862;
+  --lt-code-string:  #4A6B52;
+  --lt-code-keyword: #2F5D8A;
+  --lt-code-name:    #5A5560;  /* declared names: func names, types, HTML tags */
+}
+
+/* ── Prism, neutralised ──
+   prism.css loads immediately before this file, so these win on source order
+   at equal specificity. Everything not named below falls back to --pre-text;
+   the design renders code near-monochrome, not as a paint chart. */
+code[class*="language-"],
+pre[class*="language-"] { color: var(--pre-text); text-shadow: none }
+
+.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--lt-code-comment) }
+/* What the code declares or invokes, and what an HTML element IS. */
+.token.tag, .token.function, .token.class-name { color: var(--lt-code-name) }
+.token.punctuation, .token.operator, .token.entity, .token.url,
+.token.property, .token.boolean, .token.number,
+.token.constant, .token.symbol, .token.deleted, .token.namespace,
+.token.regex, .token.important, .token.variable { color: var(--pre-text) }
+.token.selector, .token.attr-name, .token.string, .token.char,
+.token.builtin, .token.inserted,
+.language-css .token.string, .style .token.string { color: var(--lt-code-string) }
+.token.atrule, .token.attr-value, .token.keyword { color: var(--lt-code-keyword) }
+
+/* Prism sets these on .important/.bold and .italic; the design has neither. */
+.token.important, .token.bold { font-weight: 500 }
+.token.italic { font-style: normal }
diff --git a/content/assets/docs.css b/content/assets/docs.css
new file mode 100644
index 0000000..1edd124
--- /dev/null
+++ b/content/assets/docs.css
@@ -0,0 +1,576 @@
+/* The docs shell: archetype A (article), B (section index), C (reference entry).
+   Loaded via @import from brand.css, so it reaches every page — every selector
+   below is scoped to docs-shell markup the landing does not have.
+
+   This file overrides tinkerdown's `clean` theme rather than replacing it. Two
+   consequences run through everything here:
+
+   1. The theme sets h1/h2/h3 with !important, so those need !important back.
+   2. The theme's sidebar offset is a `position: fixed` sidebar plus
+      `body:has(...) { margin-left: W; width: calc(100% - W) }`, restated at
+      three breakpoints. That arithmetic is what keeps the page from scrolling
+      sideways on desktop and from collapsing to 33px on mobile — both covered
+      by e2e/responsive_test.go. We change W and keep the mechanism. */
+
+:root {
+  /* The article measure. Every body-level sibling of .content-wrapper is
+     pinned to it so breadcrumb, article, prev/next and the edit line form one
+     column instead of four differently-indented bands. */
+  --lt-col: 720px;
+  --lt-sidebar: 236px;
+}
+
+/* ══ Shell geometry ══════════════════════════════════════════════════════ */
+
+.tinkerdown-nav-sidebar { width: var(--lt-sidebar) }
+
+/* Mirrors the theme's own rule with a narrower sidebar. The explicit width is
+   load-bearing: margins sit outside the box even under border-box, so without
+   it body stays 100vw wide AND shifted right. */
+body:has(.tinkerdown-nav-sidebar) {
+  margin-left: var(--lt-sidebar);
+  width: calc(100% - var(--lt-sidebar));
+}
+
+/* The theme drops the same override at <=768px, where the sidebar translates
+   off-canvas. Ours loads later in the cascade, so it has to be restated at the
+   same breakpoint or the desktop offset would leak onto mobile. */
+@media (max-width: 768px) {
+  body:has(.tinkerdown-nav-sidebar) { margin-left: 0; width: 100% }
+}
+
+.content-wrapper,
+nav.breadcrumbs,
+.page-source-meta,
+.page-edit-link,
+nav.page-nav {
+  max-width: var(--lt-col);
+  margin-inline: auto;
+  padding-inline: 0;
+}
+
+.content-wrapper { padding-block: 8px 0 }
+
+/* The theme bleeds code blocks and demos outward with
+   `margin-inline: calc((800px - 100%) / 2 * -1); max-width: 1000px`, sized for
+   its own ~800px measure. Against a 720px column that pushes an 800px box out
+   of a 640px container at 924px wide — horizontal page overflow, which is the
+   one thing the acceptance criteria name. The calm design has no bleed: code
+   sits in the column with a border. Specificity (0,1,1) beats the theme's bare
+   type selectors inside its own media query.
+
+   The selector list deliberately mirrors the theme's, block types included that
+   content/ does not currently use (it authors embed-lvt and nothing else). They
+   are cheap to carry, and dropping them would let the overflow come back the
+   day someone adds a wasm or interactive block. */
+@media (min-width: 900px) {
+  .content-wrapper pre,
+  .content-wrapper .tinkerdown-wasm-block,
+  .content-wrapper .tinkerdown-interactive-block,
+  .content-wrapper .tinkerdown-lvt-demo {
+    margin-left: 0;
+    margin-right: 0;
+    max-width: 100%;
+  }
+}
+
+/* ══ Type scale (archetype A) ════════════════════════════════════════════ */
+
+.content-wrapper h1 {
+  font-size: 34px !important;
+  line-height: 1.2 !important;
+  letter-spacing: -0.02em !important;
+  font-weight: 600 !important;
+  margin: 0 0 16px !important;
+  padding-bottom: 0 !important;
+  border-bottom: 0 !important;   /* theme draws a 3px accent rule under h1 */
+  color: var(--text-heading) !important;
+}
+
+/* Each h2 is preceded by a hairline rule, not followed by one. */
+.content-wrapper h2 {
+  font-size: 22px !important;
+  line-height: 1.3 !important;
+  letter-spacing: -0.015em !important;
+  font-weight: 600 !important;
+  margin: 36px 0 12px !important;
+  padding-top: 10px !important;
+  padding-bottom: 0 !important;
+  border-top: 1px solid var(--lt-line-soft) !important;
+  border-bottom: 0 !important;
+  color: var(--text-heading) !important;
+}
+
+/* Archetype C separates reference entries with a rule above each h3. That part
+   applies to every h3 — it is the sectioning device, and the docs put 807 of
+   them across the tree.
+
+   The design also sets the entry name in mono, because its sample entries are
+   symbol names (ctx.Subscribe, livetemplate.Async). The real content is not
+   shaped that way: 804 of those 807 headings are prose ("Available Metrics",
+   "1. Percentiles over Averages") and the symbols live in tables underneath,
+   which the definition-grid rules below already handle. So mono is applied
+   only where the heading genuinely IS a symbol — a heading that is inline
+   code, e.g. ### `.lvt.Uploads "name"`. */
+.content-wrapper h3 {
+  font-size: 17px !important;
+  font-weight: 600 !important;
+  line-height: 1.4 !important;
+  letter-spacing: -0.01em !important;
+  margin: 30px 0 10px !important;
+  padding-top: 22px !important;
+  border-top: 1px solid var(--lt-line-soft) !important;
+  color: var(--text-heading) !important;
+}
+.content-wrapper h3:has(> code) {
+  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
+  font-weight: 500 !important;
+  letter-spacing: 0 !important;
+}
+.content-wrapper h3 > code { background: none; padding: 0; font-size: inherit }
+
+/* content/reference/api.md carries 17 `---` separators AND ### headings.
+   Drawing both gives every entry a doubled rule. The h3 border wins. */
+.content-wrapper hr { display: none }
+
+.content-wrapper h4 {
+  font-size: 15px !important;
+  font-weight: 600 !important;
+  margin: 24px 0 8px !important;
+  color: var(--text-heading) !important;
+}
+
+.content-wrapper p,
+.content-wrapper li {
+  font-size: 17px;
+  line-height: 1.7;
+  color: var(--text-primary);
+}
+
+/* The lede: the first paragraph after the page title. Size and leading already
+   come from the paragraph rule above; only the extra breathing room is new. */
+.content-wrapper h1 + p { margin-bottom: 20px }
+
+/* ══ Links ═══════════════════════════════════════════════════════════════ */
+
+/* The theme underlines every content link with a hardcoded rgba(0,102,204)
+   border and bolds it to 500. Visited is a hardcoded purple, so it has to be
+   named explicitly rather than left to inherit. */
+.content-wrapper a:not(.prev-next-link),
+.content-wrapper a:not(.prev-next-link):visited {
+  color: var(--accent);
+  border-bottom: 0;
+  text-decoration: none;
+  font-weight: inherit;
+}
+/* The theme's hover adds a tinted background and shifts padding by 0.2rem with
+   a negative margin — every link twitches under the cursor. Undoing the shift
+   is what the padding and margin resets are for. */
+.content-wrapper a:not(.prev-next-link):hover,
+.content-wrapper a:not(.prev-next-link):visited:hover {
+  color: var(--lt-accent-hover);
+  text-decoration: underline;
+  border-bottom: 0;
+  background: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* ══ Code ════════════════════════════════════════════════════════════════ */
+
+.content-wrapper pre {
+  background: var(--pre-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 14px 16px;
+  font-size: 13px;
+  line-height: 1.65;
+  overflow-x: auto;          /* the <pre> scrolls, never the page */
+  box-shadow: none;
+  margin: 0 0 20px;
+}
+
+/* The client injects a copy button over the top-right of every highlighted
+   block; without a gutter it sits on the first line of code. */
+.content-wrapper .code-block-wrapper pre { padding-right: 46px }
+
+.content-wrapper :not(pre) > code {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 14.5px;
+  background: var(--code-bg);
+  border: 0;
+  padding: 1px 5px;
+  border-radius: 4px;
+  color: var(--text-primary);
+}
+
+/* ══ Tables → the definition grid (archetype C) ══════════════════════════ */
+
+/* The theme makes tables `display: block; overflow-x: auto` so wide ones scroll
+   inside their column instead of the page. /reference/template-support-matrix
+   is in responsive_test.go precisely for this — keep it. */
+.content-wrapper table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: 15px;
+  margin: 0 0 24px;
+}
+.content-wrapper th,
+.content-wrapper td {
+  border: 0;
+  border-bottom: 1px solid var(--lt-line-soft);
+  padding: 10px 14px 10px 0;
+  text-align: left;
+  vertical-align: top;
+  background: none;
+}
+.content-wrapper th {
+  border-bottom: 1px solid var(--border-color);
+  font-weight: 500;
+  font-size: 11.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--lt-meta);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+}
+/* First column reads as the term in a definition list — the 130px/1fr grid the
+   design draws, expressed as a table because that is what markdown emits. */
+.content-wrapper td:first-child {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 13.5px;
+  color: var(--text-heading);
+  min-width: 130px;
+  word-break: normal;
+  overflow-wrap: normal;
+}
+/* A term is a symbol name, and most are written as inline code. The table is
+   display:block at 100% width, so the column gets squeezed and `SeverityWarning`
+   breaks after "SeverityWarnin". nowrap on the code makes the term the column's
+   min-content width, so auto table layout widens this column and narrows the
+   description instead of hyphenating an identifier. */
+.content-wrapper td:first-child code { white-space: nowrap }
+
+/* ══ Lists, and the grouped link lists of archetype B ════════════════════ */
+
+.content-wrapper ul,
+.content-wrapper ol { padding-left: 1.2em; margin: 0 0 20px }
+.content-wrapper li { margin: 4px 0 }
+/* Pico's `ul li { list-style: square }` sets the marker on the li directly, so
+   the calm treatment has to be applied there too — an inherited value from the
+   ul never wins against a directly-set one. */
+.content-wrapper li::marker { color: var(--lt-meta) }
+
+/* A section index (/recipes/, /reference/, /guides/) is markdown bullets where
+   every item opens with a link. :has() is the only signal available — the
+   renderer emits no page-type class and <body> carries no attributes.
+
+   Both authored shapes have to be named: `[Title](/x) — gloss` gives
+   `li > a`, and `**[Title](/x)** — gloss` gives `li > strong > a`. Across
+   content/ the pair matches 48 lists — 47 where every item is a link, 1 where
+   four of five are. None of the 434 prose lists in the tree is touched.
+
+   The design justifies title left / gloss right. That needs a wrapper around
+   the gloss which markdown never emits, and flex-on-li can't stand in: every
+   inline <code> and <em> in a gloss would become its own flex item and spread
+   across the row. Inline flow with the contrast carried by weight and color is
+   the robust version of the same idea. */
+.content-wrapper ul:has(> li > a:first-child),
+.content-wrapper ul:has(> li > strong:first-child > a:first-child) {
+  list-style: none;
+  padding-left: 0;
+  border-top: 1px solid var(--lt-line-soft);
+}
+.content-wrapper ul:has(> li > a:first-child) > li,
+.content-wrapper ul:has(> li > strong:first-child > a:first-child) > li {
+  list-style: none;   /* beats Pico's `ul li { list-style: square }` */
+  margin: 0;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--lt-line-soft);
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--lt-meta);          /* the gloss after the em-dash */
+}
+.content-wrapper ul:has(> li > a:first-child) > li > a:first-child,
+.content-wrapper ul:has(> li > strong:first-child > a:first-child) > li > strong:first-child,
+.content-wrapper ul:has(> li > strong:first-child > a:first-child) > li > strong:first-child > a {
+  font-size: 15.5px;
+  font-weight: 500;                /* not <strong>'s 700 — the design's title weight */
+  color: var(--text-heading);
+}
+.content-wrapper ul:has(> li > a:first-child) > li > a:first-child:hover,
+.content-wrapper ul:has(> li > strong:first-child > a:first-child) > li > strong:first-child > a:hover {
+  color: var(--accent);
+}
+
+/* Two columns only where there is room for them. At 924px the article column is
+   ~640px, and two ~300px columns of "title — gloss" wrap into mush. */
+@media (min-width: 1100px) {
+  .content-wrapper ul:has(> li > a:first-child),
+  .content-wrapper ul:has(> li > strong:first-child > a:first-child) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    column-gap: 32px;
+  }
+}
+
+/* ══ Callouts ════════════════════════════════════════════════════════════ */
+
+/* Markdown has no admonition syntax here, so a blockquote is the Note callout.
+   No icon, no emoji, no colored fill — a hairline and a tinted left edge. */
+.content-wrapper blockquote {
+  border: 1px solid var(--card-border);
+  border-left: 1px solid var(--accent);
+  border-radius: 6px;
+  background: var(--lt-bg-sunk);
+  padding: 14px 16px;
+  margin: 0 0 24px;
+  font-size: 15.5px;
+  line-height: 1.65;
+  color: var(--text-primary);
+}
+.content-wrapper blockquote > :last-child { margin-bottom: 0 }
+.content-wrapper blockquote p { font-size: 15.5px; line-height: 1.65 }
+
+/* The design gives callouts a mono uppercase label. Rather than inventing one
+   with ::before — which would stamp "NOTE" onto the nine that say Note, the two
+   that say Security note, and the ones that are neither — promote the bold
+   lead-in the markdown already carries. Callouts without one simply have no
+   label, which is the honest rendering. */
+.content-wrapper blockquote > p:first-child > strong:first-child {
+  display: block;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11.5px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 6px;
+}
+
+/* ══ Breadcrumb ══════════════════════════════════════════════════════════ */
+
+nav.breadcrumbs {
+  padding: 22px 0 0;
+  margin-bottom: 18px;
+  border-bottom: 0;
+}
+nav.breadcrumbs a,
+nav.breadcrumbs .current,
+nav.breadcrumbs .crumb-label,
+nav.breadcrumbs .separator {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--lt-meta);
+}
+nav.breadcrumbs a { text-decoration: none }
+nav.breadcrumbs a:hover { color: var(--accent); text-decoration: underline }
+nav.breadcrumbs .current { color: var(--text-primary); font-weight: 400 }
+nav.breadcrumbs .separator { margin: 0 0.4rem }
+
+/* ══ Prev / next ═════════════════════════════════════════════════════════ */
+
+nav.page-nav {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+  margin-top: 40px;
+  padding-top: 24px;
+  border-top: 1px solid var(--border-color);
+}
+nav.page-nav a {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 14px 16px;
+  background: none;
+  border: 1px solid var(--card-border);
+  border-radius: 6px;
+  color: var(--text-heading);
+  text-decoration: none;
+}
+/* Cards darken their border. They do not lift, scale, or cast a shadow —
+   nothing on this page moves unless the app itself is updating. */
+nav.page-nav a:hover {
+  border-color: var(--text-heading);
+  background: none;
+  transform: none;
+  box-shadow: none;
+}
+/* The theme emits the prev card as [arrow, label] and the next card as
+   [label, arrow]. Both want the mono direction cue above the title, so the
+   next card reads its two children in reverse. */
+nav.page-nav .page-nav-next {
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  text-align: right;
+  margin-left: 0;
+}
+nav.page-nav .arrow {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11.5px;
+  color: var(--lt-meta);
+}
+nav.page-nav .label { font-size: 15px; font-weight: 500; color: var(--text-heading) }
+
+/* ══ Source + edit lines ═════════════════════════════════════════════════ */
+
+.page-source-meta,
+.page-edit-link {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11.5px;
+  line-height: 1.7;
+  color: var(--lt-meta);
+  margin-top: 20px;
+}
+.page-source-meta a,
+.page-edit-link a { color: var(--lt-meta); text-decoration: none; border-bottom: 0 }
+.page-source-meta a:hover,
+.page-edit-link a:hover { color: var(--accent); text-decoration: underline }
+/* Measured at 10.12px on the shipped theme: 0.85rem on the container times
+   0.85em here, against a 14px root. Both multipliers are relative, so the
+   floor has to be restated in px. */
+.page-source-meta code { font-size: 11.5px !important; background: none; padding: 0 }
+
+/* ══ Sidebar ═════════════════════════════════════════════════════════════ */
+
+.tinkerdown-nav-sidebar {
+  background: var(--bg-primary);
+  border-right: 1px solid var(--lt-line-soft);
+  box-shadow: none;
+}
+#tinkerdown-sidebar .nav-section-title,
+#tinkerdown-sidebar .nav-group-title {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11.5px;      /* .nav-group-title measured 10.92px (0.78rem @ 14px) */
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--lt-meta);
+  background: none;       /* the theme fills section titles with --code-bg */
+}
+#tinkerdown-sidebar .nav-section-title { padding: 14px 20px 6px }
+#tinkerdown-sidebar .nav-group-title { padding: 10px 20px 4px 28px }
+
+#tinkerdown-sidebar .nav-page-link {
+  font-size: 14px;
+  color: var(--text-secondary);
+  padding: 3px 20px;
+  border-left: 2px solid transparent;
+  background: none;
+  text-decoration: none;
+}
+#tinkerdown-sidebar .nav-group .nav-pages li a { padding-left: 34px }
+#tinkerdown-sidebar .nav-page-link:hover {
+  color: var(--text-heading);
+  border-left-color: var(--lt-line-soft);
+  background: none;
+}
+#tinkerdown-sidebar .nav-pages li a.active,
+#tinkerdown-sidebar .nav-page-link.active {
+  color: var(--text-heading);
+  font-weight: 500;
+  border-left: 2px solid var(--accent);
+  background: none;
+}
+
+/* The search affordance. Its <kbd> measured 11.0px on the shipped theme. */
+#tinkerdown-sidebar .search-button {
+  border: 1px solid var(--card-border);
+  border-radius: 5px;
+  background: var(--card-bg);
+  font-size: 13.5px;
+  color: var(--lt-meta);
+  box-shadow: none;
+}
+#tinkerdown-sidebar .search-button:hover { border-color: var(--text-heading) }
+#tinkerdown-sidebar .search-button kbd {
+  font-size: 11.5px;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  border: 1px solid var(--border-color);
+  border-radius: 3px;
+  background: none;
+  color: var(--lt-meta);
+}
+
+/* ══ On this page ════════════════════════════════════════════════════════ */
+
+/* tinkerdown's client injects the page TOC as a <ul> nested inside the active
+   page's sidebar <li>, not as a right-hand rail. We restyle it where it lands:
+   pulling it out of a scrolling sidebar into a fixed gutter column leaves a
+   hole behind it and makes the page width depend on 100vw arithmetic, which is
+   the fastest way to fail the no-horizontal-overflow criterion. */
+.page-toc-list {
+  background: none;
+  border-left: 0;
+  margin: 6px 0 10px;
+  padding: 0 0 0 20px;
+}
+.page-toc-list::before {
+  content: "On this page";
+  display: block;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--lt-meta);
+  padding: 6px 0 4px;
+}
+.page-toc-link {
+  font-size: 13.5px;
+  color: var(--text-secondary);
+  padding: 2px 0 2px 10px;
+  border-left: 2px solid var(--border-color);
+  background: none;
+  text-decoration: none;
+}
+.page-toc-link:hover { color: var(--text-heading); background: none }
+/* Scroll tracking toggles .active on the <li>, not on the <a> inside it. */
+.page-toc-item.active > .page-toc-link {
+  color: var(--text-heading);
+  border-left-color: var(--accent);
+  background: none;
+}
+/* On long reference pages the client adds H3 entries and shrinks them to
+   .8rem — 11.2px against a 14px root, under the floor. Matching the theme's
+   two-class specificity is what makes this stick. The design sets reference
+   TOC entries in mono anyway. */
+.page-toc-level-3 .page-toc-link {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 12.5px;
+  padding-left: 22px;
+}
+.page-toc-level-3 .page-toc-link::before { content: none }
+
+/* ══ Chrome that must stop moving ════════════════════════════════════════ */
+
+.page-toolbar { box-shadow: none; border: 1px solid var(--card-border); background: var(--card-bg) }
+.page-toolbar:hover { box-shadow: none }
+
+/* Embedded live demos and interactive blocks: hairline card, no lift. */
+.content-wrapper .tinkerdown-lvt-demo,
+.content-wrapper .tinkerdown-interactive-block,
+.content-wrapper .tinkerdown-embed-lvt {
+  border: 1px solid var(--card-border);
+  border-radius: 6px;
+  box-shadow: none;
+  background: var(--card-bg);
+}
+.content-wrapper .tinkerdown-lvt-demo:hover,
+.content-wrapper .tinkerdown-interactive-block:hover,
+.content-wrapper .tinkerdown-embed-lvt:hover {
+  transform: none;
+  box-shadow: none;
+}
+.content-wrapper .tinkerdown-lvt-demo::before,
+.content-wrapper .tinkerdown-lvt-demo .tinkerdown-interactive-block::before,
+.content-wrapper .tinkerdown-lvt-demo .tinkerdown-embed-lvt::before {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11.5px;
+  letter-spacing: 0.08em;
+  color: var(--lt-meta);
+  background: none;
+}
diff --git a/content/assets/fonts/inter-400.woff2 b/content/assets/fonts/inter-400.woff2
deleted file mode 100644
index f15b025..0000000
Binary files a/content/assets/fonts/inter-400.woff2 and /dev/null differ
diff --git a/content/assets/fonts/inter-600.woff2 b/content/assets/fonts/inter-600.woff2
deleted file mode 100644
index d189794..0000000
Binary files a/content/assets/fonts/inter-600.woff2 and /dev/null differ
diff --git a/content/assets/fonts/inter-700.woff2 b/content/assets/fonts/inter-700.woff2
deleted file mode 100644
index a68fb10..0000000
Binary files a/content/assets/fonts/inter-700.woff2 and /dev/null differ
diff --git a/content/assets/fonts/inter-800.woff2 b/content/assets/fonts/inter-800.woff2
deleted file mode 100644
index 74a16d4..0000000
Binary files a/content/assets/fonts/inter-800.woff2 and /dev/null differ
diff --git a/content/assets/fonts/inter-900.woff2 b/content/assets/fonts/inter-900.woff2
deleted file mode 100644
index 4db8333..0000000
Binary files a/content/assets/fonts/inter-900.woff2 and /dev/null differ
diff --git a/content/assets/fonts/plexsans-400.woff2 b/content/assets/fonts/plexsans-400.woff2
new file mode 100644
index 0000000..f0ee65d
Binary files /dev/null and b/content/assets/fonts/plexsans-400.woff2 differ
diff --git a/content/assets/fonts/plexsans-500.woff2 b/content/assets/fonts/plexsans-500.woff2
new file mode 100644
index 0000000..6d5527e
Binary files /dev/null and b/content/assets/fonts/plexsans-500.woff2 differ
diff --git a/content/assets/fonts/plexsans-600.woff2 b/content/assets/fonts/plexsans-600.woff2
new file mode 100644
index 0000000..08c0d5a
Binary files /dev/null and b/content/assets/fonts/plexsans-600.woff2 differ
diff --git a/content/assets/gopher-front.svg b/content/assets/gopher-front.svg
new file mode 100644
index 0000000..0f8fbe0
--- /dev/null
+++ b/content/assets/gopher-front.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Gopher" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 215.6 281.6" enable-background="new 0 0 215.6 281.6" xml:space="preserve">
+<g>
+	<path fill="#8CC5E7" d="M207.3,44.6c-6.7-13.7-22.9-1.6-27-5.9c-21-21.6-46.4-27-66.3-28c0,0-9,0-11,0c-20,0.5-45.4,6.3-66.3,28
+		c-4.1,4.3-20.4-7.8-27,5.9c-7.7,16,15.7,17.6,14.5,24.7c-2.3,12.8-0.8,31.8,1,50.5C28,151.5,4.3,227.4,53.6,257.9
+		c9.3,5.8,34.4,9,56.2,9.5l0,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0l0,0c21.8-0.5,43.9-3.7,53.2-9.5c49.4-30.5,25.7-106.4,28.6-138.1
+		c1.7-18.7,3.2-37.7,1-50.5C191.6,62.2,215,60.5,207.3,44.6z"/>
+	<g>
+		<path fill="#E0DEDC" d="M143.2,54.3c-33.4,3.9-28.9,38.7-16,50c24,21,49,0,46.2-21.2C170.9,62.7,153.6,53.1,143.2,54.3z"/>
+		<circle fill="#111212" cx="145.5" cy="84.3" r="11.4"/>
+		<circle fill="#FFFFFF" cx="142.5" cy="79.4" r="3.6"/>
+	</g>
+	<g>
+		<path fill="#B8937F" d="M108.5,107c-16,2.4-21.7,7-20.5,14.2c2,11.8,39.7,10.5,40.9,0.6C129.9,113.3,114.8,106.1,108.5,107z"/>
+		<path d="M98.2,111.8c-2.7,9.8,21.7,8.3,21.1,2c-0.3-3.7-3.6-8.4-12.3-8.2C103.6,105.7,99.4,107.2,98.2,111.8z"/>
+		<path fill="#E0DEDC" d="M99,127.7c-0.9,0.4-2.4,10.2,2.2,10.7c3.1,0.3,11.6,1.3,13.6,0c3.9-2.5,3.5-8.5,1.3-10
+			C112.4,126,100,127.2,99,127.7z"/>
+	</g>
+	<g>
+		<path fill="#E0DEDC" d="M73.6,54.3c33.4,3.9,28.9,38.7,16,50c-24,21-49,0-46.2-21.2C46,62.7,63.3,53.1,73.6,54.3z"/>
+		<circle fill="#111212" cx="71.4" cy="84.3" r="11.4"/>
+		<circle fill="#FFFFFF" cx="74.4" cy="79.4" r="3.6"/>
+	</g>
+	<path fill="#B8937F" d="M193.6,186.7c11,0.1,5.6-23.5-1.2-18.8c-3.3,2.3-3.9,7.6-3.9,12.1C188.5,182.5,190.5,186.6,193.6,186.7z"/>
+	<path fill="#B8937F" d="M23.3,186.7c-11,0.1-5.6-23.5,1.2-18.8c3.3,2.3,3.9,7.6,3.9,12.1C28.4,182.5,26.4,186.6,23.3,186.7z"/>
+	<path fill="#B8937F" d="M172.7,259.2c-6-8.9-11.4-2-20.1,2.4c-4.1,2.1,6.8,9.6,19,4C174.8,264.1,174.7,262.1,172.7,259.2z"/>
+	<path fill="#B8937F" d="M44.2,260.2c6-8.9,11.4-2,20.1,2.4c4.1,2.1-6.8,9.6-19,4C42.1,265.1,42.2,263.1,44.2,260.2z"/>
+	<path fill="#3C89BF" d="M188.6,47c-0.6,2.1,2.1,1.8,3.1,8.3c0.4,2.4,9-3.5,5.5-7.8C194.3,43.9,189.1,44.9,188.6,47z"/>
+	<path fill="#3C89BF" d="M28.3,47c0.6,2.1-2.1,1.8-3.1,8.3c-0.4,2.4-9-3.5-5.5-7.8C22.5,43.9,27.7,44.9,28.3,47z"/>
+</g>
+</svg>
diff --git a/content/assets/landing.css b/content/assets/landing.css
index f4a3ad1..8124853 100644
--- a/content/assets/landing.css
+++ b/content/assets/landing.css
@@ -1,386 +1,472 @@
-/* Self-hosted @font-face for Inter + JetBrains Mono now lives in brand.css
-   (styling.site_css), loaded site-wide so the docs shell gets them too. */
-
-:root{
-  /* ── Emerald: ONE signature hue + neutrals ── */
-  --sig:#047857; --sig-d:#065f46; --sig-2:#10b981; --sigsoft:rgba(4,120,87,.10); --sigline:rgba(4,120,87,.22);
-  --ink:#0f172a; --ink-2:#1e293b; --slate:#475569; --slate-2:#64748b; --slate-3:#94a3b8;
-  --line:#e2e8f0; --line-2:#eef2f7; --bg:#ffffff; --bg-2:#f8fafc; --bg-3:#f1f5f9;
-  --code-bg:#0f172a; --code-bg-2:#0b1222; --code-line:#1e293b;
-  --grad:linear-gradient(115deg,var(--sig),var(--sig-2));
-  --radius:16px; --maxw:1120px;
-  --c-kw:#6ee7b7;--c-str:#a7f3d0;--c-fn:#5eead4;--c-com:#64748b;--c-pun:#cbd5e1;--c-tag:#7dd3fc;--c-attr:#fcd34d;
-}
-*{box-sizing:border-box}
-html{scroll-behavior:smooth}
-body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
-code,pre,.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
-a{color:var(--sig);text-decoration:none}
-.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
-
-/* nav */
-header.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(12px);background:rgba(255,255,255,.8);border-bottom:1px solid var(--line)}
-.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
-.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.02em}
-.brand .glyph{width:28px;height:28px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 4px 14px rgba(4,120,87,.32)}
-.nav-links{display:flex;align-items:center;gap:28px}
-.nav-links a{color:var(--slate);font-weight:500;font-size:15px}.nav-links a:hover{color:var(--ink)}
-.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;font-weight:600;font-size:15px;padding:10px 18px;cursor:pointer;border:1px solid transparent;transition:.15s}
-.btn-primary{background:var(--sig);color:#fff;box-shadow:0 6px 18px rgba(4,120,87,.28)}
-.btn-primary:hover{background:var(--sig-d);transform:translateY(-1px)}
-.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
-.btn-ghost:hover{border-color:var(--slate-3);background:var(--bg-2)}
-.btn-lg{padding:14px 26px;font-size:16px}
-
-/* hero (calm) */
-.hero{position:relative;overflow:hidden;padding:80px 0 60px;text-align:center}
-.hero::before{content:"";position:absolute;inset:-25% -10% auto -10%;height:540px;z-index:0;filter:blur(8px);
-  background:radial-gradient(500px 320px at 28% 10%,var(--sigsoft),transparent 60%),radial-gradient(520px 340px at 78% 2%,rgba(16,185,129,.12),transparent 60%)}
-.hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
-  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:44px 44px;
-  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%)}
-.hero>*{position:relative;z-index:1}
-.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 'JetBrains Mono';color:var(--sig-d);background:var(--sigsoft);border:1px solid var(--sigline);padding:7px 14px;border-radius:999px;margin-bottom:24px}
-h1.head{font-size:clamp(38px,6vw,70px);line-height:1.05;letter-spacing:-.035em;font-weight:900;margin:0 auto;max-width:15ch}
-h1.head .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
-.sub{font-size:clamp(17px,2.2vw,20px);color:var(--slate);max-width:54ch;margin:20px auto 0;font-weight:450}
-.sub b{color:var(--ink);font-weight:600}
-.cta-row{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
-.hero-snip{max-width:600px;margin:36px auto 0;text-align:left}
-.hero-cap{text-align:center;color:var(--slate-2);font-size:14px;margin-top:14px}
-
-/* sections */
-section{padding:100px 0}
-section.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
-.sec-tag{font:600 13px 'JetBrains Mono';color:var(--sig);letter-spacing:.02em;margin-bottom:14px}
-.sec-tag::before{content:"§ "}
-h2{font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.03em;font-weight:850;margin:0 0 16px;max-width:20ch}
-.lead{font-size:18px;color:var(--slate);max-width:62ch;margin:0}
-.lead b{color:var(--ink)}
-.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
-.two.code-right{grid-template-columns:.95fr 1.05fr}
-/* stack BOTH .two and the higher-specificity .two.code-right on mobile,
-   else the code/embed column truncates off-screen */
-@media(max-width:860px){.two,.two.code-right{grid-template-columns:1fr;gap:28px}}
-
-/* code */
-.code{background:var(--code-bg);border-radius:14px;overflow:hidden;border:1px solid #1e293b;box-shadow:0 24px 50px -24px rgba(2,6,23,.55)}
-.code+.code{margin-top:16px}
-.code-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--code-bg-2);border-bottom:1px solid var(--code-line)}
-.code-bar .dots{display:flex;gap:6px}.code-bar .dots i{width:11px;height:11px;border-radius:50%;display:block}
-.dots i:nth-child(1){background:#ff5f56}.dots i:nth-child(2){background:#ffbd2e}.dots i:nth-child(3){background:#27c93f}
-.code-bar .file{margin-left:8px;font:600 12.5px 'JetBrains Mono';color:#94a3b8}
-.code pre{margin:0;padding:18px 20px;overflow-x:auto;font:500 13.5px/1.7 'JetBrains Mono';color:#e2e8f0;tab-size:2}
-.kw{color:var(--c-kw)}.str{color:var(--c-str)}.fn{color:var(--c-fn)}.com{color:var(--c-com)}.pun{color:var(--c-pun)}.tag{color:var(--c-tag)}.attr{color:var(--c-attr)}
-
-/* live demo card */
-.live-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px -28px rgba(15,23,42,.25);overflow:hidden}
-.live-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
-.live-badge{display:inline-flex;align-items:center;gap:7px;font:600 12px 'JetBrains Mono';color:var(--sig-d)}
-.live-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 0 rgba(4,120,87,.5);animation:pulse 1.8s infinite}
-@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(4,120,87,.45)}70%{box-shadow:0 0 0 9px rgba(4,120,87,0)}100%{box-shadow:0 0 0 0 rgba(4,120,87,0)}}
-.live-meta{font:500 12px 'JetBrains Mono';color:var(--slate-3)}
-/* Step 4's "JavaScript off" card: a muted badge (no live pulse) + the
-   sandboxed, script-disabled iframe running the real no-JS form-POST path. */
-.live-badge.nojs{color:var(--slate-3)}
-.nojs-frame{width:100%;height:200px;border:0;display:block;background:#fff}
-.live-body{padding:28px 24px;text-align:center}
-.counter-num{font-size:44px;font-weight:800;letter-spacing:-.02em}
-.counter-num .n{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
-.counter-btns{display:flex;gap:10px;justify-content:center;margin-top:16px}
-.counter-btns button{font:600 16px 'Inter';padding:10px 22px;border-radius:10px;border:1px solid var(--line);cursor:pointer;background:#fff;color:var(--ink)}
-.counter-btns button.plus{background:var(--sig);color:#fff;border-color:transparent}
-.demo-cap{text-align:center;color:var(--slate-2);font-size:14px;margin-top:14px}.demo-cap b{color:var(--slate)}
-.loading-cols{align-items:start}
-.loading-col{display:flex;flex-direction:column;gap:16px}
-.loading-col .code+.code{margin-top:0}
-.loading-cap{text-align:left}
-
-/* form demo */
-.form-demo{display:flex;flex-direction:column;gap:12px;max-width:340px;margin:0 auto;text-align:left}
-.form-demo label{font:600 13px 'Inter';color:var(--slate)}
-.form-demo input{padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px}
-.form-demo input.bad{border-color:#e11d48}
-.form-demo .err{color:#e11d48;font-size:13px;font-weight:500;margin:-4px 0 0}
-.form-demo button{background:var(--sig);color:#fff;border:none;border-radius:10px;padding:11px;font:600 15px 'Inter';cursor:pointer}
-
-/* pipeline */
-.pipe{display:flex;align-items:stretch;flex-wrap:wrap;margin-top:8px}
-.pipe .step{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
-.pipe .arrow{display:grid;place-items:center;color:var(--sig);font-weight:800;padding:0 4px;font-size:20px}
-.pipe .step .k{font:600 12px 'JetBrains Mono';color:var(--sig);margin-bottom:6px}
-.pipe .step .v{font-weight:600;font-size:15px}
-@media(max-width:860px){.pipe{flex-direction:column}.pipe .arrow{transform:rotate(90deg);padding:6px 0}}
-
-/* tiers */
-.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
-@media(max-width:860px){.tiers{grid-template-columns:1fr}}
-.tier{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;overflow:hidden}
-.tier::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
-.tier .lvl{font:600 12px 'JetBrains Mono';color:var(--slate-3)}
-.tier h4{margin:6px 0 8px;font-size:17px}.tier p{margin:0;font-size:14.5px;color:var(--slate)}
-
-/* bandwidth */
-.bars{margin-top:10px;max-width:560px}
-.bar-row{display:grid;grid-template-columns:120px 1fr 70px;align-items:center;gap:14px;margin:12px 0}
-.bar-row .lab{font:600 13px 'JetBrains Mono';color:var(--slate)}
-.bar{height:18px;border-radius:6px;background:var(--bg-3);overflow:hidden}.bar span{display:block;height:100%}
-.bar.full span{width:100%;background:linear-gradient(90deg,#cbd5e1,#94a3b8)}
-.bar.diff span{width:15%;background:var(--grad)}
-.bar-row .val{font:700 13px 'JetBrains Mono';text-align:right}
-
-/* feature grid */
-.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
-@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.grid{grid-template-columns:1fr}}
-.feat{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:.15s}
-.feat:hover{border-color:var(--sig);box-shadow:0 12px 28px -16px rgba(4,120,87,.4);transform:translateY(-2px)}
-.feat .ico{width:40px;height:40px;border-radius:10px;background:var(--sigsoft);display:grid;place-items:center;margin-bottom:12px}
-.feat .ico svg{width:20px;height:20px;fill:none;stroke:var(--sig);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.feat h4{margin:0 0 6px;font-size:16px}.feat p{margin:0;font-size:14px;color:var(--slate)}
-
-/* compare */
-.cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:8px;font-size:15px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
-.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}.cmp tr:last-child td{border-bottom:none}
-.cmp th{background:var(--bg-2);font:700 13px 'JetBrains Mono';color:var(--slate);text-transform:uppercase;letter-spacing:.04em}
-.cmp td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}.cmp td.give{color:var(--slate)}
-.cmp .badge{display:inline-block;font:600 12px 'JetBrains Mono';padding:3px 8px;border-radius:6px;background:var(--sigsoft);color:var(--sig-d)}
-
-/* dogfood */
-.dogfood{display:flex;gap:16px;align-items:center;background:var(--sigsoft);border:1px solid var(--sigline);border-radius:16px;padding:24px 28px}
-.dogfood p{margin:0;font-size:16px;color:var(--slate)}.dogfood p b{color:var(--ink)}
-
-/* final */
-.final{position:relative;overflow:hidden;text-align:center;color:#fff;padding:88px 0;background:var(--ink)}
-.final::before{content:"";position:absolute;inset:0;opacity:.92;background:radial-gradient(680px 380px at 25% 12%,rgba(4,120,87,.5),transparent 60%),radial-gradient(680px 400px at 80% 88%,rgba(16,185,129,.42),transparent 60%)}
-.final>*{position:relative}.final h2{color:#fff;margin:0 auto;max-width:18ch}
-.final .install{margin:24px auto;display:inline-flex;align-items:center;gap:10px;background:rgba(2,6,23,.5);border:1px solid rgba(148,163,184,.25);color:#e2e8f0;border-radius:11px;padding:11px 16px;font:500 14px 'JetBrains Mono'}
-.final .install .p{color:var(--sig-2)}
-.final .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)}.final .btn-ghost:hover{background:rgba(255,255,255,.16)}
-.alpha{display:inline-block;font:600 12px 'JetBrains Mono';color:#fcd34d;background:rgba(252,211,77,.12);border:1px solid rgba(252,211,77,.3);padding:4px 10px;border-radius:999px;margin-top:18px}
-
-/* tier-2 / pubsub / uploads demos */
-.ld-btn{display:inline-flex;align-items:center;gap:10px;background:var(--sig);color:#fff;border:none;border-radius:10px;padding:11px 22px;font:600 15px 'Inter';cursor:pointer}
-.ld-btn.is-loading{opacity:.6;cursor:wait}
-.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
-@keyframes spin{to{transform:rotate(360deg)}}
-.callout-banner{margin-top:20px;background:var(--sigsoft);border:1px solid var(--sigline);border-radius:12px;padding:15px 18px;color:var(--sig-d);font-weight:600;font-size:15px}
-.callout-banner code{background:rgba(4,120,87,.14);padding:2px 6px;border-radius:5px}
-.up{max-width:420px;margin:0 auto;text-align:left;width:100%}
-.up .row{display:flex;justify-content:space-between;font-size:14px;color:var(--slate);margin-bottom:8px}
-.up .row b{color:var(--ink)}
-.up .track{height:10px;border-radius:6px;background:var(--bg-3);overflow:hidden}
-.up .track span{display:block;height:100%;width:64%;background:var(--grad)}
-.up .pct{margin-top:8px;font:600 13px 'JetBrains Mono';color:var(--sig-d)}
-footer{background:var(--ink);color:var(--slate-3);padding:36px 0;border-top:1px solid #1e293b}
-.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
-.foot-links{display:flex;gap:22px;flex-wrap:wrap}.foot-links a{color:var(--slate-3);font-size:14px}.foot-links a:hover{color:#fff}
-
-/* ── Live embed-lvt demos (Pico-styled apps inlined into the page) ── */
-.tinkerdown-embed-lvt{display:block;width:100%}
-/* counter apps: tidy Pico's .container inside the small live-card + emerald accent */
-.tinkerdown-embed-lvt[data-embed-path*="counter"] main.container{max-width:none;margin:0;padding:.25rem 0;text-align:center}
-.tinkerdown-embed-lvt[data-embed-path*="counter"] h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
-.tinkerdown-embed-lvt[data-embed-path*="counter"] form{display:inline-flex;gap:10px}
-.tinkerdown-embed-lvt[data-embed-path*="counter"] button{width:auto;margin:0;border-radius:10px;padding:9px 20px;font-weight:600}
-.tinkerdown-embed-lvt[data-embed-path*="counter"] button[name="increment"]{--pico-background-color:var(--sig);--pico-border-color:var(--sig);background:var(--sig);border-color:var(--sig)}
-/* greet apps (hero + spine steps): input+button on one row, emerald "Say hi".
-   The validate/wall steps add a {{.lvt.ErrorTag}} <small> between input and
-   button; `order` keeps the input+button row intact while the error wraps to
-   its own full-width line below (it stays after the input in DOM for a11y). */
-.tinkerdown-embed-lvt[data-embed-path*="greet"] main.container{max-width:none;margin:0;padding:.25rem 0;text-align:center}
-.tinkerdown-embed-lvt[data-embed-path*="greet"] h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
-.tinkerdown-embed-lvt[data-embed-path*="greet"] form{display:flex;flex-wrap:wrap;gap:8px;max-width:360px;margin:0 auto}
-.tinkerdown-embed-lvt[data-embed-path*="greet"] input{margin:0;flex:1 1 60%;min-width:0;order:1}
-.tinkerdown-embed-lvt[data-embed-path*="greet"] button[name="greet"]{--pico-background-color:var(--sig);--pico-border-color:var(--sig);background:var(--sig);border-color:var(--sig);width:auto;white-space:nowrap;order:2}
-.tinkerdown-embed-lvt[data-embed-path*="greet"] button.greet-btn{--pico-background-color:var(--sig);--pico-border-color:var(--sig);background:var(--sig);border-color:var(--sig);color:#fff;width:auto;white-space:nowrap;order:2}
-.tinkerdown-embed-lvt[data-embed-path*="greet"] form small{order:3;flex-basis:100%;margin:0;text-align:left;color:#e11d48;font-weight:500}
-
-/* ── Responsive: mobile nav (hide text links, keep the CTA) ── */
-@media(max-width:760px){
-  .nav-links{gap:12px}
-  .nav-links a:not(.btn){display:none}
-  .hero{padding:60px 0 44px}
-  section{padding:54px 0}
-}
-
-/* ── Fixes: own-CSS specificity, Pico interop, mobile overflow ── */
-/* nav CTA: beat `.nav-links a { color: slate }` so the button text is white */
-.nav-links a.btn-primary{color:#fff}
-.nav-links a.btn-ghost{color:var(--ink)}
-/* code blocks: Pico's global `pre{background}` (light) was covering the dark
-   .code surface and hiding the white syntax text — force the pre transparent
-   so the .code container's dark background shows through. */
-.code pre{background:transparent;max-width:100%}
-.code code{background:transparent;padding:0} /* Pico styles inline <code>; not inside code blocks */
-/* Prism dark-theme tokens for the landing's dark code blocks (overrides the
-   light prism.css the shell loads; scoped to .code so docs code is untouched).
-   Same palette as the hand-authored spans, so Prism (Go) and any remaining
-   hand-spanned (HTML) blocks read identically. */
-.code pre[class*="language-"],.code code[class*="language-"]{color:#e2e8f0;background:transparent;text-shadow:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13.5px;line-height:1.7}
-.code .token.comment,.code .token.prolog,.code .token.doctype,.code .token.cdata{color:#64748b;font-style:normal}
-.code .token.punctuation{color:#94a3b8}
-.code .token.keyword,.code .token.boolean,.code .token.constant,.code .token.atrule{color:#6ee7b7}
-.code .token.string,.code .token.char,.code .token.attr-value,.code .token.regex{color:#a7f3d0}
-.code .token.function,.code .token.class-name,.code .token.builtin{color:#5eead4}
-.code .token.number{color:#fca5a5}
-.code .token.tag,.code .token.selector,.code .token.symbol{color:#7dd3fc}
-.code .token.attr-name,.code .token.property{color:#fcd34d}
-.code .token.operator,.code .token.entity,.code .token.url{color:#cbd5e1;background:transparent}
-/* prevent horizontal overflow: long code lines were forcing grid/flex columns
-   wider than the viewport (min-width:auto blowout) — clamp the tracks. */
-.two>*,.code,.hero-snip{min-width:0}
-.code{max-width:100%}
-html,body{overflow-x:hidden}
-
-/* ── Wiring explainer: animated "live wire" pulse + sequential step lighting ── */
-.wiring{margin-top:30px}
-.wiring-track{position:relative;height:3px;background:var(--line);border-radius:3px;margin:0 6px 24px;overflow:visible}
-.wiring-pulse{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 6px var(--sigsoft);transform:translate(-50%,-50%);animation:wtravel 5.2s cubic-bezier(.55,0,.45,1) infinite}
-@keyframes wtravel{0%,8%{left:0}25%,33%{left:33.3%}50%,58%{left:66.6%}75%,100%{left:100%}}
-.wsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
-@media(max-width:760px){.wsteps{grid-template-columns:1fr}.wiring-track{display:none}}
-.wstep{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;overflow:hidden}
-.wstep::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;animation:wlit 5.2s ease-in-out infinite}
-.wstep.s1::before{animation-delay:0s}.wstep.s2::before{animation-delay:1.3s}.wstep.s3::before{animation-delay:2.6s}.wstep.s4::before{animation-delay:3.9s}
-@keyframes wlit{0%{transform:scaleX(0);opacity:.25}6%{transform:scaleX(1);opacity:1}19%{transform:scaleX(1);opacity:1}26%,100%{transform:scaleX(0);opacity:.25}}
-.wstep .k{font:600 12px 'JetBrains Mono';color:var(--sig);margin-bottom:8px}
-.wstep .t{font-weight:700;font-size:15px;margin-bottom:6px;letter-spacing:-.01em}
-.wstep .d{font-size:13.5px;color:var(--slate);line-height:1.55}
-.wstep .d code{background:var(--bg-3);padding:1px 5px;border-radius:5px;font-size:12px;color:var(--sig-d)}
-.wiring-foot{margin-top:22px;font-size:15px;color:var(--slate);text-align:center}
-.wiring-foot code{background:var(--bg-3);padding:2px 6px;border-radius:5px;font-size:13px;color:var(--sig-d)}
-@media(prefers-reduced-motion:reduce){
-  .wiring-pulse{animation:none;left:100%}
-  .wstep::before{animation:none;transform:scaleX(1);opacity:1}
-}
-
-/* ── A/B compare labels + GIF ── */
-.ab-label{text-align:center;font:600 12px 'JetBrains Mono';color:var(--slate-3);text-transform:uppercase;letter-spacing:.06em;margin:34px 0 14px}
-.ab-gif{display:block;margin:0 auto;width:100%;max-width:560px;height:auto;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -22px rgba(15,23,42,.28)}
-
-/* ── Option A: round-trip scene (CSS-only, show-not-tell) ── */
-.rt{position:relative;display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:center;max-width:760px;margin:0 auto}
-@media(max-width:680px){.rt{grid-template-columns:1fr;gap:14px;max-width:340px}}
-.rt-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px -20px rgba(15,23,42,.22)}
-.rt-browser{overflow:hidden}
-.rt-bar{display:flex;gap:6px;padding:9px 12px;background:var(--bg-2);border-bottom:1px solid var(--line)}
-.rt-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
-.rt-bar i:first-child{background:#ff5f56}.rt-bar i:nth-child(2){background:#ffbd2e}.rt-bar i:nth-child(3){background:#27c93f}
-.rt-screen{padding:22px 16px;text-align:center}
-.rt-h{position:relative;height:30px;font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
-.rt-h span{position:absolute;left:0;right:0}
-.rt-there{animation:rtThere 6s infinite}
-.rt-ada{color:var(--sig-d);animation:rtAda 6s infinite}
-@keyframes rtThere{0%,68%{opacity:1}72%,96%{opacity:0}100%{opacity:1}}
-@keyframes rtAda{0%,68%{opacity:0}72%,96%{opacity:1}100%{opacity:0}}
-.rt-btn{position:relative;background:var(--sig);color:#fff;border:none;border-radius:9px;padding:9px 20px;font:600 14px 'Inter';overflow:hidden}
-.rt-btn::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:rtTap 6s infinite}
-@keyframes rtTap{0%{opacity:0}5%{opacity:.55}12%{opacity:0}100%{opacity:0}}
-.rt-wire{position:relative;height:3px;background:var(--line);border-radius:3px}
-@media(max-width:680px){.rt-wire{display:none}}
-.rt-tok{position:absolute;top:50%;transform:translateY(-50%);font:600 11px 'JetBrains Mono';padding:4px 9px;border-radius:999px;white-space:nowrap}
-.rt-req{left:0;background:var(--sig);color:#fff;box-shadow:0 4px 12px rgba(4,120,87,.3);animation:rtReq 6s cubic-bezier(.5,0,.5,1) infinite}
-.rt-res{right:0;background:var(--ink);color:#fff;box-shadow:0 4px 12px rgba(15,23,42,.3);animation:rtRes 6s cubic-bezier(.5,0,.5,1) infinite}
-@keyframes rtReq{0%,10%{left:-12%;opacity:0}15%{opacity:1}33%{left:100%;opacity:1}37%,100%{left:100%;opacity:0}}
-@keyframes rtRes{0%,48%{right:-12%;opacity:0}53%{opacity:1}68%{right:100%;opacity:1}72%,100%{right:100%;opacity:0}}
-.rt-server{padding:18px;text-align:center;position:relative}
-.rt-server::before{content:"";position:absolute;inset:0;border-radius:14px;animation:rtPulse 6s infinite}
-@keyframes rtPulse{0%,36%{box-shadow:0 0 0 0 rgba(4,120,87,0)}42%{box-shadow:0 0 0 7px rgba(4,120,87,.25)}48%,100%{box-shadow:0 0 0 0 rgba(4,120,87,0)}}
-.rt-go{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--grad);color:#fff;font:800 16px 'Inter';margin-bottom:8px}
-.rt-fn{font:600 13px 'JetBrains Mono';color:var(--slate)}
-@media(prefers-reduced-motion:reduce){
-  .rt-there{opacity:0}.rt-ada{opacity:1}
-  .rt-req,.rt-res,.rt-btn::after,.rt-server::before{animation:none;opacity:0}
-}
-
-/* ── "Under the hood": readable action/patch packets crossing the wire ── */
-.uh{display:grid;grid-template-columns:minmax(150px,1fr) minmax(230px,1.6fr) minmax(150px,1fr);align-items:center;max-width:900px;margin:34px auto 0}
-@media(max-width:760px){.uh{grid-template-columns:1fr;gap:18px;max-width:400px}}
-.uh-side{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 16px 18px;box-shadow:0 14px 34px -22px rgba(15,23,42,.22)}
-.uh-tag{position:absolute;top:-9px;left:16px;font:600 11px 'JetBrains Mono';color:var(--slate-3);background:#fff;padding:0 6px}
-.uh-browser{text-align:center}
-.uh-h{position:relative;height:28px;font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
-.uh-h span{position:absolute;left:0;right:0}
-.uh-there{animation:uhThere 7s infinite}.uh-ada{color:var(--sig-d);animation:uhAda 7s infinite}
-@keyframes uhThere{0%,74%{opacity:1}78%,96%{opacity:0}100%{opacity:1}}
-@keyframes uhAda{0%,74%{opacity:0}78%,96%{opacity:1}100%{opacity:0}}
-.uh-btn{position:relative;overflow:hidden;background:var(--sig);color:#fff;border:none;border-radius:9px;padding:8px 18px;font:600 14px 'Inter'}
-.uh-btn::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:uhTap 7s infinite}
-@keyframes uhTap{0%{opacity:0}4%{opacity:.55}10%{opacity:0}100%{opacity:0}}
-/* the wire: two lanes (action up, patch down) with readable packets */
-.uh-wire{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:30px;padding:18px 0}
-@media(max-width:760px){.uh-wire{gap:22px;padding:6px 0}}
-.uh-wlabel{position:absolute;top:0;left:50%;transform:translateX(-50%);font:600 10px 'JetBrains Mono';color:var(--slate-3);letter-spacing:.1em;text-transform:uppercase}
-.uh-lane{position:relative;height:32px}
-.uh-lane::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
-.uh-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:600 10px 'JetBrains Mono';color:var(--slate-3);background:var(--bg);padding:0 7px;z-index:1}
-.uh-pkt{position:absolute;top:50%;transform:translateY(-50%);font:600 11px 'JetBrains Mono';padding:6px 11px;border-radius:8px;white-space:nowrap;box-shadow:0 6px 16px rgba(15,23,42,.2);z-index:2}
-.uh-up{left:0;background:var(--sig);color:#fff;animation:uhUp 7s cubic-bezier(.45,0,.55,1) infinite}
-.uh-down{right:0;background:var(--ink);color:#cbd5e1;animation:uhDown 7s cubic-bezier(.45,0,.55,1) infinite}
-.uh-up b{color:#fff}.uh-down b{color:#6ee7b7}
-@keyframes uhUp{0%,8%{left:-6%;opacity:0}13%{opacity:1}34%{left:106%;opacity:1}38%,100%{left:106%;opacity:0}}
-@keyframes uhDown{0%,50%{right:-6%;opacity:0}55%{opacity:1}76%{right:106%;opacity:1}80%,100%{right:106%;opacity:0}}
-/* server */
-.uh-server{text-align:center;position:relative}
-.uh-server::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;animation:uhPulse 7s infinite}
-@keyframes uhPulse{0%,34%{box-shadow:0 0 0 0 rgba(4,120,87,0)}40%{box-shadow:0 0 0 7px rgba(4,120,87,.22)}52%,100%{box-shadow:0 0 0 0 rgba(4,120,87,0)}}
-.uh-go{font:700 13px 'JetBrains Mono';color:var(--sig-d);margin-bottom:12px}
-.uh-steps{display:flex;flex-direction:column;gap:6px}
-.uh-step{font:600 11px 'JetBrains Mono';color:var(--slate-3);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;transition:none}
-.uh-step.st1{animation:uhStep 7s infinite}
-.uh-step.st2{animation:uhStep 7s infinite;animation-delay:.5s}
-@keyframes uhStep{0%,36%{background:var(--bg-2);color:var(--slate-3);border-color:var(--line)}43%{background:var(--sigsoft);color:var(--sig-d);border-color:var(--sigline)}55%,100%{background:var(--bg-2);color:var(--slate-3);border-color:var(--line)}}
-@media(prefers-reduced-motion:reduce){
-  .uh-there{opacity:0}.uh-ada{opacity:1}
-  .uh-up,.uh-down{display:none}
-  .uh-btn::after,.uh-server::after,.uh-step.st1,.uh-step.st2{animation:none}
-}
-
-/* ── Progressive-narrative spine (greet → wall) ────────────── */
-.spine-intro{text-align:center}
-.spine-intro h2{margin-left:auto;margin-right:auto}
-.spine-intro .lead{max-width:70ch;margin-left:auto;margin-right:auto}
-
-/* a code block presented as the diff/delta from the previous step */
-.code.delta{border-color:var(--sigline);box-shadow:0 24px 50px -24px rgba(2,6,23,.55),inset 3px 0 0 var(--sig-2)}
-.code.delta .code-bar{background:linear-gradient(90deg,rgba(16,185,129,.12),var(--code-bg-2) 60%)}
-.code.delta .code-bar .file{color:#6ee7b7}
-
-/* compact "on the wire" strip — per-step real JSON frames */
-.wire{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
-.wlabel{font:600 10px 'JetBrains Mono';letter-spacing:.1em;text-transform:uppercase;color:var(--slate-3)}
-.wf{font:600 12px/1.5 'JetBrains Mono';padding:8px 12px;border-radius:8px;word-break:break-all}
-.wf.up{background:var(--sigsoft);color:var(--sig-d);border:1px solid var(--sigline)}
-.wf.dn{background:var(--ink);color:#cbd5e1}
-.wf.note{color:var(--slate-3);background:none;padding:0 2px;font-weight:500}
-
-/* step 4: enhancement tiers stacked beside the live embed */
-.tiers-col{grid-template-columns:1fr;margin-top:0}
-@media(max-width:860px){.spine-intro .lead{max-width:100%}}
-
-/* ── Pipeline animation (Step 5): the 4 stages pulse in sequence so the
-   state→render→diff→patch cycle reads as a living loop, not a flowchart.
-   Color/background only (no transform) so the mobile rotate(90deg) on the
-   arrows is preserved. */
-@keyframes pipeStep{0%,16%,100%{background:#fff;border-color:var(--line)}6%{background:var(--sigsoft);border-color:var(--sigline)}}
-@keyframes pipeArrow{0%,22%,100%{color:var(--slate-3)}9%{color:var(--sig)}}
-.pipe .step{animation:pipeStep 4s ease-in-out infinite}
-.pipe .arrow{animation:pipeArrow 4s ease-in-out infinite}
-.pipe .step:nth-child(1){animation-delay:0s}
-.pipe .arrow:nth-child(2){animation-delay:.28s}
-.pipe .step:nth-child(3){animation-delay:.55s}
-.pipe .arrow:nth-child(4){animation-delay:.83s}
-.pipe .step:nth-child(5){animation-delay:1.1s}
-.pipe .arrow:nth-child(6){animation-delay:1.38s}
-.pipe .step:nth-child(7){animation-delay:1.65s}
-@media(prefers-reduced-motion:reduce){.pipe .step,.pipe .arrow{animation:none}}
-
-/* ── Step 3 loading button: a spinner that REPLACES the label in place.
-   color:transparent hides the text but keeps its box, so the button never
-   changes width (no wrap on mobile); the ::after spinner is centered over it.
-   Driven by the .is-loading class the client toggles on pending/done. */
-.tinkerdown-embed-lvt[data-embed-path*="greet-loading"] button[name="greet"]{position:relative}
-.tinkerdown-embed-lvt[data-embed-path*="greet-loading"] button[name="greet"].is-loading{color:transparent}
-.tinkerdown-embed-lvt[data-embed-path*="greet-loading"] button[name="greet"].is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:greetspin .6s linear infinite}
-@keyframes greetspin{to{transform:rotate(360deg)}}
-@media(prefers-reduced-motion:reduce){.tinkerdown-embed-lvt[data-embed-path*="greet-loading"] button[name="greet"].is-loading::after{animation:none;border-top-color:rgba(255,255,255,.5)}}
+/* The landing page. Loaded via styling.custom_css on `layout: landing` pages
+   only, after brand.css — so the design tokens and @font-face are already in
+   scope and only layout lives here.
+
+   Tokens are restated on a bare :root rather than inherited from brand.css's
+   :root:not([data-theme="dark"]). The landing has no theme toggle and the
+   design has no dark variant, so it stays light whatever the visitor's stored
+   preference says. Restating is what makes that true. */
+
+:root {
+  --bg:            #FBFAF8;
+  --bg-sunk:       #F7F5F1;
+  --bg-code:       #F4F2ED;
+  --bg-inline:     #F1EFE9;
+  --ink:           #1B1A17;
+  --body:          #4A4842;
+  --body-muted:    #57544D;
+  --meta:          #6B6862;
+  --line:          #E7E4DD;
+  --line-soft:     #EDEAE3;
+  --border:        #DCD8D0;
+  --accent:        #2F5D8A;
+  --accent-hover:  #1B3E60;
+  --danger:        #9A3B32;
+  --ok:            #5C9169;
+  --code-ink:      #33312C;
+  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+}
+
+* { box-sizing: border-box }
+html { scroll-behavior: smooth }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--body);
+  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  max-width: none;
+  padding: 0;
+}
+a { color: var(--accent); text-decoration: none }
+a:hover { color: var(--accent-hover); text-decoration: underline }
+code, pre { font-family: var(--mono) }
+
+/* ══ Header ══════════════════════════════════════════════════════════════ */
+
+header.site {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(251, 250, 248, 0.92);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+.hdr-in {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 32px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--ink);
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: -0.01em;
+}
+.logo:hover { text-decoration: none }
+.logo svg { display: block; flex: none }
+.hdr-nav { display: flex; align-items: center; gap: 26px; font-size: 14px }
+.hdr-nav a { color: var(--body-muted) }
+.hdr-nav a:hover { color: var(--ink) }
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 5px;
+  font-weight: 500;
+  font-size: 15px;
+  padding: 11px 20px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  /* Color and border only — nothing on this page moves unless the app is
+     updating, so no transform and no shadow on any state. */
+  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
+}
+.btn-primary { background: var(--ink); color: var(--bg) }
+.btn-primary:hover { background: var(--accent); color: var(--bg); text-decoration: none }
+.btn-ghost { border-color: var(--border); color: var(--ink); background: none }
+.btn-ghost:hover { border-color: var(--ink); color: var(--ink); text-decoration: none }
+.hdr-nav .btn { font-size: 14px; padding: 7px 14px }
+
+/* ══ Shell ═══════════════════════════════════════════════════════════════ */
+
+.shell {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 32px;
+  display: grid;
+  /* minmax(0,1fr), never 1fr: a long monospace line otherwise sets the track's
+     min-content width and the whole page scrolls sideways instead of the <pre>. */
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 56px;
+  align-items: start;
+}
+.doc { padding-bottom: 120px; min-width: 0 }
+
+.rail {
+  position: sticky;
+  top: 56px;
+  padding-top: 88px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.rail-label {
+  color: var(--meta);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding-bottom: 10px;
+}
+.rail a {
+  color: var(--body-muted);
+  padding: 5px 0 5px 12px;
+  border-left: 2px solid var(--line);
+}
+.rail a:hover { color: var(--ink); border-left-color: var(--accent); text-decoration: none }
+.rail a.sub { color: var(--meta); padding: 4px 0 4px 22px }
+
+/* ══ Sections ════════════════════════════════════════════════════════════ */
+
+section { scroll-margin-top: 72px }
+.eyebrow {
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--meta);
+}
+/* Scoped to direct children of a section, not `.doc h1`. The live demos inline
+   a whole running app into the page, headings and all — a descendant selector
+   would set the greeting app's own <h1> at the hero's 44px. */
+.doc > section > h1 {
+  font-size: 44px;
+  line-height: 1.15;
+  letter-spacing: -0.025em;
+  font-weight: 600;
+  color: var(--ink);
+  margin: 18px 0;
+  max-width: 19ch;
+}
+.doc > section > h2,
+.cta > div > h2 {
+  font-size: 29px;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+  font-weight: 600;
+  color: var(--ink);
+  margin: 10px 0 14px;
+}
+.doc > section.step > h2,
+.diff-split h2 { font-size: 25px; line-height: 1.3 }
+.lead, .close { font-size: 16.5px; line-height: 1.65; color: var(--body); max-width: 62ch }
+.close { margin: 28px 0 0 }
+.note { font-size: 15px; line-height: 1.6; color: var(--body-muted); max-width: 62ch }
+
+.hero { padding: 88px 0 64px }
+.hero .sub { font-size: 18px; line-height: 1.6; color: var(--body); margin: 0; max-width: 56ch }
+#whole-app { padding: 56px 0; border-top: 1px solid var(--line) }
+.intro { padding: 56px 0 24px; border-top: 1px solid var(--line) }
+.step { padding: 40px 0; border-top: 1px solid var(--line-soft) }
+.cta {
+  padding: 56px 0;
+  border-top: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 40px;
+}
+
+.cta-row { display: flex; gap: 12px; align-items: center; margin-top: 32px; flex-wrap: wrap }
+.get { font-size: 13px; color: var(--meta); padding-left: 8px }
+
+/* ══ Inline code ═════════════════════════════════════════════════════════ */
+
+.doc :not(pre) > code {
+  font-size: 14px;
+  background: var(--bg-inline);
+  padding: 1px 5px;
+  border-radius: 4px;
+  color: var(--body);
+}
+
+/* ══ Live demo cards ═════════════════════════════════════════════════════ */
+
+.demo {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #FFFFFF;
+  overflow: hidden;
+  margin: 0 0 20px;
+  min-width: 0;
+}
+.demo-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--line-soft);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--meta);
+}
+.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none }
+.dot.off { background: var(--border) }
+.nojs-frame { width: 100%; height: 210px; border: 0; display: block }
+
+/* The demos are real apps inlined into this page. embed-lvt drops their <head>,
+   so the stylesheet they link never arrives and they inherit whatever the
+   landing sets — which is why the whole card is styled from here rather than
+   in each example. Kept to the design's demo-card spec so every step's app
+   looks like one component. */
+.demo-body { padding: 24px }
+.demo-body .container { padding: 0; margin: 0; max-width: none }
+.demo-body h1 {
+  font-size: 26px;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+  font-weight: 600;
+  color: var(--ink);
+  margin: 0 0 18px;
+}
+.demo-body form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 }
+.demo-body input {
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  font-size: 14px;
+  width: 190px;
+  background: var(--bg);
+  color: var(--ink);
+  margin: 0;
+  height: auto;
+}
+.demo-body button {
+  padding: 8px 16px;
+  border: 1px solid var(--ink);
+  background: var(--ink);
+  color: var(--bg);
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+  width: auto;
+  margin: 0;
+  height: auto;
+}
+.demo-body button:hover { background: var(--accent); border-color: var(--accent) }
+.demo-body button[disabled], .demo-body button[aria-busy="true"] {
+  background: var(--border);
+  border-color: var(--border);
+  color: var(--meta);
+}
+/* Field errors come back from Go as a <small> next to the input, via
+   .lvt.ErrorTag. Scoped to the form: the wall app also emits <small>, for
+   greeting timestamps, and they are not errors. */
+.demo-body form small { display: block; width: 100%; font-size: 13px; color: var(--danger); font-family: var(--mono) }
+.demo-body input[aria-invalid="true"] { border-color: var(--danger) }
+/* An iframe card supplies its own padding inside the frame. */
+.demo-body:has(> .nojs-frame) { padding: 0 }
+
+/* ══ Code ════════════════════════════════════════════════════════════════ */
+
+.snip { min-width: 0 }
+.snip-label {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--meta);
+  margin-bottom: 7px;
+}
+.doc pre {
+  background: var(--bg-code);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 16px;
+  font-size: 12.5px;
+  line-height: 1.65;
+  color: var(--code-ink);
+  overflow-x: auto;     /* the <pre> scrolls, never the page */
+  margin: 0 0 16px;
+}
+.doc pre code { background: none; padding: 0; font-size: inherit; color: inherit }
+
+/* The client wraps every pre.language-* in a .code-block-wrapper and injects a
+   copy button. Its default 27px vertical margin is what pushes a highlighted
+   block out of line with the plain <pre> beside it in a .pair, so the wrapper
+   is made transparent and the <pre> keeps owning the spacing. */
+.doc .code-block-wrapper { margin: 0; min-width: 0 }
+/* The button floats over the top-right of the block. In a .pair column that is
+   directly on top of the code, so the first lines get a gutter to sit in. */
+.doc .code-block-wrapper pre { padding-right: 46px }
+.doc .code-copy-btn {
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--meta);
+  box-shadow: none;
+}
+.doc .code-copy-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--bg) }
+
+/* Same minmax(0,...) reason as .shell — this is the grid the defect was
+   originally found in. */
+.pair {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+  margin-bottom: 4px;
+}
+.pair > * { min-width: 0 }
+
+/* ══ On the wire ═════════════════════════════════════════════════════════ */
+
+.wire {
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px dashed var(--border);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  line-height: 1.9;
+  color: var(--meta);
+  overflow-x: auto;
+}
+.wire-label.second { margin-top: 10px }
+.payload { color: var(--body-muted) }
+
+/* ══ Pipeline strip ══════════════════════════════════════════════════════ */
+
+.pipe {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--meta);
+  margin: 22px 0;
+}
+.pipe span { border: 1px solid var(--line); border-radius: 5px; padding: 6px 10px }
+.pipe .arrow { border: 0; padding: 0 }
+
+/* ══ Definition rows (how it compares) ═══════════════════════════════════ */
+
+.rows {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr);
+  font-size: 15.5px;
+  line-height: 1.6;
+  border-top: 1px solid var(--line-soft);
+  margin-top: 22px;
+}
+.row-k { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line-soft); font-weight: 500; color: var(--ink) }
+.row-v { padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--body) }
+
+/* ══ Link rows (everything else) ═════════════════════════════════════════ */
+
+/* Authored markup, so the title/gloss split the docs shell cannot express is
+   available here: each row is a flex with two spans. */
+.links {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 0 32px;
+  border-top: 1px solid var(--line-soft);
+  margin: 22px 0;
+}
+.links a {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 14px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line-soft);
+  color: var(--ink);
+  font-size: 15.5px;
+}
+.links a:hover { color: var(--accent); text-decoration: none }
+.link-t { font-weight: 500 }
+.link-g { color: var(--meta); font-size: 14px; text-align: right }
+
+/* ══ Diff bars ═══════════════════════════════════════════════════════════ */
+
+.diff-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center }
+.bars { font-family: var(--mono); font-size: 11.5px; color: var(--meta) }
+.bar-row { display: flex; justify-content: space-between; margin-bottom: 5px }
+.bar { height: 8px; border: 1px solid var(--border); border-radius: 3px; margin-bottom: 14px; background: var(--bg-code) }
+.bar > span { display: block; height: 100%; background: var(--border) }
+.bar.full > span { width: 100% }
+.bar.diff > span { width: 14%; background: var(--accent) }
+
+/* ══ Closing CTA ═════════════════════════════════════════════════════════ */
+
+/* inline-block so the box hugs the command rather than spanning the column —
+   but it still has to clamp, or on a phone it sizes to the full go-get line,
+   drags its flex parent out with it and scrolls the whole page sideways. */
+.doc pre.install { display: inline-block; max-width: 100%; font-size: 13px; margin: 16px 0 0 }
+.cta > div { min-width: 0; max-width: 100% }
+.gopher { flex: none; display: block; width: 132px; height: auto }
+
+/* ══ Footer ══════════════════════════════════════════════════════════════ */
+
+footer.site { border-top: 1px solid var(--line); background: var(--bg-sunk) }
+.foot-in {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 32px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px 32px;
+}
+.foot-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--meta) }
+.foot-brand svg { display: block; flex: none }
+.foot-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px }
+.foot-links a { color: var(--body-muted) }
+.foot-links a:hover { color: var(--ink) }
+.attrib {
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  font-size: 11.5px;
+  color: var(--meta);
+  text-align: right;
+}
+.attrib a { color: var(--meta); text-decoration: underline }
+.attrib a:hover { color: var(--ink) }
+
+/* ══ Responsive ══════════════════════════════════════════════════════════ */
+
+/* The rail is the first thing to go: below this the two-column shell leaves
+   the article too narrow for a 62ch measure. */
+@media (max-width: 1100px) {
+  .shell { grid-template-columns: minmax(0, 1fr); gap: 0 }
+  .rail { display: none }
+}
+@media (max-width: 860px) {
+  .hdr-in, .shell { padding-inline: 20px }
+  .foot-in { padding: 24px 20px }
+  .pair, .diff-split, .links { grid-template-columns: minmax(0, 1fr); gap: 16px }
+  .cta { flex-direction: column; align-items: flex-start }
+  .doc h1 { font-size: 34px }
+  .doc h2, .step h2 { font-size: 23px }
+  .hero { padding: 56px 0 40px }
+  .rows { grid-template-columns: minmax(0, 1fr) }
+  .row-k { border-bottom: 0; padding-bottom: 0 }
+  .attrib { margin-left: 0; align-items: flex-start; text-align: left }
+  .hdr-nav { gap: 16px; font-size: 13.5px }
+}
+/* Below this the five header items stop fitting; only the primary action
+   survives, and the same links are all in the footer. */
+@media (max-width: 640px) {
+  .hdr-nav a:not(.btn) { display: none }
+}
diff --git a/content/index.md b/content/index.md
index 8c9f13d..b2b83e3 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,46 +1,87 @@
 ---
 title: "LiveTemplate — Build interactive web apps in Go with standard HTML templates"
-description: "Use html/template and Go handlers to build rich app screens without writing JavaScript for the common cases."
+description: "Write html/template and Go handlers, and the page updates itself. No SPA, no JSON API, no build step."
 layout: landing
 ---
 
-<header class="nav"><div class="wrap nav-in">
-  <div class="brand"><span class="glyph">◇</span> LiveTemplate</div>
-  <nav class="nav-links"><a href="/getting-started/introduction">Docs</a><a href="/recipes/">Recipes</a><a href="/reference/api">Reference</a><a href="https://github.com/livetemplate/livetemplate">GitHub</a><a class="btn btn-primary" href="/getting-started/install">Get started →</a></nav>
+<!-- NOTE FOR EDITORS: never put a blank line inside a <pre> block on this page.
+     Goldmark ends an HTML block at the first blank line, so everything after it
+     is re-parsed as markdown: indentation is stripped and <p> tags appear
+     inside the <code>. Keep snippets compact instead. -->
+
+<header class="site"><div class="hdr-in">
+  <a class="logo" href="#top">
+    <svg width="19" height="19" viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="1.5" y="1.5" width="17" height="17" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M11.2 4.2 L6.6 10.6 H9.6 L8.8 15.8 L13.4 9.4 H10.4 Z" fill="var(--accent)"/></svg>
+    LiveTemplate
+  </a>
+  <nav class="hdr-nav">
+    <a href="/getting-started/introduction">Docs</a>
+    <a href="/recipes/">Recipes</a>
+    <a href="/reference/api">Reference</a>
+    <a href="https://github.com/livetemplate/livetemplate">GitHub</a>
+    <a class="btn btn-primary" href="/getting-started/install">Get started</a>
+  </nav>
 </div></header>
 
-<!-- HERO -->
-<section class="hero"><div class="wrap">
-  <span class="eyebrow">A simpler way to build interactive Go web apps · Alpha</span>
-  <h1 class="head">Build interactive web apps in Go with <span class="g">standard HTML templates.</span></h1>
-  <p class="sub">Use <b><code>html/template</code> and Go handlers</b> to build rich app screens without writing JavaScript for the common cases.</p>
+<div id="top" class="shell">
+
+<aside class="rail">
+  <div class="rail-label">On this page</div>
+  <a href="#whole-app">The whole app</a>
+  <a href="#steps">Five more steps</a>
+  <a class="sub" href="#step-2">2 · No JavaScript</a>
+  <a class="sub" href="#step-3">3 · Validation</a>
+  <a class="sub" href="#step-4">4 · Loading state</a>
+  <a class="sub" href="#step-5">5 · Sync tabs</a>
+  <a class="sub" href="#step-6">6 · Shared wall</a>
+  <a href="#compare">How it compares</a>
+  <a href="#more">Everything else</a>
+</aside>
+
+<main class="doc">
+
+<section class="hero">
+  <div class="eyebrow">Alpha · a Go library for server-rendered app screens</div>
+  <h1>Build interactive web apps in Go with standard HTML templates.</h1>
+  <p class="sub">Write <code>html/template</code> and Go handlers, and the page updates itself. The goal is app-like screens without an SPA, a JSON API or a build step, so there's no JavaScript here that you have to write.</p>
   <div class="cta-row">
-    <a class="btn btn-primary btn-lg" href="/getting-started/install">Get started →</a>
-    <a class="btn btn-ghost btn-lg" href="/getting-started/introduction">Read the docs</a>
+    <a class="btn btn-primary" href="/getting-started/install">Get started →</a>
+    <a class="btn btn-ghost" href="/getting-started/introduction">Read the docs</a>
+    <code class="get">go get github.com/livetemplate/livetemplate</code>
   </div>
-  <div class="hero-snip">
-    <div class="live-card">
-      <div class="live-bar"><span class="live-badge"><span class="pulse"></span> live</span><span class="live-meta">greet · running in this page</span></div>
-      <div class="live-body">
+</section>
+
+<section id="whole-app">
+  <div class="eyebrow">Step 1 · Render</div>
+  <h2>This is the whole app, running on this page.</h2>
+  <p class="lead">Type a name and hit Say hi. The submit calls a Go method, the server re-renders the template, and only the changed HTML comes back.</p>
+
+  <div class="demo">
+    <div class="demo-bar"><span class="dot"></span> greet · running in this page</div>
+    <div class="demo-body">
 
-```embed-lvt path="/apps/greet/" upstream="http://localhost:9091" height="200px"
+```embed-lvt path="/apps/greet/" upstream="http://localhost:9091" height="130px"
 ```
 
 </div>
+  </div>
+
+  <div class="pair">
+    <div class="snip">
+      <div class="snip-label">app.tmpl — the entire template</div>
+<pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;&lt;head&gt;
+  &lt;script defer src="{{lvtClientScriptURL}}"&gt;&lt;/script&gt;
+&lt;/head&gt;&lt;body&gt;
+  &lt;h1&gt;Hello, {{.Name}}&lt;/h1&gt;
+  &lt;form method="POST"&gt;
+    &lt;input name="name" placeholder="Your name"&gt;
+    &lt;button name="greet"&gt;Say hi&lt;/button&gt;
+  &lt;/form&gt;
+&lt;/body&gt;&lt;/html&gt;</code></pre>
     </div>
-    <p class="hero-cap" style="margin:14px 0 8px">↑ a real, running app. Type a name, hit <b>Say hi</b>. Below is <b>the whole thing</b> — the template and the Go code, complete:</p>
-    <div class="code"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.tmpl &nbsp;— the entire template, just standard HTML</span></div>
-<pre><span class="tag">&lt;!DOCTYPE html&gt;</span>
-<span class="tag">&lt;html&gt;&lt;head&gt;</span>
-  <span class="tag">&lt;script</span> <span class="attr">defer src</span>=<span class="str">"{{lvtClientScriptURL}}"</span><span class="tag">&gt;&lt;/script&gt;</span>
-<span class="tag">&lt;/head&gt;&lt;body&gt;</span>
-  <span class="tag">&lt;h1&gt;</span>Hello, {{<span class="fn">.Name</span>}}<span class="tag">&lt;/h1&gt;</span>
-  <span class="tag">&lt;form</span> <span class="attr">method</span>=<span class="str">"POST"</span><span class="tag">&gt;</span>
-    <span class="tag">&lt;input</span> <span class="attr">name</span>=<span class="str">"name"</span> <span class="attr">placeholder</span>=<span class="str">"Your name"</span><span class="tag">&gt;</span>
-    <span class="tag">&lt;button</span> <span class="attr">name</span>=<span class="str">"greet"</span><span class="tag">&gt;</span>Say hi<span class="tag">&lt;/button&gt;</span>
-  <span class="tag">&lt;/form&gt;</span>
-<span class="tag">&lt;/body&gt;&lt;/html&gt;</span></pre></div>
-    <div class="code"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.go &nbsp;— the entire program</span></div>
+    <div class="snip">
+      <div class="snip-label">app.go — the entire program</div>
 <pre class="language-go"><code class="language-go">package main
 import (
     "net/http"
@@ -56,227 +97,194 @@ func main() {
     app := lvt.Must(lvt.New("app", lvt.WithParseFiles("app.tmpl")))
     http.ListenAndServe(":8080",
         app.Handle(&amp;App{}, lvt.AsState(&amp;State{Name: "there"})))
-}</code></pre></div>
-    <p class="hero-cap">That's the whole app — ~20 lines of Go and standard HTML. No SPA framework, no REST API, no build step.</p>
-    <p class="hero-cap">It reads like a classic server-rendered form, but it <b>behaves like a modern app</b>: the page updates live, with no full reload and no JavaScript you had to write. From here, everything you'd reach for a frontend framework to do — form validation, loading states, progressive enhancement, real-time sync across tabs, multiplayer/collaborative views, file uploads — is a <b>small diff on this exact code</b>. The rest of this page builds them, one step at a time.</p>
-  </div>
-</div></section>
-
-<!-- UNDER THE HOOD: animated request/response over the wire -->
-<section><div class="wrap">
-  <div class="sec-tag">Step 1 · Render</div>
-  <h2>This is the whole app, not a toy example.</h2>
-  <p class="lead">These are the <b>real frames</b> on the wire. A form submit calls your Go method, the server re-renders the template, and <b>only the changed HTML comes back</b> — no reload, no extra JSON API, no client route you had to build.</p>
-  <div class="uh">
-    <!-- browser -->
-    <div class="uh-side uh-browser">
-      <span class="uh-tag">browser</span>
-      <div class="uh-app">
-        <div class="uh-h"><span class="uh-there">Hello, there</span><span class="uh-ada">Hello, Ada</span></div>
-        <button class="uh-btn">Say&nbsp;hi</button>
-      </div>
-    </div>
-    <!-- the wire -->
-    <div class="uh-wire">
-      <span class="uh-wlabel">WebSocket</span>
-      <div class="uh-lane">
-        <span class="uh-arrow">▲ action · 40 B</span>
-        <span class="uh-pkt uh-up">{"action":<b>"greet"</b>,"data":{"name":"Ada"}}</span>
-      </div>
-      <div class="uh-lane">
-        <span class="uh-arrow">▼ diff · 20 B</span>
-        <span class="uh-pkt uh-down">{"tree":{"0":<b>"Ada"</b>}}</span>
-      </div>
-    </div>
-    <!-- go server -->
-    <div class="uh-side uh-server">
-      <span class="uh-tag">Go server</span>
-      <div class="uh-go">Greet(state)</div>
-      <div class="uh-steps">
-        <span class="uh-step st1">re-render</span>
-        <span class="uh-step st2">diff</span>
-      </div>
+}</code></pre>
     </div>
   </div>
-  <p class="wiring-foot">All of it comes from the <b>two files above</b> plus one <code>&lt;script&gt;</code>. The framework handles transport and DOM patching, so you stay in Go handlers and HTML templates.</p>
-</div></section>
-
-<!-- SPINE INTRO -->
-<section class="alt"><div class="wrap spine-intro">
-  <div class="sec-tag">One app, six steps</div>
-  <h2>Start with a normal Go app. Then add the parts real apps need.</h2>
-  <p class="lead">Everything below is the <b>same greeting app</b>. We add plain POST fallback, validation, pending state, then WebSocket updates. Each step is a <b>small diff</b>. You keep one Go codebase and one place for application logic.</p>
-</div></section>
-
-<!-- STEP 2 · WORKS WITHOUT JS -->
-<section><div class="wrap two code-right">
-  <div>
-    <div class="sec-tag">Step 2 · Works without JavaScript</div>
-    <h2>The same app. With and without JavaScript.</h2>
-    <p class="lead">Both cards run the <b>identical app</b>, with WebSocket off. <b>Left, JS on:</b> the browser enhances the form submit and patches the headline in place. <b>Right, JS disabled:</b> the same <code>&lt;form&gt;</code> does a plain POST and the server renders the page. JavaScript changes the <b>browser behavior</b>, not the app you have to build. Type a name in each.</p>
-    <div class="two" style="margin-top:28px">
-      <div class="live-card">
-        <div class="live-bar"><span class="live-badge"><span class="pulse"></span> live</span><span class="live-meta">JavaScript on · fetch + DOM patch</span></div>
-        <div class="live-body">
+
+  <div class="wire">
+    <div class="wire-label">on the wire · WebSocket</div>
+    <div>▲ action · 40 B <span class="payload">{"action":"greet","data":{"name":"Ada"}}</span></div>
+    <div>▼ diff &nbsp;· 20 B <span class="payload">{"tree":{"0":"Ada"}}</span></div>
+  </div>
+
+  <p class="close">That's the whole app, about 20 lines of Go and some standard HTML. Everything else on this page is a small diff on it.</p>
+</section>
+
+<section id="steps" class="intro">
+  <div class="eyebrow">One app, five more steps</div>
+  <h2>Adding the things an app usually ends up needing.</h2>
+  <p class="lead">Everything below is the same greeting app. It picks up a plain POST fallback, then validation, then a pending state, then live updates over a WebSocket. It stays one Go codebase, and application logic never ends up in two places.</p>
+</section>
+
+<section id="step-2" class="step">
+  <div class="eyebrow">Step 2 · Works without JavaScript</div>
+  <h2>The same app works with JavaScript disabled.</h2>
+  <p class="lead">When the script loads, the client enhances the submit and patches the headline. When it doesn't, the same <code>&lt;form&gt;</code> does a native POST and the server renders the page. There's no <code>if jsEnabled</code> branch to write. Both cards below run the same app — the right one has scripting switched off.</p>
+
+  <div class="pair">
+    <div class="demo">
+      <div class="demo-bar"><span class="dot"></span> JavaScript on · fetch + patch</div>
+      <div class="demo-body">
         <iframe class="nojs-frame" src="/apps/greet-nojs/" sandbox="allow-forms allow-same-origin allow-scripts" title="The greeting app with JavaScript enabled"></iframe>
-</div>
       </div>
-      <div class="live-card">
-        <div class="live-bar"><span class="live-badge nojs">○ no JS</span><span class="live-meta">JavaScript off · form POST → full render</span></div>
-        <div class="live-body">
-          <iframe class="nojs-frame" src="/apps/greet-nojs/" sandbox="allow-forms allow-same-origin" title="The greeting app with JavaScript disabled"></iframe>
-        </div>
+    </div>
+    <div class="demo">
+      <div class="demo-bar"><span class="dot off"></span> JavaScript off · form POST → full render</div>
+      <div class="demo-body">
+        <iframe class="nojs-frame" src="/apps/greet-nojs/" sandbox="allow-forms allow-same-origin" title="The greeting app with JavaScript disabled"></iframe>
       </div>
     </div>
   </div>
-  <div>
-    <div class="code" style="max-width:680px;margin:0 auto"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.tmpl · one form, either transport</span></div>
-<pre><span class="com">&lt;!-- the only line that flips the transport: --&gt;</span>
-<span class="tag">&lt;script</span> <span class="attr">defer src</span>=<span class="str">"{{lvtClientScriptURL}}"</span><span class="tag">&gt;&lt;/script&gt;</span>
-
-<span class="tag">&lt;form</span> <span class="attr">method</span>=<span class="str">"POST"</span><span class="tag">&gt;</span>   <span class="com">&lt;!-- JS on → fetch + patch · JS off → native POST --&gt;</span>
-  <span class="tag">&lt;input</span> <span class="attr">name</span>=<span class="str">"name"</span><span class="tag">&gt;</span>
-  <span class="tag">&lt;button</span> <span class="attr">name</span>=<span class="str">"greet"</span><span class="tag">&gt;</span>Say hi<span class="tag">&lt;/button&gt;</span>
-<span class="tag">&lt;/form&gt;</span></pre></div>
-    <p class="demo-cap loading-cap" style="margin-top:14px">Same <code>&lt;form&gt;</code> and the same <code>Greet</code> handler as Step 1 — no <code>if jsEnabled</code> branch anywhere. When the <code>&lt;script&gt;</code> loads, the client enhances the submit; when it doesn't, the browser falls back to a native POST.</p>
+
+  <div class="snip">
+    <div class="snip-label">app.tmpl — one form, either transport</div>
+<pre class="language-html"><code class="language-html">&lt;!-- the only line that flips the transport --&gt;
+&lt;script defer src="{{lvtClientScriptURL}}"&gt;&lt;/script&gt;
+&lt;form method="POST"&gt;   &lt;!-- JS on → fetch + patch · JS off → native POST --&gt;
+  &lt;input name="name"&gt;
+  &lt;button name="greet"&gt;Say hi&lt;/button&gt;
+&lt;/form&gt;</code></pre>
   </div>
-</div></section>
+</section>
 
-<!-- STEP 3 · VALIDATE -->
-<section><div class="wrap two code-right">
-  <div>
-    <div class="sec-tag">Step 3 · Validation</div>
-    <h2>Write the rule in HTML. Enforce it again on the server.</h2>
-    <p class="lead">Use standard HTML attributes like <code>required</code> and <code>type="email"</code>. <code>ctx.ValidateForm()</code> re-runs the <b>same</b> rules server-side, then you can add Go-only checks for business rules. Submit empty, or type <b>admin</b>:</p>
-    <div class="live-card" style="margin-top:24px">
-      <div class="live-bar"><span class="live-badge"><span class="pulse"></span> live</span><span class="live-meta">greet-validate · server-checked</span></div>
-      <div class="live-body">
-
-```embed-lvt path="/apps/greet-validate/" upstream="http://localhost:9091" height="220px"
+<section id="step-3" class="step">
+  <div class="eyebrow">Step 3 · Validation</div>
+  <h2>Validation rules written in HTML, re-checked in Go.</h2>
+  <p class="lead">Standard attributes like <code>required</code> run again server-side via <code>ctx.ValidateForm()</code>, then you add the rules HTML cannot express. Try an empty submit, or type <em>admin</em>.</p>
+
+  <div class="demo">
+    <div class="demo-bar"><span class="dot"></span> greet-validate · server-checked</div>
+    <div class="demo-body">
+
+```embed-lvt path="/apps/greet-validate/" upstream="http://localhost:9091" height="160px"
 ```
 
 </div>
-    </div>
   </div>
-  <div>
-    <div class="code delta"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.tmpl · the rule, written once</span></div>
-<pre><span class="tag">&lt;input</span> <span class="attr">name</span>=<span class="str">"name"</span> <span class="attr">required</span> {{<span class="fn">.lvt.AriaInvalid</span> <span class="str">"name"</span>}}<span class="tag">&gt;</span>
-{{<span class="fn">.lvt.ErrorTag</span> <span class="str">"name"</span>}}</pre></div>
-    <div class="code delta"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.go · the server re-checks, then adds its own rule</span></div>
+
+  <div class="pair">
+    <div class="snip">
+      <div class="snip-label">app.tmpl · the rule, written once</div>
+<pre class="language-html"><code class="language-html">&lt;input name="name" required {{.lvt.AriaInvalid "name"}}&gt;
+{{.lvt.ErrorTag "name"}}</code></pre>
+    </div>
+    <div class="snip">
+      <div class="snip-label">app.go · re-check, then add your own rule</div>
 <pre class="language-go"><code class="language-go">func (a *App) Greet(s State, ctx *lvt.Context) (State, error) {
-    if err := ctx.ValidateForm(); err != nil {   // re-runs the HTML rules server-side
-        return s, err
+    if err := ctx.ValidateForm(); err != nil {
+        return s, err                 // re-runs the HTML rules
     }
     name := strings.TrimSpace(ctx.GetString("name"))
-    if strings.EqualFold(name, "admin") {         // a rule HTML can't express
-        return s, lvt.NewFieldError("name", errors.New(`"admin" is reserved`))
+    if strings.EqualFold(name, "admin") {
+        return s, lvt.NewFieldError("name",
+            errors.New(`"admin" is reserved`))
     }
     s.Name = name
     return s, nil
-}</code></pre></div>
-    <div class="wire"><span class="wlabel">on the wire · HTTP fetch</span>
-      <span class="wf up">▲ {"action":"greet","data":{"name":"admin"}}</span>
-      <span class="wf dn">▼ {"meta":{"errors":{"name":"\"admin\" is reserved"}}}</span>
+}</code></pre>
     </div>
   </div>
-</div></section>
-
-<!-- STEP 4 · LOADING -->
-<section class="alt"><div class="wrap">
-  <div class="sec-tag">Step 4 · Loading state</div>
-  <h2>Two ways to show pending state, in HTTP and WebSocket mode.</h2>
-  <p class="lead">LiveTemplate works in both <b>plain HTTP</b> and <b>live-session WebSocket</b> mode. You can run slow work on the server and render its pending state with <b>ordinary template conditionals</b>, or use a small <b>button-level escape hatch</b> when the server code should stay unchanged. The server-side version below needs a <b>live session connection</b> for its completion render; the attribute version works as a single request/response.</p>
-  <div class="two loading-cols" style="margin-top:28px">
-    <div class="loading-col">
-      <div class="live-card">
-        <div class="live-bar"><span class="live-badge"><span class="pulse"></span> live</span><span class="live-meta">greet loading server owned</span></div>
-        <div class="live-body">
-
-```embed-lvt path="/apps/greet-async/" upstream="http://localhost:9091" height="200px"
+
+  <div class="wire">
+    <div class="wire-label">on the wire · HTTP fetch</div>
+    <div>▲ <span class="payload">{"action":"greet","data":{"name":"admin"}}</span></div>
+    <div>▼ <span class="payload">{"meta":{"errors":{"name":"\"admin\" is reserved"}}}</span></div>
+  </div>
+</section>
+
+<section id="step-4" class="step">
+  <div class="eyebrow">Step 4 · Loading state</div>
+  <h2>Two ways to show a pending state.</h2>
+  <p class="lead">The slow work runs on the server, so you can render its pending state with ordinary template conditionals. If you'd rather not touch the Go code at all, there's a button-level attribute for that.</p>
+
+  <div class="pair">
+    <div>
+      <div class="snip-label">A · server-owned, template variables only</div>
+      <div class="demo">
+        <div class="demo-bar"><span class="dot"></span> greet-async · server-owned pending</div>
+        <div class="demo-body">
+
+```embed-lvt path="/apps/greet-async/" upstream="http://localhost:9091" height="130px"
 ```
 
 </div>
       </div>
-      <div class="code delta"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.tmpl · server-owned pending, only template variables</span></div>
-<pre><span class="tag">&lt;button</span> <span class="attr">class</span>=<span class="str">"greet-btn"</span> {{<span class="kw">if</span> <span class="fn">.lvt.Pending</span>}}<span class="attr">type</span>=<span class="str">"button"</span> <span class="attr">aria-busy</span>=<span class="str">"true"</span> <span class="attr">disabled</span>{{<span class="kw">else</span>}}<span class="attr">name</span>=<span class="str">"greet"</span>{{<span class="kw">end</span>}}<span class="tag">&gt;</span>Say hi<span class="tag">&lt;/button&gt;</span></pre></div>
-      <div class="code delta"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.go · one method, no Loading field</span></div>
-<pre class="language-go"><code class="language-go">func (a *App) Greet(s State, ctx *lvt.Context) (State, error) {
-    name := strings.TrimSpace(ctx.GetString("name"))
-    lvt.Async(ctx,
-        func(context.Context) (string, error) {
-            time.Sleep(700 * time.Millisecond)
-            return name, nil
-        },
-        func(s State, name string, _ error) (State, error) {
-            s.Name = name
-            return s, nil
-        },
-    )
-    return s, nil
-}</code></pre></div>
-      <p class="demo-cap loading-cap" style="margin-top:18px"><code>lvt.Async</code> runs the slow work off the event loop and re-enters the loop to apply the result, so there is <b>no second action to wire up</b> and <b>no <code>Loading</code> field</b> in state — <code>{{.lvt.Pending}}</code> is true only on the render that started the work. Reach for an explicit state field when the spinner has to survive a reconnect.</p>
-      <div class="wire"><span class="wlabel">on the wire · server-side version</span>
-        <span class="wf up">▲ {"action":"greet","data":{"name":"Ada"}}</span>
-        <span class="wf dn">▼ {"tree":{"1":{"aria-busy":"true","disabled":true,"type":"button"}}}</span>
-        <span class="wf dn">▼ {"tree":{"0":"Ada","1":{"name":"greet"}}}</span>
-      </div>
+<pre class="language-html"><code class="language-html">&lt;button {{if .lvt.Pending}}type="button" aria-busy="true"
+  disabled{{else}}name="greet"{{end}}&gt;Say hi&lt;/button&gt;</code></pre>
+<pre class="language-go"><code class="language-go">lvt.Async(ctx,
+    func(context.Context) (string, error) {
+        time.Sleep(700 * time.Millisecond)
+        return name, nil
+    },
+    func(s State, name string, _ error) (State, error) {
+        s.Name = name
+        return s, nil
+    },
+)</code></pre>
+      <p class="note">No second action to wire up and no <code>Loading</code> field in state, though it does need a live session for the completion render.</p>
     </div>
-    <div class="loading-col">
-      <div class="live-card">
-        <div class="live-bar"><span class="live-badge"><span class="pulse"></span> live</span><span class="live-meta">greet loading attribute</span></div>
-        <div class="live-body">
+    <div>
+      <div class="snip-label">B · button-level escape hatch</div>
+      <div class="demo">
+        <div class="demo-bar"><span class="dot"></span> greet-loading · attribute version</div>
+        <div class="demo-body">
 
-```embed-lvt path="/apps/greet-loading/" upstream="http://localhost:9091" height="200px"
+```embed-lvt path="/apps/greet-loading/" upstream="http://localhost:9091" height="130px"
 ```
 
 </div>
       </div>
-      <div class="code delta"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.tmpl · button-level pending with two <code>lvt-*</code> attributes</span></div>
-<pre><span class="tag">&lt;button</span> <span class="attr">name</span>=<span class="str">"greet"</span>
-  <span class="attr">lvt-el:addClass:on:pending</span>=<span class="str">"is-loading"</span>
-  <span class="attr">lvt-el:removeClass:on:done</span>=<span class="str">"is-loading"</span><span class="tag">&gt;</span>Say hi<span class="tag">&lt;/button&gt;</span></pre></div>
-      <div class="code delta"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.go · no loading state machine needed</span></div>
+<pre class="language-html"><code class="language-html">&lt;button name="greet"
+  lvt-el:addClass:on:pending="is-loading"
+  lvt-el:removeClass:on:done="is-loading"&gt;Say hi&lt;/button&gt;</code></pre>
 <pre class="language-go"><code class="language-go">func (a *App) Greet(s State, ctx *lvt.Context) (State, error) {
     time.Sleep(700 * time.Millisecond)
-    if name := strings.TrimSpace(ctx.GetString("name")); name != "" {
+    if name := strings.TrimSpace(
+        ctx.GetString("name")); name != "" {
         s.Name = name
     }
     return s, nil
-}</code></pre></div>
-      <p class="demo-cap loading-cap" style="margin-top:18px">This version keeps the <b>Go code simpler</b> by leaving pending UI out of server state. It works as a single request/response, so use it when the loading indicator is just button chrome rather than meaningful application state.</p>
-      <div class="wire"><span class="wlabel">on the wire · attribute version</span>
-        <span class="wf up">▲ {"action":"greet","data":{"name":"Ada"}}</span>
-        <span class="wf dn">▼ {"tree":{"0":"Ada"}}</span>
-      </div>
+}</code></pre>
+      <p class="note">This one keeps pending UI out of server state and works as a single request/response. It's the right one when the spinner is just button chrome rather than something the app cares about.</p>
     </div>
   </div>
-</div></section>
-
-<!-- STEP 5 · YOUR TABS -->
-<section class="alt"><div class="wrap">
-  <div class="sec-tag">Step 5 · Sync your own tabs</div>
-  <h2>Add WebSocket updates. Keep your tabs in sync.</h2>
-  <p class="lead">Subscribe this browser session to its own topic and publish after a handler runs — <b>two calls</b> — and your greeting syncs across every open tab. The same live session also lets the <b>server push first</b> when it has something new to say.</p>
-  <div class="pipe" style="margin-top:26px">
-    <div class="step"><div class="k">1 · state</div><div class="v">state changes</div></div><div class="arrow">→</div>
-    <div class="step"><div class="k">2 · render</div><div class="v">re-render template</div></div><div class="arrow">→</div>
-    <div class="step"><div class="k">3 · diff</div><div class="v">diff vs last render</div></div><div class="arrow">→</div>
-    <div class="step"><div class="k">4 · patch</div><div class="v">patch the browser</div></div>
+
+  <div class="wire">
+    <div class="wire-label">on the wire · A, server-side</div>
+    <div>▲ <span class="payload">{"action":"greet","data":{"name":"Ada"}}</span></div>
+    <div>▼ <span class="payload">{"tree":{"1":{"aria-busy":"true","disabled":true,"type":"button"}}}</span></div>
+    <div>▼ <span class="payload">{"tree":{"0":"Ada","1":{"name":"greet"}}}</span></div>
+    <div class="wire-label second">on the wire · B, attribute version</div>
+    <div>▲ <span class="payload">{"action":"greet","data":{"name":"Ada"}}</span> &nbsp; ▼ <span class="payload">{"tree":{"0":"Ada"}}</span></div>
   </div>
-  <div class="live-card" style="margin:32px auto 0;max-width:540px">
-    <div class="live-bar"><span class="live-badge"><span class="pulse"></span> live</span><span class="live-meta">greet wall · WebSocket on</span></div>
-    <div class="live-body">
+</section>
+
+<section id="step-5" class="step">
+  <div class="eyebrow">Step 5 · Sync your own tabs</div>
+  <h2>Keeping your own tabs in sync with two calls.</h2>
+  <p class="lead">Subscribe the session to its own topic and publish after the handler runs. The same live session also lets the server push first, without waiting for a click.</p>
 
-```embed-lvt path="/apps/greet-wall/" upstream="http://localhost:9091" height="260px"
+  <div class="pipe">
+    <span>1 state changes</span><span class="arrow">→</span>
+    <span>2 re-render</span><span class="arrow">→</span>
+    <span>3 diff vs last render</span><span class="arrow">→</span>
+    <span>4 patch the browser</span>
+  </div>
+
+  <div class="demo">
+    <div class="demo-bar"><span class="dot"></span> greet-wall · WebSocket on</div>
+    <div class="demo-body">
+
+```embed-lvt path="/apps/greet-wall/" upstream="http://localhost:9091" height="200px"
 ```
 
 </div>
   </div>
-  <p class="demo-cap"><b>Open this page in a second tab</b>, greet in either, and your headline updates in <b>both</b> — live, no reload. The same connection also allows <b>server-initiated refreshes</b> in this app, without waiting for a user click. This is the kind of step from "single-page form" to "real workflow" that usually pushes teams toward a separate frontend.</p>
-  <div class="code delta" style="max-width:820px;margin:26px auto 0"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.go · subscribe, publish on greet, and the Refresh it runs</span></div>
+  <p class="note">Open this page in a second tab, greet in either, and the headline updates in both.</p>
+
 <pre class="language-go"><code class="language-go">func (a *App) Mount(s State, ctx *lvt.Context) (State, error) {
     ctx.Subscribe(ctx.SelfTopic())                 // your tabs share a topic
-    s.Name = a.name(ctx.GroupID())                 // load your latest name
+    s.Name = a.name(ctx.GroupID())
     return s, nil
 }
 func (a *App) Greet(s State, ctx *lvt.Context) (State, error) {
@@ -286,155 +294,159 @@ func (a *App) Greet(s State, ctx *lvt.Context) (State, error) {
 }
 // Refresh is an ordinary action — the publish above runs it on each peer tab.
 func (a *App) Refresh(s State, ctx *lvt.Context) (State, error) {
-    s.Name = a.name(ctx.GroupID())                 // re-read state, then re-render
+    s.Name = a.name(ctx.GroupID())
     return s, nil
-}</code></pre></div>
-  <p class="demo-cap" style="margin-top:14px">No magic: <code>Publish(ctx.SelfTopic(), "Refresh", nil)</code> just <b>runs your <code>Refresh</code> method on your other tabs</b>. It re-reads shared data and returns new state; the framework diffs and patches.</p>
-  <div class="wire" style="max-width:820px;margin:14px auto 0"><span class="wlabel">on the wire · WebSocket</span>
-    <span class="wf up">▲ this tab · {"action":"greet","data":{"name":"Ada"}}</span>
-    <span class="wf dn">▼ your other tab · {"tree":{"0":"Ada"}}</span>
-  </div>
-  <div class="code delta" style="max-width:820px;margin:18px auto 0"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.go · the same session can be pushed by the server</span></div>
-<pre class="language-go"><code class="language-go">func (a *App) OnConnect(s State, ctx *lvt.Context) (State, error) {
-    a.keep(ctx.GroupID(), ctx.Session())   // remember who's connected
-    return s, nil
-}
-func (a *App) heartbeat() {
-    for range time.Tick(30 * time.Second) {
-        a.serverAt = now()                      // replace one slot in place
-        for _, sess := range a.sessions {
-            sess.TriggerAction("ServerRefresh", nil)
-        }
-    }
-}</code></pre></div>
-  <div class="wire" style="max-width:820px;margin:14px auto 0"><span class="wlabel">on the wire · server push</span>
-    <span class="wf dn">▼ {"tree":{"3":{"0":"15:04:08"}}}</span>
-    <span class="wf note">(no ▲ — the server started it; just the changed value goes down)</span>
+}</code></pre>
+
+  <p class="lead">There's no magic here. The publish just runs your <code>Refresh</code> method on your other tabs. It re-reads the shared data and returns new state, and the framework does the diffing and patching. The server can start the same cycle itself with <code>sess.TriggerAction("ServerRefresh", nil)</code>.</p>
+
+  <div class="wire">
+    <div class="wire-label">on the wire · WebSocket</div>
+    <div>▲ this tab &nbsp;&nbsp;<span class="payload">{"action":"greet","data":{"name":"Ada"}}</span></div>
+    <div>▼ other tab &nbsp;<span class="payload">{"tree":{"0":"Ada"}}</span></div>
+    <div>▼ server push <span class="payload">{"tree":{"3":{"0":"15:04:08"}}}</span> — no ▲; just the changed value goes down</div>
   </div>
-</div></section>
+</section>
 
-<!-- STEP 6 · EVERYONE -->
-<section><div class="wrap">
-  <div class="sec-tag">Step 6 · A wall everyone shares</div>
-  <h2>Change the topic, and it becomes cross-user.</h2>
-  <p class="lead">Swap the self-topic for a <b>shared</b> topic — admitted by a small ACL — and the same publish fans out to <b>every visitor</b>. The two cards below are <b>separate sessions, like two different people</b>. Greet in one and your line lands on the other's wall, live.</p>
-  <div class="two" style="margin-top:28px">
-    <div class="live-card"><div class="live-bar"><span class="live-badge"><span class="pulse"></span> live</span><span class="live-meta">visitor 1 · WebSocket on</span></div><div class="live-body">
+<section id="step-6" class="step">
+  <div class="eyebrow">Step 6 · A wall everyone shares</div>
+  <h2>Changing the topic makes it cross-user.</h2>
+  <p class="lead">Swap the self-topic for a shared one, admitted by a small ACL, and the same publish fans out to every visitor. The two cards below are separate sessions, like two different people. Greet in one and the line shows up on both walls.</p>
 
-```embed-lvt path="/apps/greet-wall/" upstream="http://localhost:9091" height="260px"
+  <div class="pair">
+    <div class="demo">
+      <div class="demo-bar"><span class="dot"></span> visitor 1 · WebSocket on</div>
+      <div class="demo-body">
+
+```embed-lvt path="/apps/greet-wall/" upstream="http://localhost:9091" height="200px"
 ```
 
-</div></div>
-    <div class="live-card"><div class="live-bar"><span class="live-badge"><span class="pulse"></span> live</span><span class="live-meta">visitor 2 · WebSocket on</span></div><div class="live-body">
+</div>
+    </div>
+    <div class="demo">
+      <div class="demo-bar"><span class="dot"></span> visitor 2 · WebSocket on</div>
+      <div class="demo-body">
 
-```embed-lvt path="/apps/greet-wall/" upstream="http://localhost:9091" height="260px"
+```embed-lvt path="/apps/greet-wall/" upstream="http://localhost:9091" height="200px"
 ```
 
-</div></div>
-  </div>
-  <p class="demo-cap">Two independent sessions, one shared wall — type in either card and watch the <b>list</b> appear in both. This is the same pattern you would use for shared dashboards, approval queues, team status boards, or lightweight collaboration.</p>
-  <div class="two code-right" style="margin-top:26px">
-    <div>
-      <p class="lead">Headlines stay independent (each card is its own session), but the wall is global — so a greeting crosses from one session to the other. That's the whole cross-user story: the same two pub/sub calls as step 5, with a different topic and an ACL around it.</p>
-      <div class="wire"><span class="wlabel">on the wire · WebSocket</span>
-        <span class="wf up">▲ visitor 1 · {"action":"greet","data":{"name":"Ada"}}</span>
-        <span class="wf dn">▼ visitor 2 · {"tree":{"3":[["a",[{"0":"Ada","1":"15:04"}]]]}}</span>
-      </div>
+</div>
     </div>
-    <div>
-      <div class="code delta"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.go · the topic is the only difference</span></div>
+  </div>
+
+  <div class="pair">
+    <div class="snip">
+      <div class="snip-label">app.go · the topic is the only difference</div>
 <pre class="language-go"><code class="language-go">func (a *App) Mount(s State, ctx *lvt.Context) (State, error) {
-    ctx.Subscribe("wall")                       // a shared, cross-user topic
+    ctx.Subscribe("wall")           // shared, cross-user topic
     return s, nil
 }
 func (a *App) Greet(s State, ctx *lvt.Context) (State, error) {
-    a.append(sanitize(ctx.GetString("name")))   // shared, capped, ephemeral
-    ctx.Publish("wall", "WallRefresh", nil)     // fan out to every visitor
+    a.append(sanitize(ctx.GetString("name")))
+    ctx.Publish("wall", "WallRefresh", nil)
     return s, nil
-}</code></pre></div>
-      <div class="code delta"><div class="code-bar"><span class="dots"><i></i><i></i><i></i></span><span class="file">app.go · admit the shared topic</span></div>
-<pre class="language-go"><code class="language-go">lvt.WithTopicACL(func(topic, _ string, _ *http.Request) (bool, error) {
-    return topic == "wall", nil   // deny-all by default; admit just this one
-})</code></pre></div>
+}</code></pre>
+    </div>
+    <div class="snip">
+      <div class="snip-label">app.go · admit the shared topic</div>
+<pre class="language-go"><code class="language-go">lvt.WithTopicACL(
+    func(topic, _ string, _ *http.Request) (bool, error) {
+        return topic == "wall", nil   // deny-all by default
+    })</code></pre>
+      <p class="note">Each card is its own session, so the headlines stay independent, but the wall is global. It's the same two pubsub calls as step 5, with a different topic.</p>
     </div>
   </div>
-</div></section>
 
-<!-- DIFF -->
-<section><div class="wrap two">
-  <div>
-    <div class="sec-tag">Only the diff goes over the wire</div>
-    <h2>Send what changed, not the whole page.</h2>
-    <p class="lead">Templates split into <b>static structure (cached)</b> and <b>dynamic values</b>. On change, LiveTemplate sends only the changed values — typically <b>85%+ less bandwidth</b> than re-sending full HTML. A greeting comes back as <code>{"tree":{"0":"Ada"}}</code>, not a page.</p>
+  <div class="wire">
+    <div class="wire-label">on the wire · WebSocket</div>
+    <div>▲ visitor 1 <span class="payload">{"action":"greet","data":{"name":"Ada"}}</span></div>
+    <div>▼ visitor 2 <span class="payload">{"tree":{"3":[["a",[{"0":"Ada","1":"15:04"}]]]}}</span></div>
   </div>
-  <div class="bars">
-    <div class="bar-row"><span class="lab">full HTML</span><span class="bar full"><span></span></span><span class="val" style="color:var(--slate-2)">2.4 KB</span></div>
-    <div class="bar-row"><span class="lab">lvt diff</span><span class="bar diff"><span></span></span><span class="val" style="color:var(--sig-d)">340 B</span></div>
-    <div style="font:500 13px 'JetBrains Mono';color:var(--slate);margin-top:8px">↓ 86% smaller per update</div>
+</section>
+
+<section class="step">
+  <div class="diff-split">
+    <div>
+      <div class="eyebrow">Only the diff goes over the wire</div>
+      <h2>Only the changed values go over the wire.</h2>
+      <p class="lead">Templates get split into static structure, which is cached, and dynamic values, so a greeting comes back as <code>{"tree":{"0":"Ada"}}</code> instead of a page.</p>
+    </div>
+    <div class="bars">
+      <div class="bar-row"><span>full HTML</span><span>2.4 KB</span></div>
+      <div class="bar full"><span></span></div>
+      <div class="bar-row"><span>lvt diff</span><span>340 B</span></div>
+      <div class="bar diff"><span></span></div>
+      <div class="bar-note">86% smaller per update</div>
+    </div>
   </div>
-</div></section>
-
-<section><div class="wrap">
-  <div class="sec-tag">UI Patterns</div>
-  <h2>Want deeper demos?</h2>
-  <p class="lead">The <a href="/recipes/ui-patterns/">UI patterns catalog</a> breaks these ideas out into focused examples: loading states, inline validation, SPA-style navigation, sortable tables, pubsub, presence, server push, and more.</p>
-</div></section>
-
-<!-- FEATURES -->
-<section class="alt"><div class="wrap">
-  <div class="sec-tag">And so much more</div>
-  <h2>The pieces real Go apps need.</h2>
-  <p class="lead">This is aimed at the kinds of apps Go teams actually ship: admin screens, internal tools, CRUD flows, dashboards, approval systems, uploads, auth, and lightweight collaborative views.</p>
-  <div class="grid">
-    <a class="feat" href="/reference/uploads"><div class="ico"><svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></div><h4>File uploads</h4><p>Handle uploads in the same app and show live progress, without bolting on a separate upload flow.</p></a>
-    <a class="feat" href="/reference/pubsub"><div class="ico"><svg viewBox="0 0 24 24"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></svg></div><h4>Shared views</h4><p>Keep tabs, dashboards, queues, and team screens in sync with <code>Subscribe</code> and <code>Publish</code>.</p></a>
-    <a class="feat" href="/reference/session"><div class="ico"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div><h4>Sessions &amp; state</h4><p>Keep UI state on the server, scoped per browser or per user, without leaking data across sessions.</p></a>
-    <a class="feat" href="/reference/error-handling"><div class="ico"><svg viewBox="0 0 24 24"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div><h4>Forms &amp; errors</h4><p>Return validation and business-rule errors from Go and render them back into the same template.</p></a>
-    <a class="feat" href="/cli/"><div class="ico"><svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg></div><h4>Scaffolding</h4><p>Generate a starting point for common app shapes so teams can get to real screens faster.</p></a>
-    <a class="feat" href="/client/"><div class="ico"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></div><h4>Browser client</h4><p>The browser layer handles DOM patching and transport so your application logic stays in Go.</p></a>
-    <a class="feat" href="/guides/observability"><div class="ico"><svg viewBox="0 0 24 24"><line x1="6" y1="20" x2="6" y2="14"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="18" y1="20" x2="18" y2="10"/></svg></div><h4>Observability</h4><p>Measure handler timings, update paths, and runtime behavior with hooks for metrics and tracing.</p></a>
-    <a class="feat" href="/guides/scaling"><div class="ico"><svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div><h4>Scaling</h4><p>Run the same model in production with guidance for session groups, fan-out, and deployment shape.</p></a>
+</section>
+
+<section id="compare" class="step">
+  <div class="eyebrow">How it compares</div>
+  <h2>How this sits next to htmx, templ and LiveView.</h2>
+  <p class="lead">Here a plain <code>&lt;button name="greet"&gt;</code> is already the action. <code>lvt-*</code> attributes are an escape hatch for what HTML cannot express, not the main interface.</p>
+  <div class="rows">
+    <div class="row-k">htmx</div>
+    <div class="row-v">A similar HTML-first feel, with server-owned state and diffing built in, so there is less request wiring in the markup.</div>
+    <div class="row-k">templ + htmx</div>
+    <div class="row-v">Use Go's built-in <code>html/template</code> and keep live behavior in one app model instead of stacking layers.</div>
+    <div class="row-k">Alpine.js</div>
+    <div class="row-v">Richer behavior without keeping a second copy of state in the browser.</div>
+    <div class="row-k">Phoenix LiveView</div>
+    <div class="row-v">The same server-driven idea, in Go, and it still falls back to plain HTTP forms.</div>
+    <div class="row-k">React SPA</div>
+    <div class="row-v">Forms, CRUD, dashboards and shared views without splitting the product into an API and a frontend.</div>
   </div>
-</div></section>
-
-<!-- COMPARE -->
-<section><div class="wrap">
-  <div class="sec-tag">How it compares</div>
-  <h2>Others add a frontend layer. LiveTemplate keeps the app in Go.</h2>
-  <p class="lead">Other tools carry more behavior in the markup — <code>hx-*</code>, <code>x-*</code>, <code>phx-*</code>, or a DSL. Here a plain <code>&lt;button name="greet"&gt;</code> is already the action, handlers stay in Go, and state lives on the server. <code>lvt-*</code> attributes exist only as an escape hatch for what HTML can't express.</p>
-  <table class="cmp">
-    <thead><tr><th>If you’re using…</th><th>LiveTemplate gives you…</th></tr></thead>
-    <tbody>
-      <tr><td>htmx</td><td class="give">A similar HTML-first feel, but with server-owned state and DOM diffing built in, so there is less request wiring in markup.</td></tr>
-      <tr><td>templ + htmx</td><td class="give">Use Go's built-in <code>html/template</code> and keep live behavior in one app model instead of composing multiple layers.</td></tr>
-      <tr><td>Alpine.js</td><td class="give">Handle richer app behavior without introducing a separate client-side state model for common server-rendered screens.</td></tr>
-      <tr><td>Phoenix LiveView</td><td class="give">A comparable server-driven model, but staying in Go and still falling back cleanly to plain HTTP forms.</td></tr>
-      <tr><td>React SPA</td><td class="give">Get modern app behavior for forms, CRUD, dashboards, and shared views without splitting the product into an API plus a frontend app.</td></tr>
-    </tbody>
-  </table>
-</div></section>
-
-<!-- DOGFOOD -->
-<section class="alt"><div class="wrap">
-  <div class="dogfood">
-    <div><svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#047857" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></div>
-    <p><b>Built in Go. This site proves the point.</b> Every step above is a real LiveTemplate app, embedded live through this docs site — which itself runs on LiveTemplate + tinkerdown. <a href="/recipes/how-this-site-works">See how this site works →</a></p>
+</section>
+
+<section id="more" class="step">
+  <div class="eyebrow">Everything else</div>
+  <h2>Other things in here.</h2>
+  <p class="lead">This is aimed at what Go teams actually ship: admin screens, internal tools, CRUD, dashboards, approvals, uploads, auth, and the occasional shared view.</p>
+  <div class="links">
+    <a href="/reference/uploads"><span class="link-t">File uploads</span><span class="link-g">live progress, same app</span></a>
+    <a href="/reference/pubsub"><span class="link-t">Shared views</span><span class="link-g">Subscribe &amp; Publish</span></a>
+    <a href="/reference/session"><span class="link-t">Sessions &amp; state</span><span class="link-g">scoped per browser or user</span></a>
+    <a href="/reference/error-handling"><span class="link-t">Forms &amp; errors</span><span class="link-g">Go errors, same template</span></a>
+    <a href="/cli/"><span class="link-t">Scaffolding</span><span class="link-g">generate common app shapes</span></a>
+    <a href="/client/"><span class="link-t">Browser client</span><span class="link-g">transport &amp; DOM patching</span></a>
+    <a href="/guides/observability"><span class="link-t">Observability</span><span class="link-g">metrics &amp; tracing hooks</span></a>
+    <a href="/guides/scaling"><span class="link-t">Scaling</span><span class="link-g">session groups &amp; fan-out</span></a>
   </div>
-</div></section>
+  <p class="lead">The <a href="/recipes/ui-patterns/">UI patterns catalog</a> has focused examples: loading states, inline validation, SPA-style navigation, sortable tables, pubsub, presence, server push. This site runs on LiveTemplate itself. <a href="/recipes/how-this-site-works">See how it works</a>.</p>
+</section>
 
-<!-- FINAL -->
-<section class="final"><div class="wrap">
-  <h2>Build a real Go web app. Start in 30 seconds.</h2>
-  <div class="install"><span class="p">$</span> go get github.com/livetemplate/livetemplate</div>
-  <div class="cta-row">
-    <a class="btn btn-primary btn-lg" href="/getting-started/install">Get started →</a>
-    <a class="btn btn-ghost btn-lg" href="/recipes/">Browse recipes</a>
+<section class="cta">
+  <div>
+    <h2>Getting started.</h2>
+<pre class="install">$ go get github.com/livetemplate/livetemplate</pre>
+    <div class="cta-row">
+      <a class="btn btn-primary" href="/getting-started/install">Get started →</a>
+      <a class="btn btn-ghost" href="/recipes/">Browse recipes</a>
+    </div>
+    <p class="note">This is alpha: the core works and is tested, but the API may still change before v1.0.</p>
   </div>
-  <div class="alpha">⚠ Alpha — core features work and are tested; the API may change before v1.0</div>
-</div></section>
+  <img class="gopher" src="/assets/gopher-front.svg" alt="The Go gopher" width="132">
+</section>
 
-<footer><div class="wrap foot-in">
-  <div class="brand" style="color:#fff"><span class="glyph">◇</span> LiveTemplate</div>
-  <div class="foot-links"><a href="/getting-started/introduction">Docs</a><a href="/recipes/">Recipes</a><a href="/reference/api">Reference</a><a href="https://github.com/livetemplate/livetemplate">GitHub</a><a href="/changelog">Changelog</a><a href="https://github.com/livetemplate/livetemplate/blob/main/LICENSE">License</a></div>
-  <div style="font-size:13px">© the LiveTemplate authors</div>
+</main>
+</div>
+
+<footer class="site"><div class="foot-in">
+  <div class="foot-brand">
+    <svg width="17" height="17" viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="1.5" y="1.5" width="17" height="17" rx="4" fill="none" stroke="#6B6862" stroke-width="1.6"/><path d="M11.2 4.2 L6.6 10.6 H9.6 L8.8 15.8 L13.4 9.4 H10.4 Z" fill="#6B6862"/></svg>
+    LiveTemplate
+  </div>
+  <div class="foot-links">
+    <a href="/getting-started/introduction">Docs</a>
+    <a href="/recipes/">Recipes</a>
+    <a href="/reference/api">Reference</a>
+    <a href="https://github.com/livetemplate/livetemplate">GitHub</a>
+    <a href="/changelog">Changelog</a>
+    <a href="https://github.com/livetemplate/livetemplate/blob/main/LICENSE">License</a>
+  </div>
+  <div class="attrib">
+    <span>© the LiveTemplate authors</span>
+    <span>Gopher by <a href="http://reneefrench.blogspot.com/">Renée French</a>, vector by <a href="https://github.com/golang-samples/gopher-vector">Takuya Ueda</a> · <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></span>
+  </div>
 </div></footer>
diff --git a/content/tinkerdown.yaml b/content/tinkerdown.yaml
index 148e447..5c5dc26 100644
--- a/content/tinkerdown.yaml
+++ b/content/tinkerdown.yaml
@@ -326,18 +326,22 @@ server:
 
 styling:
   theme: "clean"
-  # Emerald signature — matches the landing brand (gradient #047857 → #10b981).
-  # Docs stay calm: this single hue drives links + the active nav item; the
-  # vibrant gradients/dark code live only in landing.css (layout: landing).
-  primary_color: "#047857"
-  # Inter matches the landing's display font; @font-face ships in brand.css
-  # (site_css) so it loads in the docs shell too, not just on the landing.
-  # Requires tinkerdown >= v0.3.7 (styling.site_css); see Dockerfile.
-  font: "Inter"
-  # Shared brand primitives (self-hosted fonts) — injected on EVERY page.
-  site_css: "assets/brand.css?v=1"
-  # Bespoke emerald landing styling — injected only on layout: landing pages.
-  custom_css: "assets/landing.css?v=15"
+  # The calm theme's single accent. tinkerdown turns this into :root{--accent},
+  # which is the ONLY thing on the page it tints: links, the active nav item,
+  # and focus rings. Nothing else is coloured. (Replaced emerald #047857 when
+  # the landing and the docs shell converged on one visual system.)
+  primary_color: "#2F5D8A"
+  # @font-face ships in brand.css (site_css) so the family loads in the docs
+  # shell too, not just on the landing. Requires tinkerdown >= v0.3.7
+  # (styling.site_css); see Dockerfile.
+  font: "IBM Plex Sans"
+  # Design tokens, fonts and the neutralised prism palette — every page. Also
+  # @imports docs.css (the docs shell), which cannot get its own link: site_css
+  # takes a single path. Bump ?v= on every change; assets are served no-cache
+  # but proxies and phones still hold stale copies without it.
+  site_css: "assets/brand.css?v=2"
+  # Landing-only layout — injected on layout: landing pages, after site_css.
+  custom_css: "assets/landing.css?v=16"
 
 blocks:
   auto_id: true
diff --git a/e2e/calm_theme_test.go b/e2e/calm_theme_test.go
new file mode 100644
index 0000000..c692f9a
--- /dev/null
+++ b/e2e/calm_theme_test.go
@@ -0,0 +1,199 @@
+// The calm theme's acceptance criteria (issue #133), as assertions.
+//
+// These are deliberately separate from responsive_test.go. That file owns
+// 1280/768/393 and a different question — whether the page survives a phone.
+// This one owns the two widths the design was drawn against, 924px and 1440px,
+// and the three rules the design states as absolutes:
+//
+//   - the page never scrolls sideways; a wide code block scrolls inside itself
+//   - no text below 11.5px
+//   - no text at or below 13px lighter than #6B6862
+//
+// The last two are measured, not eyeballed, because the shipped theme sizes
+// most chrome in rem against a root that tinkerdown pins to 87.5% — three
+// elements were already under the floor before this theme landed, and nothing
+// but a computed-style read would have caught them.
+//
+// Run locally against a container or a tinkerdown serve of content/:
+//
+//	E2E_BASE_URL=http://127.0.0.1:8080 go test ./e2e -run TestCalmTheme
+package e2e
+
+import (
+	"encoding/json"
+	"fmt"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/chromedp/cdproto/emulation"
+	"github.com/chromedp/chromedp"
+)
+
+// calmPages covers the landing plus one page of each archetype: A (docs
+// article), B (section index) and C (reference entry).
+var calmPages = []string{
+	"/",
+	"/getting-started/introduction",
+	"/recipes/",
+	"/reference/api",
+}
+
+// calmWidths are the two the design specifies. 924 is the interesting one: it
+// is below the landing's 1100px rail breakpoint and narrow enough that a code
+// block sized for a wider measure pushes the document wide.
+var calmWidths = []int64{924, 1440}
+
+// calmScopes are the containers the design owns. Scoping matters: a
+// document-wide scan also picks up chrome this issue does not govern, and a
+// test that cannot be made to pass gets weakened rather than fixed.
+const calmScopes = `['.content-wrapper','nav.breadcrumbs','#tinkerdown-sidebar','.page-nav',
+                     '.page-edit-link','.page-source-meta','.doc','.rail','header.site','footer.site']`
+
+type calmOffender struct {
+	ID    string  `json:"id"`
+	Size  float64 `json:"size"`
+	Color string  `json:"color"`
+}
+
+type calmReport struct {
+	ScrollWidth float64        `json:"scrollWidth"`
+	ClientWidth float64        `json:"clientWidth"`
+	TooSmall    []calmOffender `json:"tooSmall"`
+	TooLight    []calmOffender `json:"tooLight"`
+	PreOverflow []string       `json:"preOverflow"`
+}
+
+// calmProbe walks every visible text-bearing element in the design-owned
+// chrome and reports the ones that break a rule, plus any <pre> wide enough to
+// overflow that is not set to scroll.
+const calmProbe = `(() => {
+  // WCAG relative luminance: "lighter" has to be measured, not compared as a
+  // hex string — #5C9169 looks darker than #6B6862 and is not.
+  const lum = c => {
+    const m = c.match(/\d+(\.\d+)?/g); if (!m) return 1;
+    const [r,g,b] = m.slice(0,3).map(v => { v = v/255; return v <= 0.03928 ? v/12.92 : Math.pow((v+0.055)/1.055, 2.4) });
+    return 0.2126*r + 0.7152*g + 0.0722*b;
+  };
+  const FLOOR = lum('rgb(107, 104, 98)');   // #6B6862
+  const tooSmall = [], tooLight = [];
+  for (const sel of ` + calmScopes + `) {
+    const root = document.querySelector(sel); if (!root) continue;
+    for (const e of [root, ...root.querySelectorAll('*')]) {
+      const cs = getComputedStyle(e);
+      if (cs.display === 'none' || cs.visibility === 'hidden') continue;
+      if (!e.getClientRects().length) continue;
+      // Only elements holding their own text: an element's font-size is
+      // irrelevant if every character in it belongs to a child.
+      if (![...e.childNodes].some(n => n.nodeType === 3 && n.textContent.trim())) continue;
+      const size = parseFloat(cs.fontSize);
+      const cls = (e.className && typeof e.className === 'string') ? '.' + e.className.trim().split(/\s+/).join('.') : '';
+      const id = e.tagName.toLowerCase() + cls;
+      if (size < 11.5) tooSmall.push({ id, size, color: cs.color });
+      if (size <= 13 && lum(cs.color) > FLOOR + 1e-9) tooLight.push({ id, size, color: cs.color });
+    }
+  }
+  const preOverflow = [...document.querySelectorAll('pre')].filter(p => {
+    const ox = getComputedStyle(p).overflowX;
+    return p.scrollWidth > p.clientWidth + 1 && ox !== 'auto' && ox !== 'scroll';
+  }).map(p => p.className || 'pre');
+  const uniq = a => [...new Map(a.map(x => [x.id + ':' + x.size, x])).values()];
+  return JSON.stringify({
+    scrollWidth: document.documentElement.scrollWidth,
+    clientWidth: document.documentElement.clientWidth,
+    tooSmall: uniq(tooSmall), tooLight: uniq(tooLight), preOverflow,
+  });
+})()`
+
+func TestCalmThemeAcceptance(t *testing.T) {
+	for _, width := range calmWidths {
+		for _, path := range calmPages {
+			width, path := width, path
+			t.Run(fmt.Sprintf("%d/%s", width, slug(path)), func(t *testing.T) {
+				ctx, cancel := newCtx(t)
+				defer cancel()
+
+				var raw string
+				if err := chromedp.Run(ctx,
+					emulation.SetDeviceMetricsOverride(width, 900, 1.0, false),
+					chromedp.Navigate(baseURL()+path),
+					chromedp.WaitReady("body", chromedp.ByQuery),
+					// The landing's live embeds mount and grow after load; measuring
+					// before they settle reads a page that never existed.
+					chromedp.Sleep(2500*time.Millisecond),
+					chromedp.Evaluate(calmProbe, &raw),
+				); err != nil {
+					t.Fatalf("probe %s @ %dpx: %v", path, width, err)
+				}
+
+				var r calmReport
+				if err := json.Unmarshal([]byte(raw), &r); err != nil {
+					t.Fatalf("decode probe result for %s @ %dpx: %v\n%s", path, width, err, raw)
+				}
+
+				if r.ClientWidth != float64(width) {
+					t.Fatalf("clientWidth = %.0f, want %d (viewport emulation drifted)", r.ClientWidth, width)
+				}
+				// The +1 absorbs sub-pixel rounding, matching responsive_test.go.
+				if r.ScrollWidth > r.ClientWidth+1 {
+					t.Errorf("documentElement.scrollWidth = %.0f > clientWidth %.0f — the page scrolls sideways. "+
+						"Usual cause: a grid track declared 1fr instead of minmax(0,1fr), so a long "+
+						"monospace line sets the track's min-content width.", r.ScrollWidth, r.ClientWidth)
+				}
+				for _, o := range r.TooSmall {
+					t.Errorf("%s is %.2fpx — below the 11.5px floor. Set it in px: the shipped theme "+
+						"sizes chrome in rem against a 14px root, so a rem value that looks fine is not.", o.ID, o.Size)
+				}
+				for _, o := range r.TooLight {
+					t.Errorf("%s is %.2fpx in %s — text at or below 13px must be #6B6862 or darker. "+
+						"Do not lighten it back; the muted greys failed contrast at 12px in the first pass.", o.ID, o.Size, o.Color)
+				}
+				for _, p := range r.PreOverflow {
+					t.Errorf("<pre class=%q> is wider than its box but does not scroll — "+
+						"a code block has to scroll inside itself, not widen the page.", p)
+				}
+			})
+		}
+	}
+}
+
+// TestCalmThemeGopherIsVendored guards the one asset rule in the issue: the
+// design prototype hotlinked the gopher from raw.githubusercontent.com, which
+// CSP img-src 'self' would block and which makes the page depend on GitHub.
+func TestCalmThemeGopherIsVendored(t *testing.T) {
+	ctx, cancel := newCtx(t)
+	defer cancel()
+
+	var srcs []string
+	var attribution string
+	if err := chromedp.Run(ctx,
+		chromedp.Navigate(baseURL()+"/"),
+		chromedp.WaitReady("body", chromedp.ByQuery),
+		chromedp.Evaluate(`[...document.images].map(i => i.getAttribute('src'))`, &srcs),
+		chromedp.Evaluate(`(document.querySelector('footer.site .attrib')||{}).innerText || ''`, &attribution),
+	); err != nil {
+		t.Fatalf("load landing: %v", err)
+	}
+
+	var gopher string
+	for _, s := range srcs {
+		if strings.HasSuffix(s, ".svg") {
+			gopher = s
+		}
+		if strings.Contains(s, "raw.githubusercontent.com") {
+			t.Errorf("image %q is hotlinked from GitHub — vendor it into content/assets/", s)
+		}
+	}
+	if gopher == "" {
+		t.Fatalf("no SVG image on the landing; images = %v", srcs)
+	}
+	if !strings.Contains(gopher, "/assets/") {
+		t.Errorf("gopher src = %q, want it served from /assets/", gopher)
+	}
+	// CC BY 3.0 requires attribution to travel with the artwork.
+	for _, want := range []string{"Renée French", "Takuya Ueda", "CC BY 3.0"} {
+		if !strings.Contains(attribution, want) {
+			t.Errorf("footer attribution is missing %q (got %q)", want, attribution)
+		}
+	}
+}
diff --git a/e2e/staging_test.go b/e2e/staging_test.go
index df2b0af..41dba33 100644
--- a/e2e/staging_test.go
+++ b/e2e/staging_test.go
@@ -159,9 +159,10 @@ func TestThemeTogglePersists(t *testing.T) {
 }
 
 // TestThemeAccentInjected verifies end-to-end that the user's primary_color
-// from tinkerdown.yaml (emerald "#047857") is injected into the --accent CSS
-// custom property the docs styling reads. Runs against a docs page — the
-// marketing landing ("/") uses its own --sig token, not --accent.
+// from tinkerdown.yaml (the calm theme's "#2F5D8A") is injected into the
+// --accent CSS custom property the docs styling reads. Runs against a docs
+// page: the landing restates its own tokens in landing.css so it stays light
+// regardless of the visitor's stored theme.
 func TestThemeAccentInjected(t *testing.T) {
 	ctx, cancel := newCtx(t)
 	defer cancel()
@@ -176,7 +177,7 @@ func TestThemeAccentInjected(t *testing.T) {
 	); err != nil {
 		t.Fatalf("read --accent: %v", err)
 	}
-	want := "#047857"
+	want := "#2F5D8A"
 	if !strings.EqualFold(accent, want) {
 		t.Errorf("--accent = %q, want %q (primary_color in tinkerdown.yaml)", accent, want)
 	}
diff --git a/examples/greet-async/greet.tmpl b/examples/greet-async/greet.tmpl
index 76328b2..e0f2713 100644
--- a/examples/greet-async/greet.tmpl
+++ b/examples/greet-async/greet.tmpl
@@ -8,15 +8,15 @@
     <script defer src="{{lvtClientScriptURL}}"></script>
     <style>
         main.container{max-width:none;margin:0;padding:.25rem 0;text-align:center}
-        h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
+        h1{font-size:26px;font-weight:600;letter-spacing:-.015em;margin:0 0 14px;color:#1B1A17}
         form{display:flex;flex-wrap:wrap;gap:8px;max-width:360px;margin:0 auto}
         input{margin:0;flex:1 1 60%;min-width:0;order:1}
         button.greet-btn{
-            --pico-background-color:#047857;
-            --pico-border-color:#047857;
-            background:#047857;
-            border-color:#047857;
-            color:#fff;
+            --pico-background-color:#1B1A17;
+            --pico-border-color:#1B1A17;
+            background:#1B1A17;
+            border-color:#1B1A17;
+            color:#FBFAF8;
             width:auto;
             white-space:nowrap;
             order:2;
diff --git a/examples/greet-loading-server/greet.tmpl b/examples/greet-loading-server/greet.tmpl
index c4c44fb..616fac4 100644
--- a/examples/greet-loading-server/greet.tmpl
+++ b/examples/greet-loading-server/greet.tmpl
@@ -8,15 +8,15 @@
     <script defer src="{{lvtClientScriptURL}}"></script>
     <style>
         main.container{max-width:none;margin:0;padding:.25rem 0;text-align:center}
-        h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
+        h1{font-size:26px;font-weight:600;letter-spacing:-.015em;margin:0 0 14px;color:#1B1A17}
         form{display:flex;flex-wrap:wrap;gap:8px;max-width:360px;margin:0 auto}
         input{margin:0;flex:1 1 60%;min-width:0;order:1}
         button.greet-btn{
-            --pico-background-color:#047857;
-            --pico-border-color:#047857;
-            background:#047857;
-            border-color:#047857;
-            color:#fff;
+            --pico-background-color:#1B1A17;
+            --pico-border-color:#1B1A17;
+            background:#1B1A17;
+            border-color:#1B1A17;
+            color:#FBFAF8;
             width:auto;
             white-space:nowrap;
             order:2;
diff --git a/examples/greet-nojs/nojs.tmpl b/examples/greet-nojs/nojs.tmpl
index 6724b13..1794301 100644
--- a/examples/greet-nojs/nojs.tmpl
+++ b/examples/greet-nojs/nojs.tmpl
@@ -6,39 +6,49 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
     <link rel="stylesheet" href="{{lvtClientStyleURL}}">
     <script defer src="{{lvtClientScriptURL}}"></script>
-    <!-- Emerald styling so the JS-off <iframe> on the landing matches the
-         JS-on embed beside it (the landing themes its embed via CSS it can't
-         reach across an iframe boundary, so the brand styling lives here). -->
+    <!-- The calm theme, restated here. This app is shown on the landing inside
+         an <iframe>, and CSS does not cross that boundary — so unlike the other
+         demos (which the landing styles directly) this one has to carry the
+         palette itself, or the JS-off card would not match the JS-on card
+         beside it. The font is self-hosted and same-origin, so the sandboxed
+         frame can load it under font-src 'self'. -->
     <style>
+        @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plexsans-400.woff2') format('woff2')}
+        @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plexsans-500.woff2') format('woff2')}
+        @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plexsans-600.woff2') format('woff2')}
         :root{
             color-scheme:light;
             --pico-background-color:#fff;
-            --pico-color:#0f172a;
-            --pico-muted-color:#475569;
-            --pico-form-element-background-color:#fff;
-            --pico-form-element-border-color:#cbd5e1;
-            --pico-form-element-color:#0f172a;
-            --pico-primary:#047857;
-            --pico-primary-background:#047857;
-            --pico-primary-border:#047857;
-            --pico-primary-hover:#065f46;
-            --pico-primary-hover-background:#065f46;
-            --pico-primary-hover-border:#065f46;
+            --pico-color:#1B1A17;
+            --pico-muted-color:#6B6862;
+            --pico-form-element-background-color:#FBFAF8;
+            --pico-form-element-border-color:#DCD8D0;
+            --pico-form-element-color:#1B1A17;
+            --pico-primary:#1B1A17;
+            --pico-primary-background:#1B1A17;
+            --pico-primary-border:#1B1A17;
+            --pico-primary-hover:#2F5D8A;
+            --pico-primary-hover-background:#2F5D8A;
+            --pico-primary-hover-border:#2F5D8A;
         }
         *,*::before,*::after{box-sizing:border-box}
-        html,body{margin:0;background:#fff !important;color:#0f172a !important}
-        body{font-family:system-ui,-apple-system,sans-serif;background:#fff !important;color:#0f172a !important}
-        main.container{max-width:none;margin:0;padding:.25rem 0;text-align:center;background:#fff}
-        h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px;color:#0f172a !important}
-        form{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;max-width:360px;margin:0 auto}
-        input,button[name="greet"]{font:600 16px/1.25 system-ui,-apple-system,sans-serif}
-        input{margin:0;flex:1 1 60%;min-width:0;height:44px;min-height:44px;padding:0 .875rem;line-height:42px;
-            background:#fff !important;color:#0f172a !important;border:1px solid #cbd5e1 !important;
-            border-radius:8px;box-shadow:none;appearance:none}
-        button[name="greet"]{--pico-background-color:#047857;--pico-border-color:#047857;
-            background:#047857 !important;border:1px solid #047857 !important;color:#fff !important;
-            width:auto;white-space:nowrap;height:46px;min-height:46px;padding:0 1rem;border-radius:8px;
-            display:inline-flex;align-items:center;justify-content:center;line-height:44px;appearance:none}
+        html,body{margin:0;background:#fff !important;color:#4A4842 !important}
+        body{font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;background:#fff !important}
+        main.container{max-width:none;margin:0;padding:24px;background:#fff}
+        h1{font-size:26px;font-weight:600;letter-spacing:-.015em;margin:0 0 18px;color:#1B1A17 !important}
+        form{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0}
+        input,button[name="greet"]{font:400 14px/1.25 'IBM Plex Sans',system-ui,sans-serif}
+        /* Pico sizes inputs with input:not([type=checkbox]){width:100%} — a
+           bare `input` selector ties on specificity and loses, so the width
+           has to be stated on a selector that outranks it. */
+        form input[name="name"]{margin:0;width:190px;flex:0 0 auto;min-width:0;padding:8px 12px;
+            background:#FBFAF8 !important;color:#1B1A17 !important;border:1px solid #DCD8D0 !important;
+            border-radius:5px;box-shadow:none;appearance:none}
+        button[name="greet"]{--pico-background-color:#1B1A17;--pico-border-color:#1B1A17;
+            background:#1B1A17 !important;border:1px solid #1B1A17 !important;color:#FBFAF8 !important;
+            width:auto;white-space:nowrap;padding:8px 16px;border-radius:5px;font-weight:500;
+            display:inline-flex;align-items:center;justify-content:center;appearance:none}
+        button[name="greet"]:hover{background:#2F5D8A !important;border-color:#2F5D8A !important}
     </style>
 </head>
 <body>
diff --git a/examples/greet-wall/wall.tmpl b/examples/greet-wall/wall.tmpl
index 7739b5a..210034f 100644
--- a/examples/greet-wall/wall.tmpl
+++ b/examples/greet-wall/wall.tmpl
@@ -11,14 +11,28 @@
     <!-- Styles live in <body>: embed-lvt drops the embedded app's <head>, so
          anything in <head> is lost once this app is mounted on the landing. -->
     <style>
-        .from-server{display:flex;align-items:center;justify-content:center;gap:.45rem;
-            font-size:.82rem;color:#475569;margin:.2rem 0 .9rem}
-        .from-server .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#10b981;
+        /* The server line and the greeting rows are one column: both start at
+           the container's left edge, so the heartbeat reads as the newest entry
+           above the wall rather than as a floating caption. Centring one and
+           left-aligning the other is what made them look unrelated. */
+        .from-server{display:flex;align-items:center;gap:.45rem;
+            font-size:.82rem;color:#6B6862;margin:.2rem 0 .9rem}
+        .wall{margin:0;padding:0}
+        /* Pico sets `ul li{list-style:square}` on the li itself, so a
+           list-style on the ul never wins — it has to be stated here. */
+        .wall li{list-style:none;padding:2px 0}
+        .wall b{font-weight:500;color:#1B1A17}
+        .wall small{color:#6B6862;font-size:.82rem}
+        /* The pulse stays. The design's rule is that nothing moves unless the
+           app is updating — and this dot marks a server-initiated push, which
+           is exactly the app updating. Only the hue changes, to the calm
+           live-status green. */
+        .from-server .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#5C9169;
             animation:fromServerPulse 2s ease-out infinite}
         @keyframes fromServerPulse{
-            0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
-            70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}
-            100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
+            0%{box-shadow:0 0 0 0 rgba(92,145,105,.5)}
+            70%{box-shadow:0 0 0 7px rgba(92,145,105,0)}
+            100%{box-shadow:0 0 0 0 rgba(92,145,105,0)}}
         @media(prefers-reduced-motion:reduce){.from-server .dot{animation:none}}
     </style>
     <main class="container">
