/* saagarpatel.dev - shared stylesheet.
   Design language: The Forge (2026-07-18). A banked forge in a black room:
   void ground, a white-hot furnace seam held tight, deep oxblood-to-ember
   fire reserved for italic emphasis and telemetry. Depth is legal now
   (shadows, gradients, backdrop blur); color is not - only the token set.
   Supersedes "the Bench" two-material system and its flatness gate.
   docs/plans/2026-07-18-visual-teardown-design.md; reference specimen:
   docs/plans/assets/2026-07-18-forge/specimen.html.
   Self-hosted fonts (Playfair Display, Literata, JetBrains Mono; OFL, no
   third-party calls). Served from '/', CSP style-src 'self'. */

:root {
	/* Ground + surfaces. */
	--void: #020202; /* page ground, the dominant material */
	--ink: #0a0a0c; /* raised dark surfaces: bars, chrome */

	/* Text registers, darkest to lightest. */
	--white: #f5f2ec; /* ivory: headlines, values, primary text */
	--silver: #b9b6af; /* secondary prose */
	--gray: #7c7974; /* labels, tertiary; AA floor for meaningful text on void AND ink (4.56:1) */
	--shadow: #403e3b; /* whisper register - decorative only, sub-AA */
	--buried: #232221; /* decorative-only fine print, never meaningful content */

	/* Fire, deepest to brightest. */
	--oxblood: #6e1119; /* deepest fire: gradient root, hover washes */
	--crimson: #9e1b22; /* deep fire */
	--verm: #c93a24; /* mid fire: hairlines, active underlines */
	--ember: #e4572e; /* bright fire: pulse dots, eyebrow text, seam lip */

	--edge: rgba(245, 242, 236, 0.08); /* hairline borders on glass */

	/* Three registers: display serif, prose serif, machine mono. */
	--font-display: "Playfair Display", serif;
	--font-prose: "Literata", serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	/* Type scale (minor third, rem; root stays user-controllable). */
	--fs-display: 2.25rem;
	--fs-title: 1.75rem;
	--fs-section: 1.375rem;
	--fs-subsection: 1.125rem;
	--fs-body: 1.125rem;
	--fs-small: 0.9375rem;
	--fs-label: 0.8125rem;
	--fs-mono: 0.875rem;
	--fs-chip: 0.75rem;

	/* Spacing scale (rem). */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 5rem;

	/* Measures. */
	--measure-prose: 70ch;
	--measure-instrument: 96ch;
	--measure-band: 1180px; /* telemetry dossier row: 3 cells with room to breathe */
}

/* The Forge is a single dark identity, not an OS-driven light/dark toggle.
   The former prefers-color-scheme inversion stays retired: every visitor
   sees the same room. */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	/* Column layout pins the footer to the viewport bottom on short pages
	   (404, ai, ask) instead of letting it float mid-screen over dead void. */
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	background: var(--void);
	color: var(--white);
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.65;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body > main {
	flex: 1 0 auto;
	/* Two flex-item traps, both hit by main.wrap's own styles: auto cross-axis
	   margins (.wrap centers with margin auto) DISABLE stretch, dropping main
	   to fit-content width, and min-width defaults to min-content - either one
	   lets unwrappable content (the homepage ticker track, long code strings)
	   prop the page open sideways at mobile widths. Explicit width + zero
	   min-width restore block-era behavior; max-width still bounds it. */
	width: 100%;
	min-width: 0;
}

/* === Forge scene: banked coals, three ember depths ==========================
   docs/plans/2026-07-18-visual-teardown-design.md, "Depth and texture."
   Ported from the reference specimen (docs/plans/assets/2026-07-18-forge/
   specimen.html), Zodiak/Erode translated to Playfair Display/Literata.
   Layered strictly back-to-front: wall, smoke, mouth (the seam), coals,
   haze, embers, pillars - then content, then the fixed vignette + grain. */
.scene {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
/* Deep wall glow - tight, oxblood, not a wash. */
.scene .wall {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 34% 15% at 50% 99%,
		rgba(110, 17, 25, 0.5),
		rgba(110, 17, 25, 0.12) 52%,
		transparent 72%
	);
}
/* The seam: white-hot slit, bright but its light held tight. Bottom-anchored
   (not top-percentage) so it stays pinned at the hero/dossier boundary
   regardless of hero's own height (which varies with copy length/viewport
   wrap) - dossier's height is the more stable reference point here. */
.scene .mouth {
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: 34%;
	height: 90px;
}
.scene .mouth .aura {
	position: absolute;
	inset: -64px -24px;
	background: radial-gradient(
		ellipse 100% 100% at 50% 58%,
		rgba(158, 27, 34, 0.55),
		rgba(110, 17, 25, 0.22) 48%,
		transparent 64%
	);
	filter: blur(32px);
	animation: flicker 8s ease-in-out infinite alternate;
}
.scene .mouth .core {
	position: absolute;
	left: 5%;
	right: 5%;
	top: 50%;
	height: 18px;
	border-radius: 99px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 227, 184, 0.9) 20%,
		#fff4e0 50%,
		rgba(255, 227, 184, 0.9) 80%,
		transparent
	);
	filter: blur(5px);
	animation: coreflick 6s ease-in-out infinite alternate;
}
.scene .mouth .lip {
	position: absolute;
	left: 0;
	right: 0;
	top: 58%;
	height: 2.5px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(228, 87, 46, 0.85) 28%,
		rgba(255, 240, 214, 0.95) 50%,
		rgba(228, 87, 46, 0.85) 72%,
		transparent
	);
	filter: blur(1px);
}
@keyframes flicker {
	0% {
		opacity: 0.82;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.88;
		transform: scale(1.02);
	}
}
@keyframes coreflick {
	0% {
		opacity: 0.85;
	}
	55% {
		opacity: 1;
	}
	100% {
		opacity: 0.75;
	}
}
/* Coal bed: deep glowing cracks, dark mass. Bottom-anchored for the same
   reason .mouth is above; overlaps the seam's lower ~44px, same
   relationship as the original top-anchored dial. */
.scene .coals {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: calc(34% + 46px);
	height: 80px;
	background:
		radial-gradient(
			circle 26px at 12% 42%,
			rgba(158, 27, 34, 0.8),
			transparent 70%
		),
		radial-gradient(
			circle 18px at 23% 66%,
			rgba(201, 58, 36, 0.65),
			transparent 70%
		),
		radial-gradient(
			circle 30px at 34% 38%,
			rgba(110, 17, 25, 0.9),
			transparent 72%
		),
		radial-gradient(
			circle 14px at 44% 60%,
			rgba(228, 87, 46, 0.6),
			transparent 70%
		),
		radial-gradient(
			circle 26px at 55% 40%,
			rgba(158, 27, 34, 0.8),
			transparent 70%
		),
		radial-gradient(
			circle 16px at 65% 64%,
			rgba(201, 58, 36, 0.6),
			transparent 70%
		),
		radial-gradient(
			circle 28px at 76% 42%,
			rgba(110, 17, 25, 0.9),
			transparent 72%
		),
		radial-gradient(
			circle 15px at 87% 62%,
			rgba(228, 87, 46, 0.55),
			transparent 70%
		);
	filter: blur(9px);
	animation: coalbreathe 9s ease-in-out infinite alternate;
}
@keyframes coalbreathe {
	to {
		opacity: 0.75;
	}
}
/* Air haze in front of the fire - pushes it back a plane. Top nudged down
   to lead into the bottom-anchored coals/mouth above, instead of the old
   top-percentage tuned for a viewport-height scene. */
.scene .haze {
	position: absolute;
	left: 0;
	right: 0;
	top: 64%;
	bottom: 0;
	background: linear-gradient(
		180deg,
		transparent,
		rgba(2, 2, 2, 0.42) 55%,
		rgba(2, 2, 2, 0.7) 100%
	);
}
/* Foreground pillars: occlusion at the frame edges. */
.scene .pillar {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16%;
	z-index: 1;
}
.scene .pillar.pl {
	left: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.85), transparent);
}
.scene .pillar.pr {
	right: 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.85), transparent);
}
/* Embers at three depths. */
.scene .embers i {
	position: absolute;
	bottom: 8%;
	border-radius: 50%;
	opacity: 0;
	animation: rise linear infinite;
}
.scene .embers i.far {
	width: 2px;
	height: 2px;
	background: var(--crimson);
	box-shadow: 0 0 4px rgba(158, 27, 34, 0.8);
}
.scene .embers i.mid {
	width: 4px;
	height: 4px;
	background: var(--verm);
	box-shadow: 0 0 8px rgba(201, 58, 36, 0.85);
}
.scene .embers i.near {
	width: 7px;
	height: 7px;
	background: var(--ember);
	box-shadow: 0 0 14px rgba(228, 87, 46, 0.9);
	filter: blur(1.3px);
}
/* Idle ember drift (Forge Additions 3.5): quiet, low-count particles that
   stay invisible until assets/idle-ember.js marks the scene idle after a
   long stretch with no input. Nested in the same layer as the ambient
   embers above, so the existing "all animation under the scene" reduced
   motion guard (below the .embers rules) already disables this too. */
.scene .embers i.idle-glow {
	width: 5px;
	height: 5px;
	background: var(--ember);
	box-shadow: 0 0 12px rgba(228, 87, 46, 0.8);
	opacity: 0;
	pointer-events: none;
}
.scene.idle .embers i.idle-glow {
	animation: idle-rise 18s ease-in-out infinite;
}
@keyframes idle-rise {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(1);
	}
	12% {
		opacity: 0.5;
	}
	70% {
		opacity: 0.3;
	}
	100% {
		opacity: 0;
		transform: translate(var(--dx, 14px), var(--dy, -55vh)) scale(0.5);
	}
}
@keyframes rise {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0;
	}
	10% {
		opacity: var(--o, 0.8);
	}
	62% {
		opacity: calc(var(--o, 0.8) * 0.6);
	}
	100% {
		transform: translate(var(--dx, 20px), var(--dy, -70vh)) scale(0.45);
		opacity: 0;
	}
}
/* Smoke: two blurred ivory wisps drifting high in the black. */
.scene .wisp {
	position: absolute;
	filter: blur(70px);
	mix-blend-mode: screen;
}
.scene .wisp.w1 {
	top: -12%;
	left: 6%;
	width: 56vw;
	height: 58vh;
	background: radial-gradient(
		ellipse,
		rgba(245, 242, 236, 0.05),
		transparent 60%
	);
	animation: drift1 20s ease-in-out infinite alternate;
}
.scene .wisp.w2 {
	top: 16%;
	right: -14%;
	width: 48vw;
	height: 64vh;
	background: radial-gradient(
		ellipse,
		rgba(245, 242, 236, 0.035),
		transparent 62%
	);
	animation: drift2 25s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 {
	to {
		transform: translate(5vw, -3vh) scale(1.1);
	}
}
@keyframes drift2 {
	to {
		transform: translate(-4vw, 3vh) scale(1.07);
	}
}
/* Fixed over everything: vignette, then grain. Grain is namespaced
   `.scene-grain`, not the bare `.grain` the reference specimen uses: eight
   unmigrated island pages still carry an empty `<div class="grain">` left
   over from the old design (islands migrate in T7). A bare `.grain` rule
   here would un-hide a full-viewport noise overlay on all of them; the
   namespaced class stays inert until the furnace-room markup opts in. */
.vignette {
	position: fixed;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: radial-gradient(
		ellipse 110% 92% at 50% 42%,
		transparent 42%,
		rgba(0, 0, 0, 0.78) 100%
	);
}
.scene-grain {
	position: fixed;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* Hero band: the furnace scene scoped to hero+dossier (not the viewport).
   .scene is position:absolute;inset:0, so it fills whichever positioned
   ancestor contains it - here, this band, sized by hero+dossier's own
   normal-flow content height. This is why the seam stays pinned between the
   hero text and the dossier at any viewport height, with nothing rendering
   past the footer (a body/viewport-scoped scene can't track variable
   content height; the reference specimen wraps its own hero+deck the same
   way for the same reason).
   Horizontally the band is FULL-BLEED: the homepage overrides base.html's
   main_class block so main carries no .wrap, and the hero/dossier re-wrap
   themselves inside (.wrap / .wrap-wide). A wrap-scoped scene renders as a
   lighter prose-width column with hard smoke seams at its edges on any
   viewport wider than ~1500px (operator-reported at 2000px, 2026-07-19) -
   the pillars/haze are meant to frame the screen, not the text column. */
.hero-band {
	position: relative;
}
/* Hearth: the dossier's wrapper anchors the furnace mouth + coals. They sit
   in a zero-height nested .scene pinned to the dossier's TOP edge, so the
   seam tracks the hero/dossier boundary at every width by construction - a
   band-height percentage (the old bottom:34% dial) lands mid-prose the
   moment the dossier's own height changes (label wrap, viewport width). */
.hearth {
	position: relative;
}
.scene.hearth-fire {
	inset: 0 0 auto 0;
	height: 0;
	overflow: visible;
}
.scene.hearth-fire .mouth {
	bottom: auto;
	top: -53px;
}
.scene.hearth-fire .coals {
	bottom: auto;
	top: -89px;
}

/* Hero: the furnace room's three-register display (design doc "Tokens >
   Type"). Needs position:relative;z-index:2 for the same reason .dossier
   does below - .scene paints as a position:absolute;z-index:0 sibling
   within .hero-band, and non-positioned static content paints *behind* a
   z-index:0 positioned box in stacking order, not in front of it. */
.hero {
	position: relative;
	z-index: 2;
	padding: clamp(2.25rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}
.hero .eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ember);
	margin: 0 0 var(--space-6);
}
.hero .eyebrow::after {
	content: "";
	display: inline-block;
	width: 120px;
	height: 1px;
	background: linear-gradient(90deg, rgba(201, 58, 36, 0.55), transparent);
	vertical-align: middle;
	margin-left: var(--space-4);
}
.hero h1 {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: -0.012em;
	max-width: 18ch;
	color: var(--white);
}
.hero h1 .whisper {
	color: var(--shadow);
}
.hero .lede {
	font-family: var(--font-prose);
	font-size: var(--fs-subsection);
	color: var(--silver);
	max-width: 47ch;
	margin: var(--space-6) 0 0;
}
.hero .lede b {
	color: var(--white);
	font-weight: 600;
}

/* Workshop-log ticker: mono marquee, ink-on-ink, beneath the hero. */
.log {
	position: relative;
	z-index: 2;
	border-top: 1px solid var(--edge);
	background: var(--ink);
	overflow: hidden;
}
.log-inner {
	display: flex;
	align-items: center;
	padding: var(--space-3) 0;
}
.log-tag {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gray);
	padding: 0 var(--space-5);
	/* The marquee track slides beneath this label; opaque background +
	   raised stacking keep the two from colliding mid-animation (visible
	   live at any width once the marquee has advanced past t=0). */
	position: relative;
	z-index: 1;
	background: var(--ink);
	white-space: nowrap;
}
.log-track {
	display: flex;
	gap: var(--space-6);
	white-space: nowrap;
	animation: log-marquee 46s linear infinite;
}
.log:hover .log-track {
	animation-play-state: paused;
}
.log-track span {
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	color: var(--silver);
}
.log-track span b {
	color: var(--white);
	font-weight: 400;
}
@keyframes log-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* Glass telemetry: the dossier deck + cell readouts, floated over the fire. */
.dossier {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid rgba(245, 242, 236, 0.1);
	border-radius: 5px;
	overflow: hidden;
	background: rgba(5, 5, 7, 0.86);
	backdrop-filter: blur(16px);
	box-shadow:
		0 40px 90px rgba(0, 0, 0, 0.75),
		0 18px 50px rgba(110, 17, 25, 0.28);
}
.dossier::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(228, 87, 46, 0.5),
		transparent
	);
}
.cell {
	padding: 26px 28px;
	position: relative;
}
.cell + .cell {
	border-left: 1px solid var(--edge);
}
/* .dossier's grid is 3 columns; a 4th+ cell wraps to a new row, and the
   adjacent-sibling rule above doesn't know about row boundaries. Strip the
   border back off every cell that starts a row (1st, 4th, 7th...) so a
   non-multiple-of-3 cell count (the homepage has 5) doesn't leave a stray
   vertical hairline at the start of row 2. */
.cell:nth-child(3n + 1) {
	border-left: 0;
}
.cell::before {
	content: "";
	position: absolute;
	top: 0;
	left: 28px;
	width: 38px;
	height: 1px;
	background: linear-gradient(90deg, var(--verm), transparent);
	opacity: 0.85;
}
.cell .k {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 14px;
}
.cell .v {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 31px;
	line-height: 1;
	color: var(--white);
}
.cell .s {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--shadow);
	margin-top: 12px;
}
.pulse {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ember);
	box-shadow: 0 0 12px rgba(228, 87, 46, 0.9);
	margin-right: 10px;
	vertical-align: 6px;
	animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse {
	50% {
		opacity: 0.28;
	}
}

/* Molten metal: the only color voice for text (design doc "Tokens > Color").
   No filter here, ever: filter + background-clip:text on the SAME element is
   unreliable across engines (WebKit bug 169125 family - the filter rasterizes
   before the clip applies and the glyphs paint black; reproduced live on the
   homepage hero, 2026-07-19). The glow lives on .molten-glow, a wrapper the
   big display uses (hero line, thesis line); small numerals go glowless. */
.molten {
	font-style: italic;
	background: linear-gradient(
		100deg,
		var(--oxblood) 0%,
		var(--crimson) 34%,
		var(--verm) 68%,
		var(--ember) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.molten-glow {
	filter: drop-shadow(0 0 30px rgba(158, 27, 34, 0.55))
		drop-shadow(0 0 60px rgba(228, 87, 46, 0.25));
}

/* Programme: reading-order ledger rows. Numerals and emphasis take the
   .molten utility directly (no color of their own here) so the gradient
   composes cleanly. Canonical component - Task 6+ templates imitate this
   markup verbatim. */
.programme {
	margin: var(--space-7) 0 0;
}
.programme h2 {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gray);
	margin: 0 0 var(--space-3);
}
.prow {
	display: grid;
	grid-template-columns: 3em 1fr auto;
	gap: var(--space-4);
	align-items: baseline;
	border-bottom: 1px solid var(--edge);
	padding: var(--space-5) var(--space-2);
	transition:
		padding-left 0.3s,
		background 0.3s;
}
.prow:hover {
	padding-left: 20px;
	background: linear-gradient(90deg, rgba(110, 17, 25, 0.22), transparent 70%);
}
.prow .rn {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-section);
}
.prow .t {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-title);
	color: var(--white);
	text-decoration: none;
}
.prow .t:hover {
	text-decoration: underline;
	text-decoration-color: var(--ember);
}
.prow .d {
	font-family: var(--font-prose);
	font-style: italic;
	color: var(--gray);
	font-size: var(--fs-small);
	margin-top: var(--space-1);
}
.prow .meta {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--buried);
	letter-spacing: 0.16em;
	white-space: nowrap;
}

/* Compact modifier: the hero's doors quick-nav reuses .prow's row/hover
   mechanics at a smaller, quieter density - title + note on one line, a
   mono numeral instead of a molten one, no third grid column. Keeps every
   density delta in one modifier class instead of duplicated inline styles
   on the reference component (Task 6+ imitates .prow itself, not this). */
.prow.compact {
	grid-template-columns: 2.2em 1fr;
	padding: 0.4rem var(--space-2);
}
.prow.compact > div {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.prow.compact .rn {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 0.68rem;
	color: var(--gray);
	letter-spacing: 0.05em;
}
.prow.compact .t {
	font-size: 1rem;
}
.prow.compact .d {
	font-size: 0.72rem;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.scene *,
	.pulse,
	.wisp,
	.embers i,
	.log-track {
		animation: none !important;
	}
}

/* Scene tier: scene-quiet (essays, notes, book - design doc surface mapping).
   Mounted at base.html's plain body-level socket, not a .hero-band, so
   .mouth's usual bottom-anchor-within-hero geometry needs its own dial: a
   thin seam sitting right at the page's natural bottom (near the footer),
   any prose length. No wall/coals/haze - those stay hero-only; readability
   is sovereign on reading pages. */
/* Body-socket tiers ride the viewport, like .vignette and .scene-grain: the
   base .scene is absolute inset:0, which at the body socket resolves against
   the viewport and CUTS OFF one screen down on any page taller than 1200px
   (orphan seam line mid-prose, mouth glow mid-ledger). Fixed keeps the floor
   glow at the screen's bottom and the embers rising at every scroll depth.
   The hero scene (plain .scene inside .hero-band) stays absolute and scoped. */
.scene.quiet,
.scene.room {
	position: fixed;
}

.scene.quiet .mouth.seam {
	bottom: 0;
	height: 3px;
}
.scene.quiet .mouth.seam .lip {
	top: 0;
}

/* Scene tier: scene-room (receipts, instruments, workshop). Full mouth +
   wall + haze at the plain body-level socket; ember count is a markup
   density choice (~8 <i> tags), not a CSS concern. No coals/wisps/pillars -
   those stay hero-only. */
.scene.room .mouth {
	bottom: 6%;
}

/* Body-level scene socket (scene-quiet/scene-room; Task 6 is the first
   consumer of the plain {% block scene %} mount in base.html). .scene is a
   position:absolute z-index:0 sibling of nav/main/footer there; per CSS
   stacking order, non-positioned in-flow siblings paint BEHIND a z-index:0
   positioned box, not in front of it (the same reason .hero/.dossier need
   z-index:2 inside .hero-band). Give the chrome its own stacking order once,
   here, instead of re-deriving it per page. */
header.nav,
main,
.site-footer {
	position: relative;
	z-index: 1;
}
/* === End Forge scene ======================================================= */

/* Focus: accent outline, 2px, offset - everywhere. Covers every native
   interactive element the islands use (buttons/links plus the form controls
   and disclosure widgets the Forge Additions campaign introduced: radio-style
   filters, replay/diagram-walk buttons, simulator inputs and selects, and the
   nav-drawer/receipt <summary> toggles) so no island needs a one-off rule. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	background: var(--white);
	color: var(--void);
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
}
.skip-link:focus {
	left: 0;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.wrap {
	max-width: var(--measure-prose);
	margin: 0 auto;
	padding: 0 var(--space-5);
}
/* Wide sibling of .wrap for full-bleed pages: the homepage dossier needs
   more than a prose measure (three telemetry cells wrap their labels inside
   70ch), but still a centered, padded column. */
.wrap-wide {
	max-width: var(--measure-band);
	margin: 0 auto;
	padding: 0 var(--space-5);
}

/* Nav: one hairline-ruled row. No blur, no sticky glass. */
header.nav {
	border-bottom: 1px solid rgba(245, 242, 236, 0.16);
	background: var(--ink);
}
.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	height: 56px;
	max-width: var(--measure-instrument);
	margin: 0 auto;
	padding: 0 var(--space-5);
}
.brand {
	font-family: var(--font-display);
	font-size: var(--fs-subsection);
	color: var(--white);
}
.brand b {
	font-weight: 900;
}
/* Chrome labels: letterspaced serif small caps (the label role). */
.nav-back {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.02em;
	color: var(--gray);
	text-decoration: none;
}
.nav-back:hover {
	color: var(--ember);
}

/* Brand as a link (every page but home): a name, not a logo; never underlined. */
a.brand {
	text-decoration: none;
}
a.brand:hover {
	color: var(--ember);
}

/* ── Shared site nav + footer (single-sourced with the home, Phase B O1) ── */
/* Six destinations set as the label role: serif small caps, letterspaced.
   The active destination underlines in ink (location is a fact, not an action).
   `ask ›` is mono and held apart: machinery you address, not a destination. */
.site-nav {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.site-nav a {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.03em;
	color: var(--gray);
	text-decoration: none;
}
.site-nav a:hover {
	color: var(--ember);
}
.site-nav a.current {
	color: var(--white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.site-nav a.ask {
	margin-left: var(--space-4);
	font-family: var(--font-mono);
	letter-spacing: 0.03em;
	color: var(--ember);
}
.site-footer {
	margin-top: var(--space-8);
	padding: var(--space-6) var(--space-5);
	border-top: 1px solid var(--edge);
	background: var(--ink);
	color: var(--gray);
}
.machine-lane {
	display: flex;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}
.machine-lane a {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--ember);
	text-decoration: none;
}
.machine-lane a:hover {
	color: var(--white);
}
.colophon {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--gray);
	margin: 0;
}

/* Mobile nav: the fixed 56px row can't hold brand + six destinations, so let it
   grow and wrap the destinations under the brand instead of clipping them. */
@media (max-width: 640px) {
	.nav-inner {
		height: auto;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-2) var(--space-4);
		padding-top: var(--space-3);
		padding-bottom: var(--space-3);
	}
	.site-nav {
		gap: var(--space-2) var(--space-4);
	}
	/* Wrapped links get real touch targets, not text-height hit areas. */
	.site-nav a {
		display: inline-block;
		padding: var(--space-1) 0;
	}
}

/* ── Verification components (mono; values bind to gate artifacts) ─────── */
/* Double rule: the one place it appears is before a page's receipt stamp,
   the way a double rule precedes a ledger's totals line. */
.double-rule {
	border: 0;
	border-top: 3px double var(--edge);
	margin: var(--space-7) 0 var(--space-4);
}
.receipt-stamp {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	line-height: 1.5;
}
.receipt-stamp p {
	margin: 0 0 var(--space-1);
}
.receipt-stamp .head {
	color: var(--white);
	letter-spacing: 0.02em;
}
.receipt-stamp .trail a {
	color: var(--ember);
}
/* Verdict tokens: word + glyph + color, so they survive grayscale and print. */
.status-token {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.status-pass {
	color: var(--silver);
}
.status-fail {
	color: var(--white);
	background: rgba(158, 27, 34, 0.22);
	border-radius: 3px;
	padding: 0.05em 0.4em;
}
.status-stale {
	color: var(--ember);
}
/* Small mono metadata line: one recipe, shared by gate reports, instrument
   entries, and workshop made-things instead of a bespoke class per feature. */
.gate-run,
.gate-swept,
.inst-status,
.mt-plat {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
}
/* Provenance chip: a live-bound value + "as of <build date>", inline in prose.
   Deliberately a little interruptive; the mono snag is the sentence's receipt. */
.prov-chip {
	font-family: var(--font-mono);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
a.prov-chip {
	text-decoration-color: var(--edge);
}
.prov-asof {
	color: var(--silver);
}

/* ── Rooms / instrument surfaces (Receipts; design §4b density-is-honesty) ─ */
/* Reading prose holds the prose measure even in dense rooms; tables/panels
   may use the wider instrument measure. */
body.instrument main.wrap {
	max-width: var(--measure-instrument);
}
.room {
	padding: clamp(2.5rem, 8vw, 5rem) 0 var(--space-8);
}
.room > h1 {
	font-family: var(--font-prose);
	font-weight: 600;
	font-size: var(--fs-title);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-4);
	max-width: var(--measure-prose);
}
.room h2 {
	font-family: var(--font-prose);
	font-weight: 600;
	font-size: var(--fs-section);
	margin: var(--space-7) 0 var(--space-4);
	max-width: var(--measure-prose);
}
.room .lede {
	font-family: var(--font-prose);
	font-style: italic;
	font-size: var(--fs-subsection);
	color: var(--white);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-7);
}
/* Narration paragraphs inside rooms (intros, methodology) keep serif + prose measure. */
.methodology p,
.trust-index > p,
.corrections-intro,
.truth-pipeline-intro,
.gates-note {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.65;
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}
.trust-index > p a,
.methodology p a {
	color: var(--ember);
}
.gates-note {
	font-size: var(--fs-small);
	font-style: italic;
	color: var(--silver);
	margin-top: var(--space-4);
}

/* Gate-output panel: a mono inset block, one per gate. */
.gate-panel {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	background: var(--buried);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-4);
	margin: 0 0 var(--space-5);
}
.gate-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}
.gate-name {
	color: var(--white);
	letter-spacing: 0.02em;
}
.gate-panel .tr-table {
	margin-top: 0;
}
.gate-failures {
	margin: 0;
}
.gate-failure {
	color: var(--white);
	background: rgba(158, 27, 34, 0.22);
	border-radius: 3px;
	padding: 0.3em 0.5em;
	margin: var(--space-3) 0 0;
}
.gate-failure a {
	color: var(--ember);
}

/* Trust-receipts index: a dense mono table. On narrow screens the four columns
   exceed the measure, so the table scrolls inside its own container rather than
   pushing the whole document sideways. */
.tr-wrap {
	overflow-x: auto;
}
.tr-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	margin: var(--space-4) 0 0;
}
.tr-table th {
	text-align: left;
	font-weight: normal;
	color: var(--silver);
	font-size: var(--fs-chip);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--edge);
	padding: var(--space-2) var(--space-4) var(--space-2) 0;
}
.tr-table td {
	border-top: 1px solid var(--edge);
	padding: var(--space-3) var(--space-4) var(--space-3) 0;
	vertical-align: baseline;
	color: var(--white);
}
.tr-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tr-subject a {
	color: var(--ember);
}
.tr-verdict,
.tr-asof {
	color: var(--silver);
}

/* Corrections ledger: the designed gravity zone. No accent, no status color. */
.correction {
	border-top: 1px solid var(--edge);
	padding: var(--space-5) 0 0;
	margin: 0 0 var(--space-6);
	max-width: var(--measure-prose);
}
.correction .dateline {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	letter-spacing: 0.02em;
	margin: 0 0 var(--space-4);
}
.correction .field {
	margin: 0 0 var(--space-4);
}
.correction blockquote {
	font-family: var(--font-prose);
	font-style: italic;
	font-size: var(--fs-body);
	line-height: 1.6;
	margin: 0;
	padding-left: var(--space-5);
	border-left: 2px solid var(--edge);
	color: var(--white);
}
.correction .field p:not(.field-label) {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.65;
	margin: 0;
	color: var(--white);
}
.correction .field p:not(.field-label) a {
	color: var(--ember);
}

/* ── Decision records (Receipts room; ledger, not cards) ───────────────── */
/* An ADR status is an editorial label, not a gate verdict, so it never wears a
   --status-* color — that palette is reserved for tokens a gate actually spoke. */
.decisions .dx-intro {
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}
.decision-record {
	border-top: 1px solid var(--edge);
	padding: var(--space-3) 0;
}
.decision-record summary {
	display: grid;
	grid-template-columns: 6.5rem 6rem minmax(0, 1fr);
	gap: var(--space-3);
	align-items: baseline;
	cursor: pointer;
	list-style: none;
}
.decision-record summary::-webkit-details-marker {
	display: none;
}
.dr-date,
.dr-status {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--silver);
}
.dr-title {
	font-family: var(--font-prose);
	font-size: var(--fs-subsection);
	line-height: 1.25;
	color: var(--white);
}
.decision-record[open] .dr-title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.dr-body {
	max-width: var(--measure-prose);
	margin: var(--space-3) 0 0;
	padding-left: calc(6.5rem + var(--space-3));
}
/* Shared with the corrections ledger's .field-label below (same mono
   field-header recipe, one rule instead of a duplicate per component). */
.dr-body h2,
.field-label {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--silver);
	margin: var(--space-4) 0 var(--space-1);
}
.dr-body h2:first-child {
	margin-top: 0;
}
.field-label {
	margin-top: 0;
}
.dr-body p,
.dr-body li {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--white);
}
.dr-body strong {
	color: var(--white);
}
.dr-body a {
	color: var(--ember);
}
.dr-anchor {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	margin-top: var(--space-3);
}
@media (max-width: 640px) {
	.decision-record summary {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
	.dr-body {
		padding-left: 0;
	}
}

/* ── Room intro (shared by instruments + workshop) ─────────────────────── */
.room .intro {
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-7);
}
.room .intro p {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.65;
	margin: 0 0 var(--space-4);
}

/* ── Instruments room (spine §2b; ledger entries, not cards) ───────────── */
.shelf {
	margin: 0 0 var(--space-7);
}
.room h2.shelf-label {
	position: relative;
	font-family: var(--font-prose);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
	font-size: var(--fs-label);
	color: var(--silver);
	margin: 0 0 var(--space-2);
	padding-left: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--edge);
}
.room h2.shelf-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 2px;
	height: 1.05em;
	background: var(--ember);
}
.shelf-blurb {
	font-family: var(--font-prose);
	font-style: italic;
	font-size: var(--fs-small);
	color: var(--silver);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}
/* The instrument-entry component. Scoped with :not(body) so it never collides
   with the `body.instrument` page-type flag (which would clamp the whole page to
   the prose measure and stop the dark deck nav/footer from full-bleeding). */
.instrument:not(body) {
	border-top: 1px solid var(--edge);
	padding: var(--space-5) 0;
	max-width: var(--measure-prose);
}
.instrument:not(body):first-of-type {
	border-top: 0;
}
/* Shared with the workshop room's .mt-name/.mt-blurb below (same ledger-entry
   name/blurb recipe, one rule instead of a duplicate per room). */
.inst-name,
.mt-name {
	font-family: var(--font-prose);
	font-weight: 600;
	font-size: var(--fs-subsection);
	margin: 0 0 var(--space-2);
}
.inst-name a {
	color: var(--white);
	text-decoration: none;
}
.inst-name a:hover {
	color: var(--ember);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.inst-what,
.mt-blurb {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.6;
	margin: 0 0 var(--space-3);
}
.inst-status {
	line-height: 1.5;
	margin: 0 0 var(--space-3);
}
.instrument-run {
	background: var(--buried);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-2) var(--space-3);
	margin: 0 0 var(--space-2);
	overflow-x: auto;
}
.instrument-run code {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--white);
	white-space: nowrap;
}

/* ── Instrument roster filter (spine §3.6; shelf + runnable toggle) ────── */
.instruments-room .instrument-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	padding: var(--space-4) 0 var(--space-5);
	margin: 0 0 var(--space-6);
	border-top: 1px solid var(--edge);
	border-bottom: 1px solid var(--edge);
}
.instruments-room .ctrl-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.instruments-room .ctrl-btn {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.02em;
	color: var(--silver);
	background: var(--buried);
	border: 1px solid var(--edge);
	border-radius: 4px;
	padding: 7px 12px;
	cursor: pointer;
	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease;
}
.instruments-room .ctrl-btn:hover {
	color: var(--ember);
	border-color: var(--verm);
}
.instruments-room .ctrl-btn[aria-pressed="true"] {
	color: var(--void);
	background: var(--ember);
	border-color: var(--ember);
	font-weight: 600;
}
@media (max-width: 640px) {
	.instruments-room .instrument-controls {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Workshop room (spine §2c; made things, rule-separated, allowed air) ─ */
.made-thing {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
	border-top: 1px solid var(--edge);
	padding: var(--space-6) 0;
	max-width: var(--measure-prose);
}
.made-thing:first-of-type {
	border-top: 0;
}
.mt-shot {
	margin: 0;
	flex: 0 0 auto;
	width: 180px;
}
.mt-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--edge);
	border-radius: 2px;
}
.mt-body {
	flex: 1 1 auto;
}
.mt-plat {
	letter-spacing: 0.04em;
}
.mt-stack {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	margin: 0;
}
.mt-verify {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	margin: var(--space-1) 0 0;
}
.bench {
	margin: var(--space-7) 0 0;
	max-width: var(--measure-prose);
}
.room h2.bench-label {
	font-family: var(--font-prose);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
	font-size: var(--fs-label);
	color: var(--silver);
	margin: 0 0 var(--space-4);
	border-bottom: 1px solid var(--edge);
	padding-bottom: var(--space-2);
}
.bench-item {
	font-family: var(--font-prose);
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--white);
	margin: 0 0 var(--space-3);
}
@media (max-width: 560px) {
	.made-thing {
		flex-direction: column;
		gap: var(--space-4);
	}
	.mt-shot {
		width: 160px;
	}
}

/* ── Writing index: the essay shelf, grouped by cluster ────────────────── */
.cluster {
	margin: 0 0 var(--space-7);
}
.room h2.cluster-label {
	font-family: var(--font-prose);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.08em;
	font-size: var(--fs-subsection);
	color: var(--white);
	margin: 0 0 var(--space-3);
	border-bottom: 2px solid var(--white);
	padding-bottom: var(--space-2);
}
.cluster-blurb {
	font-family: var(--font-prose);
	font-style: italic;
	font-size: var(--fs-small);
	color: var(--silver);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}
.essay-entry {
	max-width: var(--measure-prose);
	margin: 0;
	/* Shelf row, not a prose page: cancel the generic `article` page padding
	   and take the same hairline-ledger rhythm as .note-entry. */
	padding: var(--space-5) 0;
	border-top: 1px solid var(--edge);
}
.essay-entry:last-child {
	border-bottom: 1px solid var(--edge);
}
.ee-title {
	font-family: var(--font-prose);
	font-weight: 600;
	font-size: var(--fs-subsection);
	line-height: 1.3;
	margin: 0 0 var(--space-1);
}
.ee-title a {
	color: var(--white);
	text-decoration: none;
}
.ee-title a:hover {
	color: var(--ember);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.ee-desc {
	font-family: var(--font-prose);
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--silver);
	margin: 0;
}
.writing-more {
	border-top: 1px solid var(--edge);
	padding-top: var(--space-5);
	margin: var(--space-7) 0 0;
	max-width: var(--measure-prose);
}
.writing-more p {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.6;
	margin: 0 0 var(--space-3);
}
.writing-more a {
	color: var(--ember);
}

/* Status key: the four epistemic tiers named once, up top, so the shelf badges
   read as a legend the first time and shorthand every time after. */
.status-legend {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	max-width: var(--measure-prose);
	background: var(--buried);
	border: 1px solid var(--edge);
	border-radius: 2px;
}
.status-legend li {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0 0 var(--space-2);
}
.status-legend li:last-child {
	margin-bottom: 0;
}
.sl-def {
	font-family: var(--font-prose);
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--silver);
}
/* Per-entry status badge sits below the blurb as a quiet readout. */
.ee-meta {
	margin: var(--space-2) 0 0;
}

/* ── Book home (table of contents) ─────────────────────────────────────── */
.book-home .dek {
	font-family: var(--font-prose);
	font-style: italic;
	font-size: var(--fs-subsection);
	color: var(--silver);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}
.book-intro {
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}
.book-intro p {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.65;
	margin: 0 0 var(--space-4);
}
.book-status {
	font-family: var(--font-prose);
	font-size: var(--fs-small);
	color: var(--silver);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-6);
}
.book-status a,
.book-foot a,
.book-follow a {
	color: var(--ember);
}
.room h2.toc-label {
	font-family: var(--font-prose);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
	font-size: var(--fs-label);
	color: var(--silver);
	margin: 0 0 var(--space-3);
	border-bottom: 1px solid var(--edge);
	padding-bottom: var(--space-2);
}
ol.toc {
	list-style: none;
	counter-reset: toc;
	margin: 0 0 var(--space-6);
	padding: 0;
	max-width: var(--measure-prose);
}
ol.toc li {
	display: grid;
	grid-template-columns: 3em 1fr auto;
	gap: var(--space-3);
	align-items: baseline;
	border-top: 1px solid var(--edge);
	padding: var(--space-3) 0;
}
ol.toc li:first-child {
	border-top: 0;
}
ol.toc .toc-num {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--gray);
	font-variant-numeric: tabular-nums;
}
ol.toc .toc-num.molten {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-subsection);
}
ol.toc .ch-title {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	color: var(--white);
	text-decoration: none;
}
ol.toc .ch-title:hover {
	color: var(--ember);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
ol.toc .toc-rt {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	white-space: nowrap;
}
ol.toc li.toc-aux .ch-title {
	font-style: italic;
	color: var(--silver);
}
ol.toc li.toc-part {
	position: relative;
	display: block;
	font-family: var(--font-prose);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
	font-size: var(--fs-label);
	color: var(--silver);
	padding: var(--space-5) 0 var(--space-2) var(--space-4);
}
ol.toc li.toc-part::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--space-5);
	width: 3px;
	height: 1.05em;
	background: var(--ember);
}
@media (max-width: 640px) {
	ol.toc li {
		grid-template-columns: 2.5em 1fr;
	}
	ol.toc .toc-rt {
		grid-column: 2;
	}
}
.book-foot,
.book-follow {
	font-family: var(--font-prose);
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--silver);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-3);
}

/* ── Prose (essays, book, notes) ──────────────────────────────────────── */
main.wrap > article {
	padding: clamp(2.5rem, 8vw, 5rem) 0
		var(--article-padding-bottom, var(--space-8));
}

/* Machine-voice metadata above the title: mono. */
.kicker {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--silver);
	display: inline-block;
	margin-bottom: var(--space-4);
	text-decoration: none;
}
a.kicker:hover {
	color: var(--ember);
}

h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-display);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-4);
}

.post-meta {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--edge);
}

/* Old pill affordances → quiet mono chips (radius <= 2px, no fill soup). */
.md-tools {
	margin: calc(-1 * var(--space-3)) 0 var(--space-5);
}
.copy-md,
.epistemic-status,
.read-time {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	background: var(--buried);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-1) var(--space-2);
	margin-left: var(--space-1);
}
.copy-md {
	cursor: pointer;
	color: var(--ember);
}
.copy-md:hover {
	border-color: var(--ember);
}

/* Epistemic status wears the Forge's fire-and-neutral palette (no green/amber -
   the identity has no hue for verdicts): silver = evidence on file
   (verified/field-tested), ember = still in flux (evolving), gray = an argued
   position that owns its risk - a quieter tone than a settled verdict. */
.epistemic-status {
	--status-dot: var(--gray);
}
.epistemic-status::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--status-dot);
	margin-right: 0.45em;
	vertical-align: middle;
}
.epistemic-status[data-status="verified"],
.epistemic-status[data-status="field-tested"] {
	--status-dot: var(--silver);
	border-color: var(--silver);
}
.epistemic-status[data-status="evolving"] {
	--status-dot: var(--ember);
	border-color: var(--ember);
}

article p {
	margin: 0 0 var(--space-5);
	max-width: var(--measure-prose);
	/* Break bare long tokens (e.g. a full URL in prose) so mobile never h-overflows. */
	overflow-wrap: break-word;
}

article h2 {
	font-family: var(--font-prose);
	font-weight: 600;
	font-size: var(--fs-section);
	line-height: 1.35;
	letter-spacing: -0.005em;
	margin: var(--space-7) 0 var(--space-4);
}
article h3 {
	font-family: var(--font-prose);
	font-weight: 600;
	font-style: italic;
	font-size: var(--fs-subsection);
	margin: var(--space-6) 0 var(--space-3);
}
/* Body emphasis is italic; structural emphasis is a heading. No bold in body prose. */
article strong {
	font-weight: 600;
}
article em {
	font-style: italic;
}

/* Standfirst under the title: serif, quiet, one step up from body. */
.dek {
	font-family: var(--font-prose);
	font-size: var(--fs-subsection);
	line-height: 1.5;
	color: var(--silver);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}

/* Section thesis: a load-bearing opening statement gets the display
   treatment (design doc type scale, 26-31px range), not quiet prose italic -
   it's the argument's spine, not an aside. */
.thesis {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-title);
	line-height: 1.2;
	color: var(--white);
	max-width: 24ch;
	margin: 0 0 var(--space-5);
}

/* Pull-quote in a note body: hairline left rule, serif italic, no fill, no color. */
.pull {
	margin: var(--space-6) 0;
	padding: var(--space-1) 0 var(--space-1) var(--space-5);
	border-left: 2px solid var(--edge);
	font-family: var(--font-prose);
	font-style: italic;
	font-size: var(--fs-subsection);
	line-height: 1.5;
	color: var(--silver);
	max-width: var(--measure-prose);
}

/* Reading-page footer: hairline top, a single mono way-back link. */
.post-foot {
	margin-top: var(--space-7);
	padding-top: var(--space-4);
	border-top: 1px solid var(--edge);
}
.post-foot a {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--ember);
	text-decoration: none;
}
.post-foot a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Links: underlined, accent, thin offset underline; no color shift on hover, no motion. */
article a,
.crosslink a,
.series-book a,
.series-hub a,
.series-next a,
.series-follow a {
	color: var(--ember);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
article a:hover {
	text-decoration-thickness: 2px;
}

/* Inline code = mono, quiet (a citation inside prose). */
article code {
	font-family: var(--font-mono);
	font-size: 0.85em;
	background: var(--buried);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 0 var(--space-1);
	overflow-wrap: anywhere;
}
/* Artifact quotes / commands = mono inset block (the only boxed element). */
article pre {
	max-width: 100%;
	margin: var(--space-5) 0;
	padding: var(--space-4);
	overflow-x: auto;
	background: var(--buried);
	border: 1px solid var(--edge);
	border-radius: 2px;
}
article pre code {
	border: 0;
	background: transparent;
	padding: 0;
	font-size: var(--fs-mono);
	color: var(--white);
	white-space: pre;
}

article ol,
article ul {
	margin: 0 0 var(--space-5) 1.3em;
}
article li {
	margin: 0 0 var(--space-2);
}

/* Human prose blockquote: indented, roman, no rule, no giant quote mark. */
blockquote {
	margin: var(--space-6) 0;
	padding: 0 var(--space-5);
	font-family: var(--font-prose);
	font-style: italic;
	color: var(--silver);
}

/* ── Tables = instrument voice: mono, tabular, hairline rows, no zebra. ── */
.table-wrap {
	overflow-x: auto;
	margin: var(--space-5) 0;
}
table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-variant-numeric: tabular-nums;
}
th,
td {
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--edge);
}
th {
	font-size: var(--fs-chip);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--silver);
	font-weight: 400;
}
td {
	color: var(--white);
}

/* ── Status tokens (word + glyph + color; survive grayscale/print). ────── */
.status-pass,
.status-fail,
.status-stale {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.status-pass {
	color: var(--silver);
}
.status-fail {
	color: var(--white);
	background: rgba(158, 27, 34, 0.22);
	border-radius: 3px;
	padding: 0.05em 0.4em;
}
.status-stale {
	color: var(--ember);
}

/* Provenance chip: live value + "as of" in mono, inside serif prose. */
.chip {
	font-family: var(--font-mono);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.chip .as-of {
	color: var(--silver);
}

/* ── Ledger lists (archive / adjacent / series): hairline-ruled rows. ──── */
.crosslink {
	margin: var(--space-6) 0 0;
	padding: var(--space-3) var(--space-4);
	background: var(--buried);
	border: 1px solid var(--edge);
	border-radius: 2px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--silver);
}

/* ── Colophon share-card gallery (Forge Additions §3.4): og cards grouped
   by room. Thumbnails follow the workshop room's hairline-frame recipe
   (.mt-shot) and the apps shelf's aspect-ratio grid (.appgrid/.shot);
   width/height attributes on the <img> itself hold the 1200x630 aspect so
   the lazy-loaded grid never shifts layout while it loads. ─────────────── */
.og-gallery {
	margin: var(--space-7) 0 0;
}
.og-gallery > p {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: 1.65;
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-6);
}
.og-room {
	margin: 0 0 var(--space-6);
}
.og-room-label {
	font-family: var(--font-prose);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
	font-size: var(--fs-label);
	color: var(--silver);
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--edge);
}
.og-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-4);
}
.og-thumb {
	margin: 0;
}
.og-thumb a {
	display: block;
}
.og-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	border: 1px solid var(--edge);
	border-radius: 2px;
	background: var(--void);
}
@media (max-width: 560px) {
	.og-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: var(--space-3);
	}
}

/* Field-notes index: hairline-ruled ledger entries, not cards. */
.note-list {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
}
.note-entry {
	margin: 0;
	padding: var(--space-5) 0;
	border-top: 1px solid var(--edge);
}
.note-entry:last-child {
	border-bottom: 1px solid var(--edge);
}
.note-title {
	font-family: var(--font-prose);
	font-size: var(--fs-subsection);
	font-weight: 600;
	color: var(--white);
	text-decoration: none;
}
.note-title:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.note-dek {
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	color: var(--silver);
	max-width: var(--measure-prose);
	margin: var(--space-2) 0 var(--space-3);
}
.note-meta {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
}

/* ── Agent guestbook (machine lane): hairline ledger, no cards/gradients. ── */
.guestbook .status-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: var(--space-6) 0;
	border: 1px solid var(--edge);
	border-radius: 2px;
}
.guestbook .status-grid div {
	padding: var(--space-4);
	border-left: 1px solid var(--edge);
}
.guestbook .status-grid div:first-child {
	border-left: 0;
}
.guestbook .status-grid b {
	display: block;
	font-family: var(--font-prose);
	font-weight: 600;
	font-size: var(--fs-title);
	line-height: 1;
	color: var(--white);
}
.guestbook .status-grid span {
	display: block;
	margin-top: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--silver);
}
.guestbook .boundary {
	margin: var(--space-6) 0;
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--edge);
}
.guestbook .boundary h2 {
	margin-top: 0;
}
.guestbook .raw-note {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--silver);
	margin: var(--space-5) 0;
}
.guestbook .entries {
	margin: var(--space-6) 0;
}
.guestbook .entry {
	padding: var(--space-5) 0;
	border-top: 1px solid var(--edge);
}
.guestbook .entry:last-child {
	border-bottom: 1px solid var(--edge);
}
.guestbook .entry-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.guestbook time,
.guestbook .operator,
.guestbook .quiet,
.guestbook .moderation {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
}
.guestbook .chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.guestbook .chips span {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 0 var(--space-2);
}
.guestbook .message {
	font-family: var(--font-prose);
	font-size: var(--fs-subsection);
	line-height: 1.4;
	color: var(--white);
	margin: var(--space-3) 0;
	max-width: var(--measure-prose);
}
.guestbook .entry-foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: baseline;
}
.guestbook .entry-foot a {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--ember);
	text-decoration: none;
}
.guestbook .entry-foot a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.guestbook .moderation {
	margin: var(--space-3) 0 0;
	line-height: 1.5;
}
@media (max-width: 640px) {
	.guestbook .status-grid {
		grid-template-columns: 1fr;
	}
	.guestbook .status-grid div {
		border-left: 0;
		border-top: 1px solid var(--edge);
	}
	.guestbook .status-grid div:first-child {
		border-top: 0;
	}
}

/* ── AI surface (machine lane): hairline surface ledger, mono affordances. ── */
.ai-surface .surface-list {
	margin: var(--space-6) 0;
}
.ai-surface .surface {
	padding: var(--space-5) 0;
	border-top: 1px solid var(--edge);
}
.ai-surface .surface:last-child {
	border-bottom: 1px solid var(--edge);
}
.ai-surface .surface h2 {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-subsection);
}
.ai-surface .surface p {
	margin: 0 0 var(--space-3);
}
.ai-surface .surface code {
	overflow-wrap: anywhere;
}
.ai-surface .links,
.instrument .links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}
.ai-surface .links a,
.instrument .links a {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--ember);
	text-decoration: none;
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-1) var(--space-2);
}
.ai-surface .links a:hover,
.instrument .links a:hover {
	border-color: var(--ember);
}
.ai-surface .tool-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}
.ai-surface .tool-list li {
	margin: 0;
}
.ai-surface .verify-block code,
.ai-surface .embed-code code {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.ai-surface .badge-kit {
	display: grid;
	gap: var(--space-3);
	align-items: start;
	margin-top: var(--space-3);
}
.ai-surface .badge-kit img {
	display: block;
	width: 88px;
	height: 31px;
}
/* The content-parity receipt panel, injected by check-content-parity --write. */
.ai-surface .parity-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: var(--space-4) 0;
	border: 1px solid var(--edge);
	border-radius: 2px;
}
.ai-surface .parity-summary span {
	padding: var(--space-3);
	border-left: 1px solid var(--edge);
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--silver);
}
.ai-surface .parity-summary span:first-child {
	border-left: 0;
}
.ai-surface .parity-summary b {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-prose);
	font-weight: 600;
	font-size: var(--fs-subsection);
	color: var(--white);
}
.ai-surface .parity-table-wrap {
	margin-top: var(--space-4);
	overflow-x: auto;
}
.ai-surface .parity-table {
	table-layout: fixed;
}
.ai-surface .machine-lane-panel {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--edge);
}
.ai-surface .machine-lane-panel .surface:last-child {
	border-bottom: 0;
}
.ai-surface .ai-colophon {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--edge);
}
@media (max-width: 640px) {
	.ai-surface .parity-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ai-surface .parity-summary span:nth-child(-n + 2) {
		border-top: 0;
	}
}

.adjacent-reading {
	margin: var(--space-7) 0 0;
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--edge);
}
.adjacent-reading h2 {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--silver);
	margin: 0 0 var(--space-3);
}
.adjacent-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.adjacent-list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--edge);
	color: var(--white);
	text-decoration: none;
}
.adjacent-list a:hover .adjacent-title {
	text-decoration: underline;
	text-decoration-color: var(--ember);
}
.adjacent-type {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--silver);
	white-space: nowrap;
}

.archive-list {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
}
.archive-list li {
	border-top: 1px solid var(--edge);
}
.archive-list a {
	display: grid;
	grid-template-columns: 8.5em 6em minmax(0, 1fr) 7em;
	gap: var(--space-3);
	align-items: baseline;
	padding: var(--space-3) 0;
	color: var(--white);
	text-decoration: none;
}
.archive-list a:hover .archive-title {
	text-decoration: underline;
	text-decoration-color: var(--ember);
}
.archive-date,
.archive-type,
.archive-time {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
}
.archive-title {
	min-width: 0;
}
.archive-note {
	color: var(--silver);
	margin-top: var(--space-5);
}

.status-legend {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-4);
	margin: var(--space-5) 0;
}
.status-legend h2 {
	font-size: var(--fs-subsection);
	margin: 0 0 var(--space-2);
}
.status-legend p,
.status-legend li {
	font-size: var(--fs-small);
	color: var(--silver);
}
.status-legend ul {
	margin: var(--space-2) 0 0 1.2em;
}

/* ── Footers (chapter nav, series) ────────────────────────────────────── */
footer.chapnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: space-between;
	align-items: center;
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid var(--edge);
}
.chapnav a,
.chap-home a,
.series-home a {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	text-decoration: none;
}
.chapnav a:hover,
.chap-home a:hover,
.series-home a:hover {
	color: var(--ember);
}
.chap-home {
	margin-top: var(--space-3);
}

footer.series {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--edge);
}
.series-label {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--silver);
	margin-bottom: var(--space-4);
}
.series-list {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
}
.series-list li {
	display: flex;
	gap: var(--space-3);
	align-items: baseline;
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--edge);
	font-size: var(--fs-small);
}
.series-list .num {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--silver);
	min-width: 1.4em;
}
.series-list a {
	color: var(--white);
	text-decoration: none;
}
.series-list a:hover {
	text-decoration: underline;
	text-decoration-color: var(--ember);
}
.series-list .here {
	color: var(--silver);
}
.series-hub,
.series-book,
.series-next,
.series-follow {
	font-size: var(--fs-small);
	margin: var(--space-4) 0 var(--space-5);
}
.series-book,
.series-follow {
	color: var(--silver);
}

/* ── Section divider inside long essays ───────────────────────────────── */
article hr {
	border: 0;
	width: 6ch;
	height: 1px;
	background: var(--edge);
	margin: var(--space-6) auto;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.archive-list a {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
	.adjacent-list a {
		flex-direction: column;
		gap: var(--space-1);
	}
	.dossier {
		grid-template-columns: 1fr;
	}
	.cell {
		min-width: 0;
	}
	.cell + .cell {
		border-left: 0;
		border-top: 1px solid var(--edge);
	}
}

/* ── Motion: default none. Honor reduced-motion absolutely. ───────────── */
@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* ── /repos: per-repo profile cards (machine axes, rendered verbatim) ──── */
.repos {
	max-width: 46rem;
}
.repos-provenance {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--silver);
	margin: var(--space-4) 0 var(--space-6);
}
.repos-provenance a {
	color: var(--ember);
	text-decoration: none;
}
.repos-provenance a:hover {
	text-decoration: underline;
}
.repo-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}
.repo-card {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-5);
	background: var(--buried);
}
.repo-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.repo-name {
	font-family: var(--font-display);
	font-size: var(--fs-subsection);
	margin: 0;
}
.repo-name a {
	color: var(--white);
	text-decoration: none;
}
.repo-name a:hover {
	color: var(--ember);
}
.repo-fresh {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.04em;
	color: var(--silver);
}
.repo-purpose {
	font-size: var(--fs-small);
	color: var(--white);
	margin: var(--space-3) 0 var(--space-4);
}
.repo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.repo-chip {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.02em;
	color: var(--white);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-1) var(--space-2);
}
.repo-chip .rc-k {
	color: var(--silver);
	margin-right: 0.4em;
}
.repo-flag {
	color: var(--silver);
}
.repo-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--silver);
}
.repo-links a {
	color: var(--ember);
	text-decoration: none;
}
.repo-links a:hover {
	text-decoration: underline;
}
.repo-ctx {
	color: var(--silver);
}
.repos-note {
	font-size: var(--fs-small);
	color: var(--silver);
	margin-top: var(--space-6);
}
.repos-note a {
	color: var(--ember);
	text-decoration: none;
}
.repos-note a:hover {
	text-decoration: underline;
}

/* ── Diagram walk (shared: /authority + /receipts step-through SVGs) ──────
   A .diagram-walk wraps an inline SVG whose elements carry data-stage="N".
   With no JS, .dw-frame never gets [data-active-stage], so the base dimming
   rule below never matches and the full diagram renders at rest, exactly
   as a static figure would. JS-on sets data-active-stage on the frame and
   toggles which .dw-captions <li> is visible - two attribute swaps, no
   redraw, no animation timeline. */
.diagram-walk {
	margin: var(--space-5) 0 0;
}
.dw-frame {
	display: block;
	border: 1px solid var(--edge);
	background: var(--ink);
}
.dw-frame svg {
	display: block;
	width: 100%;
	height: auto;
}
.dw-frame[data-active-stage] [data-stage] {
	opacity: 0.28;
	transition: opacity 200ms ease;
}
.dw-frame[data-active-stage="1"] [data-stage="1"],
.dw-frame[data-active-stage="2"] [data-stage="2"],
.dw-frame[data-active-stage="3"] [data-stage="3"],
.dw-frame[data-active-stage="4"] [data-stage="4"],
.dw-frame[data-active-stage="5"] [data-stage="5"] {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.dw-frame[data-active-stage] [data-stage] {
		transition: none;
	}
}
.dw-captions {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	font-family: var(--font-prose);
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--silver);
	max-width: var(--measure-prose);
}
.dw-captions li {
	margin: 0 0 var(--space-2);
}
.dw-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-3);
}
.dw-button {
	border: 1px solid var(--edge);
	background: var(--ink);
	color: var(--silver);
	border-radius: 5px;
	padding: 6px 14px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	cursor: pointer;
}
.dw-button:hover:not(:disabled) {
	color: var(--white);
	border-color: var(--gray);
}
.dw-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.dw-stage-count {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.04em;
	color: var(--gray);
}
.dw-standalone {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-chip);
}
.dw-standalone a {
	color: var(--ember);
}
/* === end shared: diagram-walk === */

/* ── 404 (not-found) ────────────────────────────────────────────────── */
.not-found {
	max-width: 760px;
	padding: clamp(72px, 14vw, 150px) 0 96px;
}
.not-found .error-code {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gray);
	animation: ember-glow 6s ease-in-out infinite;
}
@keyframes ember-glow {
	0%,
	100% {
		color: var(--gray);
	}
	50% {
		color: var(--ember);
	}
}
@media (prefers-reduced-motion: reduce) {
	.not-found .error-code {
		animation: none;
	}
}
.not-found h1 {
	max-width: 11ch;
	margin: 18px 0;
}
.not-found > p {
	max-width: 58ch;
	color: var(--silver);
	font-size: 18px;
	line-height: 1.65;
}
.recovery-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}
.recovery-links a {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--ember);
}
.recovery-links a:hover {
	border-color: var(--ember);
}

/* ── Print: the artifact survives paper. ──────────────────────────────── */
@media print {
	:root {
		--void: rgb(255, 255, 255);
		--ink: rgb(255, 255, 255);
		--white: rgb(0, 0, 0);
		--silver: rgb(0, 0, 0);
		--gray: rgb(0, 0, 0);
		--edge: rgba(0, 0, 0, 0.3);
		--ember: rgb(0, 0, 0);
	}
	header.nav,
	.md-tools,
	.adjacent-reading {
		display: none;
	}
	article a {
		text-decoration: underline;
	}
	body {
		font-size: 11pt;
	}
}

/* === island: og-card =======================================================
   OG share-card render target (1200x630, screenshotted by
   scripts/build-og-cards.py). Visual template only - the generator pipeline
   itself is out of scope here. Migrated off Fraunces/IBM Plex Mono and its
   own mint accent onto Forge tokens/fonts; .dot reuses the shared .pulse
   component instead of a duplicate round-radius rule. */
body.og-card {
	width: 1200px;
	height: 630px;
	overflow: hidden;
	position: relative;
	background:
		radial-gradient(
			900px 600px at 82% -12%,
			rgba(228, 87, 46, 0.13),
			transparent 60%
		),
		radial-gradient(
			760px 640px at 2% 6%,
			rgba(110, 17, 25, 0.1),
			transparent 55%
		),
		var(--void);
}
.og-card .grid-overlay {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(
		ellipse 120% 90% at 50% 0%,
		var(--void) 40%,
		transparent 92%
	);
}
.og-card .card {
	position: relative;
	height: 100%;
	padding: 74px 84px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.og-card .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.og-card .brand {
	font-family: var(--font-mono);
	font-size: 18px;
	letter-spacing: 0.04em;
	color: var(--silver);
}
.og-card .brand b {
	color: var(--white);
	font-weight: 600;
}
.og-card .kicker {
	font-family: var(--font-mono);
	font-size: 16px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ember);
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.og-card .kicker::before {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--crimson);
}
.og-card .mid {
	margin-top: 6px;
}
.og-card h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 82px;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--white);
}
.og-card h1 .accent {
	font-style: italic;
	color: var(--ember);
	font-weight: 500;
}
.og-card .role {
	margin-top: 30px;
	font-family: var(--font-mono);
	font-size: 21px;
	letter-spacing: 0.05em;
	color: var(--white);
}
.og-card .role .sep {
	color: var(--ember);
	padding: 0 12px;
}
.og-card .bottom {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.og-card .chip {
	font-family: var(--font-mono);
	font-size: 16px;
	letter-spacing: 0.03em;
	color: var(--silver);
	border: 1px solid var(--edge);
	background: rgba(5, 5, 7, 0.86);
	border-radius: 6px;
	padding: 9px 18px;
}
.og-card .chip b {
	color: var(--white);
}
/* === end island: og-card === */

/* === island: interleaving-explorer =========================================
   Self-contained CAS/lost-update explainer. Was its own light "paper" theme
   (Georgia serif, cream/tan palette) - flipped onto the single dark Forge
   room like every other page. Two data-bearing hues (writer A rust, writer
   B green) had no Forge equivalent; mapped by role instead of hue: A (the
   blind writer, the risk) takes the fire register (--ember/--crimson), B
   (the careful CAS writer, the "good" path) takes the neutral register
   (--silver), with a dashed border on B's chrome as a second, non-color
   distinguishing marker so the pair reads apart even in grayscale. Scoped
   under body.interleaving-explorer - .log/.badge/.panel are common enough
   names to collide with canonical site components otherwise. */
body.interleaving-explorer {
	padding: 2rem 1rem 4rem;
}
.interleaving-explorer main {
	max-width: 760px;
	margin: 0 auto;
}
.interleaving-explorer h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1.25;
	margin: 0 0 0.4rem;
	color: var(--white);
}
.interleaving-explorer h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	margin: 2.4rem 0 0.6rem;
	color: var(--white);
}
.interleaving-explorer p.lede {
	color: var(--silver);
	font-size: 1.05rem;
	margin-top: 0;
}
.interleaving-explorer p {
	margin: 0.8rem 0;
}
.interleaving-explorer code,
.interleaving-explorer .mono {
	font-family: var(--font-mono);
	font-size: 0.85em;
}
.interleaving-explorer .sim {
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 6px;
	padding: 1rem;
	margin: 1.4rem 0;
	font-family: var(--font-mono);
	font-size: 0.8rem;
}
.interleaving-explorer .controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1rem;
}
.interleaving-explorer .controls .spacer {
	flex: 1;
}
.interleaving-explorer button {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	padding: 0.38rem 0.7rem;
	border: 1px solid var(--edge);
	border-radius: 4px;
	background: var(--ink);
	color: var(--white);
	cursor: pointer;
}
.interleaving-explorer button:hover:not(:disabled) {
	border-color: var(--gray);
}
.interleaving-explorer button:disabled {
	opacity: 0.4;
	cursor: default;
}
.interleaving-explorer button.primary {
	background: var(--ember);
	color: var(--void);
	border-color: var(--ember);
}
.interleaving-explorer .mode {
	display: inline-flex;
	border: 1px solid var(--edge);
	border-radius: 4px;
	overflow: hidden;
}
.interleaving-explorer .mode button {
	border: 0;
	border-radius: 0;
}
.interleaving-explorer .mode button.on {
	background: var(--ember);
	color: var(--void);
}
.interleaving-explorer input[type="number"] {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	width: 4.2rem;
	padding: 0.34rem 0.4rem;
	border: 1px solid var(--edge);
	border-radius: 4px;
	background: var(--ink);
	color: var(--white);
}
.interleaving-explorer .grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem;
}
@media (max-width: 600px) {
	.interleaving-explorer .grid2 {
		grid-template-columns: 1fr;
	}
}
.interleaving-explorer .panel {
	border: 1px solid var(--edge);
	border-radius: 6px;
	padding: 0.6rem 0.7rem;
}
.interleaving-explorer .panel h3 {
	margin: 0 0 0.45rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--gray);
	font-weight: 600;
}
.interleaving-explorer .panel.wa {
	border-left: 3px solid var(--ember);
}
.interleaving-explorer .panel.wb {
	border-left: 3px dashed var(--silver);
}
.interleaving-explorer .panel .kv {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.1rem 0;
}
.interleaving-explorer .panel .kv .k {
	color: var(--gray);
}
.interleaving-explorer .dbrow {
	margin-top: 0.7rem;
	border: 1px solid var(--edge);
	border-radius: 6px;
	padding: 0.6rem 0.7rem;
	background: var(--void);
}
.interleaving-explorer .steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0.8rem 0 0.2rem;
}
.interleaving-explorer .step {
	padding: 0.22rem 0.5rem;
	border-radius: 4px;
	border: 1px solid var(--edge);
	color: var(--gray);
	background: var(--ink);
	cursor: pointer;
	user-select: none;
}
.interleaving-explorer .step.a {
	border-color: var(--ember);
	color: var(--ember);
	background: rgba(228, 87, 46, 0.12);
}
.interleaving-explorer .step.b {
	border-style: dashed;
	border-color: var(--silver);
	color: var(--silver);
	background: rgba(245, 242, 236, 0.06);
}
.interleaving-explorer .step.future {
	opacity: 0.32;
}
.interleaving-explorer .step.now {
	outline: 2px solid var(--white);
}
.interleaving-explorer .log {
	margin-top: 0.6rem;
}
.interleaving-explorer .log div {
	padding: 0.12rem 0;
	color: var(--gray);
}
.interleaving-explorer .log .hot {
	color: var(--white);
}
.interleaving-explorer .receipt {
	border: 1px dashed var(--gray);
	background: var(--buried);
	color: var(--silver);
	border-radius: 4px;
	padding: 0.4rem 0.6rem;
	margin-top: 0.45rem;
}
.interleaving-explorer .banner {
	margin-top: 0.8rem;
	border-radius: 6px;
	padding: 0.55rem 0.7rem;
	font-weight: 600;
}
.interleaving-explorer .banner.bad {
	background: rgba(158, 27, 34, 0.16);
	color: var(--white);
}
.interleaving-explorer .banner.good {
	background: rgba(245, 242, 236, 0.06);
	color: var(--silver);
}
.interleaving-explorer .banner.plain {
	background: var(--ink);
	color: var(--gray);
	border: 1px solid var(--edge);
}
.interleaving-explorer .map {
	display: grid;
	gap: 0.35rem;
	margin-top: 0.6rem;
}
.interleaving-explorer .map .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--edge);
	border-radius: 4px;
	cursor: pointer;
}
.interleaving-explorer .map .row:hover {
	border-color: var(--gray);
}
.interleaving-explorer .map .row.current {
	outline: 2px solid var(--white);
}
.interleaving-explorer .map .ops {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	flex: 1;
	min-width: 0;
}
.interleaving-explorer .map .ops span {
	padding: 0.05rem 0.38rem;
	border-radius: 4px;
}
.interleaving-explorer .map .ops .a {
	background: rgba(228, 87, 46, 0.12);
	color: var(--ember);
}
.interleaving-explorer .map .ops .b {
	background: rgba(245, 242, 236, 0.06);
	color: var(--silver);
	border: 1px dashed var(--silver);
}
.interleaving-explorer .badge {
	padding: 0.12rem 0.5rem;
	border-radius: 4px;
	font-size: 0.72rem;
	white-space: nowrap;
}
.interleaving-explorer .badge.bad {
	background: rgba(158, 27, 34, 0.16);
	color: var(--white);
}
.interleaving-explorer .badge.good {
	background: rgba(245, 242, 236, 0.06);
	color: var(--silver);
}
.interleaving-explorer .badge.warn {
	background: var(--buried);
	color: var(--gray);
}
.interleaving-explorer .sweep {
	display: grid;
	grid-template-columns: repeat(15, minmax(0, 1fr));
	gap: 0.3rem;
	margin-top: 0.6rem;
}
.interleaving-explorer .sweep button {
	aspect-ratio: 1;
	padding: 0;
	font-size: 0.68rem;
	border-radius: 4px;
}
.interleaving-explorer .sweep button.lost {
	background: rgba(158, 27, 34, 0.16);
	color: var(--white);
	border-color: var(--crimson);
}
.interleaving-explorer .sweep button.ok {
	background: rgba(245, 242, 236, 0.06);
	color: var(--silver);
	border-color: var(--edge);
}
.interleaving-explorer .sweep button.current {
	outline: 2px solid var(--white);
}
.interleaving-explorer .sweepnote {
	color: var(--gray);
	margin-top: 0.5rem;
}
.interleaving-explorer .foot {
	margin-top: 3rem;
	color: var(--gray);
	font-size: 0.9rem;
	border-top: 1px solid var(--edge);
	padding-top: 1rem;
}
.interleaving-explorer a {
	color: inherit;
}
/* === end island: interleaving-explorer === */

/* === island: apps ===========================================================
   The /apps native-work shelf. Already linked style.css; its page-scoped
   block still carried "Bench paper alias" custom properties (--text/--line/
   --mint) resolving to a light paper palette that no longer exists, plus
   Newsreader/Instrument Serif/Space Mono. Rewritten straight onto Forge
   tokens/fonts. Dropped the dead --maxw custom property (never read by
   style.css or this page's own rules). */
.apps-shelf .dek {
	font-family: var(--font-prose);
	font-size: clamp(19px, 2.4vw, 24px);
	color: var(--silver);
	line-height: 1.45;
	margin: -4px 0 18px;
	max-width: 44ch;
}
.apps-shelf .lead {
	color: var(--silver);
	font-size: 0.98em;
	margin: 0 0 10px;
	max-width: 68ch;
}
.apps-shelf .status-note {
	border: 1px solid var(--edge);
	border-left: 2px solid var(--crimson);
	border-radius: 2px;
	background: var(--buried);
	padding: 13px 16px;
	margin: 22px 0 0;
	color: var(--silver);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.55;
	max-width: 72ch;
}
.apps-shelf .appgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 28px 22px;
	margin: 34px 0 8px;
}
.apps-shelf .appcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.apps-shelf .shot {
	position: relative;
	border: 1px solid var(--edge);
	border-radius: 2px;
	overflow: hidden;
	background: var(--void);
	aspect-ratio: 640 / 1390;
}
.apps-shelf .shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
.apps-shelf .appcard h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.12em;
	color: var(--white);
	margin: 13px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 9px;
	line-height: 1.12;
}
.apps-shelf .appcard .plat {
	font-family: var(--font-mono);
	font-size: 0.6em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ember);
}
.apps-shelf .appcard p {
	color: var(--silver);
	font-size: 0.92em;
	line-height: 1.5;
	margin: 7px 0 10px;
}
.apps-shelf .stack {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 7px;
	margin-top: auto;
}
.apps-shelf .stack span {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--gray);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 2px 9px;
}
.apps-shelf .also {
	border-top: 1px solid var(--edge);
	margin-top: 36px;
	padding-top: 24px;
}
.apps-shelf .also h2 {
	margin: 0 0 10px;
}
.apps-shelf .also p {
	color: var(--silver);
	font-size: 0.97em;
	line-height: 1.6;
	max-width: 72ch;
	margin: 0 0 10px;
}
.apps-shelf .also strong {
	color: var(--white);
	font-weight: 600;
}
@media (max-width: 560px) {
	.apps-shelf .appgrid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.apps-shelf .shot {
		max-width: 320px;
		margin: 0 auto;
		width: 100%;
	}
}
/* === end island: apps === */

/* === island: agent-failure-museum ==========================================
   Already linked style.css, but its own page-scoped block referenced a raft
   of undefined custom properties (--text-2/--text-3/--line/--line-soft/
   --ease/--mint/--mint-dim) left over from a palette that predates even the
   old Bench system - so this page was rendering with browser fallbacks, not
   a designed look. Rewritten onto real Forge tokens: the page's one bright
   accent (mint teal, used for eyebrows/labels/links/active affordances)
   maps to --ember (accent only on affordances, per the design doc); its
   dimmer companion (used on hover/secondary borders) maps to --verm; the
   failure-red maps to --crimson (status semantics: fail=crimson). Dropped
   the dead --maxw and --violet custom properties (declared, never read) and
   the purely decorative scope-ring on .museum-case (a circle outside the
   pulse/core/seam-core/embers allowlist, with no content of its own). The
   page's own .dek override is dropped entirely so the canonical global .dek
   (style.css, silver/font-prose) applies instead of shadowing it. */
article.museum {
	--article-padding-bottom: 78px;
}

.museum .museum-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
	gap: clamp(28px, 5vw, 54px);
	align-items: end;
	margin-bottom: 42px;
}
.museum .hero-copy {
	max-width: 760px;
}
.museum .scope-note {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--gray);
	max-width: 72ch;
	line-height: 1.65;
	margin: 0;
}
.museum .scope-note strong {
	color: var(--ember);
	font-weight: 600;
}
.museum .museum-case {
	border: 1px solid var(--edge);
	border-radius: 6px;
	background: linear-gradient(160deg, rgba(228, 87, 46, 0.08), var(--ink) 44%);
	padding: 20px;
	position: relative;
	overflow: hidden;
}
.museum .case-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ember);
	margin-bottom: 16px;
}
.museum .case-lines {
	display: grid;
	gap: 10px;
	position: relative;
}
.museum .case-line {
	border: 1px solid var(--edge);
	border-radius: 4px;
	background: rgba(5, 5, 7, 0.42);
	padding: 12px 13px;
}
.museum .case-line b {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 5px;
}
.museum .case-line span {
	display: block;
	color: var(--silver);
	font-size: 14px;
	line-height: 1.42;
}
.museum .case-line.good {
	border-color: var(--verm);
	background: rgba(228, 87, 46, 0.055);
}
.museum .case-line.good span {
	color: var(--white);
}
.museum .filter-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 0 22px;
	margin-bottom: 12px;
	border-top: 1px solid var(--edge);
	border-bottom: 1px solid var(--edge);
}
.museum .filter-label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gray);
}
.museum .filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.museum .filter-btn {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--silver);
	background: rgba(5, 5, 7, 0.72);
	border: 1px solid var(--edge);
	border-radius: 4px;
	padding: 7px 12px;
	cursor: pointer;
	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
}
.museum .filter-btn:hover {
	color: var(--ember);
	border-color: var(--verm);
	transform: translateY(-1px);
}
.museum .filter-btn[aria-pressed="true"] {
	color: var(--void);
	background: var(--ember);
	border-color: var(--ember);
	font-weight: 600;
}
.museum .museum-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 22px 0 44px;
}
.museum .exhibit {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border: 1px solid var(--edge);
	border-radius: 6px;
	background: linear-gradient(180deg, var(--ink), var(--void));
	padding: 20px;
	min-height: 100%;
	scroll-margin-top: 82px;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease;
}
.museum .exhibit[hidden] {
	display: none;
}
.museum .exhibit:hover {
	border-color: var(--verm);
	transform: translateY(-2px);
}
.museum .exhibit-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px;
	align-items: start;
}
.museum .exhibit-k {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ember);
	margin-bottom: 8px;
}
.museum .exhibit h2 {
	font-size: clamp(24px, 3vw, 33px);
	margin: 0;
	line-height: 1.05;
}
.museum .exhibit-num {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--gray);
	padding-top: 4px;
}
.museum .exhibit-num a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.museum .exhibit-num a:hover {
	color: var(--ember);
	border-bottom-color: var(--verm);
}
.museum .failure {
	border: 1px solid rgba(158, 27, 34, 0.35);
	background: rgba(158, 27, 34, 0.055);
	border-radius: 6px;
	padding: 14px;
}
.museum .failure b,
.museum .control b,
.museum .uncertain b {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 7px;
}
.museum .failure b {
	display: inline-block;
	color: var(--white);
	background: rgba(158, 27, 34, 0.22);
	border-radius: 3px;
	padding: 0.05em 0.5em;
}
.museum .failure p,
.museum .control p,
.museum .uncertain p {
	margin: 0;
	color: var(--silver);
	font-size: 15px;
	line-height: 1.55;
}
.museum .why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.museum .why {
	border-top: 1px solid var(--edge);
	padding-top: 12px;
}
.museum .why h3 {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray);
	margin: 0 0 7px;
}
.museum .why p {
	margin: 0;
	color: var(--silver);
	font-size: 14.5px;
	line-height: 1.5;
}
.museum .control {
	border: 1px solid var(--verm);
	background: rgba(228, 87, 46, 0.055);
	border-radius: 6px;
	padding: 14px;
}
.museum .control b {
	color: var(--ember);
}
.museum .uncertain {
	border: 1px dashed var(--edge);
	border-radius: 6px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.018);
}
.museum .uncertain b {
	color: var(--gray);
}
.museum .tool-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}
.museum .tool-row a {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ember);
	text-decoration: none;
	border: 1px solid var(--verm);
	border-radius: 4px;
	padding: 7px 10px;
	background: rgba(228, 87, 46, 0.045);
}
.museum .tool-row a:hover {
	border-color: var(--ember);
	background: rgba(228, 87, 46, 0.09);
}
.museum .lesson-strip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	margin-top: 28px;
}
.museum .lesson {
	border: 1px solid var(--edge);
	border-radius: 6px;
	background: rgba(5, 5, 7, 0.48);
	padding: 20px;
}
.museum .lesson h2 {
	margin-top: 0;
}
.museum .lesson p,
.museum .lesson li {
	color: var(--silver);
}
.museum .lesson ul {
	margin-bottom: 0;
}
.museum .route {
	border: 1px solid var(--verm);
	border-radius: 6px;
	background: linear-gradient(
		135deg,
		rgba(228, 87, 46, 0.07),
		rgba(5, 5, 7, 0.55)
	);
	padding: 20px;
	margin-top: 18px;
}
.museum .route h2 {
	margin-top: 0;
}
.museum .route p {
	color: var(--silver);
	max-width: 78ch;
}
.museum .route-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}
.museum .route-links a {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ember);
	text-decoration: none;
	border: 1px solid var(--verm);
	border-radius: 4px;
	padding: 8px 12px;
	background: rgba(228, 87, 46, 0.05);
}
.museum .route-links a:hover {
	border-color: var(--ember);
	background: rgba(228, 87, 46, 0.1);
}
/* Live repro controls (Forge Additions 3.2): three exhibits whose mechanism
   is logic that genuinely executes in the browser, wired by
   assets/museum-repros.js. Containers ship `hidden` in the markup and are
   un-hidden by that script, same progressive-enhancement shape as
   assets/verdict-simulator.js, so a JS-off visitor sees the page as authored. */
.museum .repro {
	border: 1px solid var(--verm);
	border-radius: 6px;
	background: rgba(228, 87, 46, 0.04);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.museum .repro[hidden] {
	display: none;
}
.museum .repro > b {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ember);
}
.museum .repro-note {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--gray);
	line-height: 1.5;
}
.museum .repro-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.museum .repro-toggle,
.museum .repro-toggle-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.museum .repro-toggle label,
.museum .repro-toggle-grid label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--silver);
}
.museum .repro button {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--silver);
	background: rgba(5, 5, 7, 0.72);
	border: 1px solid var(--edge);
	border-radius: 4px;
	padding: 7px 12px;
	cursor: pointer;
	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease;
}
.museum .repro button:hover:not(:disabled) {
	color: var(--ember);
	border-color: var(--verm);
}
.museum .repro button:disabled {
	color: var(--gray);
	cursor: not-allowed;
	opacity: 0.5;
}
.museum .repro-output,
.museum .repro-context {
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--silver);
	background: rgba(5, 5, 7, 0.55);
	border: 1px solid var(--edge);
	border-radius: 6px;
	padding: 12px;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
}
.museum .repro-output:empty {
	display: none;
}
.museum .repro-line {
	margin: 0 0 4px;
}
.museum .repro-line:last-child {
	margin-bottom: 0;
}
.museum .repro-line b {
	color: var(--gray);
	font-weight: 600;
}
.museum .repro-line.drift,
.museum .repro-context .injected {
	color: var(--white);
	background: rgba(158, 27, 34, 0.28);
	border-radius: 3px;
	padding: 0 0.3em;
	transition: background-color 0.3s ease;
}
.museum .repro-diff {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.museum .repro-diff b {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 6px;
}
.museum .repro-diff ul {
	margin: 0;
	padding-left: 16px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--silver);
}
.museum .repro-diff li.drift {
	color: var(--white);
	background: rgba(158, 27, 34, 0.28);
	border-radius: 3px;
	padding: 0 0.3em;
}
.museum .repro-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.museum .repro-claim,
.museum .repro-receipt {
	border: 1px solid var(--edge);
	border-radius: 6px;
	background: rgba(5, 5, 7, 0.42);
	padding: 12px;
}
.museum .repro-claim b,
.museum .repro-receipt b {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 6px;
}
.museum .repro-claim p {
	margin: 0;
	color: var(--white);
	font-size: 16px;
	font-weight: 600;
}
.museum .repro-receipt ul {
	margin: 0 0 8px;
	padding-left: 18px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--silver);
}
.museum .repro-receipt li.proven {
	color: var(--white);
}
.museum .repro-receipt li.not-proven {
	color: var(--gray);
}
.museum .repro-receipt p {
	margin: 0;
	color: var(--ember);
	font-size: 13px;
	font-family: var(--font-mono);
}
@media (prefers-reduced-motion: reduce) {
	.museum .repro-line.drift,
	.museum .repro-context .injected {
		transition: none;
	}
}
@media (max-width: 560px) {
	.museum .repro-diff,
	.museum .repro-compare {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 900px) {
	.museum .museum-hero {
		grid-template-columns: 1fr;
	}
	.museum .museum-grid,
	.museum .lesson-strip {
		grid-template-columns: 1fr;
	}
	.museum .museum-case {
		max-width: 620px;
	}
	.museum .filter-panel {
		align-items: flex-start;
	}
}
@media (max-width: 560px) {
	.museum .why-grid {
		grid-template-columns: 1fr;
	}
	.museum .exhibit {
		padding: 18px;
	}
	.museum .museum-case {
		padding: 17px;
	}
	.museum .filter-panel {
		position: static;
	}
	.museum .filters {
		width: 100%;
	}
	.museum .filter-btn {
		flex: 1 1 auto;
		text-align: center;
	}
}
/* === end island: agent-failure-museum === */

/* === island: projects =======================================================
   The /projects workshop index. Already linked style.css, but its own
   page-scoped block referenced Bench two-material tokens (--ink-muted,
   --rule, --paper-inset, --deck/--ink-deck/--muted-deck/--deck-line*,
   --accent, --status-pass/--status-stale, --font-instrument) that predate
   the Forge and no longer exist anywhere - the page was rendering on
   fallback/inherited color, not a designed one. Rewritten onto Forge
   tokens. Class names .inst/.inst-name/.trust-pack stay verbatim (pinned by
   scripts/smoke-check.mjs's literal string search for the trust-pack
   boundary and the inst-name roster); everything else is restyle-only, per
   the file's own "restyle only" comment. Status semantics per the design
   doc: pass/active reads silver, a highlight (recent) reads ember; there is
   no failing state in this widget. Scoped under .projects-page (the
   article's own wrapper) since .lead/.scale/.command-card are common
   enough names to want a boundary against future collisions. */
.projects-page .lead {
	font-size: var(--fs-small);
	color: var(--silver);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-3);
}
.projects-page .phase-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gray);
	margin: var(--space-6) 0 var(--space-2);
	display: flex;
	align-items: center;
	gap: 10px;
}
.projects-page .phase-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--edge);
}
.projects-page .inst {
	border-top: 1px solid var(--edge);
	padding: var(--space-5) 0;
	margin: 0;
	max-width: var(--measure-prose);
}
.projects-page .inst-name {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.projects-page .inst-name .tag {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gray);
	font-weight: 400;
}
.projects-page .inst-role {
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--silver);
	margin: 0 0 var(--space-3);
	max-width: var(--measure-prose);
}
.projects-page .ilinks {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 18px;
}
.projects-page .ilinks a,
.projects-page .ilinks span {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.02em;
}
.projects-page .ilinks a {
	color: var(--ember);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.projects-page .ilinks a:hover {
	text-decoration-thickness: 2px;
}
.projects-page .ilinks .priv {
	color: var(--gray);
}
.projects-page .grp-intro {
	font-size: var(--fs-small);
	color: var(--silver);
	margin: 0 0 var(--space-4);
	max-width: var(--measure-prose);
}
.projects-page .more li {
	margin-bottom: var(--space-3);
	max-width: var(--measure-prose);
}
.projects-page .inst-signals {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.03em;
	color: var(--gray);
}
.projects-page .inst-signals .sig {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.projects-page .inst-signals .dot {
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--gray);
	flex: none;
}
.projects-page .inst-signals .dot.active {
	background: var(--silver);
}
.projects-page .inst-signals .dot.recent {
	background: var(--ember);
}
.projects-page .inst-signals .ok {
	color: var(--silver);
}
.projects-page .inst-signals .chip {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 1px 7px;
	color: var(--gray);
	background: rgba(245, 242, 236, 0.05);
}
.projects-page .scale {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-4) var(--space-5);
	background: var(--buried);
	margin: 0 0 var(--space-4);
	max-width: var(--measure-prose);
}
.projects-page .scale-line {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-small);
	line-height: 1.6;
}
.projects-page .scale-stats {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--gray);
}
.projects-page .scale-stats strong {
	color: var(--white);
	font-weight: 700;
}
.projects-page .scale-stacks {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 var(--space-3);
}
.projects-page .scale-stacks .st {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.03em;
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 2px 8px;
	color: var(--gray);
}
.projects-page .scale-stacks .st b {
	color: var(--white);
	font-weight: 400;
	margin-left: 6px;
}
.projects-page .scale-foot {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--gray);
	margin: 0;
}
/* MCP Trust Pack: the one glass-telemetry panel on this page, same
   materiality as the homepage .dossier. Flat, hairline, no glow. */
.projects-page .trust-pack {
	margin: 0 0 var(--space-6);
	border: 1px solid var(--edge);
	border-radius: 2px;
	background: rgba(5, 5, 7, 0.86);
	color: var(--white);
	padding: clamp(22px, 3vw, 30px);
}
.projects-page .trust-pack-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
	gap: 24px;
	align-items: start;
}
.projects-page .trust-pack .eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ember);
	margin-bottom: 10px;
}
.projects-page .trust-pack h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--white);
	margin: 0 0 12px;
}
.projects-page .trust-pack p {
	color: var(--silver);
	font-size: var(--fs-small);
	line-height: 1.6;
	max-width: 68ch;
}
.projects-page .trust-pack strong {
	color: var(--white);
	font-weight: 600;
}
.projects-page .trust-steps {
	display: grid;
	gap: 8px;
	margin: 18px 0 0;
}
.projects-page .trust-step {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	align-items: start;
	color: var(--silver);
	font-size: var(--fs-small);
}
.projects-page .trust-step b {
	font-family: var(--font-mono);
	color: var(--ember);
	font-size: var(--fs-chip);
	padding-top: 1px;
}
.projects-page .command-stack {
	display: grid;
	gap: 10px;
}
.projects-page .command-card {
	border: 1px solid var(--edge);
	background: var(--buried);
	border-radius: 2px;
	padding: 13px 14px;
}
.projects-page .command-card span {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 6px;
}
.projects-page .command-card code {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--white);
	line-height: 1.55;
	white-space: normal;
	overflow-wrap: anywhere;
}
.projects-page .trust-pack .ilinks {
	margin-top: 18px;
}
@media (max-width: 880px) {
	.projects-page .trust-pack-grid {
		grid-template-columns: 1fr;
	}
}
/* === end island: projects === */

/* === island: next-word ======================================================
   The next-token sampling explainer. Was its own standalone Bench-deck
   identity (the now-retired bench-deck.css + a page-scoped block on top): sticky/blurred
   nav, Newsreader/Instrument Serif/Space Mono, and a bright-orange accent
   that was ALREADY fire-toned, so it maps straight onto --ember/--verm. The
   one non-fire hue (amber, used only for the "greedy" reference tick/badge/
   aside) is deliberately kept OFF the fire register and mapped to --silver
   instead: the page's whole visual argument is fire = the sampled path vs.
   neutral = the deterministic greedy path, and collapsing both onto ember
   would erase that distinction. --rust (the "cut" tail tag) maps to
   --crimson (fail/cut semantics). Small round glow-markers (.marble, the
   badge dot, the coda link dot, the read-hint pip) pick up the shared
   .pulse component - .pulse is the only selector the radius gate allows a
   50% circle on outside .core/.seam-core/.embers, and every one of these
   markers IS a small glowing round indicator by role, just recolored or
   JS-positioned. Scoped under body.next-word-page; body.instrument (already
   established by the Receipts/Instruments rooms) opts main.wrap into the
   wider instrument measure this page's two-column stage needs instead of
   inventing a page-local --maxw. */
body.next-word-page {
	scroll-behavior: smooth;
}
.next-word-page a {
	color: inherit;
}
.next-word-page input:focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 3px;
	border-radius: 2px;
}

/* nav */
.next-word-page header.nav .bar {
	max-width: var(--measure-instrument);
	margin: 0 auto;
	padding: 0 var(--space-5);
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.next-word-page .brand {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--silver);
	letter-spacing: 0.01em;
	text-decoration: none;
}
.next-word-page .brand b {
	color: var(--white);
	font-weight: 600;
}
.next-word-page .nav-drawer {
	position: relative;
}
.next-word-page .nav-drawer summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--gray);
	padding: 6px 2px;
}
.next-word-page .nav-drawer summary::-webkit-details-marker {
	display: none;
}
.next-word-page .nav-links {
	position: absolute;
	right: 0;
	top: 30px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 10px 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 190px;
	box-shadow: 0 18px 40px rgba(2, 2, 2, 0.45);
}
.next-word-page .nav-links a {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--silver);
	text-decoration: none;
	padding: 7px 12px;
	border-radius: 2px;
}
.next-word-page .nav-links a:hover {
	background: var(--buried);
	color: var(--ember);
}

/* hero */
.next-word-page .hero {
	padding: 64px 0 18px;
}
.next-word-page .eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.22em;
	color: var(--ember);
	text-transform: uppercase;
	margin: 0 0 18px;
}
.next-word-page .hero h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 6vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.018em;
	margin: 0 0 20px;
	max-width: 18ch;
	color: var(--white);
}
.next-word-page .hero h1 em {
	font-style: italic;
	color: var(--ember);
}
.next-word-page .dek {
	font-size: clamp(15px, 2.2vw, 18px);
	line-height: 1.62;
	color: var(--silver);
	max-width: 64ch;
	margin: 0 0 16px;
}
.next-word-page .badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--gray);
	border: 1px solid var(--edge);
	background: var(--ink);
	border-radius: 2px;
	padding: 7px 14px;
	margin: 0 0 14px;
	line-height: 1.4;
	max-width: 100%;
}
.next-word-page .badge .b-dot.pulse {
	width: 7px;
	height: 7px;
	background: var(--silver);
	box-shadow: 0 0 9px rgba(245, 242, 236, 0.5);
	flex: none;
	animation: none;
}
.next-word-page .read-hint {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--gray);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

/* context picker */
.next-word-page .picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 26px 0 4px;
}
.next-word-page .picker .lab {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--gray);
	text-transform: uppercase;
}
.next-word-page .chip {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--silver);
	cursor: pointer;
	border: 1px solid var(--edge);
	background: var(--buried);
	padding: 8px 14px;
	border-radius: 2px;
	transition: 0.2s;
}
.next-word-page .chip:hover {
	border-color: var(--verm);
	color: var(--white);
}
.next-word-page .chip[aria-pressed="true"] {
	color: var(--void);
	background: var(--ember);
	border-color: var(--ember);
	font-weight: 600;
}

/* stage */
.next-word-page .stage {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 22px;
	margin: 16px 0 0;
	align-items: start;
}
.next-word-page .panel {
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 2px;
}
.next-word-page .board {
	padding: 18px 20px 20px;
}
.next-word-page .panel-tag {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	color: var(--gray);
	text-transform: uppercase;
	margin: 0 0 12px;
}

/* prompt line */
.next-word-page .prompt-line {
	font-family: var(--font-mono);
	font-size: clamp(13px, 1.7vw, 15px);
	line-height: 1.7;
	color: var(--silver);
	background: var(--void);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 13px 15px;
	margin: 0 0 4px;
	word-break: break-word;
}
.next-word-page .prompt-line .c-prompt {
	color: var(--silver);
}
.next-word-page .prompt-line .c-tok {
	color: var(--ember);
	font-weight: 600;
}
.next-word-page .prompt-line .c-tok.just {
	background: rgba(228, 87, 46, 0.16);
	border-radius: 2px;
	padding: 0 2px;
}
.next-word-page .caret {
	display: inline-block;
	width: 8px;
	height: 1.05em;
	background: var(--ember);
	vertical-align: text-bottom;
	margin-left: 2px;
	animation: blink 1.05s steps(2) infinite;
}
@keyframes blink {
	50% {
		opacity: 0;
	}
}

/* distribution bars */
.next-word-page .dist-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 9px;
}
.next-word-page .dist-head h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--white);
}
.next-word-page .dist-head .tcaption {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--gray);
}
.next-word-page .dist-head .tcaption b {
	color: var(--ember);
	font-weight: 600;
}
.next-word-page ul.dist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.next-word-page .bar-row {
	display: grid;
	grid-template-columns: minmax(52px, 21%) 1fr 42px;
	align-items: center;
	gap: 9px;
}
.next-word-page .bar-tok {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--white);
	overflow-wrap: anywhere;
	display: flex;
	align-items: center;
	gap: 6px;
}
.next-word-page .bar-tok .state {
	font-size: 8.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gray);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 1px 4px;
	flex: none;
}
.next-word-page .bar-track {
	position: relative;
	height: 20px;
	background: var(--buried);
	border-radius: 2px;
	overflow: hidden;
}
.next-word-page .bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgba(228, 87, 46, 0.4);
	border-radius: 2px;
	transition:
		width 0.22s ease,
		background 0.22s,
		opacity 0.22s;
}
.next-word-page .bar-pct {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--silver);
	text-align: right;
}
.next-word-page .bar-row.kept .bar-fill {
	background: linear-gradient(90deg, rgba(228, 87, 46, 0.4), var(--verm));
}
.next-word-page .bar-row.chosen .bar-fill {
	background: linear-gradient(90deg, var(--verm), var(--ember));
}
.next-word-page .bar-row.chosen .bar-tok {
	color: var(--ember);
}
.next-word-page .bar-row.chosen .state {
	color: var(--void);
	background: var(--ember);
	border-color: var(--ember);
	font-weight: 600;
}
.next-word-page .bar-row.cut .bar-fill {
	background: var(--edge);
	opacity: 0.5;
}
.next-word-page .bar-row.cut .bar-tok {
	color: var(--gray);
}
.next-word-page .bar-row.cut .bar-pct {
	color: var(--gray);
}
.next-word-page .bar-row.cut .state {
	color: var(--white);
	background: rgba(158, 27, 34, 0.18);
	border-color: var(--crimson);
}
.next-word-page .bar-row.tailrow .bar-tok {
	color: var(--gray);
	font-style: normal;
}
.next-word-page .bar-row.tailrow .bar-fill {
	background: repeating-linear-gradient(
		45deg,
		var(--edge) 0 6px,
		rgba(245, 242, 236, 0.03) 6px 12px
	);
}
.next-word-page .bar-row.tailrow .bar-pct {
	color: var(--gray);
}

/* the weighted die strip */
.next-word-page .die-wrap {
	margin: 20px 0 0;
	border-top: 1px solid var(--edge);
	padding-top: 16px;
}
.next-word-page .die-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--gray);
	text-transform: uppercase;
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.next-word-page .die-label .roll-readout {
	color: var(--ember);
	letter-spacing: 0.02em;
	text-transform: none;
}
.next-word-page .die-strip-outer {
	position: relative;
	padding-top: 16px;
}
.next-word-page .marble.pulse {
	position: absolute;
	top: 0;
	width: 13px;
	height: 13px;
	margin-left: -6.5px;
	background: var(--white);
	box-shadow: 0 0 11px rgba(245, 242, 236, 0.7);
	opacity: 0;
	transition:
		left 0.5s ease,
		top 0.42s ease,
		opacity 0.25s;
	pointer-events: none;
	z-index: 3;
	animation: none;
}
.next-word-page .marble.show {
	opacity: 1;
}
.next-word-page .greedy-tick {
	position: absolute;
	top: 0;
	width: 2px;
	height: 13px;
	margin-left: -1px;
	background: var(--silver);
	opacity: 0.8;
	z-index: 2;
	transition: left 0.22s ease;
}
.next-word-page .die-strip {
	position: relative;
	display: flex;
	height: 40px;
	border-radius: 2px;
	overflow: hidden;
	border: 1px solid var(--edge);
}
.next-word-page .seg {
	position: relative;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid var(--void);
	transition:
		flex-grow 0.22s ease,
		background 0.2s;
	background: var(--buried);
	overflow: hidden;
}
.next-word-page .seg:last-child {
	border-right: none;
}
.next-word-page .seg .seg-tok {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--silver);
	white-space: nowrap;
	padding: 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.next-word-page .seg.land {
	background: var(--ember);
}
.next-word-page .seg.land .seg-tok {
	color: var(--void);
	font-weight: 600;
}
.next-word-page .die-note {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--gray);
	margin: 9px 0 0;
	line-height: 1.5;
}

/* roll + continuation */
.next-word-page .roll-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 18px 0 0;
}
.next-word-page .roll-btn {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--void);
	background: var(--ember);
	border: 1px solid var(--ember);
	border-radius: 2px;
	padding: 11px 20px;
	cursor: pointer;
	transition: 0.18s;
	letter-spacing: 0.01em;
}
.next-word-page .roll-btn:hover {
	background: var(--verm);
	border-color: var(--verm);
}
.next-word-page .roll-btn.done {
	background: var(--buried);
	color: var(--ember);
	border-color: var(--verm);
}
.next-word-page .ghostbtn {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--gray);
	background: none;
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 10px 14px;
	cursor: pointer;
	transition: 0.18s;
}
.next-word-page .ghostbtn:hover {
	color: var(--white);
	border-color: var(--verm);
}
.next-word-page .greedy-line {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
	margin: 14px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.next-word-page .greedy-line .amark {
	color: var(--silver);
}
.next-word-page .greedy-line b {
	color: var(--silver);
	font-weight: 600;
}

/* control panel */
.next-word-page .controls-panel {
	padding: 18px 18px 20px;
}
.next-word-page .ctrl {
	margin: 0 0 19px;
}
.next-word-page .ctrl:last-child {
	margin-bottom: 0;
}
.next-word-page .ctrl-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
}
.next-word-page .ctrl-name {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	color: var(--silver);
	text-transform: uppercase;
}
.next-word-page .ctrl-val {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ember);
	font-weight: 600;
}
.next-word-page input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 5px;
	border-radius: 2px;
	background: var(--buried);
	border: 1px solid var(--edge);
	outline-offset: 4px;
	accent-color: var(--ember);
	cursor: pointer;
}
.next-word-page input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: var(--ember);
	border: 2px solid var(--void);
	box-shadow: 0 0 8px rgba(228, 87, 46, 0.45);
	cursor: pointer;
}
.next-word-page input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 2px solid var(--void);
	border-radius: 4px;
	background: var(--ember);
	box-shadow: 0 0 8px rgba(228, 87, 46, 0.45);
	cursor: pointer;
}
.next-word-page .ctrl-hint {
	font-family: var(--font-mono);
	font-size: 9.5px;
	color: var(--gray);
	margin: 7px 0 0;
	line-height: 1.5;
}
.next-word-page .seg-toggle {
	display: inline-flex;
	width: 100%;
	border: 1px solid var(--edge);
	border-radius: 2px;
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: 11.5px;
}
.next-word-page .seg-toggle button {
	flex: 1;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--gray);
	padding: 9px 8px;
	transition: 0.18s;
}
.next-word-page .seg-toggle button[aria-pressed="true"] {
	background: var(--buried);
	color: var(--ember);
	font-weight: 600;
}
.next-word-page .ctrl-div {
	height: 1px;
	background: var(--edge);
	margin: 4px 0 19px;
}
.next-word-page .iconbtn {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--gray);
	cursor: pointer;
	width: 100%;
	text-align: left;
	background: none;
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 9px 12px;
	transition: 0.18s;
}
.next-word-page .iconbtn:hover {
	color: var(--white);
	border-color: var(--verm);
}
.next-word-page .iconbtn[aria-pressed="true"] {
	color: var(--ember);
	border-color: var(--verm);
}

/* narrative */
.next-word-page .sig {
	margin: 48px 0 0;
	border-top: 1px solid var(--edge);
	padding-top: 32px;
}
.next-word-page .sig .eye {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--gray);
	text-transform: uppercase;
	margin: 0 0 8px;
}
.next-word-page .sig h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(22px, 3.2vw, 32px);
	letter-spacing: -0.015em;
	margin: 0 0 20px;
	max-width: 26ch;
	color: var(--white);
}
.next-word-page .prose {
	max-width: 65ch;
}
.next-word-page .prose p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--silver);
	margin: 0 0 16px;
}
.next-word-page .prose p b {
	color: var(--white);
	font-weight: 600;
}
.next-word-page .prose .term {
	font-family: var(--font-mono);
	font-size: 13.5px;
	color: var(--ember);
}
.next-word-page .prose .honest {
	border-left: 2px solid var(--gray);
	padding-left: 14px;
	color: var(--gray);
	font-size: 14px;
}

/* coda */
.next-word-page .coda {
	margin: 50px 0 0;
	border-top: 1px solid var(--edge);
	padding-top: 30px;
}
.next-word-page .coda .rule-q {
	font-family: var(--font-display);
	font-size: clamp(18px, 2.6vw, 24px);
	line-height: 1.45;
	color: var(--silver);
	max-width: 56ch;
	margin: 0 0 22px;
}
.next-word-page .coda .rule-q b {
	color: var(--white);
	font-weight: 400;
	font-style: italic;
}
.next-word-page .coda-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.next-word-page .clink {
	font-family: var(--font-mono);
	font-size: 12.5px;
	text-decoration: none;
	color: var(--silver);
	border: 1px solid var(--edge);
	background: var(--ink);
	border-radius: 2px;
	padding: 10px 15px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: 0.2s;
}
.next-word-page .clink:hover {
	border-color: var(--verm);
	color: var(--ember);
}

.next-word-page footer {
	margin: 54px 0 60px;
	padding-top: 22px;
	border-top: 1px solid var(--edge);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--gray);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.next-word-page footer a {
	color: var(--silver);
	text-decoration: none;
}
.next-word-page footer a:hover {
	color: var(--ember);
}

@media (max-width: 820px) {
	.next-word-page header.nav .bar {
		padding: 0 var(--space-4);
	}
	.next-word-page .hero {
		padding: 42px 0 14px;
	}
	.next-word-page .stage {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.next-word-page .bar-fill,
	.next-word-page .seg,
	.next-word-page .caret {
		transition: none;
		animation: none;
	}
}
.next-word-page.rm .bar-fill {
	transition: none;
}
.next-word-page.rm .marble.pulse {
	transition: opacity 0.2s;
}
.next-word-page.rm .seg {
	transition: none;
}
/* === end island: next-word === */

/* === island: operator-os ====================================================
   The operator-OS topology explainer. Same Bench-deck template family as
   next-word (sticky/blurred nav, Newsreader/Instrument Serif/Space Mono,
   an already-fire-toned bright accent), plus one extra data-bearing hue:
   --steel (blue), which distinguished "organ" nodes from "writer" nodes and
   the spine in the SVG diagram and the reading panel's role text. Mapped by
   lightness tier instead of hue: writers stay dim (gray/edge, the quietest
   tier), organs read --silver (a bright neutral, the middle tier), and the
   spine keeps the fire register (--oxblood/--ember, the most prominent
   tier) - the same hierarchy the diagram already implies (spine matters
   most, organs are secondary, writer agents are peripheral inputs).
   --rust (the chaotic "tangle" mesh diagram and the .gotcha callout) maps
   to --crimson: it is literally the diagram's bad-alternative color, a
   clean fit for the fail/chaos semantic. SVG <circle> nodes are exempt from
   the radius gate (it only binds CSS border-radius); the few actual CSS
   circles (small glow-dot markers) reuse .pulse the same way next-word's
   did, and the numbered step badges become small squares instead. Scoped
   under body.operator-os-page; body.instrument (see next-word) supplies
   the wide two-column stage measure. */
body.operator-os-page {
	scroll-behavior: smooth;
}
.operator-os-page a {
	color: inherit;
}

/* nav */
.operator-os-page header.nav .bar {
	max-width: var(--measure-instrument);
	margin: 0 auto;
	padding: 0 var(--space-5);
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.operator-os-page .brand {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--silver);
	letter-spacing: 0.01em;
	text-decoration: none;
}
.operator-os-page .brand b {
	color: var(--white);
	font-weight: 600;
}
.operator-os-page .nav-drawer {
	position: relative;
}
.operator-os-page .nav-drawer summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--gray);
	padding: 6px 2px;
}
.operator-os-page .nav-drawer summary::-webkit-details-marker {
	display: none;
}
.operator-os-page .nav-links {
	position: absolute;
	right: 0;
	top: 30px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 10px 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 190px;
	box-shadow: 0 18px 40px rgba(2, 2, 2, 0.45);
}
.operator-os-page .nav-links a {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--silver);
	text-decoration: none;
	padding: 7px 12px;
	border-radius: 2px;
}
.operator-os-page .nav-links a:hover {
	background: var(--buried);
	color: var(--ember);
}

/* hero */
.operator-os-page .hero {
	padding: 64px 0 22px;
}
.operator-os-page .eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.22em;
	color: var(--ember);
	text-transform: uppercase;
	margin: 0 0 18px;
}
.operator-os-page .hero h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 6vw, 62px);
	line-height: 1.02;
	letter-spacing: -0.018em;
	margin: 0 0 20px;
	max-width: 17ch;
	color: var(--white);
}
.operator-os-page .hero h1 em {
	font-style: italic;
	color: var(--ember);
}
.operator-os-page .dek {
	font-size: clamp(15px, 2.2vw, 18px);
	line-height: 1.62;
	color: var(--silver);
	max-width: 62ch;
	margin: 0 0 14px;
}
.operator-os-page .read-hint {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--gray);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

/* stage */
.operator-os-page .stage {
	display: grid;
	grid-template-columns: 1fr 348px;
	gap: 22px;
	margin: 18px 0 0;
	align-items: start;
}
.operator-os-page .panel {
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 2px;
}
.operator-os-page .diagram {
	padding: 12px 12px 6px;
	position: relative;
	overflow: hidden;
}
.operator-os-page .diagram .stage-tag {
	position: absolute;
	top: 14px;
	left: 16px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	color: var(--gray);
	z-index: 2;
}
.operator-os-page .diagram svg.topo {
	width: 100%;
	height: auto;
	display: block;
	touch-action: manipulation;
}

/* nodes + edges */
.operator-os-page .edge {
	stroke: var(--edge);
	stroke-width: 1.4;
	fill: none;
}
.operator-os-page .edge.dash {
	stroke-dasharray: 3 5;
	opacity: 0.6;
}
.operator-os-page #flowEdge {
	stroke: var(--ember);
	stroke-width: 2.4;
	fill: none;
	opacity: 0;
	transition: opacity 0.2s;
}
.operator-os-page #flowEdge.on {
	opacity: 0.9;
}
.operator-os-page #flowEdge.march {
	stroke-dasharray: 7 7;
	animation: march 0.7s linear infinite;
}
@keyframes march {
	to {
		stroke-dashoffset: -14;
	}
}
.operator-os-page #particle {
	fill: var(--ember);
	opacity: 0;
	filter: url(#oglow);
}
.operator-os-page .node {
	cursor: pointer;
}
.operator-os-page .node .hit {
	fill: transparent;
}
.operator-os-page .ndot {
	fill: var(--buried);
	stroke: var(--edge);
	stroke-width: 1.5;
	transition:
		stroke 0.25s,
		fill 0.25s;
}
.operator-os-page .node.organ .ndot {
	stroke: var(--silver);
}
.operator-os-page .node.writer .ndot {
	fill: var(--void);
	stroke: var(--edge);
	opacity: 0.8;
}
.operator-os-page .node.spine .ndot {
	fill: var(--oxblood);
	stroke: var(--ember);
	stroke-width: 2.6;
}
.operator-os-page .node.lit .ndot {
	stroke: var(--ember);
	stroke-width: 2.6;
}
.operator-os-page .node.dim {
	opacity: 0.42;
}
.operator-os-page .nlabel {
	font-family: var(--font-mono);
	font-size: 10.5px;
	fill: var(--silver);
	text-anchor: middle;
	pointer-events: none;
}
.operator-os-page .node.writer .nlabel {
	fill: var(--gray);
	font-size: 10px;
}
.operator-os-page .nglyph {
	font-family: var(--font-mono);
	font-size: 10px;
	fill: var(--ember);
	text-anchor: middle;
	font-weight: 600;
	pointer-events: none;
}
.operator-os-page .spine-label {
	font-family: var(--font-display);
	font-size: 16px;
	fill: var(--white);
	text-anchor: middle;
	font-weight: 700;
	pointer-events: none;
}
.operator-os-page .spine-role {
	font-family: var(--font-mono);
	font-size: 8.5px;
	fill: var(--verm);
	text-anchor: middle;
	letter-spacing: 0.1em;
	pointer-events: none;
}
.operator-os-page #pulse1,
.operator-os-page #pulse2 {
	fill: none;
	stroke: rgba(228, 87, 46, 0.4);
	opacity: 0;
}
.operator-os-page .pulsing #pulse1 {
	animation: ping 1.1s ease 1;
}
.operator-os-page .pulsing #pulse2 {
	animation: ping 1.1s ease 0.14s 1;
}
@keyframes ping {
	0% {
		opacity: 0.55;
		r: 38px;
	}
	100% {
		opacity: 0;
		r: 70px;
	}
}
.operator-os-page .hint-ring {
	fill: none;
	stroke: var(--ember);
	stroke-width: 2;
	opacity: 0;
}
.operator-os-page .show-hint .hint-ring {
	animation: hint 1.6s ease-in-out infinite;
}
@keyframes hint {
	0%,
	100% {
		opacity: 0;
		r: 30px;
	}
	50% {
		opacity: 0.7;
		r: 40px;
	}
}

/* reading panel */
.operator-os-page .read {
	padding: 20px 22px 22px;
	min-height: 430px;
}
.operator-os-page .rp-kicker {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--gray);
	text-transform: uppercase;
	margin: 0 0 7px;
}
.operator-os-page .read h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	margin: 0 0 2px;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--white);
}
.operator-os-page .read .role {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--silver);
}
.operator-os-page .read .rule {
	height: 1px;
	background: var(--edge);
	margin: 15px 0;
}
.operator-os-page .read .blurb {
	font-size: 14px;
	line-height: 1.62;
	color: var(--silver);
	margin: 0;
}
.operator-os-page .now-wrap {
	margin-top: 16px;
}
.operator-os-page .now-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--gray);
	text-transform: uppercase;
	margin: 0 0 9px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.operator-os-page .now-label .ndot2.pulse {
	width: 7px;
	height: 7px;
}
.operator-os-page .steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: s;
}
.operator-os-page .steps li {
	position: relative;
	padding: 0 0 12px 28px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray);
	transition: color 0.25s;
}
.operator-os-page .steps li::before {
	counter-increment: s;
	content: counter(s);
	position: absolute;
	left: 0;
	top: 1px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--gray);
	border: 1px solid var(--edge);
	width: 17px;
	height: 17px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.25s;
}
.operator-os-page .steps li.active {
	color: var(--white);
}
.operator-os-page .steps li.active::before {
	color: var(--ember);
	border-color: var(--ember);
}
.operator-os-page .steps li.done::before {
	color: var(--ember);
	border-color: var(--verm);
}
.operator-os-page .steps li b {
	color: var(--white);
	font-weight: 600;
}
.operator-os-page .gotcha {
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.55;
	color: var(--white);
	background: rgba(158, 27, 34, 0.18);
	border-left: 2px solid var(--crimson);
	padding: 0.3em 11px;
}

/* controls */
.operator-os-page .controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
}
.operator-os-page .controls .lab {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--gray);
	text-transform: uppercase;
}
.operator-os-page .chip {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--silver);
	cursor: pointer;
	border: 1px solid var(--edge);
	background: var(--buried);
	padding: 8px 14px;
	border-radius: 2px;
	transition: 0.2s;
}
.operator-os-page .chip:hover {
	border-color: var(--verm);
	color: var(--white);
}
.operator-os-page .chip[aria-pressed="true"] {
	color: var(--void);
	background: var(--ember);
	border-color: var(--ember);
	font-weight: 600;
}
.operator-os-page .util {
	margin-left: auto;
	display: flex;
	gap: 8px;
	align-items: center;
}
.operator-os-page .iconbtn {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--gray);
	cursor: pointer;
	background: none;
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 7px 11px;
	transition: 0.2s;
}
.operator-os-page .iconbtn:hover {
	color: var(--white);
	border-color: var(--verm);
}
.operator-os-page .iconbtn[aria-pressed="true"] {
	color: var(--ember);
	border-color: var(--verm);
}

/* signature */
.operator-os-page .sig {
	margin: 46px 0 0;
	border-top: 1px solid var(--edge);
	padding-top: 30px;
}
.operator-os-page .sig .eye {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--gray);
	text-transform: uppercase;
	margin: 0 0 6px;
}
.operator-os-page .sig h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(22px, 3.2vw, 32px);
	letter-spacing: -0.015em;
	margin: 0 0 18px;
	max-width: 24ch;
	color: var(--white);
}
.operator-os-page .sig-toggle {
	display: inline-flex;
	border: 1px solid var(--edge);
	border-radius: 2px;
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: 12px;
	margin-bottom: 18px;
}
.operator-os-page .sig-toggle button {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--gray);
	padding: 9px 16px;
}
.operator-os-page .sig-toggle button[aria-pressed="true"] {
	background: var(--buried);
	color: var(--ember);
	font-weight: 600;
}
.operator-os-page .sig-stage {
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 8px;
}
.operator-os-page .sig-stage svg {
	width: 100%;
	height: auto;
	display: block;
	max-height: 320px;
}
.operator-os-page .smesh,
.operator-os-page .sstar {
	transition: opacity 0.5s ease;
}
.operator-os-page .sig-stage[data-mode="spine"] .smesh {
	opacity: 0;
}
.operator-os-page .sig-stage[data-mode="tangle"] .sstar {
	opacity: 0;
}
.operator-os-page .smesh path {
	stroke: var(--crimson);
	stroke-width: 1;
	opacity: 0.5;
	fill: none;
}
.operator-os-page .sstar .sedge {
	stroke: var(--ember);
	stroke-width: 1.5;
	fill: none;
	stroke-dasharray: 240;
	stroke-dashoffset: 240;
	transition: stroke-dashoffset 0.6s ease;
}
.operator-os-page .sig-stage[data-mode="spine"] .sstar .sedge {
	stroke-dashoffset: 0;
}
.operator-os-page .snode {
	fill: var(--buried);
	stroke-width: 1.5;
}
.operator-os-page .smesh .snode {
	stroke: var(--crimson);
}
.operator-os-page .sstar .snode {
	stroke: var(--silver);
}
.operator-os-page .sspine {
	fill: var(--oxblood);
	stroke: var(--ember);
	stroke-width: 2.6;
}
.operator-os-page .sig-cap {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
	margin: 12px 2px 0;
}
.operator-os-page .thesis {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(20px, 3vw, 30px);
	color: var(--white);
	line-height: 1.3;
	max-width: 28ch;
	margin: 26px 0 0;
	letter-spacing: -0.01em;
}
.operator-os-page .thesis .q {
	color: var(--ember);
}

/* coda */
.operator-os-page .coda {
	margin: 50px 0 0;
	border-top: 1px solid var(--edge);
	padding-top: 30px;
}
.operator-os-page .coda .rule-q {
	font-family: var(--font-display);
	font-size: clamp(18px, 2.6vw, 24px);
	line-height: 1.45;
	color: var(--silver);
	max-width: 54ch;
	margin: 0 0 22px;
}
.operator-os-page .coda .rule-q b {
	color: var(--white);
	font-weight: 400;
	font-style: italic;
}
.operator-os-page .coda-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.operator-os-page .clink {
	font-family: var(--font-mono);
	font-size: 12.5px;
	text-decoration: none;
	color: var(--silver);
	border: 1px solid var(--edge);
	background: var(--ink);
	border-radius: 2px;
	padding: 10px 15px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: 0.2s;
}
.operator-os-page .clink:hover {
	border-color: var(--verm);
	color: var(--ember);
}

.operator-os-page footer {
	margin: 54px 0 60px;
	padding-top: 22px;
	border-top: 1px solid var(--edge);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--gray);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.operator-os-page footer a {
	color: var(--silver);
	text-decoration: none;
}
.operator-os-page footer a:hover {
	color: var(--ember);
}

@media (max-width: 820px) {
	.operator-os-page header.nav .bar {
		padding: 0 var(--space-4);
	}
	.operator-os-page .hero {
		padding: 42px 0 16px;
	}
	.operator-os-page .stage {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.operator-os-page .read {
		min-height: 0;
	}
	.operator-os-page .util {
		margin-left: 0;
		width: 100%;
		margin-top: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.operator-os-page #flowEdge.march,
	.operator-os-page .pulsing #pulse1,
	.operator-os-page .pulsing #pulse2,
	.operator-os-page .show-hint .hint-ring,
	.operator-os-page .sstar .sedge {
		animation: none;
		transition: none;
	}
}
.operator-os-page.rm #flowEdge.march {
	animation: none;
}
.operator-os-page.rm .pulsing #pulse1,
.operator-os-page.rm .pulsing #pulse2 {
	animation: none;
}
.operator-os-page.rm .show-hint .hint-ring {
	animation: none;
}
.operator-os-page.rm .sstar .sedge {
	transition: none;
}
/* === end island: operator-os === */

/* === island: fleet ==========================================================
   Fleet Mission Control: the biggest hand-authored island, its own bespoke
   atmosphere (.bg/.grain, predating the shared .scene system) and an SVG
   topology with five PER-AGENT colors that carry real data meaning (which
   writer fired which pulse). Every node's 2-letter glyph + label is already
   the primary identifier, so color here is a secondary/reinforcing signal,
   not the sole one - that's what makes a monochrome+fire remap safe. Two
   writers were already near-neutral (claude.ai's ivory, the ops-plane's
   blue) and map straight onto --white/--gray; the three warm writers (cc,
   codex, notion-os) spread across the fire register by brightness
   (--ember/--verm/--crimson). The three "peripheral" nodes (weaker dashed
   seams: file poll, json on disk, local mcp) collapse onto one --gray
   rather than borrowing a writer's color, undoing a minor identity mix-up
   in the original design. The two "standalone" nodes (no edges into the
   hub at all) get --shadow, reinforcing their already-dimmed opacity. Status
   semantics per the design doc: the "live"/pass indicators (the hero kicker
   dot, the chip dots, the fact-value bullet) read --silver, not a green
   --pass token that no longer exists. Kept its own inline <style> per
   AGENTS.md's historical fleet row, but per this task's explicit scope that
   convention is retired here: the block moves into this shared island
   section like every other hand-authored page (AGENTS.md updated in the
   same commit). Small round glow-markers reuse .pulse; everything else
   (per-agent legend dots, status-table dots) becomes a small flat square,
   consistent with the flat identity and the fact most of these are
   JS-colored swatches, not glow affordances. Scoped under body.fleet-page. */
html:has(body.fleet-page) {
	overflow-x: hidden;
}
.fleet-page {
	overflow-x: hidden;
	position: relative;
}
.fleet-page .bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(
			900px 600px at 78% -10%,
			rgba(228, 87, 46, 0.1),
			transparent 60%
		),
		radial-gradient(
			800px 700px at 5% 8%,
			rgba(110, 17, 25, 0.06),
			transparent 55%
		),
		var(--void);
}
.fleet-page .bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(
		ellipse 120% 80% at 50% 0%,
		var(--void) 35%,
		transparent 90%
	);
}
.fleet-page .grain {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fleet-page .wrap {
	max-width: var(--measure-instrument);
	margin: 0 auto;
	padding: 0 28px;
}

/* nav */
.fleet-page header.nav {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(10px);
	background: linear-gradient(
		to bottom,
		rgba(5, 5, 7, 0.82),
		rgba(5, 5, 7, 0.45)
	);
	border-bottom: 1px solid var(--edge);
}
.fleet-page .nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	gap: 18px;
}
.fleet-page .brand {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--silver);
	white-space: nowrap;
	text-decoration: none;
}
.fleet-page .brand b {
	color: var(--white);
	font-weight: 600;
}
.fleet-page summary:focus-visible,
.fleet-page input:focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 3px;
	border-radius: 2px;
}
.fleet-page .nav-drawer {
	position: relative;
}
.fleet-page .nav-drawer > summary {
	display: none;
}
.fleet-page .nav-links {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.fleet-page .nav-links a {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--gray);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 2px;
	transition:
		color 0.2s ease,
		background 0.2s ease;
	white-space: nowrap;
}
.fleet-page .nav-links a:hover,
.fleet-page .nav-links a:focus-visible {
	color: var(--ember);
	background: rgba(228, 87, 46, 0.08);
}
@media (max-width: 720px) {
	.fleet-page .nav-inner {
		gap: 10px;
	}
	.fleet-page .brand {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.fleet-page .nav-drawer {
		flex: none;
	}
	.fleet-page .nav-drawer > summary {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		list-style: none;
		font-family: var(--font-mono);
		font-size: 12px;
		letter-spacing: 0.02em;
		color: var(--silver);
		padding: 6px 10px;
		border: 1px solid var(--edge);
		border-radius: 2px;
	}
	.fleet-page .nav-drawer > summary::-webkit-details-marker {
		display: none;
	}
	.fleet-page .nav-drawer > summary::after {
		content: "▾";
		color: var(--gray);
	}
	.fleet-page .nav-drawer[open] > summary::after {
		content: "▴";
	}
	.fleet-page .nav-drawer .nav-links {
		display: none;
	}
	.fleet-page .nav-drawer[open] .nav-links {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 0;
		top: calc(100% + 8px);
		z-index: 30;
		min-width: 200px;
		padding: 8px;
		gap: 2px;
		background: var(--ink);
		border: 1px solid var(--edge);
		border-radius: 2px;
		box-shadow: 0 12px 32px rgba(2, 2, 2, 0.5);
	}
}
.fleet-page .stage-fallback {
	display: none;
}
@media (max-width: 600px) {
	.fleet-page #stage {
		display: none;
	}
	.fleet-page .stage-fallback {
		display: block;
		padding: 18px;
		color: var(--silver);
		font-size: 15px;
		line-height: 1.6;
	}
	.fleet-page .stage-fallback ul {
		margin: 10px 0 10px 18px;
	}
	.fleet-page .stage-fallback strong {
		color: var(--ember);
	}
}

/* hero */
.fleet-page .hero {
	padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 44px);
}
.fleet-page .hero.wrap {
	padding-inline: 28px;
}
.fleet-page .kicker {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ember);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}
.fleet-page .kicker::before {
	content: "";
	width: 30px;
	height: 1px;
	background: linear-gradient(90deg, rgba(201, 58, 36, 0.55), transparent);
}
.fleet-page .kicker .live-dot.pulse {
	width: 7px;
	height: 7px;
}
.fleet-page .hero h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(38px, 6.4vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.018em;
	margin-bottom: 24px;
	max-width: 18ch;
	color: var(--white);
}
.fleet-page .hero h1 .accent {
	font-style: italic;
	color: var(--ember);
	font-weight: 400;
}
.fleet-page .hero p.lede {
	max-width: 66ch;
	font-size: clamp(16px, 1.9vw, 19px);
	color: var(--silver);
	line-height: 1.62;
}
.fleet-page .hero p.lede strong {
	color: var(--white);
	font-weight: 600;
}

/* provenance strip */
.fleet-page .provenance {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
}
.fleet-page .chip {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.03em;
	color: var(--silver);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 5px 12px;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	background: rgba(5, 5, 7, 0.6);
	max-width: 100%;
	overflow-wrap: anywhere;
}
.fleet-page .chip b {
	min-width: 0;
	overflow-wrap: anywhere;
}
@media (max-width: 480px) {
	.fleet-page .chip {
		display: flex;
		width: 100%;
	}
}
.fleet-page .chip .dot {
	width: 6px;
	height: 6px;
	border-radius: 2px;
}
.fleet-page .chip .dot.live.pulse {
	width: 6px;
	height: 6px;
}
.fleet-page .chip .dot.anno {
	background: transparent;
	border: 1px solid var(--gray);
}
.fleet-page .chip b {
	color: var(--white);
	font-weight: 500;
}

/* panels */
.fleet-page .panel {
	background: linear-gradient(180deg, var(--ink), var(--buried));
	border: 1px solid var(--edge);
	border-radius: 2px;
	overflow: hidden;
}
.fleet-page .panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--edge);
}
.fleet-page .panel-head .ph-label {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gray);
}
.fleet-page .panel-head .ph-side {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

/* mission layout */
.fleet-page .mission {
	padding: clamp(28px, 4vw, 48px) 0 0;
}
.fleet-page .mission.wrap {
	padding-inline: 28px;
}
.fleet-page .mission-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.85fr) minmax(290px, 1fr);
	gap: 18px;
	align-items: stretch;
}
@media (max-width: 940px) {
	.fleet-page .mission-grid {
		grid-template-columns: 1fr;
	}
}

/* stage */
.fleet-page .stage-body {
	position: relative;
}
.fleet-page .stage-body svg {
	display: block;
	width: 100%;
	height: auto;
}
.fleet-page svg .edge {
	stroke: var(--edge);
	stroke-width: 1.2;
	fill: none;
}
.fleet-page svg .edge.writer {
	stroke: rgba(228, 87, 46, 0.28);
}
.fleet-page svg .edge.dashed {
	stroke-dasharray: 4 5;
}
.fleet-page svg .edge-label {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.06em;
	fill: var(--gray);
}
.fleet-page svg .node {
	cursor: pointer;
}
.fleet-page svg .node circle.core {
	fill: var(--buried);
	stroke: var(--edge);
	stroke-width: 1.2;
	transition: stroke 0.25s ease;
}
.fleet-page svg .node:hover circle.core,
.fleet-page svg .node.pinned circle.core {
	stroke: var(--node-c, var(--ember));
}
.fleet-page svg .node circle.halo {
	fill: none;
	stroke: var(--node-c, var(--ember));
	stroke-width: 1.4;
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
}
.fleet-page svg .node .glyph {
	fill: var(--node-c, var(--ember));
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
}
.fleet-page svg .node-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	fill: var(--white);
	pointer-events: none;
}
.fleet-page svg .node-sub {
	font-family: var(--font-mono);
	font-size: 9.5px;
	fill: var(--gray);
	pointer-events: none;
}
.fleet-page svg .node.dim circle.core {
	stroke: var(--edge);
}
.fleet-page svg .node.dim .glyph {
	fill: var(--gray);
}
.fleet-page svg .node.dim .node-label {
	fill: var(--gray);
}
.fleet-page svg .hub-ring {
	fill: none;
	stroke: rgba(228, 87, 46, 0.4);
	stroke-width: 1;
	stroke-dasharray: 3 7;
	transform-origin: center;
	transform-box: fill-box;
	animation: spin 60s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.fleet-page svg .hub-core {
	fill: rgba(228, 87, 46, 0.07);
	stroke: rgba(228, 87, 46, 0.4);
	stroke-width: 1.4;
}
.fleet-page svg .hub-flash {
	fill: none;
	stroke: var(--ember);
	stroke-width: 1.6;
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
}
.fleet-page svg .hub-count {
	font-family: var(--font-mono);
	font-size: 21px;
	font-weight: 600;
	fill: var(--ember);
	text-anchor: middle;
	font-variant-numeric: tabular-nums;
}
.fleet-page svg .hub-count-label {
	font-family: var(--font-mono);
	font-size: 8.5px;
	letter-spacing: 0.14em;
	fill: var(--gray);
	text-anchor: middle;
	text-transform: uppercase;
}
.fleet-page svg .pulse {
	pointer-events: none;
}

/* replay deck */
.fleet-page .deck {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-top: 1px solid var(--edge);
}
.fleet-page .btn {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--void);
	background: var(--ember);
	border: none;
	border-radius: 2px;
	padding: 9px 16px;
	cursor: pointer;
	font-weight: 600;
	transition:
		filter 0.2s ease,
		transform 0.15s ease;
}
.fleet-page .btn:hover {
	filter: brightness(1.1);
}
.fleet-page .btn:active {
	transform: scale(0.97);
}
.fleet-page .speeds {
	display: flex;
	gap: 4px;
}
.fleet-page .speed {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
	background: transparent;
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 6px 9px;
	cursor: pointer;
	transition:
		color 0.2s,
		border-color 0.2s;
}
.fleet-page .speed.on {
	color: var(--ember);
	border-color: var(--verm);
}
.fleet-page .clock {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--white);
	font-variant-numeric: tabular-nums;
	margin-left: auto;
}
.fleet-page .clock .tz {
	color: var(--gray);
	font-size: 10.5px;
	margin-left: 8px;
}
.fleet-page .timeline {
	position: relative;
	height: 30px;
	margin: 0 18px 16px;
}
.fleet-page .ticks {
	position: absolute;
	inset: 8px 0 8px;
	pointer-events: none;
}
.fleet-page .ticks span {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 1px;
	opacity: 0.65;
}
.fleet-page .playhead {
	position: absolute;
	top: 2px;
	bottom: 2px;
	width: 1.5px;
	background: var(--white);
	opacity: 0.9;
	pointer-events: none;
	box-shadow: 0 0 8px rgba(245, 242, 236, 0.4);
}
.fleet-page .timeline input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	margin: 0;
}
.fleet-page .timeline .rail {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--edge);
}

/* rail: ticker + inspector */
.fleet-page .rail {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}
.fleet-page .ticker-body {
	padding: 6px 0;
	max-height: 322px;
	overflow-y: auto;
	scrollbar-width: thin;
}
.fleet-page .tick-row {
	display: grid;
	grid-template-columns: 14px 52px 1fr;
	gap: 10px;
	align-items: baseline;
	padding: 7px 18px;
	border-bottom: 1px solid rgba(2, 2, 2, 0.6);
	animation: rowin 0.4s ease;
}
@keyframes rowin {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.fleet-page .tick-row .src {
	width: 7px;
	height: 7px;
	border-radius: 2px;
	position: relative;
	top: -1px;
}
.fleet-page .tick-row .t {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--gray);
	font-variant-numeric: tabular-nums;
}
.fleet-page .tick-row .what {
	font-size: 13px;
	color: var(--silver);
	line-height: 1.45;
	min-width: 0;
	overflow-wrap: anywhere;
}
.fleet-page .tick-row .what b {
	color: var(--white);
	font-weight: 600;
	font-family: var(--font-mono);
	font-size: 12px;
}
.fleet-page .tick-row.loopmark .what {
	color: var(--ember);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
}

.fleet-page .inspector-body {
	padding: 16px 18px 18px;
}
.fleet-page .inspector-body h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.01em;
	margin-bottom: 2px;
	color: var(--white);
}
.fleet-page .inspector-body .role-tag {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ins-c, var(--ember));
	margin-bottom: 12px;
}
.fleet-page .inspector-body p {
	font-size: 14px;
	color: var(--silver);
	line-height: 1.6;
	margin-bottom: 12px;
}
.fleet-page .inspector-body .facts {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fleet-page .fact {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 11.5px;
}
.fleet-page .fact .k {
	color: var(--gray);
}
.fleet-page .fact .v {
	color: var(--white);
	text-align: right;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.fleet-page .fact .v.live::after {
	content: "●";
	color: var(--silver);
	font-size: 8px;
	margin-left: 6px;
	position: relative;
	top: -1px;
}

/* telemetry grid */
.fleet-page .telemetry {
	padding: 18px 0 0;
}
.fleet-page .tele-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1020px) {
	.fleet-page .tele-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.fleet-page .tele-grid {
		grid-template-columns: 1fr;
	}
}
.fleet-page .tele-body {
	padding: 14px 18px 18px;
}
.fleet-page .big-num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 42px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--white);
	font-variant-numeric: tabular-nums;
}
.fleet-page .big-num small {
	font-size: 16px;
	color: var(--gray);
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
}
.fleet-page .bar-row {
	display: grid;
	grid-template-columns: 86px 1fr 48px;
	gap: 10px;
	align-items: center;
	margin-top: 10px;
}
.fleet-page .bar-row .bl {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--silver);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fleet-page .bar-row .bar {
	height: 8px;
	border-radius: 2px;
	background: var(--void);
	overflow: hidden;
}
.fleet-page .bar-row .bar i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: rgba(228, 87, 46, 0.4);
	transition: width 1s ease;
}
.fleet-page .bar-row .bv {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.fleet-page .sub-note {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--gray);
	margin-top: 12px;
	line-height: 1.5;
}

/* how to read */
.fleet-page .how {
	padding: clamp(44px, 7vw, 76px) 0 clamp(56px, 8vw, 96px);
}
.fleet-page .how.wrap {
	padding-inline: 28px;
}
.fleet-page .how-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
@media (max-width: 860px) {
	.fleet-page .how-grid {
		grid-template-columns: 1fr;
	}
}
.fleet-page .how h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 38px);
	letter-spacing: -0.015em;
	margin-bottom: 18px;
	color: var(--white);
}
.fleet-page .how p {
	color: var(--silver);
	font-size: 16px;
	line-height: 1.66;
	margin-bottom: 14px;
	max-width: 62ch;
}
.fleet-page .how p strong {
	color: var(--white);
	font-weight: 600;
}
.fleet-page .pull {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(20px, 2.6vw, 27px);
	line-height: 1.4;
	color: var(--white);
	border-left: 2px solid var(--verm);
	padding-left: 20px;
	margin: 26px 0;
}
.fleet-page .truth-table {
	border: 1px solid var(--edge);
	border-radius: 2px;
	overflow: hidden;
}
.fleet-page .truth-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	border-bottom: 1px solid var(--edge);
}
.fleet-page .truth-row:last-child {
	border-bottom: none;
}
.fleet-page .truth-row .tr-k {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 13px 14px;
	color: var(--gray);
	text-transform: uppercase;
	border-right: 1px solid var(--edge);
	display: flex;
	align-items: center;
	gap: 7px;
}
.fleet-page .truth-row .tr-k .dot {
	width: 6px;
	height: 6px;
	border-radius: 2px;
	flex: none;
}
.fleet-page .truth-row .tr-k .dot.pulse {
	width: 6px;
	height: 6px;
}
.fleet-page .truth-row .tr-v {
	padding: 12px 16px;
	font-size: 13.5px;
	color: var(--silver);
	line-height: 1.55;
}
.fleet-page .truth-row .tr-v code {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--white);
}

/* error banner */
.fleet-page .data-error {
	display: none;
	margin: 18px 0 0;
	padding: 16px 18px;
	border: 1px solid rgba(158, 27, 34, 0.5);
	border-radius: 2px;
	background: rgba(158, 27, 34, 0.07);
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--white);
	line-height: 1.6;
}
.fleet-page .data-error.show {
	display: block;
}

/* footer */
.fleet-page footer {
	border-top: 1px solid var(--edge);
	padding: 28px 0 44px;
}
.fleet-page .foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.fleet-page .foot,
.fleet-page .foot a {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--gray);
}
.fleet-page .foot a {
	text-decoration: none;
	transition: color 0.2s;
}
.fleet-page .foot a:hover {
	color: var(--ember);
}

/* load reveals */
.fleet-page .reveal {
	opacity: 0;
	transform: translateY(14px);
	animation: reveal 0.8s ease forwards;
}
@keyframes reveal {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fleet-page .reveal,
	.fleet-page svg .hub-ring,
	.fleet-page .tick-row {
		animation: none;
		opacity: 1;
		transform: none;
	}
}
/* === end island: fleet === */

/* === island: operant deck ===================================================
   The last bench-deck.css consumers: /operant (the full benchmark page) and
   /operant/scorer (the standalone iframe-able embed), both built by
   scripts/build-operant.py as Python f-string templates. Fonts were already
   Forge-native (JetBrains Mono / Playfair Display / Literata - T6's family-E
   pass covered these); only colors/radii/layout needed the move. Per-model
   colors (Opus/Sonnet/Haiku) live in the vendored data source
   (scripts/sources/operant/operant-figures.json) and are out of scope here -
   they're content, not styling, and untouched. --amber (withhold/refuse/
   escalate/reroute decision chips, the false-negative confusion-matrix
   border) maps to --ember: these are the "not yet resolved / caution" tier,
   the same role "stale" plays in the design doc's status semantics.
   --pass (green) maps to --silver throughout, same as every other island.
   --steel (quiet histogram bars, a label color) maps to --gray. Small round
   glow-markers reuse .pulse. Scoped under body.operant-deck (both pages);
   .instrument on the full page only, for the same wide two-column-stage
   measure as next-word/operator-os/fleet - the embed keeps its own fixed
   760px .embed-wrap and doesn't need it. */
body.operant-deck {
	scroll-behavior: smooth;
}
.operant-deck a {
	color: inherit;
}
.operant-deck h2 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
}

/* nav (full page only) */
.operant-deck header.nav .bar {
	max-width: var(--measure-instrument);
	margin: 0 auto;
	padding: 0 var(--space-5);
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.operant-deck .brand {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--silver);
	letter-spacing: 0.01em;
	text-decoration: none;
}
.operant-deck .brand b {
	color: var(--white);
	font-weight: 600;
}
.operant-deck .nav-drawer {
	position: relative;
}
.operant-deck .nav-drawer summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--gray);
	padding: 6px 2px;
}
.operant-deck .nav-drawer summary::-webkit-details-marker {
	display: none;
}
.operant-deck .nav-links {
	position: absolute;
	right: 0;
	top: 30px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 10px 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 210px;
	box-shadow: 0 18px 40px rgba(2, 2, 2, 0.45);
	z-index: 30;
}
.operant-deck .nav-links a {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--silver);
	text-decoration: none;
	padding: 7px 12px;
	border-radius: 2px;
}
.operant-deck .nav-links a:hover {
	background: var(--buried);
	color: var(--ember);
}

/* hero (full page) / embed header */
.operant-deck .eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ember);
	text-transform: uppercase;
	margin: 0 0 16px;
}
.operant-deck .hero {
	padding: 62px 0 14px;
}
.operant-deck .hero h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 5.6vw, 60px);
	line-height: 1.03;
	letter-spacing: -0.018em;
	margin: 0 0 20px;
	max-width: 20ch;
	color: var(--white);
}
.operant-deck .hero h1 em {
	font-style: italic;
	color: var(--ember);
}
.operant-deck .dek {
	font-size: clamp(15px, 2.2vw, 18px);
	line-height: 1.62;
	color: var(--silver);
	max-width: 64ch;
	margin: 0 0 14px;
}
.operant-deck .read-hint {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.03em;
	color: var(--gray);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}
.operant-deck .caveat {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--gray);
	border-left: 2px solid var(--edge);
	padding-left: 11px;
	margin: 14px 0 0;
	max-width: 64ch;
}
.operant-deck .embed-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 22px 18px;
}
.operant-deck .embed-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--ember);
	text-transform: uppercase;
	margin: 0 0 12px;
}
.operant-deck h1 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	font-size: clamp(21px, 3.6vw, 28px);
	line-height: 1.12;
	margin: 0 0 8px;
	color: var(--white);
}
.operant-deck h1 em {
	font-style: italic;
	color: var(--ember);
}
.operant-deck .embed-lead {
	color: var(--silver);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 16px;
	max-width: 62ch;
}
.operant-deck h3 {
	font-family: var(--font-mono);
	margin: 0;
}

/* sections + panels */
.operant-deck section.band-section {
	margin: 30px 0 0;
}
.operant-deck .sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin: 54px 0 4px;
	border-top: 1px solid var(--edge);
	padding-top: 30px;
}
.operant-deck .sec-head .eyebrow {
	margin: 0;
}
.operant-deck .sec-head h2 {
	font-size: clamp(22px, 3.4vw, 34px);
	margin: 0;
	flex: 1 1 100%;
}
.operant-deck .sec-lead {
	color: var(--silver);
	max-width: 60ch;
	margin: 6px 0 0;
	font-size: 15px;
}
.operant-deck .panel {
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 2px;
}

/* leaderboard */
.operant-deck .metric-toggle {
	display: inline-flex;
	border: 1px solid var(--edge);
	border-radius: 2px;
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: 12px;
	margin: 18px 0 14px;
}
.operant-deck .metric-toggle button {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--gray);
	padding: 9px 15px;
}
.operant-deck .metric-toggle button[aria-pressed="true"] {
	background: var(--buried);
	color: var(--ember);
	font-weight: 600;
}
.operant-deck .lead-stage {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 18px;
	align-items: start;
}
.operant-deck .chart-wrap {
	padding: 14px 16px 8px;
}
.operant-deck svg.bands {
	width: 100%;
	height: auto;
	display: block;
}
.operant-deck svg.bands[hidden] {
	display: none;
}
.operant-deck .bands .grid {
	stroke: var(--edge);
	stroke-width: 1;
}
.operant-deck .bands .tick,
.operant-deck .bands .axis-cap {
	font-family: var(--font-mono);
	fill: var(--gray);
}
.operant-deck .bands .tick {
	font-size: 10px;
	text-anchor: middle;
}
.operant-deck .bands .axis-cap {
	font-size: 9.5px;
	letter-spacing: 0.02em;
}
.operant-deck .bands .gap {
	fill: rgba(228, 87, 46, 0.1);
	stroke: rgba(228, 87, 46, 0.4);
	stroke-dasharray: 3 4;
	stroke-width: 1;
}
.operant-deck .bands .gap-label {
	font-family: var(--font-mono);
	font-size: 10px;
	fill: var(--ember);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.operant-deck .bands .gap-sub {
	font-family: var(--font-mono);
	font-size: 10px;
	fill: var(--verm);
}
.operant-deck .bands .row-name {
	font-family: var(--font-display);
	font-size: 15px;
	fill: var(--white);
}
.operant-deck .bands .row-val {
	font-family: var(--font-mono);
	font-size: 11px;
	fill: var(--silver);
}
.operant-deck .bands .range {
	opacity: 0.16;
}
.operant-deck .bands .ci {
	opacity: 0.5;
}
.operant-deck .bands .rep {
	opacity: 0.92;
}
.operant-deck .bands .mean {
	stroke-width: 2.6;
}
.operant-deck .bands .nnote,
.operant-deck .bands .orchval {
	font-family: var(--font-mono);
	font-size: 10px;
	fill: var(--gray);
}
.operant-deck .bands .orchbar {
	opacity: 0.62;
}
.operant-deck .tier-tabs {
	display: flex;
	gap: 7px;
	margin: 8px 0 0;
	flex-wrap: wrap;
}
.operant-deck .tier-tab {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--silver);
	cursor: pointer;
	border: 1px solid var(--edge);
	background: var(--buried);
	padding: 7px 12px;
	border-radius: 2px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: 0.18s;
}
.operant-deck .tier-tab .sw {
	width: 9px;
	height: 9px;
	border-radius: 2px;
}
.operant-deck .tier-tab:hover {
	border-color: var(--verm);
	color: var(--white);
}
.operant-deck .tier-tab[aria-pressed="true"] {
	border-color: var(--verm);
	background: var(--void);
	color: var(--white);
}
.operant-deck .detail {
	padding: 18px 18px 20px;
	min-height: 300px;
}
.operant-deck .dp-kicker {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--gray);
	text-transform: uppercase;
	margin: 0 0 6px;
}
.operant-deck .dp-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 6px;
	color: var(--white);
}
.operant-deck .dp-big {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 38px;
	line-height: 1;
	margin: 6px 0 14px;
	color: var(--white);
}
.operant-deck .dp-pm {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--gray);
	margin-left: 10px;
}
.operant-deck .dp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px 12px;
	margin: 0 0 14px;
}
.operant-deck .dp-grid .dp-l {
	display: block;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.08em;
	color: var(--gray);
	text-transform: uppercase;
}
.operant-deck .dp-grid .dp-v {
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--white);
}
.operant-deck .dp-reps-l {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.08em;
	color: var(--gray);
	text-transform: uppercase;
	margin: 0 0 6px;
}
.operant-deck .dp-reps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}
.operant-deck .dp-dot {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--silver);
	border: 1px solid var(--edge);
	border-left: 3px solid var(--c);
	border-radius: 2px;
	padding: 3px 7px;
}
.operant-deck .dp-note {
	font-size: 13px;
	color: var(--silver);
	line-height: 1.55;
	margin: 0;
	border-top: 1px solid var(--edge);
	padding-top: 12px;
}

.operant-deck .cp {
	margin: 16px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--edge);
	border-radius: 2px;
	background: var(--void);
}
.operant-deck .cp-title {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gray);
	margin: 0 0 6px;
}
.operant-deck .cp-proto {
	font-size: 12.5px;
	color: var(--gray);
	margin: 0 0 10px;
}
.operant-deck .cp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 10px;
}
.operant-deck .cp-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	font-family: var(--font-mono);
	font-size: 12.5px;
}
.operant-deck .cp-table th {
	text-align: right;
	font-weight: 400;
	color: var(--gray);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0 0 7px;
	border-bottom: 1px solid var(--edge);
}
.operant-deck .cp-table th:first-child,
.operant-deck .cp-table th:nth-child(2) {
	text-align: left;
}
.operant-deck .cp-table td {
	text-align: right;
	padding: 8px 10px 8px 0;
	border-bottom: 1px solid var(--edge);
	color: var(--silver);
	vertical-align: top;
}
.operant-deck .cp-table .cp-model {
	text-align: left;
	color: var(--white);
}
.operant-deck .cp-table .cp-profile {
	text-align: left;
	white-space: normal;
	line-height: 1.45;
	max-width: 310px;
}
.operant-deck .cp-table .cp-ocs {
	color: var(--ember);
}
.operant-deck .cp-take {
	font-size: 13px;
	color: var(--silver);
	margin: 10px 0 0;
}
.operant-deck .cp-caveat {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
	border-left: 2px solid var(--crimson);
	padding-left: 10px;
	margin: 0;
}

/* OCS explainer */
.operant-deck .ocs-stage {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 18px;
	margin: 18px 0 0;
	align-items: stretch;
}
.operant-deck .formula {
	font-family: var(--font-mono);
	font-size: 15px;
	color: var(--white);
	background: var(--void);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 11px 14px;
	display: inline-block;
	margin: 0 0 14px;
}
.operant-deck .formula b {
	color: var(--ember);
}
.operant-deck .strat-btns {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.operant-deck .strat {
	font-family: var(--font-mono);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	border: 1px solid var(--edge);
	background: var(--buried);
	color: var(--silver);
	padding: 12px 14px;
	border-radius: 2px;
	transition: 0.18s;
}
.operant-deck .strat:hover {
	border-color: var(--verm);
	color: var(--white);
}
.operant-deck .strat[aria-pressed="true"] {
	border-color: var(--ember);
	color: var(--white);
	background: var(--void);
}
.operant-deck .strat small {
	display: block;
	color: var(--gray);
	font-size: 11px;
	margin-top: 3px;
}
.operant-deck .strat-read {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.operant-deck .sr-vals {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.operant-deck .sr-val {
	font-family: var(--font-mono);
}
.operant-deck .sr-val .k {
	display: block;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gray);
}
.operant-deck .sr-val .v {
	display: block;
	font-size: 22px;
	color: var(--white);
}
.operant-deck .sr-ocs .v {
	color: var(--ember);
}
.operant-deck .meter {
	height: 9px;
	border-radius: 2px;
	background: var(--void);
	border: 1px solid var(--edge);
	overflow: hidden;
	margin: 2px 0 14px;
}
.operant-deck .meter > i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, rgba(228, 87, 46, 0.4), var(--ember));
	transition: width 0.5s ease;
}
.operant-deck .sr-note {
	font-size: 14px;
	color: var(--silver);
	margin: 0;
	line-height: 1.55;
}

/* significance */
.operant-deck .perm-wrap {
	padding: 16px 16px 6px;
	margin: 18px 0 0;
}
.operant-deck svg.permplot {
	width: 100%;
	height: auto;
	display: block;
}
.operant-deck .permplot .grid {
	stroke: var(--edge);
	stroke-width: 1;
}
.operant-deck .permplot .permbar {
	fill: var(--gray);
	opacity: 0.42;
}
.operant-deck .permplot .permbar.hot {
	fill: var(--ember);
	opacity: 1;
}
.operant-deck .permplot .obs {
	stroke: var(--ember);
	stroke-width: 2;
	stroke-dasharray: 4 4;
}
.operant-deck .permplot .obs-cap,
.operant-deck .permplot .obs-cap2 {
	font-family: var(--font-mono);
	fill: var(--ember);
	font-size: 11px;
}
.operant-deck .permplot .obs-cap2 {
	fill: var(--gray);
}
.operant-deck .permplot .tick,
.operant-deck .permplot .axis-cap {
	font-family: var(--font-mono);
	fill: var(--gray);
	font-size: 10px;
}
.operant-deck .pval-row {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	margin: 8px 2px 0;
}
.operant-deck .pval {
	font-family: var(--font-display);
	font-size: 30px;
	color: var(--ember);
}
.operant-deck .pval small {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--gray);
	margin-left: 8px;
}
.operant-deck .perm-note {
	color: var(--silver);
	max-width: 60ch;
	font-size: 14px;
}

/* matched pairs */
.operant-deck .pairs {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 18px 0 0;
}
.operant-deck .pair-group {
	border: 1px solid var(--edge);
	border-radius: 2px;
	background: var(--void);
	overflow: hidden;
}
.operant-deck .pair-group summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 13px 16px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ember);
}
.operant-deck .pair-group summary::-webkit-details-marker {
	display: none;
}
.operant-deck .pair-group summary small {
	font-size: 10px;
	color: var(--gray);
	letter-spacing: 0.04em;
}
.operant-deck .pair-group-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 14px 14px;
}
.operant-deck .pair {
	border: 1px solid var(--edge);
	border-radius: 2px;
	background: var(--ink);
	padding: 16px 18px;
}
.operant-deck .pair-surface {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	margin: 4px 0 2px;
	color: var(--white);
}
.operant-deck .pair-split {
	font-size: 13px;
	color: var(--gray);
	margin: 0 0 12px;
}
.operant-deck .pair-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.operant-deck .side {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 13px 14px;
	background: var(--void);
}
.operant-deck .side.malign {
	border-top: 2px solid var(--crimson);
}
.operant-deck .side.benign {
	border-top: 2px solid var(--silver);
}
.operant-deck .side-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 9px;
}
.operant-deck .side-tag {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 2px;
}
.operant-deck .t-malign {
	color: var(--white);
	background: rgba(158, 27, 34, 0.18);
	border: 1px solid var(--crimson);
}
.operant-deck .t-benign {
	color: var(--silver);
	border: 1px solid rgba(245, 242, 236, 0.45);
}
.operant-deck .side-chan {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--gray);
}
.operant-deck .side-summary {
	font-size: 13.5px;
	color: var(--white);
	line-height: 1.5;
	margin: 0 0 11px;
}
.operant-deck .side-foot {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0 0 9px;
}
.operant-deck .side-l {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gray);
}
.operant-deck .side-why {
	font-size: 12.5px;
	color: var(--silver);
	line-height: 1.5;
	margin: 0;
	border-top: 1px solid var(--edge);
	padding-top: 9px;
}
.operant-deck .dchip {
	font-family: var(--font-mono);
	font-size: 10.5px;
	padding: 3px 8px;
	border-radius: 2px;
	border: 1px solid var(--edge);
	color: var(--silver);
}
.operant-deck .dchip.d-refuse,
.operant-deck .dchip.d-escalate,
.operant-deck .dchip.d-reroute {
	color: var(--ember);
	border-color: rgba(228, 87, 46, 0.4);
}
.operant-deck .dchip.d-proceed,
.operant-deck .dchip.d-proceed_sanctioned {
	color: var(--ember);
	border-color: rgba(228, 87, 46, 0.4);
}

/* decision labels strip */
.operant-deck .labels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	margin: 16px 0 0;
}
.operant-deck .lbl {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 11px 13px;
	background: var(--ink);
}
.operant-deck .lbl-code {
	display: block;
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 600;
	margin: 0 0 4px;
}
.operant-deck .l-withhold .lbl-code {
	color: var(--ember);
}
.operant-deck .l-proceed .lbl-code {
	color: var(--ember);
}
.operant-deck .lbl-gloss {
	display: block;
	font-size: 13px;
	color: var(--white);
	margin: 0 0 4px;
}
.operant-deck .lbl-when {
	display: block;
	font-size: 11.5px;
	color: var(--gray);
}

/* axes list */
.operant-deck .axes {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}
.operant-deck .axis {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 13px 14px;
	background: var(--ink);
}
.operant-deck .axis-n {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ember);
}
.operant-deck .axis-name {
	font-family: var(--font-display);
	font-size: 16px;
	display: block;
	margin: 2px 0;
	color: var(--white);
}
.operant-deck .axis-pairs {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
}
.operant-deck .axis-blurb {
	font-size: 13px;
	color: var(--silver);
	margin: 7px 0 0;
	line-height: 1.5;
}

/* scorer widget (shared by the full page and the /operant/scorer embed) */
.operant-deck .scorer {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 18px;
	margin: 18px 0 0;
	align-items: start;
}
.operant-deck .scene {
	/* .scene collides with the shared Forge atmosphere component (style.css's
	   own .scene, position:absolute;inset:0;z-index:0) - this is the scorer
	   widget's in-flow "scene" panel (the prompt text + choices), not the
	   background fire layer, so every structural property needs a real
	   override, not just the padding this rule originally carried. */
	position: static;
	inset: auto;
	z-index: auto;
	pointer-events: auto;
	overflow: visible;
	padding: 18px 20px;
}
.operant-deck .scene-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px;
}
.operant-deck .scene-chan {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--silver);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 4px 11px;
}
.operant-deck .scene-prog {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
}
.operant-deck .scene-text {
	font-size: 15px;
	color: var(--white);
	line-height: 1.55;
	margin: 0 0 16px;
	min-height: 78px;
}
.operant-deck .choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.operant-deck .choice {
	font-family: var(--font-mono);
	font-size: 12px;
	cursor: pointer;
	border: 1px solid var(--edge);
	background: var(--buried);
	color: var(--silver);
	padding: 9px 13px;
	border-radius: 2px;
	transition: 0.16s;
}
.operant-deck .choice:hover:not(:disabled) {
	border-color: var(--verm);
	color: var(--white);
}
.operant-deck .choice:disabled {
	cursor: default;
	opacity: 0.85;
}
.operant-deck .choice.pick-correct {
	border-color: var(--silver);
	color: var(--void);
	background: var(--silver);
	font-weight: 600;
}
.operant-deck .choice.pick-wrong {
	border-color: var(--crimson);
	color: var(--white);
	background: rgba(158, 27, 34, 0.18);
}
.operant-deck .choice.was-right {
	border-color: rgba(245, 242, 236, 0.45);
	color: var(--silver);
}
.operant-deck .verdict {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 2px;
	background: var(--void);
	border: 1px solid var(--edge);
	font-size: 13.5px;
	color: var(--silver);
	line-height: 1.55;
}
.operant-deck .verdict[hidden] {
	display: none;
}
.operant-deck .verdict b.ok {
	color: var(--silver);
}
.operant-deck .verdict b.no {
	display: inline-block;
	color: var(--white);
	background: rgba(158, 27, 34, 0.22);
	border-radius: 3px;
	padding: 0.05em 0.5em;
}
.operant-deck .verdict .vtag {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gray);
	display: block;
	margin-bottom: 4px;
}
.operant-deck .scene-next {
	margin: 14px 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	cursor: pointer;
	border: 1px solid rgba(228, 87, 46, 0.4);
	background: none;
	color: var(--ember);
	padding: 9px 16px;
	border-radius: 2px;
}
.operant-deck .scene-next[hidden] {
	display: none;
}
.operant-deck .tally {
	padding: 18px 18px;
}
.operant-deck .tally h3 {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray);
	margin: 0 0 12px;
}
.operant-deck .tally-ocs {
	font-family: var(--font-display);
	font-size: 40px;
	color: var(--white);
	line-height: 1;
	margin: 0 0 2px;
}
.operant-deck .tally-ocs-l {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
	margin: 0 0 14px;
}
.operant-deck .conf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
	margin: 0 0 12px;
}
.operant-deck .conf div {
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: 8px 10px;
	font-family: var(--font-mono);
}
.operant-deck .conf .cf-k {
	font-size: 9.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gray);
	display: block;
}
.operant-deck .conf .cf-v {
	font-size: 18px;
	color: var(--white);
}
.operant-deck .conf .tp {
	border-left: 3px solid var(--silver);
}
.operant-deck .conf .fp {
	border-left: 3px solid var(--crimson);
}
.operant-deck .conf .tn {
	border-left: 3px solid rgba(245, 242, 236, 0.45);
}
.operant-deck .conf .fn {
	border-left: 3px solid var(--ember);
}
.operant-deck .tally-note {
	font-size: 12.5px;
	color: var(--gray);
	line-height: 1.5;
	margin: 0;
}

/* share a result */
.operant-deck .share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
}
.operant-deck .share-row[hidden] {
	display: none;
}
.operant-deck .share-btn {
	font-family: var(--font-mono);
	font-size: 12px;
	cursor: pointer;
	border: 1px solid rgba(228, 87, 46, 0.4);
	background: rgba(228, 87, 46, 0.06);
	color: var(--ember);
	padding: 9px 14px;
	border-radius: 2px;
	transition: 0.16s;
}
.operant-deck .share-btn:hover {
	background: rgba(228, 87, 46, 0.12);
	border-color: var(--ember);
}
.operant-deck .share-hint {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
}
.operant-deck .shared-banner {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid rgba(228, 87, 46, 0.4);
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(228, 87, 46, 0.08), transparent);
}
.operant-deck .shared-banner[hidden] {
	display: none;
}
.operant-deck .shared-banner .sb-k {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 6px;
}
.operant-deck .shared-banner p {
	margin: 0;
	color: var(--silver);
	font-size: 14px;
	line-height: 1.55;
}
.operant-deck .shared-banner b {
	color: var(--ember);
}

/* embed credit strip */
.operant-deck .embed-credit {
	margin: 16px 0 0;
	padding-top: 13px;
	border-top: 1px solid var(--edge);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.operant-deck .embed-credit a {
	color: var(--silver);
	text-decoration: none;
}
.operant-deck .embed-credit a:hover {
	color: var(--ember);
}

/* coda + footer (full page) */
.operant-deck .coda {
	margin: 54px 0 0;
	border-top: 1px solid var(--edge);
	padding-top: 30px;
}
.operant-deck .coda .lead {
	font-family: var(--font-display);
	font-size: clamp(18px, 2.6vw, 24px);
	line-height: 1.45;
	color: var(--silver);
	max-width: 58ch;
	margin: 0 0 20px;
}
.operant-deck .coda .lead b {
	color: var(--white);
	font-style: italic;
	font-weight: 400;
}
.operant-deck .coda-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.operant-deck .clink {
	font-family: var(--font-mono);
	font-size: 12.5px;
	text-decoration: none;
	color: var(--silver);
	border: 1px solid var(--edge);
	background: var(--ink);
	border-radius: 2px;
	padding: 10px 15px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: 0.2s;
}
.operant-deck .clink:hover {
	border-color: var(--verm);
	color: var(--ember);
}
.operant-deck footer {
	margin: 54px 0 60px;
	padding-top: 22px;
	border-top: 1px solid var(--edge);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--gray);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.operant-deck footer a {
	color: var(--silver);
	text-decoration: none;
}
.operant-deck footer a:hover {
	color: var(--ember);
}

@media (max-width: 860px) {
	.operant-deck header.nav .bar {
		padding: 0 var(--space-4);
	}
	.operant-deck .hero {
		padding: 40px 0 12px;
	}
	.operant-deck .lead-stage,
	.operant-deck .ocs-stage,
	.operant-deck .scorer {
		grid-template-columns: 1fr;
	}
	.operant-deck .pair-cols {
		grid-template-columns: 1fr;
	}
	.operant-deck .detail {
		min-height: 0;
	}
}
@media (max-width: 680px) {
	.operant-deck .embed-wrap {
		padding: 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.operant-deck .meter > i {
		transition: none;
	}
}
/* === end island: operant deck === */

/* === island: authority ======================================================
   "One Writer, No Lies": a hand-authored interactive explainer, previously its
   own warm-paper light theme (authority/styles.css, deleted). Migrated onto
   the Forge; the simulation logic (authority/dist/explainer.js) only ever
   toggles classes/ids and one positioning custom property (--packet-pos), so
   nothing here is JS-load-bearing except the class/id names themselves, which
   are unchanged. Color-semantics mapping, per the migration brief:
     - LOCAL ("the truth") = the fire register: --ember text, ember-tinted
       washes/borders. Reused for the general accent (act-tab active state,
       links, prediction/reveal chrome) since LOCAL was already the page's de
       facto primary color.
     - REMOTE ("the view") = the cold register: --silver/--gray monochrome.
       The wire between them (and its query-signal label) is --gray.
     - "drift" (a field disagreeing with its remote copy) reuses ember TEXT
       (never verm/crimson as text - hard AA rule) but adds a subtle ember
       wash background as the second, non-text differentiator.
     - danger/duplicate/dropped states reuse the site's fail treatment
       (ivory text on a crimson wash + crimson border) wherever a background
       is available; where only a bare text color is stylable (the dropped
       packet glyph) it takes ivory/--white instead of a flat crimson/verm,
       since both fail AA as text per the identity's hard rule.
     - "resolved"/"recovered" (were green) join --good's silver pass register,
       matching the vocabulary later reused for verdict-machine.
   The global .skip-link and button/[tabindex]:focus-visible rules already
   cover this page; its bespoke duplicates of both are dropped here rather
   than restyled. Scoped under body.authority-page. */
.authority-page {
	position: relative;
}
.authority-page .bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(
			900px 600px at 82% -8%,
			rgba(228, 87, 46, 0.08),
			transparent 60%
		),
		radial-gradient(
			800px 700px at 4% 10%,
			rgba(110, 17, 25, 0.05),
			transparent 55%
		),
		var(--void);
}
.authority-page .grain {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* nav (fleet's chrome pattern, quiet: no sticky/blur - a prose/explainer page) */
.authority-page header.nav {
	background: var(--ink);
	border-bottom: 1px solid var(--edge);
}
.authority-page .brand {
	white-space: nowrap;
}
.authority-page .nav-drawer {
	position: relative;
}
.authority-page .nav-drawer > summary {
	display: none;
}
.authority-page .nav-links {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.authority-page .nav-links a {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.02em;
	color: var(--gray);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 3px;
	transition:
		color 0.2s ease,
		background 0.2s ease;
	white-space: nowrap;
}
.authority-page .nav-links a:hover,
.authority-page .nav-links a:focus-visible {
	color: var(--ember);
	background: rgba(228, 87, 46, 0.08);
}
@media (max-width: 720px) {
	.authority-page .nav-drawer {
		flex: none;
	}
	.authority-page .nav-drawer > summary {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		list-style: none;
		font-family: var(--font-mono);
		font-size: var(--fs-chip);
		color: var(--silver);
		padding: 6px 10px;
		border: 1px solid var(--edge);
		border-radius: 3px;
	}
	.authority-page .nav-drawer > summary::-webkit-details-marker {
		display: none;
	}
	.authority-page .nav-drawer > summary::after {
		content: "▾";
		color: var(--gray);
	}
	.authority-page .nav-drawer[open] > summary::after {
		content: "▴";
	}
	.authority-page .nav-drawer .nav-links {
		display: none;
	}
	.authority-page .nav-drawer[open] .nav-links {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 0;
		top: calc(100% + 8px);
		z-index: 30;
		min-width: 200px;
		padding: 8px;
		gap: 2px;
		background: var(--ink);
		border: 1px solid var(--edge);
		border-radius: 3px;
		box-shadow: 0 12px 32px rgba(2, 2, 2, 0.5);
	}
}

/* footer */
.authority-page footer {
	border-top: 1px solid var(--edge);
	padding: var(--space-6) 0 var(--space-7);
}
.authority-page .foot {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--gray);
}
.authority-page .foot a {
	color: var(--gray);
	text-decoration: none;
	transition: color 0.2s ease;
}
.authority-page .foot a:hover {
	color: var(--ember);
}

/* content shell */
.authority-page .explainer {
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}
.authority-page .explainer-header h1 {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.9rem, 4vw, var(--fs-display));
	color: var(--white);
}
.authority-page .kicker {
	margin: 0 0 24px;
	font-family: var(--font-prose);
	font-style: italic;
	color: var(--silver);
}

/* stepper: act tabs + next button, not scrollytelling */
.authority-page .act-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
.authority-page .act-tab {
	flex: 1 1 140px;
	border: 1px solid var(--edge);
	background: var(--ink);
	border-radius: 5px 5px 0 0;
	padding: 12px 16px;
	font-family: var(--font-prose);
	font-weight: 700;
	color: var(--white);
	text-align: left;
	cursor: pointer;
}
.authority-page .act-tab span {
	display: block;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 0.72rem;
	color: var(--gray);
}
.authority-page .act-tab[aria-pressed="true"] {
	background: rgba(228, 87, 46, 0.1);
	border-bottom-color: rgba(228, 87, 46, 0.1);
}

.authority-page .beat-status {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--gray);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 8px 4px 16px;
	border-bottom: 1px solid var(--edge);
	margin-bottom: 20px;
}

/* LOCAL / wire / REMOTE - stacks vertically on narrow viewports */
.authority-page .panels {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.authority-page .panel {
	flex: 1;
	min-width: 0;
	padding: 20px;
	border-radius: 5px;
	background: var(--ink);
	border: 1px solid var(--edge);
}
.authority-page .panel h2 {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	color: var(--white);
}
.authority-page .panel-sub {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 0.7rem;
	color: var(--gray);
}
.authority-page .panel-local {
	border-left: 3px solid var(--ember);
}
.authority-page .panel-remote {
	border-left: 3px solid var(--gray);
}

.authority-page .wire {
	flex: 0 0 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
}
.authority-page .wire-label {
	writing-mode: vertical-rl;
	font-family: var(--font-mono);
	font-size: 0.65rem;
	color: var(--gray);
	letter-spacing: 0.1em;
	margin: 0;
}
.authority-page .wire-track {
	position: relative;
	width: 100%;
	height: 160px;
	border-top: 2px dashed var(--gray);
	border-bottom: 2px dashed var(--gray);
	opacity: 0.9;
}

/* project cards, outbox, remote list */
.authority-page .project-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 20px;
}
.authority-page .project-card {
	flex: 1 1 100px;
	border: 1px solid var(--edge);
	background: var(--void);
	border-radius: 5px;
	padding: 10px;
	font-size: 0.85rem;
	color: var(--silver);
}
.authority-page .project-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}
.authority-page .project-field-chip {
	border: 1px solid var(--edge);
	border-radius: 4px;
	padding: 2px 6px;
	color: var(--silver);
	font-family: var(--font-mono);
	font-size: 0.65rem;
}
.authority-page .project-field-chip.manual {
	border-style: dashed;
}
.authority-page .project-field-chip.drift {
	border-color: var(--ember);
	background: rgba(228, 87, 46, 0.1);
	color: var(--ember);
}

.authority-page .special-panel {
	margin: 12px 0 18px;
}
.authority-page .writer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.authority-page .writer-lane {
	min-height: 74px;
	border: 1px dashed var(--edge);
	border-radius: 5px;
	padding: 9px;
	background: var(--void);
}
.authority-page .writer-lane strong {
	color: var(--white);
}
.authority-page .writer-lane strong,
.authority-page .writer-badge {
	display: block;
}
.authority-page .writer-badge {
	margin-top: 5px;
	color: var(--gray);
	font-family: var(--font-mono);
	font-size: 0.68rem;
}
.authority-page .local-badge {
	color: var(--ember);
}
.authority-page .remote-badge {
	color: var(--silver);
}
.authority-page .drag-hint,
.authority-page .hand-edit-hint,
.authority-page .rename-note {
	margin: 8px 0 0;
	color: var(--gray);
	font-size: 0.78rem;
}

.authority-page .field-chip,
.authority-page .field-line {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	border: 1px solid var(--edge);
	border-radius: 4px;
	padding: 7px 9px;
	background: var(--void);
	color: var(--white);
	text-align: left;
	font-family: var(--font-mono);
	font-size: 0.75rem;
}
.authority-page .field-chip {
	margin-top: 6px;
	cursor: grab;
}
.authority-page .field-chip span,
.authority-page .field-line span:nth-child(2) {
	color: var(--gray);
}
.authority-page .field-table {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.78rem;
}
.authority-page .remote-field-groups {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.78rem;
}
.authority-page .remote-field-groups > strong {
	color: var(--gray);
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.authority-page .remote-field-group {
	border: 1px solid var(--edge);
	border-radius: 5px;
	padding: 8px;
}
.authority-page .remote-field-group b {
	display: block;
	margin-bottom: 5px;
	color: var(--silver);
}
.authority-page .field-table > strong {
	color: var(--gray);
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.authority-page .field-line em {
	min-width: 42px;
	color: var(--gray);
	font-size: 0.65rem;
	font-style: normal;
	text-align: right;
	text-transform: uppercase;
}
.authority-page .field-line.drift {
	border-color: var(--ember);
	background: rgba(228, 87, 46, 0.08);
	color: var(--ember);
}
.authority-page .field-line.manual {
	border-style: dashed;
}
.authority-page .editable-fields .field-line {
	cursor: pointer;
}

.authority-page .ladder {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.78rem;
}
.authority-page .ladder > strong {
	color: var(--gray);
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.authority-page .ladder-rung {
	display: flex;
	align-items: center;
	gap: 9px;
	border-left: 4px solid var(--edge);
	padding: 6px 9px;
	color: var(--gray);
}
.authority-page .ladder-rung span {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	background: var(--void);
	font-weight: 800;
}
.authority-page .ladder-rung.active {
	border-left-color: var(--ember);
	color: var(--ember);
}
.authority-page .ladder-rung.resolved {
	border-left-color: var(--silver);
	color: var(--silver);
}
.authority-page .ladder-rung.failed {
	border-left-color: var(--crimson);
	color: var(--ember);
	text-decoration: line-through;
}

.authority-page .dry-status {
	margin-top: 8px;
	border: 1px dashed rgba(228, 87, 46, 0.4);
	padding: 7px 9px;
	color: var(--ember);
	font-family: var(--font-mono);
	font-size: 0.7rem;
}

.authority-page .hud {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 10px;
	border: 1px solid var(--edge);
	border-radius: 5px;
	padding: 10px;
	background: var(--void);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--silver);
}
.authority-page .hud strong {
	grid-column: 1 / -1;
	color: var(--silver);
}
.authority-page .purgatory {
	color: var(--ember);
	font-size: 0.78rem;
}

.authority-page .burst-control {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--gray);
	font-size: 0.82rem;
}
.authority-page .burst-control input {
	accent-color: var(--silver);
}

.authority-page .project-state {
	display: block;
	margin-top: 4px;
	color: var(--ember);
	font-weight: 700;
}

.authority-page .outbox h3,
.authority-page .remote h3 {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gray);
	margin: 0 0 8px;
}
.authority-page .outbox-list,
.authority-page .remote-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.authority-page .outbox-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid var(--edge);
	background: var(--void);
	border-radius: 5px;
	padding: 10px;
}
.authority-page .outbox-row .row-id {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	color: var(--gray);
}
.authority-page .row-title {
	margin: 0 0 4px;
	font-weight: 700;
	color: var(--white);
}
.authority-page .row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 0.78rem;
}
.authority-page .key-tag {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	color: var(--ember);
	background: rgba(228, 87, 46, 0.1);
	border-radius: 4px;
	padding: 1px 6px;
}
.authority-page .receipt {
	color: var(--ember);
	font-weight: 700;
}
.authority-page .receipt.empty {
	color: var(--gray);
	font-weight: 400;
}
.authority-page .recovered {
	color: var(--silver);
	font-weight: 700;
}
.authority-page .remote-row {
	position: relative;
	border: 1px solid var(--edge);
	background: var(--void);
	border-radius: 5px;
	padding: 10px;
}
.authority-page .remote-row.duplicate {
	border: 1px solid var(--crimson);
	box-shadow: 0 0 0 2px rgba(158, 27, 34, 0.16);
}
.authority-page .remote-row.duplicate::after {
	content: "⚠ duplicate";
	position: absolute;
	right: 7px;
	top: 7px;
	color: var(--white);
	background: rgba(158, 27, 34, 0.22);
	border-radius: 3px;
	padding: 0.05em 0.4em;
	font-size: 0.62rem;
	font-weight: 900;
}
.authority-page .remote-row .row-title {
	padding-right: 80px;
}
.authority-page .key-slot {
	display: block;
	margin-top: 7px;
	color: var(--silver);
	font-family: var(--font-mono);
	font-size: 0.65rem;
}
.authority-page .empty-remote {
	padding: 20px 8px;
	color: var(--gray);
	font-size: 0.82rem;
	text-align: center;
	border: 1px dashed var(--edge);
}

/* packets and the query signal travelling the wire */
.authority-page .packet {
	position: absolute;
	top: 50%;
	left: var(--packet-pos, 0%);
	transform: translate(-50%, -50%);
	transition: left 640ms ease;
	font-size: 1.1rem;
	font-weight: 900;
}
.authority-page .packet.write {
	color: var(--ember);
}
.authority-page .packet.ack {
	color: var(--silver);
}
.authority-page .packet.dropped {
	color: var(--white);
}
.authority-page .packet.reduced {
	transition: none;
}
.authority-page .query-signal {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.08em;
	color: var(--gray);
}

/* controls, toggles */
.authority-page .controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 24px 0;
}
.authority-page .button {
	border: none;
	border-radius: 5px;
	padding: 10px 18px;
	font-family: var(--font-mono);
	font-weight: 700;
	cursor: pointer;
}
.authority-page .button-primary {
	background: var(--ember);
	color: var(--void);
}
.authority-page .button-secondary {
	background: rgba(228, 87, 46, 0.14);
	color: var(--ember);
}
.authority-page .button-quiet {
	background: transparent;
	color: var(--gray);
	border: 1px solid var(--edge);
}
.authority-page .button-next {
	background: var(--silver);
	color: var(--void);
	margin-top: 12px;
}
.authority-page .button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.authority-page .toggle-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.authority-page .toggle {
	border: 1px solid var(--edge);
	background: var(--ink);
	color: var(--silver);
	border-radius: 5px;
	padding: 6px 14px;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	cursor: pointer;
}
.authority-page .toggle.kill {
	border-color: var(--crimson);
	color: var(--ember);
}
.authority-page .toggle[aria-pressed="true"] {
	background: rgba(158, 27, 34, 0.22);
	color: var(--white);
	border-color: var(--crimson);
}
.authority-page .toggle:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* narrative, predict-then-reveal */
.authority-page .narrative {
	border-top: 1px solid var(--edge);
	padding-top: 20px;
}
.authority-page .narrative.act-three {
	border-top-color: rgba(228, 87, 46, 0.3);
}
.authority-page .beat-copy {
	font-family: var(--font-prose);
	font-size: 1.05rem;
	max-width: 60ch;
	color: var(--silver);
}
.authority-page .prediction-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0;
}
.authority-page .prediction-button {
	border: 1px solid var(--ember);
	background: var(--ink);
	color: var(--ember);
	border-radius: 5px;
	padding: 8px 16px;
	font-family: var(--font-mono);
	cursor: pointer;
}
.authority-page .prediction-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.authority-page .guess-note {
	color: var(--gray);
	font-size: 0.85rem;
}
.authority-page .reveal {
	background: var(--ink);
	border-left: 3px solid var(--ember);
	border-radius: 0 5px 5px 0;
	padding: 14px 16px;
	margin-top: 10px;
}
.authority-page .reveal p {
	margin: 0 0 8px;
	color: var(--silver);
}
.authority-page .reveal p:last-child {
	margin-bottom: 0;
}

/* event log: aria-live region, newest first, capped at 5 by the reducer */
.authority-page .event-log {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--gray);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* static diagrams: shared visual grammar, standalone-linkable */
.authority-page .diagram-set {
	margin-top: 72px;
	padding-top: 32px;
	border-top: 1px solid var(--edge);
}
.authority-page .diagram-set-heading {
	max-width: 68ch;
	margin-bottom: 24px;
}
.authority-page .diagram-set-heading h2 {
	margin: 4px 0 8px;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--white);
}
.authority-page .diagram-set-heading p {
	margin: 0;
	color: var(--silver);
}
.authority-page .diagram-set-kicker {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	color: var(--gray);
}

/* Protocol walks: one section per diagram, each a short paragraph anchoring
   the .diagram-walk component (shared CSS, see "Diagram walk" above). */
.authority-page .protocol-walk {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--edge);
}
.authority-page .protocol-walk h3 {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 1.3rem;
	color: var(--white);
}
.authority-page .protocol-walk > p {
	max-width: 68ch;
	margin: 0;
	color: var(--silver);
}

@media (max-width: 720px) {
	.authority-page .explainer {
		padding-inline: 12px;
	}
	.authority-page .act-tab {
		flex: 1 1 30%;
		padding: 9px 10px;
		font-size: 0.86rem;
	}
	.authority-page .act-tab span {
		font-size: 0.62rem;
	}
	.authority-page .writer-grid {
		grid-template-columns: 1fr;
	}
	.authority-page .panels {
		flex-direction: column;
	}
	.authority-page .wire {
		flex-direction: row;
		width: 100%;
		height: 60px;
	}
	.authority-page .wire-label {
		writing-mode: horizontal-tb;
	}
	.authority-page .wire-track {
		height: 100%;
		border-top: none;
		border-bottom: none;
		border-left: 2px dashed var(--gray);
		border-right: 2px dashed var(--gray);
	}
	.authority-page .packet {
		top: var(--packet-pos, 0%);
		left: 50%;
		transition: top 640ms ease;
	}
	.authority-page .diagram-set {
		margin-top: 52px;
	}
	.authority-page .protocol-walk {
		margin-top: 36px;
		padding-top: 24px;
	}
}
/* === end island: authority === */

/* === island: verdict-machine ================================================
   "The Verdict Machine": a hand-authored interactive teardown of the
   portfolio auditor's decision cascade. Was its own light theme with a full
   :root custom-property palette (surface/plane/ink/accent/good/warning/
   serious/critical/ord-1..5), declared in a banned inline <style> block
   (deleted) and consumed BOTH by static CSS rules AND by the page's own
   <script>, which builds `style="background:var(--good)"`-shaped inline
   styles at runtime (e.g. `var(--critical)` for the risk-tier strip). That
   makes every one of those custom-property NAMES load-bearing: the script
   never touches a class, but it hardcodes those var() strings, so renaming
   any of --surface/--plane/--ink/--ink-2/--ink-muted/--hairline/--ring/
   --accent/--accent-soft/--good/--warning/--serious/--critical/--ord-1..5/
   --code-bg would silently break the script's output. Restyled by
   redefining their VALUES only, scoped to `.vm-page main` rather than
   `body.vm-page` - the site already has its own global `--ink` token (a
   dark surface tone) unrelated to this page's `--ink` (its primary TEXT
   color); scoping to `main` keeps the redefinition off header.nav/footer
   (siblings of main, not descendants), so the shared chrome's own
   `header.nav { background: var(--ink) }` keeps its site-wide meaning
   instead of inheriting this page's white-text override.
   Color-semantics mapping (severity ladder, one hue family):
     - good = --silver (pass register: risk-tier baseline, active-infra/
       active-product lane dots)
     - warning = --ember (the AA-legal fire text: risk-tier moderate)
     - serious = --verm, background-fill only (the decision-needed lane
       dot; never used as text by the script, so verm's AA-as-text
       restriction does not apply)
     - critical = --white. The script sets this purely via inline `color`
       (no background), so the identity's "white text on a crimson wash"
       treatment can't be reproduced here without a JS change (out of
       scope) - ivory alone still reads as the escalated/alarm register
       and, unlike a flat crimson/verm, passes AA as text.
     - accent/accent-soft = --ember / an ember wash, matching the site-wide
       link treatment (.dr-body a) already established elsewhere.
     - the --ord-1..5 quality ladder is a single background swatch (never
       text) so it takes the full oxblood -> crimson -> verm -> ember
       run the identity calls for, capped with ivory at its brightest step
       (there is no fifth named fire hex once --hot is excluded, --hot
       being legal only inside .mouth/.lip/.core).
   Scoped under body.vm-page; the color/surface tokens under .vm-page main. */
.vm-page {
	position: relative;
}
.vm-page .bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(
			900px 600px at 18% -8%,
			rgba(228, 87, 46, 0.07),
			transparent 60%
		),
		radial-gradient(
			800px 700px at 96% 6%,
			rgba(110, 17, 25, 0.05),
			transparent 55%
		),
		var(--void);
}
.vm-page .grain {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* nav (fleet's chrome pattern, quiet: no sticky/blur - a prose/dossier page) */
.vm-page header.nav {
	background: var(--ink);
	border-bottom: 1px solid var(--edge);
}
.vm-page .nav-drawer {
	position: relative;
}
.vm-page .nav-drawer > summary {
	display: none;
}
.vm-page .nav-links {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.vm-page .nav-links a {
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	letter-spacing: 0.02em;
	color: var(--gray);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 3px;
	transition:
		color 0.2s ease,
		background 0.2s ease;
	white-space: nowrap;
}
.vm-page .nav-links a:hover,
.vm-page .nav-links a:focus-visible {
	color: var(--ember);
	background: rgba(228, 87, 46, 0.08);
}
@media (max-width: 720px) {
	.vm-page .nav-drawer {
		flex: none;
	}
	.vm-page .nav-drawer > summary {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		list-style: none;
		font-family: var(--font-mono);
		font-size: var(--fs-chip);
		color: var(--silver);
		padding: 6px 10px;
		border: 1px solid var(--edge);
		border-radius: 3px;
	}
	.vm-page .nav-drawer > summary::-webkit-details-marker {
		display: none;
	}
	.vm-page .nav-drawer > summary::after {
		content: "▾";
		color: var(--gray);
	}
	.vm-page .nav-drawer[open] > summary::after {
		content: "▴";
	}
	.vm-page .nav-drawer .nav-links {
		display: none;
	}
	.vm-page .nav-drawer[open] .nav-links {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 0;
		top: calc(100% + 8px);
		z-index: 30;
		min-width: 200px;
		padding: 8px;
		gap: 2px;
		background: var(--ink);
		border: 1px solid var(--edge);
		border-radius: 3px;
		box-shadow: 0 12px 32px rgba(2, 2, 2, 0.5);
	}
}

/* footer: two of them - the shared site-chrome footer (a direct child of
   body, the fleet/authority pattern) and the page's own colophon footer
   (nested inside main, its original "part of the workshop" copy unchanged),
   told apart by position rather than a second class. */
.vm-page > footer {
	border-top: 1px solid var(--edge);
	padding: var(--space-6) 0 var(--space-7);
}
.vm-page main footer {
	margin-top: 64px;
	padding-top: 16px;
	border-top: 1px solid var(--edge);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--ink-muted);
}
.vm-page .foot {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 20px;
	font-family: var(--font-mono);
	font-size: var(--fs-chip);
	color: var(--gray);
}
.vm-page .foot a {
	color: var(--ember);
	text-decoration: none;
}
.vm-page .foot a:hover {
	color: var(--white);
}

/* the local token block: same names the script's inline styles depend on,
   new values, scoped to `main` only (see the section header for why). */
.vm-page main {
	--surface: #0a0a0c; /* raised card - the site's ink surface tone */
	--plane: #020202; /* page recess - the site's void */
	--ink: #f5f2ec; /* primary text - the site's ivory */
	--ink-2: #b9b6af; /* secondary text - the site's silver */
	--ink-muted: #7c7974; /* tertiary/labels - the site's gray, the AA floor */
	--hairline: rgba(245, 242, 236, 0.14);
	--ring: rgba(245, 242, 236, 0.08);
	--accent: #e4572e; /* the site-wide link/accent color (ember) */
	--accent-soft: rgba(228, 87, 46, 0.12);
	--good: #b9b6af; /* pass register */
	--warning: #e4572e; /* the AA-legal fire text */
	--serious: #c93a24; /* background-fill only, see header comment */
	--critical: #f5f2ec; /* background-fill unavailable to the script; ivory alone */
	--ord-1: #6e1119;
	--ord-2: #9e1b22;
	--ord-3: #c93a24;
	--ord-4: #e4572e;
	--ord-5: #f5f2ec;
	--code-bg: #020202;

	max-width: 720px;
	margin: 0 auto;
	padding: 24px 20px 96px;
}
.vm-page h1 {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.9rem;
	line-height: 1.2;
	margin: 24px 0 8px;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.vm-page h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	margin: 48px 0 8px;
	letter-spacing: -0.005em;
	color: var(--ink);
}
.vm-page p {
	margin: 12px 0;
	color: var(--ink-2);
}
.vm-page p strong,
.vm-page li strong {
	color: var(--ink);
}
.vm-page .kicker {
	color: var(--ink-muted);
	font-family: var(--font-mono);
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	font-weight: 600;
}
.vm-page .lede {
	font-size: 1.05rem;
}
.vm-page a {
	color: var(--accent);
}

/* verdict strip (sticky) */
.vm-page .strip {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--surface);
	border: 1px solid var(--ring);
	border-radius: 6px;
	padding: 10px 14px;
	margin: 20px 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: baseline;
	box-shadow: 0 2px 12px rgba(2, 2, 2, 0.4);
}
.vm-page .strip .cell {
	display: flex;
	gap: 7px;
	align-items: baseline;
	min-width: 0;
}
.vm-page .strip .lbl {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-muted);
	font-weight: 600;
}
.vm-page .strip .val {
	font-weight: 700;
	font-size: 0.95rem;
	white-space: nowrap;
	color: var(--ink);
}

/* Critical-tier alarm chip: the site's only white-on-red treatment,
   reserved for the elevated risk tier's flat-text rendering (strip cell +
   risk sentence). Every other tier keeps its plain colored-text style. */
.vm-page .tier-chip-critical {
	display: inline-block;
	color: var(--white);
	background: rgba(158, 27, 34, 0.22);
	border: 1px solid var(--crimson);
	border-radius: 4px;
	padding: 1px 7px;
}

.vm-page .dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	margin-right: 5px;
	vertical-align: baseline;
	border: 1px solid var(--ring);
}

/* panels */
.vm-page .panel {
	background: var(--surface);
	border: 1px solid var(--ring);
	border-radius: 6px;
	padding: 18px 20px;
	margin: 16px 0;
}
.vm-page .panel h2 {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: 1.02rem;
	color: var(--ink);
}
.vm-page .stageno {
	color: var(--ink-muted);
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* controls */
.vm-page label {
	user-select: none;
}
.vm-page .rowgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 8px 16px;
	margin: 10px 0;
}
.vm-page .check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	color: var(--ink-2);
	padding: 3px 0;
}
.vm-page .check input {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
	flex: none;
}
.vm-page select,
.vm-page input.stepper {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: var(--ink);
	background: var(--plane);
	border: 1px solid var(--hairline);
	border-radius: 5px;
	padding: 5px 8px;
}
.vm-page .field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 0.8rem;
	color: var(--ink-muted);
}
.vm-page .field > span {
	font-weight: 600;
	letter-spacing: 0.02em;
}
.vm-page input[type="range"] {
	width: 100%;
	accent-color: var(--accent);
	margin: 6px 0 0;
}
.vm-page .scale {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}
.vm-page .scale .mark {
	position: relative;
}
.vm-page .inline-num {
	font-weight: 700;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	border-bottom: 2px dotted var(--accent);
}

/* chips / verdict rendering */
.vm-page .chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--ring);
	border-radius: 5px;
	padding: 2px 11px;
	font-size: 0.85rem;
	font-weight: 650;
	background: var(--plane);
	color: var(--ink);
	white-space: nowrap;
}
.vm-page .rulechips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 2px;
}
.vm-page .rule {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	border: 1px solid var(--hairline);
	border-radius: 5px;
	padding: 2px 8px;
	color: var(--ink-muted);
	background: transparent;
}
.vm-page .rule.fired {
	border-color: var(--accent);
	color: var(--ink);
	background: var(--accent-soft);
	font-weight: 600;
}

.vm-page .ladder {
	list-style: none;
	padding: 0;
	margin: 12px 0 4px;
	border-left: 2px solid var(--hairline);
}
.vm-page .ladder li {
	padding: 5px 0 5px 14px;
	color: var(--ink-muted);
	font-size: 0.9rem;
	position: relative;
}
.vm-page .ladder li.on {
	color: var(--ink);
	font-weight: 700;
}
.vm-page .ladder li.on::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--accent);
}
.vm-page .ladder .why {
	display: block;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--ink-2);
}

.vm-page .rationale {
	border-left: 3px solid var(--accent);
	background: var(--plane);
	padding: 8px 12px;
	border-radius: 0 5px 5px 0;
	font-family: var(--font-prose);
	font-size: 0.88rem;
	color: var(--ink-2);
	margin: 10px 0 2px;
	font-style: italic;
}
.vm-page .rationale .src {
	display: block;
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 0.7rem;
	color: var(--ink-muted);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.vm-page .quality-meter {
	display: flex;
	gap: 3px;
	margin: 10px 0 4px;
}
.vm-page .quality-meter span {
	flex: 1;
	height: 9px;
	border-radius: 3px;
	background: var(--hairline);
}
.vm-page .qlabel {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--ink-muted);
	display: flex;
	justify-content: space-between;
}

/* presets */
.vm-page .presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}
.vm-page .presets button {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 5px;
	padding: 7px 13px;
	cursor: pointer;
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}
.vm-page .presets button:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.vm-page .presets button.on {
	border-color: var(--accent);
	background: var(--accent-soft);
}

/* source view */
.vm-page details.src-view {
	margin: 12px 0 0;
	border: 1px solid var(--hairline);
	border-radius: 5px;
	overflow: hidden;
}
.vm-page details.src-view summary {
	cursor: pointer;
	padding: 8px 12px;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--plane);
	list-style: none;
}
.vm-page details.src-view summary::before {
	content: "‹›";
	letter-spacing: -0.1em;
	margin-right: 8px;
	color: var(--accent);
	font-weight: 800;
}
.vm-page details.src-view pre {
	margin: 0;
	padding: 12px 14px;
	overflow-x: auto;
	background: var(--code-bg);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--ink-2);
}
.vm-page .provenance {
	font-size: 0.8rem;
	color: var(--ink-muted);
}

@media (max-width: 560px) {
	.vm-page .strip {
		gap: 6px 12px;
	}
}
/* === end island: verdict-machine === */

/* === island: predictions ====================================================
   The /predictions calibration ledger (predictions/ledger.js). JS-off
   content is the static list scripts/build-predictions.py already renders;
   everything below is a progressive-enhancement mount that stays `hidden`
   until the island's own script populates it, so a JS-off visitor never
   sees a stale placeholder. Only two rules below reuse the site's existing
   .pulse round glow-dot component (defined earlier in this file) for the
   timeline position marker, which is why the marker itself declares no
   border-radius here - the radius/animation/reduced-motion-guard trio all
   come from .pulse's own rule and its existing guard entry, so composing
   onto it needs no new declarations of any of the three.
   Color mapping: --gray/--shadow/--silver/--white/--edge carry all
   structure and the "not urgent yet" register; --ember is reserved
   entirely for a prediction inside its final 90 days before resolves_by
   (the confidence bar and the .pulse marker both key off the same
   isFinalWindow() predicate, so the two visuals never disagree). No
   `animation` shorthand is introduced here, so the design gate needs no
   new reduced-motion entry; the sandbox toggle's hover transition still
   gets an explicit guard per this campaign's stricter house rule. */
.pred-timeline {
	position: relative;
	height: 6px;
	margin-top: 10px;
	border-radius: 3px;
	background: var(--shadow);
}
.pred-timeline-fill {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	border-radius: 3px;
	background: var(--gray);
}
.pred-timeline-marker {
	position: absolute;
	top: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
}
.pred-timeline-marker:not(.is-final-window) {
	background: var(--silver);
	box-shadow: none;
}
.pred-island .noscript-note {
	color: var(--gray);
	font-size: var(--fs-small);
	line-height: 1.55;
}
.pred-confidence-strip {
	margin: 14px 0 20px;
}
.pred-confidence-svg {
	width: 100%;
	height: auto;
	display: block;
}
.pred-conf-bar {
	fill: var(--gray);
}
.pred-conf-bar.is-final-window {
	fill: var(--ember);
}
.pred-conf-baseline {
	stroke: var(--edge);
	stroke-width: 1;
}
.pred-brier-sandbox {
	border: 1px solid var(--edge);
	border-radius: 6px;
	background: var(--ink);
	padding: var(--space-4);
}
.pred-brier-formula {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--gray);
	margin: 0 0 var(--space-3);
}
.pred-brier-scores {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: var(--space-3);
}
.pred-brier-score-card {
	border: 1px solid var(--edge);
	border-radius: 6px;
	padding: 10px 12px;
}
.pred-brier-score-card[hidden] {
	display: none;
}
.pred-brier-score-card b {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 6px;
}
.pred-brier-value {
	display: block;
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--white);
}
.pred-brier-n {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
}
.pred-sandbox-mode-note {
	color: var(--silver);
	font-size: var(--fs-small);
	line-height: 1.5;
	margin: 0 0 var(--space-3);
}
.pred-sandbox-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--edge);
}
.pred-sandbox-row:first-of-type {
	border-top: none;
}
.pred-sandbox-label {
	color: var(--silver);
	font-size: var(--fs-small);
	line-height: 1.4;
	max-width: 52ch;
}
.pred-sandbox-toggle {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
.pred-toggle-btn {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gray);
	background: none;
	border: 1px solid var(--edge);
	border-radius: 4px;
	padding: 5px 9px;
	cursor: pointer;
	transition:
		color 0.15s ease,
		border-color 0.15s ease,
		background 0.15s ease;
}
.pred-toggle-btn:hover:not(:disabled) {
	color: var(--white);
	border-color: var(--gray);
}
.pred-toggle-btn[aria-pressed="true"] {
	color: var(--void);
	background: var(--silver);
	border-color: var(--silver);
}
.pred-toggle-btn:disabled {
	opacity: 0.5;
	cursor: default;
}
@media (prefers-reduced-motion: reduce) {
	.pred-toggle-btn {
		transition: none;
	}
}
@media (max-width: 560px) {
	.pred-sandbox-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.pred-brier-scores {
		grid-template-columns: 1fr;
	}
}
/* === end island: predictions === */
/* === island: evidence-popup =================================================
   Site-wide hover/focus popup: upgrades existing internal links (exact href
   match against /evidence/fragments.json) into a small evidence card. One
   singleton element, appended to <body> and absolutely positioned near the
   triggering link, so opening it never shifts surrounding layout. Wired from
   templates/index.html and the shared essay template (build-writing.py) via
   assets/evidence-popup.js. ============================================== */
.evi-pop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 60;
	width: min(320px, calc(100vw - 24px));
	background: var(--ink);
	color: var(--white);
	border: 1px solid var(--edge);
	border-radius: 2px;
	padding: var(--space-3) var(--space-4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}
.evi-pop.is-open {
	opacity: 1;
}
.evi-pop-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ember);
	margin: 0 0 var(--space-2);
}
.evi-pop-title {
	font-family: var(--font-display);
	font-size: var(--fs-subsection);
	color: var(--white);
	margin: 0 0 var(--space-2);
}
.evi-pop-lines {
	margin: 0;
}
.evi-pop-line {
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--silver);
	margin: 0 0 var(--space-2);
}
.evi-pop-line:last-child {
	margin-bottom: 0;
}
.evi-pop-asof {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--gray);
	margin-top: var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
	.evi-pop {
		transition: none;
	}
}
/* === end island: evidence-popup === */

/* === island: verdict-note-sim ================================================
   The health-verdict simulator mounted inside notes/anatomy-of-a-health-
   verdict.html (assets/verdict-simulator.js, driving assets/verdict-core.js).
   JS-off content is the note's authored prose, unchanged; this whole block
   stays `hidden` on the mount element until the island's own script wires up
   and renders successfully, so a JS-off visitor never sees dead controls.
   Reuses the same control/verdict vocabulary as the Verdict Machine
   (verdict-machine/index.html's .vm-page island) at a smaller scale, scoped
   to `.vsim` instead of a page-level body class since this island lives
   inside an ordinary note page. Every color is a direct reference to the
   site's global Forge tokens (no local redefinition layer, unlike .vm-page,
   which had to retrofit a previously standalone light theme). ============= */
.vsim {
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: 6px;
	padding: var(--space-5) var(--space-5) var(--space-6);
	margin: var(--space-6) 0;
}
.vsim-h {
	font-family: var(--font-display);
	font-size: var(--fs-subsection);
	color: var(--white);
	margin: 0 0 var(--space-2);
}
.vsim-lede {
	color: var(--silver);
	font-size: var(--fs-small);
	margin: 0 0 var(--space-4);
}
.vsim-lede a {
	color: var(--ember);
}
.vsim-stageno {
	color: var(--gray);
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--space-2);
}
.vsim-panel {
	border-top: 1px solid var(--edge);
	padding-top: var(--space-4);
	margin-top: var(--space-4);
}
.vsim-panel:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

/* controls */
.vsim label {
	user-select: none;
}
.vsim .rowgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-2) var(--space-4);
	margin: var(--space-2) 0;
}
.vsim .check {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-small);
	color: var(--silver);
	padding: 3px 0;
}
.vsim .check input {
	width: 16px;
	height: 16px;
	accent-color: var(--ember);
	flex: none;
}
.vsim select,
.vsim input.vsim-stepper {
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	color: var(--white);
	background: var(--void);
	border: 1px solid var(--edge);
	border-radius: 5px;
	padding: 5px 8px;
}
.vsim .field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: var(--fs-label);
	color: var(--gray);
}
.vsim .field > span {
	font-weight: 600;
	letter-spacing: 0.02em;
}
.vsim input[type="range"] {
	width: 100%;
	accent-color: var(--ember);
	margin: 6px 0 0;
}

/* verdict strip */
.vsim-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	align-items: baseline;
	background: var(--void);
	border: 1px solid var(--edge);
	border-radius: 5px;
	padding: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-4);
}
.vsim-strip .vsim-cell {
	display: flex;
	gap: 7px;
	align-items: baseline;
	min-width: 0;
}
.vsim-strip .lbl {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--gray);
	font-weight: 600;
}
.vsim-strip .val {
	font-weight: 700;
	font-size: 0.95rem;
	white-space: nowrap;
	color: var(--white);
}
.vsim-strip .val.vsim-crit {
	color: var(--white);
	background: rgba(158, 27, 34, 0.22);
	border: 1px solid var(--crimson);
	border-radius: 4px;
	padding: 1px 7px;
}

/* ladder */
.vsim .ladder {
	list-style: none;
	padding: 0;
	margin: var(--space-3) 0 var(--space-2);
	border-left: 2px solid var(--edge);
}
.vsim .ladder li {
	padding: 5px 0 5px 14px;
	color: var(--gray);
	font-size: var(--fs-small);
	position: relative;
}
.vsim .ladder li.on {
	color: var(--white);
	font-weight: 700;
}
.vsim .ladder li.on::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--ember);
}
.vsim .ladder .why {
	display: block;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--silver);
}

/* rationale */
.vsim .rationale {
	border-left: 3px solid var(--ember);
	background: var(--void);
	padding: var(--space-2) var(--space-3);
	border-radius: 0 5px 5px 0;
	font-family: var(--font-prose);
	font-size: var(--fs-small);
	color: var(--silver);
	margin: var(--space-2) 0;
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
	.vsim .ladder li,
	.vsim .rationale,
	.vsim-strip .val {
		transition: none;
	}
}
/* === end island: verdict-note-sim === */