:root {
		--ground: #f4f5f9;
		--surface: #ffffff;
		--surface-2: #eceef5;
		--ink: #1d2233;
		--ink-soft: #545b70;
		--ink-faint: #838a9e;
		--border: #dcdfeb;
		--border-strong: #c5c9db;
		--accent: #4556a4;
		--accent-ink: #3c4a8f;
		--accent-soft: #e5e8f4; --purple: #814a95; --purple-ink: #6f3f81; --purple-soft: #efe6f2; --compute: #467f8a; --compute-ink: #396770; --compute-soft: #e0edef; --require: #e69019; --require-ink: #9a5f0c; --require-soft: #fcecd3;
		--permit: #4b9e64;
		--permit-soft: #e2f1e7;
		--permit-ink: #3a7d4e;
		--forbid: #b92929;
		--forbid-soft: #f7dede;
		--forbid-ink: #a52222;
		--shadow-sm: 0 1px 2px rgba(29, 34, 51, .06);
		--shadow: 0 1px 2px rgba(29, 34, 51, .05), 0 10px 26px -12px rgba(29, 34, 51, .18);
		--font-display: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
		--font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
		--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;
		--maxw: 940px;
		--prosew: 68ch;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--ground: #14161f;
			--surface: #1c1f2b;
			--surface-2: #252939;
			--ink: #e6e8f1;
			--ink-soft: #a7acc0;
			--ink-faint: #7d8398;
			--border: #2d3141;
			--border-strong: #3c4256;
			--accent: #8a97d8;
			--accent-ink: #9aa6e2;
			--accent-soft: #23273a; --purple: #bd93cd; --purple-ink: #cba4d8; --purple-soft: #2a2033; --compute: #6fb3bf; --compute-ink: #85c2cd; --compute-soft: #172a2e; --require: #efa53f; --require-ink: #f2b866; --require-soft: #2c2210;
			--permit: #6cc286;
			--permit-soft: #182a1f;
			--permit-ink: #86cf9c;
			--forbid: #e5776b;
			--forbid-soft: #2f1b1a;
			--forbid-ink: #f0968b;
			--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
			--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -14px rgba(0, 0, 0, .6);
		}
	}

	:root[data-theme="light"] {
		--ground: #f4f5f9;
		--surface: #ffffff;
		--surface-2: #eceef5;
		--ink: #1d2233;
		--ink-soft: #545b70;
		--ink-faint: #838a9e;
		--border: #dcdfeb;
		--border-strong: #c5c9db;
		--accent: #4556a4;
		--accent-ink: #3c4a8f;
		--accent-soft: #e5e8f4; --purple: #814a95; --purple-ink: #6f3f81; --purple-soft: #efe6f2; --compute: #467f8a; --compute-ink: #396770; --compute-soft: #e0edef; --require: #e69019; --require-ink: #9a5f0c; --require-soft: #fcecd3;
		--permit: #4b9e64;
		--permit-soft: #e2f1e7;
		--permit-ink: #3a7d4e;
		--forbid: #b92929;
		--forbid-soft: #f7dede;
		--forbid-ink: #a52222;
		--shadow-sm: 0 1px 2px rgba(29, 34, 51, .06);
		--shadow: 0 1px 2px rgba(29, 34, 51, .05), 0 10px 26px -12px rgba(29, 34, 51, .18);
	}

	:root[data-theme="dark"] {
		--ground: #14161f;
		--surface: #1c1f2b;
		--surface-2: #252939;
		--ink: #e6e8f1;
		--ink-soft: #a7acc0;
		--ink-faint: #7d8398;
		--border: #2d3141;
		--border-strong: #3c4256;
		--accent: #8a97d8;
		--accent-ink: #9aa6e2;
		--accent-soft: #23273a; --purple: #bd93cd; --purple-ink: #cba4d8; --purple-soft: #2a2033; --compute: #6fb3bf; --compute-ink: #85c2cd; --compute-soft: #172a2e; --require: #efa53f; --require-ink: #f2b866; --require-soft: #2c2210;
		--permit: #6cc286;
		--permit-soft: #182a1f;
		--permit-ink: #86cf9c;
		--forbid: #e5776b;
		--forbid-soft: #2f1b1a;
		--forbid-ink: #f0968b;
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -14px rgba(0, 0, 0, .6);
	}

	* {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		background: var(--ground);
		color: var(--ink);
		font-family: var(--font-body);
		font-size: 17px;
		line-height: 1.65;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	.wrap {
		max-width: var(--maxw);
		margin: 0 auto;
		padding: 0 24px 96px;
	}

	.prose {
		max-width: var(--prosew);
	}

	p {
		margin: 0 0 1em;
	}

	a {
		color: var(--accent-ink);
		text-underline-offset: 2px;
		text-decoration-thickness: 1px;
	}

	strong {
		font-weight: 650;
	}

	h1, h2, h3 {
		font-family: var(--font-display);
		font-weight: 600;
		text-wrap: balance;
		line-height: 1.18;
		color: var(--ink);
	}

	code, .mono {
		font-family: var(--font-mono);
		font-size: .86em;
	}

	:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
		border-radius: 4px;
	}

	/* ---------- Top bar ---------- */
	.topbar {
		position: sticky;
		top: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 24px;
		background: color-mix(in srgb, var(--ground) 86%, transparent);
		backdrop-filter: saturate(1.4) blur(8px);
		border-bottom: 1px solid var(--border);
	}

	.topbar .brand {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: .82rem;
		font-weight: 600;
		letter-spacing: .01em;
		color: var(--ink-soft);
	}

	.topbar .brand .mark {
		font-size: 1.1rem;
	}

	.toggle {
		appearance: none;
		border: 1px solid var(--border-strong);
		background: var(--surface);
		color: var(--ink-soft);
		font: inherit;
		font-size: .78rem;
		padding: 6px 12px;
		border-radius: 999px;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		transition: border-color .15s, color .15s;
	}

	.toggle:hover {
		border-color: var(--accent);
		color: var(--accent-ink);
	}

	/* ---------- Hero ---------- */
	.hero {
		padding: 64px 0 40px;
		border-bottom: 1px solid var(--border);
		margin-bottom: 44px;
	}

	.eyebrow {
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--accent-ink);
		margin: 0 0 18px;
	}

	.hero h1 {
		font-size: clamp(2rem, 5.2vw, 3rem);
		margin: 0 0 16px;
		letter-spacing: -.01em;
	}

	.hero .lede {
		font-size: 1.18rem;
		line-height: 1.55;
		color: var(--ink-soft);
		max-width: 62ch;
		margin: 0 0 28px;
	}

	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.chip {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 999px;
		padding: 5px 13px;
		font-size: .78rem;
		color: var(--ink-soft);
		box-shadow: var(--shadow-sm);
	}

	.chip b {
		color: var(--ink);
		font-weight: 600;
	}

	.chip .dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--accent);
	}

	/* ---------- Ruleset chooser ---------- */
	.chooser {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 16px;
		margin-bottom: 56px;
	}

	.chooser a {
		display: block;
		text-decoration: none;
		color: inherit;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		padding: 22px 24px;
		box-shadow: var(--shadow-sm);
		transition: border-color .15s, transform .15s, box-shadow .15s;
	}

	.chooser a:hover {
		border-color: var(--accent);
		transform: translateY(-2px);
		box-shadow: var(--shadow);
	}

	.chooser .rlabel {
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--accent-ink);
		margin: 0 0 10px;
	}

	.chooser h3 {
		font-size: 1.24rem;
		margin: 0 0 8px;
	}

	.chooser p {
		font-size: .92rem;
		color: var(--ink-soft);
		margin: 0 0 14px;
	}

	.chooser .rstats {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 14px;
		font-size: .78rem;
		color: var(--ink-faint);
		font-family: var(--font-mono);
	}

	/* ---------- Contents ---------- */
	.toc {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		padding: 24px 26px;
		margin-bottom: 64px;
		box-shadow: var(--shadow-sm);
	}

	.toc > h2 {
		font-family: var(--font-body);
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--ink-faint);
		margin: 0 0 18px;
	}

	.toc-groups {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		gap: 26px;
	}

	.toc-group h3 {
		font-family: var(--font-body);
		font-size: .78rem;
		font-weight: 700;
		color: var(--accent-ink);
		margin: 0 0 8px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--border);
	}

	.toc-group ol {
		list-style: none;
		margin: 0;
		padding: 0;
		counter-reset: toc;
	}

	.toc-group li {
		counter-increment: toc;
	}

	.toc a {
		display: flex;
		gap: 10px;
		align-items: baseline;
		padding: 5px 4px;
		color: var(--ink);
		text-decoration: none;
		border-radius: 6px;
		font-size: .92rem;
	}

	.toc-group ol a::before {
		content: counter(toc, decimal-leading-zero);
		font-family: var(--font-mono);
		font-size: .74rem;
		color: var(--accent-ink);
		font-weight: 600;
	}

	.toc a:hover {
		color: var(--accent-ink);
	}

	/* ---------- Part dividers ---------- */
	.part {
		margin: 96px 0 48px;
		padding: 44px 26px 34px;
		border-radius: 16px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-top: 3px solid var(--accent);
		box-shadow: var(--shadow-sm);
		scroll-margin-top: 72px;
	}

	.part:first-of-type {
		margin-top: 40px;
	}

	.part .peyebrow {
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--accent-ink);
		margin: 0 0 12px;
	}

	.part h2 {
		font-size: clamp(1.7rem, 4vw, 2.4rem);
		margin: 0 0 12px;
		letter-spacing: -.01em;
	}

	.part .psub {
		font-size: 1.05rem;
		color: var(--ink-soft);
		max-width: 60ch;
		margin: 0 0 20px;
	}

	.part .chips {
		margin-top: 4px;
	}

	/* ---------- Sections ---------- */
	section {
		margin-bottom: 68px;
		scroll-margin-top: 72px;
	}

	.sec-head {
		display: flex;
		align-items: baseline;
		gap: 14px;
		margin-bottom: 22px;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--border);
	}

	.sec-num {
		font-family: var(--font-mono);
		font-size: .9rem;
		font-weight: 600;
		color: var(--accent-ink);
		flex: none;
	}

	.sec-head h2 {
		font-size: clamp(1.4rem, 3.2vw, 1.85rem);
		margin: 0;
		letter-spacing: -.01em;
	}

	h3 {
		font-size: 1.16rem;
		margin: 34px 0 12px;
	}

	/* ---------- Callouts ---------- */
	.note {
		border: 1px solid var(--border);
		border-left: 3px solid var(--accent);
		background: var(--surface);
		border-radius: 0 10px 10px 0;
		padding: 16px 20px;
		margin: 22px 0;
		font-size: .96rem;
	}

	.note .note-label {
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--accent-ink);
		margin: 0 0 6px;
	}

	.note.warn {
		border-left-color: var(--forbid);
	}

	.note.warn .note-label {
		color: var(--forbid-ink);
	}

	.note p:last-child {
		margin-bottom: 0;
	}

	/* ---------- Badges ---------- */
	.badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: .7rem;
		font-weight: 650;
		letter-spacing: .02em;
		padding: 2px 9px;
		border-radius: 999px;
		border: 1px solid transparent;
		white-space: nowrap;
	}

	.badge.input {
		background: var(--surface-2);
		color: var(--ink-soft);
		border-color: var(--border);
	}

	.badge.computed {
		background: var(--compute-soft);
		color: var(--compute-ink);
		border-color: color-mix(in srgb, var(--compute) 35%, transparent);
	}

	.badge.req {
		background: var(--require-soft);
		color: var(--require-ink);
	}

	.badge.opt {
		background: var(--surface-2);
		color: var(--ink-faint);
		border-color: var(--border);
	}

	.badge.permit {
		background: var(--permit-soft);
		color: var(--permit-ink);
	}

	.badge.forbid {
		background: var(--forbid-soft);
		color: var(--forbid-ink);
	}

	.badge.reqperm {
		background: var(--require-soft);
		color: var(--require-ink);
		border-color: color-mix(in srgb, var(--require) 35%, transparent);
	}

	.badge.notreq {
		background: var(--surface-2);
		color: var(--ink-faint);
		border-color: var(--border);
	}

	/* ---------- Data model tree ---------- */
	.model {
		display: grid;
		gap: 16px;
	}

	.entity {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 18px 20px;
		box-shadow: var(--shadow-sm);
	}

	.entity > h4 {
		margin: 0 0 4px;
		font-family: var(--font-display);
		font-size: 1.08rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.entity > .entity-desc {
		margin: 0 0 14px;
		color: var(--ink-faint);
		font-size: .9rem;
	}

	.fields {
		display: grid;
		gap: 7px;
	}

	.field {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		padding: 8px 12px;
		background: var(--ground);
		border: 1px solid var(--border);
		border-radius: 8px;
		font-size: .92rem;
	}

	.field .fname {
		font-weight: 550;
	}

	.field .ftype {
		font-size: .74rem;
		color: var(--ink-faint);
		font-family: var(--font-mono);
	}

	.field .fnote {
		font-size: .82rem;
		color: var(--ink-faint);
		flex-basis: 100%;
	}

	.field .spacer {
		flex: 1;
	}

	/* ---------- Concept cards ---------- */
	.cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
		gap: 16px;
	}

	.card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 20px;
		box-shadow: var(--shadow-sm);
	}

	.card .kicker {
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--accent-ink);
		margin: 0 0 10px;
	}

	.card h4 {
		font-family: var(--font-display);
		font-size: 1.12rem;
		margin: 0 0 8px;
	}

	.card p {
		margin: 0;
		font-size: .93rem;
		color: var(--ink-soft);
	}

	/* ---------- Flowchart ---------- */
	.flowwrap {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		padding: 28px 24px;
		margin: 24px 0;
		box-shadow: var(--shadow-sm);
		overflow-x: auto;
	}

	.flow {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 300px;
	}

	.node {
		width: 100%;
		max-width: 560px;
		border-radius: 10px;
		padding: 14px 18px;
		text-align: center;
		border: 1px solid var(--border-strong);
		background: var(--surface-2);
		font-size: .96rem;
	}

	.node.start {
		background: var(--ground);
		color: var(--ink-soft);
		font-size: .86rem;
		letter-spacing: .02em;
		border-style: dashed;
		max-width: 440px;
	}

	.node.decision {
		background: var(--surface);
		border-color: var(--border-strong);
		box-shadow: var(--shadow-sm);
		padding: 0;
		overflow: hidden;
	}

	.node.decision .q {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		text-align: left;
		padding: 14px 18px;
		font-weight: 550;
	}

	.node.decision .q .dmark {
		flex: none;
		width: 22px;
		height: 22px;
		display: grid;
		place-items: center;
		transform: rotate(45deg);
		background: var(--purple-soft);
		border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent);
		border-radius: 4px;
		margin-top: 2px;
	}

	.node.decision .q .dmark span {
		transform: rotate(-45deg);
		font-size: .7rem;
		font-weight: 800;
		color: var(--purple-ink);
	}

	.node.decision .branch-no {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 18px;
		background: var(--forbid-soft);
		border-top: 1px dashed color-mix(in srgb, var(--forbid) 40%, transparent);
		text-align: left;
		font-size: .86rem;
		color: var(--forbid-ink);
	}

	.node.decision .branch-no.neutral {
		background: var(--surface-2);
		border-top-color: var(--border);
		color: var(--ink-soft);
	}

	.node.terminal {
		max-width: 380px;
		font-weight: 650;
		font-size: 1.02rem;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.node.permit {
		background: var(--permit-soft);
		border-color: color-mix(in srgb, var(--permit) 45%, transparent);
		color: var(--permit-ink);
	}

	.node.forbid {
		background: var(--forbid-soft);
		border-color: color-mix(in srgb, var(--forbid) 45%, transparent);
		color: var(--forbid-ink);
	}

	.node.require {
		background: var(--require-soft);
		border-color: color-mix(in srgb, var(--require) 50%, transparent);
		color: var(--require-ink);
	}

	.node.terminal .ico {
		font-size: 1.1rem;
	}

	.link {
		width: 2px;
		height: 26px;
		background: var(--border-strong);
		flex: none;
	}

	.link.yes {
		position: relative;
	}

	.link .yeslabel {
		position: absolute;
		left: 8px;
		top: 50%;
		transform: translateY(-50%);
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .06em;
		color: var(--permit-ink);
		background: var(--surface);
		padding: 1px 6px;
		border-radius: 4px;
		border: 1px solid var(--border);
	}

	.link .yeslabel.amber {
		color: var(--require-ink);
	}

	.legend {
		display: flex;
		flex-wrap: wrap;
		gap: 14px 22px;
		margin-top: 22px;
		padding-top: 16px;
		border-top: 1px solid var(--border);
		font-size: .8rem;
		color: var(--ink-soft);
	}

	.legend span {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.swatch {
		width: 14px;
		height: 14px;
		border-radius: 4px;
		border: 1px solid var(--border-strong);
		flex: none;
	}

	.swatch.dec {
		transform: rotate(45deg);
		background: var(--purple-soft);
		border-color: var(--purple);
		width: 12px;
		height: 12px;
	}

	.swatch.p {
		background: var(--permit-soft);
		border-color: var(--permit);
	}

	.swatch.f {
		background: var(--forbid-soft);
		border-color: var(--forbid);
	}

	.swatch.r {
		background: var(--require-soft);
		border-color: var(--require);
	}

	/* ---------- Tables ---------- */
	.tablewrap {
		overflow-x: auto;
		border: 1px solid var(--border);
		border-radius: 12px;
		margin: 22px 0;
		box-shadow: var(--shadow-sm);
	}

	table {
		border-collapse: collapse;
		width: 100%;
		font-size: .92rem;
		background: var(--surface);
	}

	th, td {
		text-align: left;
		padding: 11px 16px;
		border-bottom: 1px solid var(--border);
		vertical-align: middle;
	}

	thead th {
		background: var(--surface-2);
		font-size: .72rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--ink-soft);
		font-weight: 700;
		white-space: nowrap;
	}

	tbody tr:last-child td {
		border-bottom: none;
	}

	td.center, th.center {
		text-align: center;
	}

	.cellyes {
		color: var(--permit-ink);
		font-weight: 600;
	}

	.cellno {
		color: var(--forbid-ink);
		font-weight: 600;
	}

	.result-permit {
		color: var(--permit-ink);
		font-weight: 700;
	}

	.result-forbid {
		color: var(--forbid-ink);
		font-weight: 700;
	}

	.mono-path {
		font-family: var(--font-mono);
		font-size: .78rem;
		color: var(--ink-faint);
	}

	/* ---------- Worked examples ---------- */
	.example {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		padding: 22px 24px;
		margin: 18px 0;
		box-shadow: var(--shadow-sm);
	}

	.example h4 {
		margin: 0 0 4px;
		font-family: var(--font-display);
		font-size: 1.14rem;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.example .given {
		margin: 12px 0 16px;
		display: grid;
		gap: 6px;
	}

	.example .given .g {
		display: flex;
		gap: 10px;
		align-items: center;
		font-size: .9rem;
	}

	.example .given .g .gv {
		font-weight: 600;
	}

	.trace {
		border-top: 1px solid var(--border);
		padding-top: 14px;
		display: grid;
		gap: 8px;
	}

	.step {
		display: flex;
		gap: 12px;
		align-items: baseline;
		font-size: .9rem;
	}

	.step .n {
		font-family: var(--font-mono);
		font-size: .74rem;
		color: var(--ink-faint);
		flex: none;
		width: 1.4em;
	}

	.outcome {
		margin-top: 14px;
		padding: 12px 16px;
		border-radius: 10px;
		font-weight: 650;
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--surface-2);
		color: var(--ink-soft);
	}

	.outcome.permit {
		background: var(--permit-soft);
		color: var(--permit-ink);
	}

	.outcome.forbid {
		background: var(--forbid-soft);
		color: var(--forbid-ink);
	}

	.outcome.require {
		background: var(--require-soft);
		color: var(--require-ink);
	}

	/* ---------- Glossary ---------- */
	.glossary {
		display: grid;
		gap: 2px;
	}

	.gterm {
		display: grid;
		grid-template-columns: minmax(150px, 230px) 1fr;
		gap: 20px;
		padding: 14px 0;
		border-bottom: 1px solid var(--border);
	}

	.gterm dt {
		font-weight: 650;
		font-family: var(--font-display);
		font-size: 1.02rem;
	}

	.gterm dd {
		margin: 0;
		color: var(--ink-soft);
		font-size: .94rem;
	}

	/* ---------- Footer ---------- */
	.footer {
		margin-top: 40px;
		padding-top: 26px;
		border-top: 1px solid var(--border);
		color: var(--ink-faint);
		font-size: .82rem;
	}

	.footer .prov {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		gap: 16px 24px;
		margin-top: 16px;
	}

	.footer .provcol h4 {
		font-family: var(--font-body);
		font-size: .72rem;
		text-transform: uppercase;
		letter-spacing: .08em;
		color: var(--accent-ink);
		margin: 0 0 8px;
	}

	.footer .provcol div {
		margin-bottom: 8px;
	}

	.footer .provcol span {
		display: block;
		font-size: .66rem;
		text-transform: uppercase;
		letter-spacing: .08em;
		color: var(--ink-faint);
		margin-bottom: 1px;
	}

	.footer .provcol b {
		color: var(--ink-soft);
		font-weight: 600;
		font-size: .84rem;
		font-family: var(--font-mono);
		word-break: break-all;
	}

	ul.clean {
		margin: 12px 0;
		padding-left: 22px;
	}

	ul.clean li {
		margin-bottom: 7px;
	}

	@media (max-width: 620px) {
		body {
			font-size: 16px;
		}

		.hero {
			padding: 40px 0 32px;
		}

		.gterm {
			grid-template-columns: 1fr;
			gap: 4px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		* {
			transition: none !important;
			scroll-behavior: auto !important;
		}
	}


/* ============================================================
   TEST CASES
   ============================================================ */
.suite {
	border: 1px solid var(--border);
	border-radius: 12px;
	margin: 18px 0;
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.suite > .suite-head {
	padding: 14px 18px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
}
.suite > .suite-head h4 { margin: 0; font-size: 1.05rem; }
.suite > .suite-head .suite-meta { font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }
.scenario { padding: 16px 18px; border-top: 1px solid var(--border); }
.scenario:first-of-type { border-top: none; }
.scenario h5 { margin: 0 0 10px; font-size: .98rem; font-family: var(--font-display); }
.given-then { display: grid; gap: 12px; }
.tc-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 5px; }
.tc-empty { color: var(--forbid-ink); font-style: italic; font-size: .88rem; }
.tc-then ul { margin: 0; padding-left: 18px; }
.tc-then li { margin: 2px 0; font-size: .9rem; }
/* vertical "Given inputs": col 1 = property (right-aligned + colon), col 2 = value */
.tc-inputs { width: auto; }
.tc-inputs td { border: 1px solid var(--border); padding: 4px 10px; vertical-align: top; }
.tc-inputs td.tc-prop {
	text-align: right;
	padding-right: 12px;
	font-family: var(--font-mono);
	font-size: .8rem;
	color: var(--compute-ink);
	white-space: nowrap;
}
.tc-inputs td.tc-val { font-weight: 600; }
.cov-yes { color: var(--permit-ink); font-weight: 600; }
.cov-no { color: var(--forbid-ink); font-weight: 600; }

/* ============================================================
   DOC-TREE: index / cross-doc nav
   ============================================================ */
.docnav {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 0 0 28px;
	font-size: .82rem;
}
.docnav a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px;
	border: 1px solid var(--border); background: var(--surface);
	color: var(--ink-soft); text-decoration: none;
}
.docnav a:hover { border-color: var(--accent); color: var(--accent-ink); }
.docnav a.current { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.catalogue { display: grid; gap: 26px; }
.cat-project { }
.cat-project > h3 { margin: 0 0 4px; font-size: 1.2rem; }
.cat-project > .cat-sub { margin: 0 0 12px; color: var(--ink-faint); font-size: .9rem; }
.cat-rulesets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cat-card {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--border); border-radius: 12px;
	padding: 16px 18px; background: var(--surface); box-shadow: var(--shadow-sm);
	transition: border-color .15s, transform .15s;
}
.cat-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cat-card h4 { margin: 0 0 4px; font-size: 1.02rem; }
.cat-card p { margin: 0 0 10px; font-size: .86rem; color: var(--ink-soft); }
.cat-card .cat-links { display: flex; gap: 10px; font-size: .8rem; }
.cat-card .cat-links span { color: var(--accent-ink); font-weight: 600; }
.cat-card .cat-stat { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-faint); }