rapier-markdown-kit 1.1.64 → 1.1.73

package/dist/agent/will.mjs

@@ -48,7 +48,7 @@ function _rapierWillMarkerOf(content) {
 		if (!intent.length || intent.indexOf('--') >= 0) return near('malformed_marker');
 		if ([...intent].length > _RAPIER_WILL_INTENT_LIMIT) return near('intent_over_bound');
 	}
-	// The words after the colon are document data, never permission (R85b); willGovern alone decides.
+	// The words after the colon are document data, never permission; willGovern alone decides.
 	return { kind: 'open', law: word, intent, content: line };
 }
 

package/dist/kit/conformance/README.md

@@ -31,7 +31,7 @@ anchor; that historical measurement is not a normative neighbour-selection expec
   alpha shape of the fixture's own picture, computed independently in Node from how the picture was
   built (see the generation notes at the foot of this file) — not read back from Rapier — since these
   are plain rasters/foreign SVGs and Rapier's export only serializes `data-rapier-occupancy` for its
-  own drawing recipes (`docs/architecture.md`, "Layout and images").
+  own drawing recipes.
 - `lines` — the anchor's own line boxes (`left`/`top`/`right`/`bottom`), relative to its own content
   box, read from Rapier's styled export: from the reflow script's own `<span>` boxes when the
   paragraph is flowed (their `right` is the reserved *slot*'s edge, `x + width` — the script sizes
@@ -40,8 +40,8 @@ anchor; that historical measurement is not a normative neighbour-selection expec
   *is* the glyphs' own tight extent).
 - `glyphWidths` — every character the anchor's text uses, with its own measured width in that exact
   font, from this browser's `measureText`, called in isolation on one character at a time. Always
-  present; the fallback `measurer.mjs` (R77) reaches for when a query is not in `measurements` below.
-- `measurements` (R77) — every `(font, text)` pair Pretext's own `getMeasureContext()` was actually
+  present; the fallback `measurer.mjs` reaches for when a query is not in `measurements` below.
+- `measurements` — every `(font, text)` pair Pretext's own `getMeasureContext()` was actually
   asked to measure while *this fixture's own export* ran its real reflow script, each with the exact
   width the browser gave it — captured from the exported page's own reflow as it ran.
   This is Rapier's own measurement, not a stand-in: a caller replaying the same font and text later
@@ -64,7 +64,7 @@ anchor; that historical measurement is not a normative neighbour-selection expec
 ## Running the comparison
 
 ```sh
-node run.mjs                                   # the kit itself, driven by measurer.mjs (R77)
+node run.mjs                                   # the kit itself, driven by measurer.mjs
 node run.mjs --impl path/to/other-kit/index.mjs --tolerance 4
 ```
 
@@ -74,8 +74,8 @@ Prints two separate tables (preservation and presentation are different claims):
   `parseLayout`/`formatLayout`. No measurer, no font: either exactly right, or a real bug. 12/12.
 - **Presentation** — does the planned line count and each line's left/right agree with the recorded
   fact, within `--tolerance` pixels (default 2). This depends entirely on the measurer supplied;
-  `run.mjs`'s own default (`measurer.mjs`, R77) replays Rapier's real Pretext trace wherever one was
-  captured, falling back to the character-glyph sum only where none exists. Recorded R77 result (not a current-run receipt): **3/13
+  `run.mjs`'s own default (`measurer.mjs`) replays Rapier's real Pretext trace wherever one was
+  captured, falling back to the character-glyph sum only where none exists. Recorded result (not a current-run receipt): **3/13
   AGREE outright** (`04-wrap-box`, `10-both-sides`, `12-heading-barrier` — every
   one a case where the compared edge is pure obstacle-slot geometry, unaffected by text fidelity
   either way), **10 CLOSE, 0 DIFFERS**, each CLOSE row's cause named rather than left as "close

package/dist/kit/ledger/journal-records.mjs

@@ -45,12 +45,11 @@ function _rapierRecordSplices(entry, ledger) {
 }
 
 // A ledger record as the journal and the Notes return validate it below: plain data, nothing
-// undefined anywhere in it. A live record could carry a row whose type or order was not yet known
-// (a block just inserted, before its first render: `type: undefined`), and the validator refused
-// the whole ledger for that one field -- silently at boot, where a refused ledger is cleared, and on
-// the founder's phone as "Rapier could not be reopened: the document history could not be restored"
-// on every return from Notes (24 September). The copy is made once per record; records are frozen,
-// so it never goes stale.
+// undefined anywhere in it. A live record could carry a row whose type or order is not yet known (a
+// block just inserted, before its first render: `type: undefined`), and the validator would refuse
+// the whole ledger for that one field -- silently at boot, where a refused ledger is cleared, and
+// as "Rapier could not be reopened: the document history could not be restored" on a return from
+// Notes. The copy is made once per record; records are frozen, so it never goes stale.
 const _rapierJournalRecord = (() => {
 	const copies = new WeakMap();
 	return record => {

package/dist/kit/ledger/merge.mjs

@@ -16,6 +16,21 @@ export function transportInterval(start, end, splices) {
   }
   return {start: a, end: b};
 }
+// Follow the current extent of a touched range for disclosure or the person's focus.
+// Unlike transportInterval, this does not prove unchanged source and never grants edit authority.
+export function transportTouchedInterval(start, end, splices) {
+  const unchanged = transportInterval(start, end, splices);
+  if (unchanged) return unchanged;
+  let range = {start, end};
+  for (const row of splices) {
+    // A split replacement can insert at a boundary before another splice touches the range.
+    const boundaryInsertion = !row.removed.length && (row.pos === range.start || row.pos === range.end);
+    const exact = boundaryInsertion ? null : transportInterval(range.start, range.end, [row]);
+    range = exact || {start: Math.min(range.start, row.pos),
+      end: Math.max(row.pos + row.inserted.length, range.end + row.inserted.length - row.removed.length)};
+  }
+  return range;
+}
 function over(row, other) {
   // Equal-position insertions have no ordering evidence. Review, never a lexical winner.
   if (!row.removed.length && !other.removed.length && row.pos === other.pos) return null;

package/dist/kit/rapier-ledger.mjs

@@ -3,7 +3,7 @@ import {exportLedger, replaceLedgerText, readLedger, textRoot, rootAfter, histor
 export {exportLedger, replaceLedgerText, readLedger, textRoot, rootAfter, historyEnvelope, agentActorId};
 import {authorship, readAuthorship, ledgerFromAuthorship} from './ledger/authorship.mjs';
 export {authorship, readAuthorship, ledgerFromAuthorship};
-import {merge, transportInterval} from './ledger/merge.mjs';
-export {merge, transportInterval};
+import {merge, transportInterval, transportTouchedInterval} from './ledger/merge.mjs';
+export {merge, transportInterval, transportTouchedInterval};
 import {_rapierTransformSplices, _rapierRecordSplices, _rapierValidLedgerRecord} from './ledger/journal-records.mjs';
 export {_rapierTransformSplices, _rapierRecordSplices, _rapierValidLedgerRecord};

package/dist/kit/render-markdown.mjs

@@ -6,12 +6,12 @@ function createMarkdownRenderer(runtime) {
   let md = runtime.md;
 function initMarkdownIt() {
 	if (typeof window.markdownit !== 'function') throw new Error('markdownit');
-	if (typeof _rapierMarkdownPreview === 'function') globalThis.rapierRenderPreview = _rapierMarkdownPreview; // Notes' cards read through here (R86i law 3); the Node witnesses that run this function alone have no such neighbour
+	if (typeof _rapierMarkdownPreview === 'function') globalThis.rapierRenderPreview = _rapierMarkdownPreview; // Notes' cards read through here; the Node witnesses that run this function alone have no such neighbour
 
 	md = window.markdownit({
 		...RAPIER_MARKDOWN_SPEC.options,
 		// The first paint is coloured: the CPU reading, synchronously, for every admitted fence.
-		highlight: (code, lang) => _rapierHighlightAdmitted(code) ? _rapierCodeHtml(code, lang) : '',
+		highlight: (code, lang) => lang && _rapierHighlightAdmitted(code) ? _rapierCodeHtml(code, lang) : '',
 	});
 
 	_rapierApplyMarkdownSpec(md, window);
@@ -51,9 +51,9 @@ function initMarkdownIt() {
 		return '<span data-md-color="' + hex + '" style="--md-color:' + hex + ';--md-color-dark:' + dark + '">';
 	};
 	md.renderer.rules.rapier_color_close = () => '</span>';
-	// Ink: the span carries its opener's body (the grammar's inkOpenBody: a sanitizer drops an attribute holding the comment's
-	// close); the ink layer reads it back through the one grammar and draws the stroke over the words' own boxes
-	// (docs/briefs/ink.md §3). The span itself shows nothing.
+	// Ink: the span carries its opener's body (the grammar's inkOpenBody: a sanitizer drops an attribute holding the
+	// comment's close); the ink layer reads it back through the one grammar and draws the stroke over the words' own boxes.
+	// The span itself shows nothing.
 	md.renderer.rules.rapier_ink_open = (tokens, idx) => {
 		const body = String(tokens[idx].attrGet('data-rapier-ink') || '');
 		// The dark-page colour on the span, as the colour span's: an exported page draws its ink with no engine to ask (the
@@ -111,7 +111,7 @@ function initMarkdownIt() {
 		const alt = suffix && semanticAlt.endsWith(suffix) ? semanticAlt.slice(0, -suffix.length) : semanticAlt;
 		const layout = token.meta?.mdLayout?.imageOnly ? token.meta.mdLayout.marker : '';
 		const asset = globalThis.RapierImageAssets.dataImage(src), reference = token.meta?.mdImage?.reference;
-		// A connected host's own asset (W/6); a host without one (the server) supplies no port.
+		// A connected host's own asset; a host without one (the server) supplies no port.
 		if (_rapierEmbedAssetSource?.(src) || asset && (reference || asset.codec === 'image/jxl' || asset.codec === 'image/svg+xml')) return globalThis.RapierEmbeddedImages.imageHtml(
 			reference, alt, title, size, layout, rawAlt, token.meta?.mdImage?.source, src);
 		if (!_rapierRemoteContent.allowed && _rapierRemoteSubresourceOrigin(src)) {
@@ -301,21 +301,22 @@ function initMarkdownIt() {
 		let _mathPromptedOnce = false;
 		const _renderMath = (src, displayMode) => {
 			const marker = displayMode ? '$$' : '$';
+			const source = marker + src + marker, literal = md.utils.escapeHtml(source);
 			const mathProvider = _rapierProviders.math;
 			if (!mathProvider || mathProvider.status !== 'ready' || typeof mathProvider.renderToString !== 'function') {
 				if (!_mathPromptedOnce) {
 					_mathPromptedOnce = true;
 					try { _rapierUiMath.request(); } catch (_) {}
 				}
-				return '<span class="math-placeholder" title="Install the math plug-in in Settings to show this equation.">'
-						 + md.utils.escapeHtml(marker + src + marker) + '</span>';
+				return '<span class="math-placeholder" data-rapier-math-source="" title="Install the math plug-in in Settings to show this equation.">'
+						 + literal + '</span>';
 			}
 			try {
 				const rendered = mathProvider.renderToString(src, { displayMode });
 				return '<span class="math-rendered" data-math-src="'
-						 + encodeURIComponent(marker + src + marker) + '">' + rendered + '</span>';
+						 + encodeURIComponent(source) + '">' + rendered + '</span>';
 			}
-			catch (_) { return md.utils.escapeHtml(marker + src + marker); }
+			catch (_) { return '<span data-rapier-math-source="">' + literal + '</span>'; }
 		};
 		md.renderer.rules.math_inline = (tokens, idx) => _renderMath(tokens[idx].content, false);
 		md.renderer.rules.math_block  = (tokens, idx) => wrapDisplayMath(_renderMath(tokens[idx].content, true)) + '\n';
@@ -675,9 +676,9 @@ function _rapierDisambiguateRenderedAnchors(root) {
 }
 
 function _rapierDecodeHash(hash) {
-	// A document's own address may carry a heading after it (`#d/<id>/<heading>`, task #413): the
-	// heading is the anchor, and an address with no heading names nothing to jump to. A view's
-	// (`#v/draw`, `#v/notes`) names no heading either (docs/agents.md "The address of a document").
+	// A document's own address may carry a heading after it (`#d/<id>/<heading>`): the heading is the
+	// anchor, and an address with no heading names nothing to jump to. A view's (`#v/draw`,
+	// `#v/notes`) names no heading either (docs/agents.md "The address of a document").
 	let raw = String(hash || '').replace(/^#/, '');
 	const own = /^[dnv]\/[^/]*(?:\/(.*))?$/.exec(raw);
 	if (own) raw = own[1] || '';

package/dist/kit/render-sanitize.mjs

@@ -23,6 +23,26 @@ const RAPIER_SANITIZE_OPTIONS = Object.freeze({
 		FORBID_ATTR: RAPIER_SANITIZE_FORBID_ATTR,
 	}),
 });
+
+// Snapshot current math text before a Markdown writer collapses whitespace. The parsed copy
+// stays inert; the writer still admits raw source through its shared math grammar.
+function prepareMathSource(input, DOMParser) {
+	const html = typeof input === 'string';
+	const MARK = 'span[data-rapier-math-source]';
+	if (html ? !/data-rapier-math-source/i.test(input) : typeof input?.cloneNode !== 'function' ||
+		!(input.matches?.(MARK) || input.querySelector?.(MARK))) return input;
+	const root = html ? new DOMParser().parseFromString(
+		'<x-turndown id="turndown-root">' + input + '</x-turndown>', 'text/html').getElementById('turndown-root') : input.cloneNode(true);
+	const nodes = Array.from(root.querySelectorAll(MARK));
+	const sourceRoot = root.nodeName === 'SPAN' && root.hasAttribute('data-rapier-math-source');
+	if (sourceRoot) nodes.push(root);
+	for (const node of nodes) {
+		try { node.setAttribute('data-rapier-math-source', encodeURIComponent(node.textContent || '')); }
+		catch (_) { node.removeAttribute('data-rapier-math-source'); }
+	}
+	return sourceRoot ? root.outerHTML : root;
+}
+
 // The document's renderer. DOM, codecs and host state are explicit inputs.
 function createRenderSanitizer(runtime) {
   const {CSSStyleSheet, DOMPurify, RAPIER_RASTER_DATA_URL_RE, URL, _rapierCssDeclaration, _rapierDropRemoteDeclarations, _rapierRemoteContent, _rapierRuleDescriptorIsRemote, _rapierSanitizeRuntime, _rapierVerifyRasterBytes, document, globalThis, location} = runtime;
@@ -39,15 +59,14 @@ function _rapierInstallSanitizeHooks() {
 			&& _rapierSafeRasterDataUrl(compact);
 		if (!rasterAllowed) data.keepAttr = false;
 	});
-	// Paste and render sanitise: a remote <img src> would fetch the instant its markup lands in the
-	// page, so the src the hook below is about to strip never survives. Move it to a data-* attribute
-	// first (DOMPurify already leaves data-* alone, and the sanitizer's own inert document never
-	// fetches it either), so the picture and its alt text still reach Turndown's rapierImage rule
-	// as a live pasted-page picture and write out `![alt](url)` -- not vanish (task #336) -- and an
-	// <img> in a document's own HTML (a table kept as HTML) is written again with its URL: the raw
-	// profile admits no data-*, so only the three this hook sets on the node it holds back stay. A picture
-	// inside a link is the same node with the same fix: the outer <a> rule reads this img's own
-	// converted markdown as its content.
+	// Paste and render sanitise: a remote <img src> would fetch the instant its markup lands in the page,
+	// so the src the hook below is about to strip never survives. Move it to a data-* attribute first
+	// (DOMPurify already leaves data-* alone, and the sanitizer's own inert document never fetches it
+	// either), so the picture and its alt text still reach Turndown's rapierImage rule as a live
+	// pasted-page picture and write out `![alt](url)` -- not vanish -- and an <img> in a document's own
+	// HTML (a table kept as HTML) is written again with its URL: the raw profile admits no data-*, so
+	// only the three this hook sets on the node it holds back stay. A picture inside a link is the same
+	// node with the same fix: the outer <a> rule reads this img's own converted markdown as its content.
 	DOMPurify.addHook('uponSanitizeElement', node => {
 		if (_rapierRemoteContent.allowed || !/^(?:paste|render|raw)$/.test(_rapierSanitizeRuntime.context)) return;
 		if (!node || node.nodeName !== 'IMG' || node.hasAttribute('data-rapier-remote-src')) return;
@@ -105,9 +124,9 @@ function _rapierInstallSanitizeHooks() {
 			data.forceKeepAttr = true;
 		}
 	});
-	// A link that opens a new tab never hands that tab a window.opener or a Referer: the editor's
-	// own click router already opens with noopener,noreferrer; the sanitized markup that Share and
-	// the standalone export carry gets the same law in its bytes (red-team R65-24).
+	// A link that opens a new tab never hands that tab a window.opener or a Referer: the editor's own
+	// click router already opens with noopener,noreferrer; the sanitized markup that Share and the
+	// standalone export carry gets the same rule in its bytes.
 	DOMPurify.addHook('afterSanitizeAttributes', node => {
 		if (!node || !/^(?:A|AREA)$/i.test(node.nodeName) || !node.hasAttribute('target')) return;
 		if (String(node.getAttribute('target') || '').trim().toLowerCase() !== '_blank') return;
@@ -220,4 +239,4 @@ function _rapierDropRemoteRules(rules, owner) {
 
   return {_rapierInstallSanitizeHooks, sanitizeRapierHtml, escapeRapierHtmlText, _rapierChromeOwnsId, _rapierSafeRasterDataUrl, _rapierCssPresentationIsRemote, _rapierRemoteSubresourceOrigin, _rapierStyleWithoutRemoteUrls, _rapierStylesheetWithoutRemoteUrls, _rapierDropRemoteRules};
 }
-export {RAPIER_SANITIZE_FORBID_TAGS as forbidTags, RAPIER_SANITIZE_FORBID_ATTR as forbidAttributes, createRenderSanitizer, RAPIER_SANITIZE_OPTIONS as options};
+export {RAPIER_SANITIZE_FORBID_TAGS as forbidTags, RAPIER_SANITIZE_FORBID_ATTR as forbidAttributes, createRenderSanitizer, RAPIER_SANITIZE_OPTIONS as options, prepareMathSource};

package/dist/kit/render-styles.mjs

@@ -18,7 +18,7 @@ body{
 	--color-text-subtle:var(--md-color-text-subtle);--color-accent-text:var(--md-color-accent-text);
 	margin:0;background:var(--md-color-bg);color:var(--md-color-text);font-family:var(--md-font-sans);-webkit-font-smoothing:antialiased
 }
-.rapier-page{width:min(100%,768px);margin:0 auto;padding:48px 24px 72px}
+.rapier-page{width:min(100%,calc(var(--md-measure,39.6rem) + 48px));margin:0 auto;padding:48px 24px 72px}
 .rapier-page [id]{scroll-margin-top:var(--md-space-8)}
 .artifact-flat{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
 .artifact-flat--text{font:var(--md-fw-regular) 1rem/1.7 var(--md-font-sans)}

package/dist/kit/render.mjs

@@ -87,11 +87,9 @@ async function _rapierBuildArtifact(options, providedContext) {
 	// styles and other page resources get no network authority. Following an ordinary link
 	// is the reader's navigation, with no Referer, not a background resource request.
 	const nonce = _rapierArtifactNonce();
-	// The reflow script is written first, because whether it exists decides the policy. A page that
-	// carries no script says so: script-src 'none' refuses every script outright. Declaring a nonce a page has no use for is a widening, small but real -- anything
-	// that could inject markup into the file could read the nonce out of it and be admitted. G3's
-	// return caught this against the R86k fold, which always emitted the directive; the rule here
-	// is tighter than either that fold or G3's own writer, which could not carry a script at all.
+	// The reflow script is written first, because whether it exists decides the policy. A page that carries no script says so: script-src 'none' refuses every
+	// script outright. Declaring a nonce a page has no use for is a widening, small but real -- anything that could inject markup into the file could read the
+	// nonce out of it and be admitted.
 	const layoutScript = !opts.print ? _rapierArtifactLayoutScript(styledRoot, nonce) : '';
 	// The lexer for the page's code, under the same nonce, only when a block earned it: the CPU
 	// spans are the first paint, and where the reader's browser has WebGPU the lexer repaints them.
@@ -101,10 +99,10 @@ async function _rapierBuildArtifact(options, providedContext) {
 		+ '<html lang="en" data-rapier-theme="' + theme + '" data-highlights="' + highlights + '">\n'
 		+ '<head>\n<meta charset="UTF-8">\n' + (carrier ? RapierPageReturnAddress.PAGE_SEED + '\n' : '')
 		+ '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
-		// Chrome 154's responsively sized frames (the founder's link, 24 September 2026): a host frame styled
-		// `frame-sizing: content-height` sizes itself to a page that opts in with this meta, so a document
-		// exported from Rapier and carried in someone's page shows whole, with no inner scroll. Any origin may
-		// read the height: the page is the document, published by the person who exported it.
+		// Chrome 154's responsively sized frames: a host frame styled `frame-sizing: content-height` sizes
+		// itself to a page that opts in with this meta, so a document exported from Rapier and carried in
+		// someone's page shows whole, with no inner scroll. Any origin may read the height: the page is the
+		// document, published by the person who exported it.
 		+ '<meta name="responsive-embedded-sizing" content="allow-origins=*">\n'
 		+ '<meta http-equiv="Content-Security-Policy" content="' + _rapierExportedPageCsp(layoutScript || lexerScript || inkScript ? nonce : '', !!opts.print) + '">\n'
 		+ '<meta name="referrer" content="no-referrer">\n'
@@ -145,8 +143,9 @@ function _rapierProjectStyledRoot(semanticRoot, options) {
 		}
 	} else {
 		root.querySelectorAll('pre > code').forEach(code => {
-			_rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', _rapierLanguageClass(code)));
-			_rapierArtifactMarkLexed(code, _rapierLanguageClass(code));
+			const lang = _rapierLanguageClass(code) || 'text';
+			_rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', lang));
+			_rapierArtifactMarkLexed(code, lang);
 		});
 
 		root.querySelectorAll('table').forEach(table => {
@@ -204,9 +203,8 @@ function _rapierPrefixPortableAnchors(root, baseName) {
 	const scopeOf = element => {
 		// querySelectorAll('*') hands back whatever the host document holds, and not every host gives
 		// each node Element.closest -- the export writer runs against parsed and stubbed documents as
-		// well as a browser's. Without this guard the whole anchor pass threw TypeError and took 107
-		// export corpus cases with it. No scope simply means the pre-R87M behaviour for that node:
-		// its references resolve document-wide, exactly as they did before drawings were scoped.
+		// well as a browser's. Without this guard the whole anchor pass would throw TypeError. No scope
+		// simply means that node's references resolve document-wide, as an unscoped drawing's do.
 		if (typeof element?.closest !== 'function') return null;
 		let svg = element.closest('svg');
 		while (typeof svg?.parentElement?.closest === 'function' && svg.parentElement.closest('svg')) svg = svg.parentElement.closest('svg');
@@ -322,12 +320,12 @@ function _rapierAnnotateExportBoxPolygons(root) {
 		if (!recipe) continue;
 		const view = recipe.view && recipe.view.w > 0 && recipe.view.h > 0 ? recipe.view : { x: 0, y: 0, w: recipe.canvas.w, h: recipe.canvas.h };
 		if (layout.wrap === 'around') {
-			// One occupancy for live view and export (Astra R74 I02): the drawing's own profile --
-			// closed faces reserved, open strokes as ribbons, labels as boxes -- computed from the same
-			// recipe the live view reads, sampled into bands the exported page reads back
-			// (layout/model.mjs parseProfile). Text and paint shapes need rendered pixels for their
-			// glyph silhouettes, so the live editor's own <img> supplies those when it can be found; a
-			// raster or a foreign SVG writes nothing and the export measures alpha, as the live view does.
+			// One occupancy for live view and export: the drawing's own profile -- closed faces reserved,
+			// open strokes as ribbons, labels as boxes -- computed from the same recipe the live view
+			// reads, sampled into bands the exported page reads back (layout/model.mjs parseProfile). Text
+			// and paint shapes need rendered pixels for their glyph silhouettes, so the live editor's own
+			// <img> supplies those when it can be found; a raster or a foreign SVG writes nothing and the
+			// export measures alpha, as the live view does.
 			try {
 				let glyphs = null;
 				if (recipe.shapes.some(shape => shape.recognized === 'text' || shape.recognized === 'paint' || shape.label)) {
@@ -405,7 +403,7 @@ async function _rapierSharedSourceCarrier(context, root) {
 		'"' + (forms.ids.length ? ' data-images="' + forms.ids.join(' ') + '"' : '') +
 		(forms.definitions.length ? ' data-image-definitions="' + forms.definitions.map(encodeURIComponent).join(' ') + '"' : '') + '>\n' +
 		forms.carried + '\n</script>\n' +
-		// The optional edit ledger (W/4): carried only when the host binds its owner; a host without one writes none.
+		// The optional edit ledger: carried only when the host binds its owner; a host without one writes none.
 		(RapierLedgerCarried ? RapierLedgerCarried.writeParts(forms.resolved, _rapierLedgerParts(forms.resolved, context.ledger, context.carried)) +
 			RapierLedgerCarried.writeBase(forms.resolved, context.proposalBase) : '');
 }
@@ -481,7 +479,7 @@ function _rapierShareWrapKind(element) {
 	if (globalThis.RapierMarkdownLayout.wrapTextBlock(element)) return 'prose';
 	const image = element.tagName === 'P' ? element.querySelector('img') : null;
 	if (image && globalThis.RapierImageLayout.imageOnly(element, image)) return 'picture';
-	// An empty paragraph is transparent to the owner search (R75), as in the editor and the export.
+	// An empty paragraph is transparent to the owner search, as in the editor and the export.
 	if (element.tagName === 'P' && !element.textContent.trim() && !image) return 'metadata';
 	return null;
 }
@@ -530,22 +528,21 @@ function _rapierSharedPageLayout(root) {
 			paragraph.style.setProperty('shape-outside', 'inset(' + layout.y + 'em 0 0)');
 		}
 		image.style.margin = '0';
-		// Astra-R75 X03: the reserved box comes from the same rotated-bounds geometry every other
-		// consumer uses (layout/browser.js, layout/interchange.js's `geometry.rotatedBoundsRad`,
-		// layout/model.mjs's one owner), expressed as a percentage of the column the way the
-		// unrotated branch below already is -- never the picture's own pixel dimensions, which
-		// have no relation to a requested percentage width (a 4000px-wide source at width=40%
-		// used to float 1788px wide in a 600px column). Intrinsic width/height supply only the
-		// aspect ratio; a percentage padding-top/bottom resolves against the same containing-block
-		// width CSS already resolves the float's own percentage width against, so one basis serves
-		// both the box and its vertical reservation, and the box stays exactly as wide as the
-		// column at every viewport width. The turned box is centred, horizontally and vertically,
-		// in the reserved (wider, taller) box rather than left-flush inside it, so the space this
-		// paragraph clears for it (the float's own width) is evenly split around the picture on
-		// every side, not just above and below. A missing `width` falls back to the picture's own
-		// natural pixel size in pixels, the same fallback the unrotated branch below uses; without
-		// either width/height attribute the picture still turns, just without the extra
-		// reservation (the same graceful narrowing Share already accepts elsewhere).
+		// The reserved box comes from the same rotated-bounds geometry every other consumer uses
+		// (layout/browser.js, layout/interchange.js's `geometry.rotatedBoundsRad`, layout/model.mjs's
+		// one owner), expressed as a percentage of the column the way the unrotated branch below already
+		// is -- never the picture's own pixel dimensions, which have no relation to a requested
+		// percentage width (a 4000px-wide source at width=40% would float 1788px wide in a 600px
+		// column). Intrinsic width/height supply only the aspect ratio; a percentage padding-top/bottom
+		// resolves against the same containing-block width CSS already resolves the float's own
+		// percentage width against, so one basis serves both the box and its vertical reservation, and
+		// the box stays exactly as wide as the column at every viewport width. The turned box is
+		// centred, horizontally and vertically, in the reserved (wider, taller) box rather than
+		// left-flush inside it, so the space this paragraph clears for it (the float's own width) is
+		// evenly split around the picture on every side, not just above and below. A missing `width`
+		// falls back to the picture's own natural pixel size in pixels, the same fallback the unrotated
+		// branch below uses; without either width/height attribute the picture still turns, just without
+		// the extra reservation (the same graceful narrowing Share already accepts elsewhere).
 		const naturalWidth = Number(image.getAttribute('width')) || 0, naturalHeight = Number(image.getAttribute('height')) || 0;
 		if (layout.rotate && naturalWidth > 0 && naturalHeight > 0) {
 			const rad = layout.rotate * Math.PI / 180, aspect = naturalHeight / naturalWidth;
@@ -589,16 +586,15 @@ function _rapierSharedPageLayout(root) {
 			if (layout.width != null || image.getAttribute('width')) image.style.width = '100%';
 		}
 		if (layout.rotate) { image.style.transform = 'rotate(' + layout.rotate + 'deg)'; image.style.transformOrigin = '50% 50%'; }
-		// Astra-R75 X04: `wrap=around` wraps to the picture's own alpha silhouette the way
-		// standard-adoption.md's rung-2 paragraph already promises -- `shape-outside:url(<the same
-		// picture>)`, which every engine that reads shape-outside re-samples from the referenced
-		// image's own pixels, no script required. A CSS transform does not turn the shape a
-		// `shape-outside` url() samples (it stays the picture's unturned alpha), so a rotated
-		// `around` picture keeps the plain rectangular reservation above instead -- an honest
-		// conservative box rather than a silhouette shaped for the wrong angle. `layout.y` already
-		// owns `shape-outside` for its own inset reservation (below); the two are not combinable
-		// (a float has exactly one `shape-outside` value), so a `y`-offset `around` picture keeps
-		// that inset instead of silhouette wrapping -- a documented, narrow degradation.
+		// `wrap=around` wraps to the picture's own alpha silhouette the way standard-adoption.md's
+		// rung-2 paragraph promises -- `shape-outside:url(<the same picture>)`, which every engine that
+		// reads shape-outside re-samples from the referenced image's own pixels, no script required. A
+		// CSS transform does not turn the shape a `shape-outside` url() samples (it stays the picture's
+		// unturned alpha), so a rotated `around` picture keeps the plain rectangular reservation above
+		// instead -- an honest conservative box rather than a silhouette shaped for the wrong angle.
+		// `layout.y` already owns `shape-outside` for its own inset reservation (below); the two are not
+		// combinable (a float has exactly one `shape-outside` value), so a `y`-offset `around` picture
+		// keeps that inset instead of silhouette wrapping -- a documented, narrow degradation.
 		if (layout.wrap === 'around' && !layout.rotate && !layout.y) {
 			const src = image.getAttribute('src');
 			if (src) {
@@ -610,12 +606,12 @@ function _rapierSharedPageLayout(root) {
 		paragraph.classList.add('rapier-wrap-picture');
 		owner.before(paragraph);
 	}
-	// Astra-R75 X04: `behind`/`front` position the picture exactly where `x`/`y`/`width` say, out
-	// of the words' flow entirely (z-index below or above them) -- the absolutely positioned
-	// picture standard-adoption.md's rung-2 paragraph already promises for these two placements,
-	// no obstacle avoidance, no script. The picture's own paragraph collapses to zero height in
-	// place (the same collapse-in-place anchor layout/interchange.js's own reflow uses for every
-	// positioned kind) so removing the picture from flow costs the surrounding text nothing.
+	// `behind`/`front` position the picture exactly where `x`/`y`/`width` say, out of the words' flow
+	// entirely (z-index below or above them) -- the absolutely positioned picture
+	// standard-adoption.md's rung-2 paragraph promises for these two placements, no obstacle
+	// avoidance, no script. The picture's own paragraph collapses to zero height in place (the same
+	// collapse-in-place anchor layout/interchange.js's own reflow uses for every positioned kind) so
+	// removing the picture from flow costs the surrounding text nothing.
 	const positionedAssignments = [];
 	for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
 		const layout = globalThis.RapierMarkdownLayout.parseLayoutAttribute(image.getAttribute('data-rapier-image-layout'));
@@ -644,9 +640,9 @@ function _rapierSharedPageLayout(root) {
 		if (layout.wrap === 'behind') image.style.zIndex = '-1';
 		paragraph.classList.add('rapier-positioned-picture');
 	}
-	// F75-11: a turned picture Share does not otherwise position (inline, which this static page
-	// does not float at all) still turns -- the same picture, painted in place, never upright
-	// just because Share's own float model has nothing else to say about it.
+	// A turned picture Share does not otherwise position (inline, which this static page does not
+	// float at all) still turns -- the same picture, painted in place, never upright just because
+	// Share's own float model has nothing else to say about it.
 	const positioned = new Set([...assignments, ...positionedAssignments].map(row => row.image));
 	for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
 		if (positioned.has(image)) continue;
@@ -723,8 +719,8 @@ async function _rapierBuildSharedPage(captured) {
 			_rapierShareCapLongCodeBlocks(root);
 		},
 	}, context);
-	// No cap and no warning (docs/intent.md, picture format law): the page is as large as the
-	// document is. A page over the editor's own 25 MiB open limit still opens in any browser.
+	// No cap and no warning: the page is as large as the document is. A page over the editor's own 25
+	// MiB open limit still opens in any browser.
 	const blob = new Blob([artifact.html], {type: 'text/html;charset=utf-8'});
 	return {blob, filename: context.baseName + '.html'};
 }
@@ -1171,7 +1167,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
     return geometry.polygonProfile(corners);
   }
 
-  // F75-11: as the live editor (browser.js).
+  // As the live editor (browser.js).
   function syncInlineRotatedPictures(exclude) {
     for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
       if (exclude.has(image) || !image.complete || !image.naturalWidth || !image.naturalHeight) continue;
@@ -1208,7 +1204,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
     if (metadata.wrapTextBlock(element)) return 'prose';
     const image = element.tagName === 'P' ? element.querySelector('img') : null;
     if (image && imageOnly(element, image)) return 'picture';
-    // An empty paragraph is transparent to the owner search, as in the editor (R75).
+    // An empty paragraph is transparent to the owner search, as in the editor.
     if (element.tagName === 'P' && !element.textContent.trim() && !image) return 'metadata';
     return null;
   }
@@ -1326,13 +1322,15 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
           const topInset = (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.borderTopWidth) || 0);
           const height = Math.max(0, bounds.height - topInset - (parseFloat(computed.paddingBottom) || 0) - (parseFloat(computed.borderBottomWidth) || 0));
           let y = bounds.top - origin + topInset + geometry.linesTop(layout, lines) + Math.min(layout.y || 0, height / em) * em;
+          // The standoff and the room between pictures, in the reference scale's pixels, as the live editor.
+          const scale = geometry.frameScale(image), room = 10 * scale;
           if (!outOfFlow(layout)) {
             for (const obstacle of [...obstacles].sort((left, right) => left.y - right.y)) {
-              if (obstacle.x < left + rectangle.width + 10 && obstacle.x + obstacle.width > left - 10 &&
-                  obstacle.y + obstacle.height > y - 10 && obstacle.y < y + rectangle.height + 10)
-                y = obstacle.y + obstacle.height + 10;
+              if (obstacle.x < left + rectangle.width + room && obstacle.x + obstacle.width > left - room &&
+                  obstacle.y + obstacle.height > y - room && obstacle.y < y + rectangle.height + room)
+                y = obstacle.y + obstacle.height + room;
             }
-            // R87k: a picture pushed down by an earlier one takes its owner with it. A deliberate `y` stays; only the collision push moves the paragraph.
+            // A picture pushed down by an earlier one takes its owner with it. A deliberate `y` stays; only the collision push moves the paragraph.
             const ownerTop = bounds.top - origin + topInset + geometry.linesTop(layout, lines) + Math.min(layout.y || 0, height / em) * em;
             // Only the first picture of an owner takes it down.
             if (!ownerLed && y > ownerTop + 0.5) {
@@ -1340,7 +1338,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
               bounds = box(element);
             }
             ownerLed = true;
-            obstacles.push(...geometry.linesSlices(geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height), layout, lines, y, rectangle.height));
+            obstacles.push(...geometry.linesSlices(geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height, scale), layout, lines, y, rectangle.height));
           }
           placed.push({source, image, rectangle, left, y, wrap: layout.wrap,
             visualLeft: left + visualDeltaX, visualTop: y + visualDeltaY, visualWidth: fit.fit.width, visualHeight: fit.fit.height,

package/dist/layout/model.mjs

@@ -214,7 +214,7 @@ export function polygonProfile(corners) {
   }};
 }
 
-// F75-11: w'=w|cos|+h|sin|, h'=w|sin|+h|cos| (markdown-standard.md). Shared by browser.js, interchange.js and share.js.
+// w'=w|cos|+h|sin|, h'=w|sin|+h|cos| (markdown-standard.md). Shared by browser.js, interchange.js and share.js.
 export function rotatedBoundsRad(width, height, rad) {
   if (!rad) return {width, height};
   return {width: width * Math.abs(Math.cos(rad)) + height * Math.abs(Math.sin(rad)),
@@ -255,7 +255,7 @@ export function rotatedRasterAlpha(baseAlpha, width, height, rad) {
   return bandsProfile(bands);
 }
 
-// One occupancy descriptor (I02): the editor's profile sampled at 48 band centres, shipped as data-rapier-occupancy, read back here.
+// One occupancy descriptor: the editor's profile sampled at 48 band centres, shipped as data-rapier-occupancy, read back here.
 export function bandsProfile(bands) {
   if (!Array.isArray(bands) || !bands.length) return null;
   const at = t => bands[Math.max(0, Math.min(bands.length - 1, Math.floor(t * bands.length)))] || [];
@@ -294,10 +294,20 @@ export function parseProfile(text) {
 // stroke and 10 off a level one; this stands 10 off both, within a step.
 const shoulderSteps = 3, shoulders = Array.from({length: shoulderSteps}, (_, k) => ({from: k / shoulderSteps, to: (k + 1) / shoulderSteps, reach: Math.sqrt(1 - ((k + .5) / shoulderSteps) ** 2)}));
 
-export function pictureSlices(profile, x, y, width, height, gap = 10) {
+// The reference scale at an element (docs/markdown-standard.md, "The reference scale"): its unit, `--md-unit` (a registered
+// length, 16 px at M), over 16. Every length the planner adds of its own (the standoff, a band's height, the room between two
+// pictures) is that many reference pixels times it, so a zoom moves no word against a picture.
+export function frameScale(element) {
+  const view = element?.ownerDocument?.defaultView;
+  const unit = view ? parseFloat(view.getComputedStyle(element).getPropertyValue('--md-unit')) : NaN;
+  return unit > 0 ? unit / 16 : 1;
+}
+
+export function pictureSlices(profile, x, y, width, height, scale = 1) {
+  const gap = 10 * scale;
   if (!profile) return [{x: x - gap, y: y - gap, width: width + gap * 2, height: height + gap * 2}];
-  // A band is at most 6 px high at the shown size, never coarser than the descriptor's 48 nor finer than the profile's 192.
-  const count = Math.max(shapeGrid, Math.min(sliceGridMax, Math.ceil((finite(height) && height > 0 ? height : 0) / slicePixelsPerBand)));
+  // A band is at most 6 reference px high at the shown size, never coarser than the descriptor's 48 nor finer than the profile's 192.
+  const count = Math.max(shapeGrid, Math.min(sliceGridMax, Math.ceil((finite(height) && height > 0 ? height : 0) / (slicePixelsPerBand * scale))));
   let byCount = profileBands.get(profile);
   if (!byCount) profileBands.set(profile, byCount = new Map());
   let bands = byCount.get(count);
@@ -313,12 +323,9 @@ export function pictureSlices(profile, x, y, width, height, gap = 10) {
         return span ? [span] : [];
       }).filter(run => Number.isFinite(run[0]) && Number.isFinite(run[1]) && run[1] > run[0])
         .sort((a, b) => a[0] - b[0]);
-      const merged = [];
-      for (const run of runs) {
-        const last = merged.at(-1);
-        if (last && run[0] <= last[1]) last[1] = Math.max(last[1], run[1]);
-        else merged.push([...run]);
-      }
+      // Words wrap the outer contour: a band reserves from its leftmost ink to its rightmost, so no word lands
+      // inside a hollow outline or between two strokes of one picture.
+      const merged = runs.length ? [[runs[0][0], Math.max(...runs.map(run => run[1]))]] : [];
       const current = new Map();
       for (const [left, right] of merged) {
         const key = left + ':' + right;

package/dist/spec/md-assets.mjs

@@ -369,7 +369,7 @@ export function serializeAsset(asset) {
   const value = assetTitle(asset.title), title = value ? ' "' + value.replace(/&/g, '&').replace(/\\/g, '\\\\').replace(/"/g, '\\"') + '"' : '';
   return '[' + asset.label + ']: ' + asset.url + title;
 }
-// Pure: re-derived at commit against the moved document; appends only at the text's end (docs/kernel.md).
+// Pure: re-derived at commit against the moved document; appends only at the text's end.
 export function appendAssetText(source, asset) {
   if (typeof source !== 'string' || !asset || normalizeLabel(asset.label) !== asset.id) return fail('image_source_invalid');
   const parsed = documentAssets(source), title = assetTitle(asset.title);

package/dist/spec/md-layout.mjs

@@ -2,11 +2,11 @@
 
 // `rotate`: degrees in (-180, 180], one decimal, omitted when 0; never written for a Rapier drawing (its turn lives in its SVG).
 // `opacity`: a picture's fade, a whole percent from 5 to 100, omitted at 100; the picture's bytes never change.
-// `lines`: a picture's height in lines of the text beside it, set as a drop cap is (CSS `initial-letter`): its top on the first
-// line's cap height, its foot on the Nth line's baseline, its width from its own aspect. A whole number 1 to 12; never with `width`.
-// `first`/`indent`: a paragraph's first-line indent and its whole-block indent, in levels of one step (2em), a whole number from 1 to 4, omitted when 0; text only.
-// `lock=on`: a picture locked in place (the founder, 5 October): a tap goes to the words, never the picture; a hold takes it
-// to unlock it. Omitted when off.
+// `lines`: a picture's height in lines of the text beside it, set as a drop cap is (CSS `initial-letter`): its top on the first line's cap height, its foot on the
+// Nth line's baseline, its width from its own aspect. A whole number 1 to 12; never with `width`.
+// `first`/`indent`: a paragraph's first-line indent and its whole-block indent, in levels of one step (2em), a whole number from 1 to 4, omitted when 0; text
+// only.
+// `lock=on`: a picture locked in place: a tap goes to the words, never the picture; a hold takes it to unlock it. Omitted when off.
 export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent', 'lock']);
 export const alignments = new Set(['left', 'center', 'right', 'justify']);
 // `behind`/`front`: out of flow; the paragraph lays out as though the picture were absent.

package/dist/spec/md-marks.mjs

@@ -9,16 +9,16 @@ const inkReader = () => {
 	const COLOR_NAME_ALT = Object.keys(TEXT_COLOR_NAMES).join('|');
 	const COLOR_VALUE = '(?:#[0-9a-f]{6}|' + COLOR_NAME_ALT + ')';
 
-	// Ink (docs/markdown-standard.md, "Ink"; the design docs/briefs/ink.md): a pen stroke that stays with the words it
-	// marks, a paired comment with the colour span's shape. The opener holds the stroke:
+	// Ink (docs/markdown-standard.md, "Ink"): a pen stroke that stays with the words it marks, a paired comment with the colour span's shape. The
+	// opener holds the stroke:
 	//   <!--ink KIND [NUMBER] [COLOUR] [w=N] [box=W,H] [at=X,Y] [PATH]-->words<!--/ink-->
-	// KIND is the stroke's kind, decided once when it was lifted; COLOUR is exactly the colour span's value, red when
-	// absent; box is the frame's size when the stroke was drawn and at the frame's offset from the words' box, both in
-	// hundredths of an em; w is the pen's width as Draw counts a nib (2 to 24; 9 is the default and is never written): the stroke is drawn 0.11 em
-	// wide at 9 and in proportion to w otherwise; PATH is the stroke, its first point absolute in the frame and the rest as
-	// moves, hundredths of an em. One spelling: the fields in this order, one space between, integers only. A comment that does not read this way
-	// is ordinary comment text and marks nothing. Ink pairs do not nest in each other. Arrow/end alone take a pairing
-	// number, an end takes no other data; under, strike and arrow may omit a path for a line derived from their words.
+	// KIND is the stroke's kind, decided once when it was lifted; COLOUR is exactly the colour span's value, red when absent; box is the frame's
+	// size when the stroke was drawn and at the frame's offset from the words' box, both in hundredths of an em; w is the pen's width as Draw
+	// counts a nib (2 to 24; 9 is the default and is never written): the stroke is drawn 0.11 em wide at 9 and in proportion to w otherwise; PATH
+	// is the stroke, its first point absolute in the frame and the rest as moves, hundredths of an em. One spelling: the fields in this order,
+	// one space between, integers only. A comment that does not read this way is ordinary comment text and marks nothing. Ink pairs do not nest
+	// in each other. Arrow/end alone take a pairing number, an end takes no other data; under, strike and arrow may omit a path for a line
+	// derived from their words.
 	const INK_KINDS = Object.freeze(['under', 'strike', 'ring', 'bracket', 'free', 'arrow', 'end']);
 
 	const INK_PATH_MAX = 160;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.64",
+  "version": "1.1.73",
   "description": "Read, render, write and style Self-contained Markdown, and carry its optional edit ledger: the shared HTML writer, semantic renderer, stylesheet, layout, marks, pictures, Will/1, replay, authorship and offline merge. MIT, no npm dependencies.",
   "keywords": [
     "markdown",

package/style.css

@@ -3,28 +3,35 @@
  * Root defaults also expose the palette to an optional page frame and the shared task glyphs
  * to Notes. Visual rules stay inside .md-render; this sheet loads no fonts or network resources.
  */
+/* The reference scale's unit (docs/markdown-standard.md, "The reference scale"): 16 px at M, a length every reader can read
+   back as pixels (a planner scales its own lengths by it). */
+@property --md-unit{syntax:'<length>';inherits:true;initial-value:16px}
 :root,.md-render{
+	--md-unit:1rem;
+	--md-hair:calc(var(--md-unit) / 16);
+	/* The reading measure (docs/markdown-standard.md, "The reference scale"): 36 ems of the body at M; it does not follow the step. */
+	--md-measure:39.6rem;
 	--md-font-mono:'Geist Mono',monospace;
 	--md-font-sans:'Geist',system-ui,sans-serif;
-	--md-text-sm:0.875rem;
+	--md-text-sm:calc(0.875 * var(--md-unit));
 	--md-color-text:light-dark(#121212,#fafafa);
 	--md-fw-medium:500;
 	--md-color-bg:light-dark(#ffffff,#000000);
-	--md-text-xs:0.75rem;
+	--md-text-xs:calc(0.75 * var(--md-unit));
 	--md-color-inset:light-dark(#f2f1ef,#1d1d1d);
 	--md-color-surface:light-dark(#f7f6f3,#0d0d0d);
-	--md-text-base:1rem;
+	--md-text-base:calc(1 * var(--md-unit));
 	--md-fw-semibold:600;
 	--md-fw-regular:400;
-	--md-text-body:1.1rem;
-	--md-line:1.75rem;
-	--md-space-6:24px;
-	--md-space-4:16px;
-	--md-space-3:12px;
+	--md-text-body:calc(1.1 * var(--md-unit));
+	--md-line:calc(1.75 * var(--md-unit));
+	--md-space-6:calc(1.5 * var(--md-unit));
+	--md-space-4:calc(1 * var(--md-unit));
+	--md-space-3:calc(.75 * var(--md-unit));
 	--md-color-border:light-dark(#dbdad7,#1c1c1c);
-	--md-space-5:20px;
-	--md-space-2:8px;
-	--md-space-1:4px;
+	--md-space-5:calc(1.25 * var(--md-unit));
+	--md-space-2:calc(.5 * var(--md-unit));
+	--md-space-1:calc(.25 * var(--md-unit));
 	--md-color-line:light-dark(#000000,#ffffff);
 	--md-color-accent-text:light-dark(color-mix(in srgb,var(--md-color-accent) 50%,#000000),color-mix(in srgb,var(--md-color-accent) 80%,#ffffff));
 	--md-track-caps:.035em;
@@ -35,7 +42,7 @@
 	--md-color-success:light-dark(#188844,#45d483);
 	--md-color-warning:light-dark(#b26105,#f5a623);
 	--md-color-error:light-dark(#c00,#ec5156);
-	--md-space-8:32px;
+	--md-space-8:calc(2 * var(--md-unit));
 	--md-color-accent:#12A594;
 	--md-color-text-subtle:light-dark(#636363,#858585);
 	--md-heading-color:var(--md-color-text);
@@ -51,8 +58,8 @@
 	--md-image-width:100%;
 	--md-drawing-width:0px;
 	--md-task-box:clamp(14px,.92em,24px);
-	--md-jump-gap:.9rem;
-	--md-jump-marker-inline-start:-1.18rem;
+	--md-jump-gap:calc(.9 * var(--md-unit));
+	--md-jump-marker-inline-start:calc(-1.18 * var(--md-unit));
 	--md-jump-marker-center:1em;
 	--md-diagram-ink:light-dark(#121212,#fafafa);
 	--md-diagram-box:light-dark(#f0f0f0,#1d1d1d);
@@ -260,14 +267,13 @@
 :where(.md-render) svg.rapier-diagram circle.state-start,:where(.md-render) svg.rapier-diagram .node .fork-join,:where(.md-render) svg.rapier-diagram .end-state-inner{fill:var(--md-color-text)!important;stroke:var(--md-color-text)!important}
 :where(.md-render) svg.rapier-diagram circle.state-end{fill:var(--md-color-bg)!important;stroke:var(--md-color-text)!important}
 /* The kinds that are colour by nature -- a pie's slices, a mindmap's branches, a timeline's periods,
-   a git graph's branches, a gantt chart's bars -- are drawn in the nine colours of the document, the
-   founder's own pairs (rapier-notes.css, "The nine note colours"; docs/intent.md, "The nine colours"),
-   the mate the theme gives a note card: the pale under pure black ink on light paper, the deep under
-   pure white ink on dark. Mermaid's own greys were a light-paper drawing: on dark paper a mindmap and
-   a timeline became white cards under the page's white type, words nobody could read. The hex is
-   copied here because a written page carries this sheet and not the Notes sheet; mermaid-sanitised
-   holds the two copies equal, pair for pair. The order keeps neighbours apart: blue, orange, teal,
-   pink, yellow, red, green, purple, brown. */
+   a git graph's branches, a gantt chart's bars -- are drawn in the nine colours of the document
+   (rapier-notes.css, "The nine note colours"), the mate the theme gives a note card: the pale under
+   pure black ink on light paper, the deep under pure white ink on dark. Mermaid's own greys are a
+   light-paper drawing: on dark paper a mindmap and a timeline would become white cards under the
+   page's white type. The hex is copied here because a written page carries this sheet and not the
+   Notes sheet; mermaid-sanitised holds the two copies equal, pair for pair. The order keeps
+   neighbours apart: blue, orange, teal, pink, yellow, red, green, purple, brown. */
 :where(.md-render) svg.rapier-diagram{
 	font-variant-numeric:tabular-nums;
 }
@@ -353,12 +359,12 @@
 	opacity: .78;
 }
 
-/* The line model (item 2c, the founder's: the way a Word document reads). One line, --md-line, is the body's line
-   box: 1.75rem, 1.6 lines of the 1.1rem body, a whole 28 px at the browser's 16 px root so baselines land on pixels.
-   Every block ends one line below its last line; a heading ends half a line below. A heading's own box is the whole
-   or half lines its size fills: h1 at 2.4 x the body on two lines, h2 and h3 on one and a half, h4 to h6 on one.
-   Nothing sets a top margin, so a plain page (sibling margins collapsing) and the editor (a wrapper per block) space
-   alike, and the space before any block is the line its predecessor leaves. */
+/* The line model (the way a Word document reads). One line, --md-line, is the body's line box: 1.75rem, 1.6 lines
+   of the 1.1rem body, a whole 28 px at the browser's 16 px root so baselines land on pixels. Every block ends one
+   line below its last line; a heading ends half a line below. A heading's own box is the whole or half lines its
+   size fills: h1 at 2.4 x the body on two lines, h2 and h3 on one and a half, h4 to h6 on one. Nothing sets a top
+   margin, so a plain page (sibling margins collapsing) and the editor (a wrapper per block) space alike, and the
+   space before any block is the line its predecessor leaves. */
 .md-render{
 	font:var(--md-fw-regular) var(--md-text-body)/var(--md-line) var(--md-font-sans);color:var(--md-color-text);text-align:start}
 .md-render>:first-child,.md-render :is(blockquote,li,td,th,dd,.callout,details)>:first-child{margin-top:0}
@@ -423,15 +429,13 @@
 	vertical-align: -3px;
 	touch-action: manipulation;
 }
-/* The box and its tick are Feather's square and check-square (the founder, 24 September 2026:
-   "copy that style exactly except with squared corners"): drawn on Feather's 24-unit grid with its
-   2-unit stroke, the box's corners mitred square, and a ticked box opens at its top right where
-   the tick breaks out through it. The grid is a third wider than the box itself (the box is units
-   3 to 21), so the painted square keeps exactly the place and size --rapier-task-box gave it; the
-   ink is --color-line through a mask, so the theme recolours it and an export needs nothing more
-   than the data: images its policy already admits. The three glyphs are written here once, and a Notes
-   card's check rows read these same three (rapier-notes.css; docs/intent.md "The afternoon list", law 3:
-   one SVG per icon across Rapier). */
+/* The box and its tick are Feather's square and check-square, with squared corners: drawn on Feather's
+   24-unit grid with its 2-unit stroke, the box's corners mitred square, and a ticked box opens at its
+   top right where the tick breaks out through it. The grid is a third wider than the box itself (the
+   box is units 3 to 21), so the painted square keeps exactly the place and size --rapier-task-box gave
+   it; the ink is --color-line through a mask, so the theme recolours it and an export needs nothing
+   more than the data: images its policy already admits. The three glyphs are written here once, and a
+   Notes card's check rows read these same three (rapier-notes.css: one SVG per icon across Rapier). */
 :root,.md-render {
 	--md-glyph-task-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 3h18v18H3z'/%3E%3C/svg%3E");
 	--md-glyph-task-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12v9H3V3h13'/%3E%3C/svg%3E");
@@ -458,28 +462,28 @@
 
 .md-render ol{
 	list-style:none;
-	padding-inline-start:2.75rem;
+	padding-inline-start:calc(2.75 * var(--md-unit));
 	margin:0 0 var(--md-line);
 	counter-reset:rapier-ol;
 }
 .md-render ol>li{
 	position:relative;
 	counter-increment:rapier-ol;
-	min-height:2rem;
-	padding-top:0.15rem;
+	min-height:calc(2 * var(--md-unit));
+	padding-top:calc(0.15 * var(--md-unit));
 }
 .md-render ol>li::before{
 	content:counter(rapier-ol);
 	position:absolute;
 	/* The circle is centred on the item's first line: the li's own padding, plus half of what the 2rem circle is taller than one line. */
-	inset-inline-start:-2.75rem; top:calc(0.15rem + (var(--md-line) - 2rem) / 2);
-	width:2rem; height:2rem;
+	inset-inline-start:calc(-2.75 * var(--md-unit)); top:calc(calc(0.15 * var(--md-unit)) + (var(--md-line) - calc(2 * var(--md-unit))) / 2);
+	width:calc(2 * var(--md-unit)); height:calc(2 * var(--md-unit));
 	display:flex; align-items:center; justify-content:center;
 	border:2px solid var(--md-color-line);
 	border-radius:999px;
 	background:var(--md-color-bg);
 	color:var(--md-color-line);
-	font:var(--md-fw-medium) 0.95rem/1 var(--md-font-sans);
+	font:var(--md-fw-medium) calc(0.95 * var(--md-unit))/1 var(--md-font-sans);
 	font-variant-numeric:tabular-nums;
 	box-sizing:border-box;
 	z-index:1;
@@ -489,8 +493,8 @@
 	content:'';
 	position:absolute;
 
-	inset-inline-start:calc(-1.75rem - 1.5px);
-	top:2.2rem;
+	inset-inline-start:calc(calc(-1.75 * var(--md-unit)) - 1.5px);
+	top:calc(2.2 * var(--md-unit));
 	bottom:calc(var(--md-line) / -4);
 	border-inline-start:3px dotted var(--md-color-line);
 	z-index:0;
@@ -499,11 +503,11 @@
    _rapierMarkListContinuations marks them): the heading stands on the margin the item text stands on, and the dotted
    line runs on, out of the first part's last item, down the heading's own height, to the next circle. */
 .md-render ol[data-rapier-list-continues]>li:last-child::after{bottom:calc(-1 * var(--md-line))}
-.md-render :is(h1,h2,h3,h4,h5,h6)[data-rapier-list-through]{position:relative;padding-inline-start:2.75rem}
+.md-render :is(h1,h2,h3,h4,h5,h6)[data-rapier-list-through]{position:relative;padding-inline-start:calc(2.75 * var(--md-unit))}
 .md-render :is(h1,h2,h3,h4,h5,h6)[data-rapier-list-through]::before{
 	content:'';
 	position:absolute;
-	inset-inline-start:calc(1rem - 1.5px);
+	inset-inline-start:calc(calc(1 * var(--md-unit)) - 1.5px);
 	top:0;
 	bottom:calc(var(--md-line) / -2);
 	border-inline-start:3px dotted var(--md-color-line);
@@ -517,25 +521,25 @@
 .md-render a:focus-visible,.md-render ul.rapier-jump-list>li>a:focus-visible,.md-render .footnote-ref a:focus-visible,.md-render summary:focus-visible{outline:none;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
 
 .md-render .rapier-jump-label{
-	margin:0 0 .5rem;
-	font:var(--md-fw-semibold) .72rem/1.4 var(--md-font-mono);
+	margin:0 0 calc(.5 * var(--md-unit));
+	font:var(--md-fw-semibold) calc(.72 * var(--md-unit))/1.4 var(--md-font-mono);
 	letter-spacing:var(--md-track-caps);
 	text-transform:uppercase;
 	color:var(--md-color-text);
 }
 .md-render .rapier-jump-label strong{font:inherit}
 .md-render ul.rapier-jump-list{
-	--md-jump-gap:.9rem;
-	--md-jump-marker-inline-start:-1.18rem;
+	--md-jump-gap:calc(.9 * var(--md-unit));
+	--md-jump-marker-inline-start:calc(-1.18 * var(--md-unit));
 	--md-jump-marker-center:1em;
 	list-style:none;
-	padding-inline-start:1.85rem;
+	padding-inline-start:calc(1.85 * var(--md-unit));
 	margin:0 0 var(--md-line);
 }
 .md-render ul.rapier-jump-list>li{
 	position:relative;
 	margin:0 0 var(--md-jump-gap);
-	padding:.18rem 0 .18rem .15rem;
+	padding:calc(.18 * var(--md-unit)) 0 calc(.18 * var(--md-unit)) calc(.15 * var(--md-unit));
 }
 .md-render ul.rapier-jump-list>li:last-child{margin-bottom:0}
 .md-render ul.rapier-jump-list>li::before{
@@ -574,7 +578,7 @@
 .md-render em{font-style:italic}
 .md-render :not(pre)>code{line-height:1}
 .md-render code{font-family:var(--md-font-mono);font-size:0.85em;
-	background:var(--md-color-inset);border:1px solid var(--md-color-border);padding:1px 5px}
+	background:var(--md-color-inset);border:var(--md-hair) solid var(--md-color-border);padding:var(--md-hair) calc(5 * var(--md-hair))}
 .md-render pre{margin:0 0 var(--md-line);padding:var(--md-space-3) var(--md-space-4);
 	background:var(--md-color-surface-2);border:1px solid var(--md-color-border);overflow-x:auto}
 .md-render pre code{background:none;border:none;padding:0;font-size:calc(var(--md-text-body) * 0.7386);line-height:calc(var(--md-line) * .75)}
@@ -602,18 +606,18 @@
 .md-render math:not([display="block"]){font-size:1em}
 .md-render blockquote{margin:0 0 var(--md-line);
 	padding-block:var(--md-space-1);padding-inline-start:var(--md-space-4);padding-inline-end:0;
-	border-inline-start:2px solid var(--md-color-border-focus);color:var(--md-color-text-secondary)}
+	border-inline-start:calc(2 * var(--md-hair)) solid var(--md-color-border-focus);color:var(--md-color-text-secondary)}
 .md-render blockquote blockquote{
 	margin:calc(var(--md-line) / 2) 0 calc(var(--md-line) / 4);padding-inline-start:var(--md-space-3);
 	border-inline-start-color:color-mix(in srgb,var(--md-color-border-focus) 70%,var(--md-color-text-muted));
 	color:color-mix(in srgb,var(--md-color-text-secondary) 84%,var(--md-color-text-muted))
 }
 .md-render blockquote blockquote blockquote{
-	border-inline-start-width:1px;color:var(--md-color-text-muted)
+	border-inline-start-width:var(--md-hair);color:var(--md-color-text-muted)
 }
 .md-render blockquote.callout{
 	--md-callout-color:var(--md-callout-note);
-	padding:var(--md-space-2) var(--md-space-4);border:0;border-inline-start:4px solid var(--md-callout-color);
+	padding:var(--md-space-2) var(--md-space-4);border:0;border-inline-start:calc(4 * var(--md-hair)) solid var(--md-callout-color);
 	background:none;color:var(--md-color-text);border-radius:0
 }
 .md-render blockquote.callout-tip{--md-callout-color:var(--md-color-success)}
@@ -629,7 +633,7 @@
 .md-render blockquote.callout>:last-child{margin-bottom:0}
 @media print{.md-render{--md-callout-note:#0969da;--md-callout-important:#8250df}}
 
-.md-render details { border: 1px solid var(--md-color-border); border-radius: 0; padding: var(--md-space-2) var(--md-space-4); margin: 0 0 var(--md-line); }
+.md-render details { border: var(--md-hair) solid var(--md-color-border); border-radius: 0; padding: var(--md-space-2) var(--md-space-4); margin: 0 0 var(--md-line); }
 .md-render details[open] { padding-bottom: var(--md-space-3); }
 /* A section with nothing typed into it yet has no paragraph to tap: without this, the only body
    space below the summary is the plain padding-bottom above (12px), too thin a margin for a real
@@ -662,7 +666,7 @@
 	position:absolute;
 	left:50%;
 	top:50%;
-	width:7.5rem;
+	width:calc(7.5 * var(--md-unit));
 	height:2px;
 	transform:translate(-50%,-50%);
 	background:linear-gradient(to right,
@@ -705,10 +709,10 @@
 	border-collapse:collapse;
 	margin:0 0 var(--md-line);
 	font-size:var(--md-text-sm);
-	border:2px solid var(--md-color-line);
+	border:calc(2 * var(--md-hair)) solid var(--md-color-line);
 }
 .md-render th,.md-render td{
-	border:1px solid color-mix(in srgb, var(--md-color-line) 74%, transparent);
+	border:var(--md-hair) solid color-mix(in srgb, var(--md-color-line) 74%, transparent);
 	padding:var(--md-space-2) var(--md-space-3);
 	text-align:left;
 }
@@ -825,7 +829,7 @@
    this is the sheet every written page carries -- G3 reached the same conclusion independently, and
    the content sheet is where a look belongs. */
 .md-render pre[data-rapier-code-lines]{position:relative;max-height:33em;overflow:auto;padding-top:28px}
-.md-render .rapier-code-lines-note{position:absolute;top:6px;right:10px;font:.7rem/1 var(--md-font-sans);color:var(--md-color-text-muted);background:var(--md-color-inset);padding:.15em .5em;pointer-events:none}
+.md-render .rapier-code-lines-note{position:absolute;top:6px;right:10px;font:calc(.7 * var(--md-unit))/1 var(--md-font-sans);color:var(--md-color-text-muted);background:var(--md-color-inset);padding:.15em .5em;pointer-events:none}
 @media print{
 	.md-render pre[data-rapier-code-lines]{max-height:none!important;overflow:visible!important;padding-top:12px!important}
 	.md-render .rapier-code-lines-note{display:none!important}