/*
 * Forest profile card — fifty coded directions.
 * One stylesheet, no dependencies. Card colours live on the .grid so the
 * Day/Night switch repaints every mock at once; the lab chrome stays dark.
 */

:root {
	color-scheme: dark;

	--shell: #0c0e0b;
	--shell-raised: #161913;
	--shell-edge: #262a20;
	--shell-ink: #eef1e8;
	--shell-muted: #949a8c;
	--shell-accent: #a9e34b;

	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

	--r-lg: 22px;
	--r-md: 14px;
	--r-sm: 9px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--shell);
	color: var(--shell-ink);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

button,
input {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

b,
strong {
	font-weight: 700;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -60px;
	left: 12px;
	z-index: 20;
	padding: 10px 16px;
	border-radius: 0 0 var(--r-sm) var(--r-sm);
	background: var(--shell-accent);
	color: #12200a;
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus-visible {
	top: 0;
}

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

/* ------------------------------------------------------------- masthead */

.masthead {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-end;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 24px 24px;
}

.masthead-copy {
	max-width: 620px;
}

.kicker {
	margin: 0 0 10px;
	color: var(--shell-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.masthead h1 {
	margin: 0 0 12px;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.lede {
	margin: 0;
	max-width: 60ch;
	color: var(--shell-muted);
}

.lede b {
	color: var(--shell-ink);
}

.inputs-panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 1px;
	border-radius: var(--r-md);
	background: var(--shell-edge);
	overflow: hidden;
}

.inputs-panel > div {
	padding: 12px 16px;
	background: var(--shell-raised);
}

.inputs-panel dt {
	color: var(--shell-muted);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.inputs-panel dd {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- toolbar */

.toolbar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 24px 16px;
	border-bottom: 1px solid var(--shell-edge);
	/* Solid, not translucent: a backdrop blur on a sticky bar this tall
	   costs a compositing layer over the whole scroll and buys nothing. */
	background: var(--shell);
	box-shadow: 0 10px 24px -18px rgb(0 0 0 / 90%);
}

.toolbar-line {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
}

.toolbar-line-end {
	justify-content: flex-start;
}

.search-field {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 220px;
	max-width: 420px;
	padding: 0 14px;
	height: 40px;
	border: 1px solid var(--shell-edge);
	border-radius: 999px;
	background: var(--shell-raised);
}

.search-field svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: var(--shell-muted);
	stroke-width: 2;
	stroke-linecap: round;
}

.search-field input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
}

.search-field input::placeholder {
	color: var(--shell-muted);
}

.pill,
.chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 13px;
	border: 1px solid var(--shell-edge);
	border-radius: 999px;
	background: var(--shell-raised);
	color: var(--shell-ink);
	font-size: 13px;
	white-space: nowrap;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.pill {
	height: 40px;
}

.chip b,
.pill b {
	color: var(--shell-muted);
	font-weight: 600;
	font-size: 11px;
}

.chip:hover,
.pill:hover {
	border-color: color-mix(in srgb, var(--shell-accent) 45%, var(--shell-edge));
}

.chip[aria-pressed='true'],
.pill[aria-pressed='true'] {
	border-color: var(--shell-accent);
	background: color-mix(in srgb, var(--shell-accent) 16%, var(--shell-raised));
	color: #f2ffdf;
}

.chip[aria-pressed='true'] b {
	color: var(--shell-accent);
}

.pill-star .star {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linejoin: round;
}

.pill-star[aria-pressed='true'] .star {
	fill: var(--shell-accent);
	stroke: var(--shell-accent);
}

.count-badge {
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--shell-edge);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.pill-ghost {
	color: var(--shell-muted);
}

.chip-scroller {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}

.segmented {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--shell-edge);
	border-radius: 999px;
	background: var(--shell-raised);
}

.segmented-label {
	padding: 0 8px 0 6px;
	color: var(--shell-muted);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.segmented button {
	height: 28px;
	padding: 0 11px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--shell-muted);
	font-size: 12px;
	font-weight: 600;
}

.segmented button[aria-pressed='true'] {
	background: var(--shell-accent);
	color: #12200a;
}

.result-count {
	margin: 0 0 0 auto;
	color: var(--shell-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.colophon {
	max-width: 1400px;
	margin: 0 auto;
	padding: 12px 24px 60px;
	color: var(--shell-muted);
	font-size: 12px;
}

.colophon code {
	font-family: var(--mono);
	color: var(--shell-ink);
}

/* ----------------------------------------------------------------- grid */

.grid {
	--panel-width: 480px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr));
	gap: 26px;
	align-items: start;
	max-width: 1400px;
	margin: 0 auto;
	padding: 26px 24px 40px;
}

.grid[data-width='1280'] {
	grid-template-columns: minmax(0, 1fr);
}

.grid.is-empty::after {
	content: 'No direction matches those filters. Reset and try a different cut.';
	grid-column: 1 / -1;
	padding: 48px 0;
	color: var(--shell-muted);
	text-align: center;
}

.concept {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 16px 16px 18px;
	border: 1px solid var(--shell-edge);
	border-radius: var(--r-lg);
	background: var(--shell-raised);
}

.concept[hidden] {
	display: none;
}

.concept-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.concept-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-wrap: wrap;
}

.concept-no {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--shell-accent);
}

.concept-family {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--shell-muted);
}

.scope-chip {
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.scope-confirmed {
	background: rgb(129 215 0 / 14%);
	color: #b6ea5c;
}

.scope-sample {
	background: rgb(245 199 58 / 14%);
	color: #f0cf62;
}

.scope-needs {
	background: rgb(232 149 72 / 16%);
	color: #f0a468;
}

.star-btn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-left: auto;
	flex: none;
	border: 1px solid var(--shell-edge);
	border-radius: 50%;
	background: none;
}

.star-btn svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--shell-muted);
	stroke-width: 1.7;
	stroke-linejoin: round;
}

.star-btn[aria-pressed='true'] {
	border-color: var(--shell-accent);
}

.star-btn[aria-pressed='true'] svg {
	fill: var(--shell-accent);
	stroke: var(--shell-accent);
}

.concept-title {
	margin: 0;
	font-size: 19px;
	letter-spacing: -0.01em;
}

.concept-note {
	margin: 0;
	color: var(--shell-muted);
	font-size: 13.5px;
	line-height: 1.45;
}

.concept-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.concept-tags li {
	padding: 2px 8px;
	border: 1px solid var(--shell-edge);
	border-radius: 999px;
	color: var(--shell-muted);
	font-size: 11px;
}

/* The product panel the mock has to live inside. */
.stage {
	display: flex;
	justify-content: center;
	padding: 14px;
	border-radius: var(--r-md);
	background: var(--page);
	overflow-x: auto;
}

.panel {
	width: min(100%, var(--panel-width));
	min-width: 0;
}

/* ------------------------------------------------------- card palettes */

.grid[data-mode='night'] {
	--page: #212121;
	--card: #2f2f2f;
	--card-sunk: #272727;
	--card-raise: #3a3a3a;
	--ink: #f5f5f5;
	--muted: #a0a09e;
	--tree: #4ead62;
	--bar: #81d700;
	--track: #3b3b3b;
	--line: #474747;
	--hero: #dce7b6;
	--hero-ink: #0f1e00;
	--metal: #4a4a45;
	--paper: #3a3a36;
	--paper-ink: #f0efe6;
	--shadow: 0 6px 18px rgb(0 0 0 / 34%);
}

.grid[data-mode='day'] {
	--page: #eef1e8;
	--card: #ffffff;
	--card-sunk: #f5f7f2;
	--card-raise: #ffffff;
	--ink: #0f1e00;
	--muted: #71736e;
	--tree: #129b12;
	--bar: #81d700;
	--track: #ecece6;
	--line: #e2e4dc;
	--hero: #ebf3cd;
	--hero-ink: #0f1e00;
	--metal: #c9c8bd;
	--paper: #fbfaf3;
	--paper-ink: #221f16;
	--shadow: 0 6px 16px rgb(15 30 0 / 10%);
}

/* ---------------------------------------------------- shared card parts */

.card {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border-radius: 20px;
	background: var(--card);
	color: var(--ink);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.ico {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* identity */

.id-row,
.id-tight {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.id-av,
.id-dot {
	display: grid;
	place-items: center;
	flex: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--tree) 22%, transparent);
	color: var(--tree);
	font-weight: 700;
}

.id-av {
	width: 38px;
	height: 38px;
	font-size: 13px;
}

.id-dot {
	width: 24px;
	height: 24px;
	font-size: 10px;
}

.id-handle {
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.id-tight .id-handle {
	font-size: 12.5px;
	color: var(--muted);
}

.id-bare {
	min-width: 0;
	color: var(--muted);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* share */

.sh-round,
.sh-ghost,
.sh-square {
	display: grid;
	place-items: center;
	flex: none;
	border: 0;
	background: var(--card-raise);
	color: var(--ink);
	transition: transform 120ms ease, background 120ms ease;
}

.sh-round {
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.sh-ghost {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: none;
	color: var(--muted);
}

.sh-square {
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.sh-round:hover,
.sh-square:hover {
	transform: translateY(-1px);
	background: color-mix(in srgb, var(--tree) 30%, var(--card-raise));
}

.sh-ghost:hover {
	color: var(--tree);
}

.sh-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 7px 13px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: none;
	color: var(--ink);
	font-size: 12.5px;
	font-weight: 600;
}

.sh-text .ico {
	width: 15px;
	height: 15px;
}

.sh-text:hover {
	border-color: var(--tree);
	color: var(--tree);
}

/* progress toward the next tree */

.pbar {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.pbar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--bar);
}

.pbar-thin {
	height: 6px;
}

.pbar-flat {
	height: 4px;
	border-radius: 2px;
}

.pbar-flat i {
	border-radius: 2px;
}

/* the honesty tag, on the mock itself */

.dtag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 3px 8px;
	border-radius: 5px;
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dtag-sample {
	background: rgb(245 199 58 / 20%);
	color: #b58900;
	box-shadow: inset 0 0 0 1px rgb(245 199 58 / 45%);
}

.dtag-needs {
	background: rgb(232 149 72 / 20%);
	color: #b45f13;
	box-shadow: inset 0 0 0 1px rgb(232 149 72 / 45%);
}

.grid[data-mode='night'] .dtag-sample {
	color: #f5c73a;
}

.grid[data-mode='night'] .dtag-needs {
	color: #f0a468;
}


/* --------------------------------------------------------- lens chips */
/* The quotas this set was rebuilt to hit — graphics, spatial views,
   interaction, and how few cards lead on a numeral — are countable off the
   page because every concept wears its lens in the chrome. */

.lens-chip {
	padding: 2px 7px;
	border: 1px solid var(--shell-edge);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--shell-muted);
}

.lens-graph {
	border-color: rgb(120 190 255 / 40%);
	color: #8ec6ff;
}

.lens-spatial {
	border-color: rgb(150 220 190 / 40%);
	color: #86d8b6;
}

.lens-interaction {
	border-color: rgb(200 160 255 / 40%);
	color: #c3a4ff;
}

.lens-numeral {
	border-color: rgb(255 160 160 / 40%);
	color: #ff9f9f;
}

/* ------------------------------------------------------- chart atoms */
/* Two drawing surfaces. .chart stretches to its box, so it carries shapes
   and non-scaling strokes only; .figure keeps its aspect ratio, so it is the
   one allowed to hold text. */

.chart {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.chart * {
	vector-effect: non-scaling-stroke;
}

.figure {
	display: block;
	width: 100%;
	height: auto;
}

.figure text {
	font-family: var(--sans);
	font-size: 8.5px;
	letter-spacing: 0.02em;
}

.ch-grid {
	stroke: var(--line);
	stroke-width: 1;
	stroke-dasharray: 2 4;
}

.ch-axis {
	stroke: var(--line);
	stroke-width: 1;
}

.ch-line {
	fill: none;
	stroke: var(--bar);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ch-line-thin {
	stroke-width: 1.8;
}

.ch-step {
	stroke-linejoin: miter;
	stroke-linecap: butt;
}

.ch-area {
	fill: color-mix(in srgb, var(--bar) 20%, transparent);
	stroke: none;
}

.ch-area-soft {
	fill: color-mix(in srgb, var(--bar) 12%, transparent);
}

.ch-dot {
	fill: var(--bar);
	stroke: var(--card);
	stroke-width: 2;
}

.ch-dot-sm {
	stroke-width: 1.4;
}

.ch-rule {
	stroke: var(--line);
	stroke-width: 1;
}

.ch-rule-dash {
	stroke: var(--tree);
	stroke-width: 1.4;
	stroke-dasharray: 3 3;
}

.ch-slope {
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.8;
	opacity: 0.7;
}

.ch-slope.is-lead {
	stroke: var(--bar);
	stroke-width: 2.6;
	opacity: 1;
}

.ch-band {
	stroke: none;
}

.ch-band-0,
.ch-key-0 {
	fill: color-mix(in srgb, var(--bar) 78%, transparent);
	background: color-mix(in srgb, var(--bar) 78%, transparent);
}

.ch-band-1,
.ch-key-1 {
	fill: color-mix(in srgb, var(--tree) 72%, transparent);
	background: color-mix(in srgb, var(--tree) 72%, transparent);
}

.ch-band-2,
.ch-key-2 {
	fill: color-mix(in srgb, var(--tree) 40%, transparent);
	background: color-mix(in srgb, var(--tree) 40%, transparent);
}

.ch-band-3,
.ch-key-3 {
	fill: color-mix(in srgb, var(--muted) 34%, transparent);
	background: color-mix(in srgb, var(--muted) 34%, transparent);
}

/* Legends, axis rails and plot captions repeat across a dozen cards. */

.ch-key,
.bnd-key,
.stm-key,
.map-key,
.plg-key {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 11px;
}

.bnd-key li,
.stm-key li,
.map-key li,
.plg-key li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bnd-key i,
.stm-key i,
.map-key i,
.plg-key i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.card-title,
.hm-title,
.wkb-title,
.are-title,
.spk-title,
.tml-title,
.dot-title,
.his-title,
.slp-title,
.rad-title,
.bnd-title,
.sta-title,
.plg-title,
.nur-title,
.map-title,
.con-title,
.flr-title,
.cpr-title,
.zom-title,
.cnp-title,
.rts-title,
.flw-title,
.gnt-title,
.chd-title,
.cal-title,
.rng-title,
.stm-title,
.phe-title,
.waf-title,
.flt-title,
.blt-title,
.man-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.005em;
}

.hm-top,
.wkb-top,
.are-top,
.spk-top,
.tml-top,
.dot-top,
.his-top,
.slp-top,
.rad-top,
.bnd-top,
.sta-top,
.plg-top,
.nur-top,
.map-top,
.con-top,
.flr-top,
.cpr-top,
.zom-top,
.cnp-top,
.rts-top,
.flw-top,
.gnt-top,
.chd-top,
.cal-top,
.rng-top,
.stm-top,
.phe-top,
.waf-top,
.flt-top,
.blt-top,
.man-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.hm-foot,
.wkb-foot,
.are-foot,
.spk-foot,
.tml-foot,
.dot-foot,
.his-foot,
.slp-foot,
.rad-foot,
.bnd-foot,
.sta-foot,
.plg-foot,
.nur-foot,
.map-foot,
.con-foot,
.flr-foot,
.cpr-foot,
.cnp-foot,
.rts-foot,
.flw-foot,
.gnt-foot,
.chd-foot,
.rng-foot,
.stm-foot,
.phe-foot,
.flt-foot,
.blt-foot,
.arc-foot,
.bri-foot,
.bmb-foot,
.aba-foot,
.zom-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

/* Axis rails: evenly spread labels under or beside a plot. */

.wkb-xaxis,
.are-xaxis,
.dot-axis,
.his-axis,
.sta-xaxis,
.flr-axis,
.stm-axis,
.blt-axis {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: 0.04em;
}

/* The heatmap scale, shared by three cards so one legend teaches all of them. */

.hm-l0 {
	background: var(--track);
}

.hm-l1 {
	background: color-mix(in srgb, var(--bar) 26%, var(--track));
}

.hm-l2 {
	background: color-mix(in srgb, var(--bar) 50%, var(--track));
}

.hm-l3 {
	background: color-mix(in srgb, var(--bar) 74%, var(--track));
}

.hm-l4 {
	background: var(--bar);
}

.hm-legend {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--muted);
	font-size: 10px;
}

.hm-legend i {
	width: 9px;
	height: 9px;
	border-radius: 2px;
}

.hm-legend span:first-child {
	margin-right: 3px;
}

.hm-legend span:last-child {
	margin-left: 3px;
}

/* Figure atoms — the shared vocabulary of the drawn cards. */

.fg-label {
	fill: var(--muted);
}

.fg-label-lead {
	fill: var(--ink);
	font-weight: 700;
}

.fg-ring,
.fg-plate {
	fill: none;
	stroke: var(--line);
	stroke-width: 1.4;
}

.fg-plate {
	fill: var(--card-sunk);
	stroke: none;
}

.fg-faint {
	opacity: 0.45;
}

.fg-tick {
	stroke: var(--line);
	stroke-width: 1;
}

.fg-tick.is-major {
	stroke: var(--muted);
	stroke-width: 1.6;
}

.fg-mark {
	stroke: var(--tree);
	fill: none;
}

.fg-node {
	fill: color-mix(in srgb, var(--muted) 30%, var(--card-sunk));
	stroke: var(--line);
	stroke-width: 1;
}

.fg-node.is-you {
	fill: var(--bar);
	stroke: var(--card);
	stroke-width: 2;
}

.fg-edge {
	stroke: var(--line);
	stroke-width: 1.2;
}

.fg-edge.is-yours {
	stroke: color-mix(in srgb, var(--bar) 60%, transparent);
	stroke-width: 1.8;
}

.fg-halo {
	fill: none;
	stroke: color-mix(in srgb, var(--bar) 45%, transparent);
	stroke-width: 1.2;
	stroke-dasharray: 3 4;
}

.fg-leader {
	stroke: var(--muted);
	stroke-width: 1;
}

.fg-leader-dash {
	stroke-dasharray: 3 3;
}

.fg-base {
	stroke: var(--line);
	stroke-width: 2;
	stroke-linecap: round;
}

.fg-hub {
	fill: var(--card-sunk);
	stroke: var(--line);
	stroke-width: 1.4;
}

.fg-hub-num {
	fill: var(--ink);
	font-size: 13px;
	font-weight: 700;
}

.fg-hub-lab {
	fill: var(--muted);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fg-hub-sub {
	fill: var(--tree);
}

/* ====================================================== 1 · Ledger ===== */

.c-receipt {
	gap: 14px;
	align-items: center;
}

.rct-tape {
	position: relative;
	width: min(100%, 280px);
	padding: 22px 20px 18px;
	background: var(--paper);
	color: var(--paper-ink);
	font-family: var(--mono);
	text-align: center;
}

.rct-tape::before,
.rct-tape::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 8px;
	background:
		linear-gradient(-45deg, var(--card) 6px, transparent 0) 0 0 / 12px 12px repeat-x,
		linear-gradient(45deg, var(--card) 6px, transparent 0) 0 0 / 12px 12px repeat-x;
}

.rct-tape::before {
	top: 0;
	transform: scaleY(-1);
}

.rct-tape::after {
	bottom: 0;
}

.rct-brand {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.rct-handle {
	margin: 3px 0 0;
	font-size: 10px;
	opacity: 0.7;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rct-perf {
	height: 1px;
	margin: 12px 0;
	background: repeating-linear-gradient(
		90deg,
		currentColor 0 4px,
		transparent 4px 8px
	);
	opacity: 0.35;
}

.rct-lines {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	text-align: left;
}

.rct-lines li {
	display: flex;
	gap: 8px;
	padding: 3px 0;
}

.rct-lines li.is-open {
	opacity: 0.6;
}

.rct-what {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rct-when {
	width: 46px;
	opacity: 0.65;
}

.rct-qty {
	width: 34px;
	text-align: right;
}

.rct-sum {
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rct-sum b {
	font-size: 14px;
}

.rct-sum-soft {
	margin-top: 4px;
	font-weight: 400;
	opacity: 0.75;
}

.rct-code {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	height: 26px;
	margin: 14px 0 10px;
}

.rct-code i {
	height: 100%;
	background: currentColor;
	opacity: 0.8;
}

.rct-tape .dtag {
	align-self: center;
}

.rct-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.c-balance {
	gap: 18px;
}

.bal-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bal-body {
	display: flex;
	align-items: stretch;
	gap: 18px;
}

.bal-lead {
	flex: 1;
	min-width: 0;
	padding-right: 18px;
	border-right: 1px solid var(--line);
}

.bal-num {
	display: block;
	font-size: clamp(46px, 17cqi, 76px);
	line-height: 0.9;
	letter-spacing: -0.05em;
}

.bal-cap {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
}

.bal-side {
	display: flex;
	flex: none;
	align-items: center;
	gap: 9px;
}

.bal-lab {
	color: var(--muted);
	font-size: 10.5px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: right;
}

.bal-col {
	display: flex;
	align-items: flex-end;
	width: 14px;
	height: 74px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.bal-col i {
	width: 100%;
	border-radius: 999px;
	background: var(--bar);
}

.bal-pct {
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.c-punch {
	gap: 16px;
}

.pun-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pun-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	padding: 16px;
	border: 1px dashed var(--line);
	border-radius: 14px;
	background: var(--card-sunk);
}

.pun-slot {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1.5px dashed var(--line);
	border-radius: 50%;
	overflow: hidden;
}

.pun-slot .ico {
	width: 60%;
	height: 60%;
	stroke: var(--tree);
	stroke-width: 1.5;
}

.pun-slot.is-done {
	border-style: solid;
	border-color: var(--tree);
	background: color-mix(in srgb, var(--tree) 16%, transparent);
}

.pun-slot.is-part {
	border-style: solid;
	border-color: color-mix(in srgb, var(--bar) 60%, var(--line));
}

.pun-slot.is-part i {
	position: absolute;
	inset: auto 0 0;
	background: color-mix(in srgb, var(--bar) 45%, transparent);
}

.pun-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
}

.pun-cap b {
	color: var(--ink);
}

.c-manifest {
	gap: 12px;
}

.man-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	table-layout: fixed;
}

.man-table th {
	padding: 0 0 7px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

.man-table td {
	padding: 8px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.man-table .is-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.man-table tr.is-you td {
	color: var(--ink);
	font-weight: 700;
}

.man-stage {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--card-sunk);
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 400;
}

.man-table tr.is-you .man-stage {
	background: color-mix(in srgb, var(--tree) 18%, transparent);
	color: var(--tree);
	font-weight: 700;
}

.man-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.man-sum {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.man-sum b {
	color: var(--ink);
}

.c-deed {
	gap: 14px;
	align-items: flex-start;
}

.deed-sheet {
	width: 100%;
	padding: 22px 22px 18px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
	color: var(--paper-ink);
}

.deed-kicker {
	margin: 0 0 10px;
	font-family: var(--serif);
	font-size: 12px;
	font-style: italic;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

.deed-body {
	margin: 0;
	font-family: var(--serif);
	font-size: 15.5px;
	line-height: 1.55;
}

.deed-body b {
	font-weight: 700;
	white-space: nowrap;
}

.deed-rule {
	height: 1px;
	margin: 16px 0 12px;
	background: currentColor;
	opacity: 0.2;
}

.deed-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.deed-sign {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-family: var(--serif);
	font-size: 11px;
	font-style: italic;
	opacity: 0.65;
}

.deed-sign i {
	display: block;
	width: 116px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.deed-seal {
	width: 62px;
	flex: none;
}

.fg-ringed {
	fill: none;
}

.c-deed .dtag {
	margin-top: 14px;
}

/* ================================================== 2 · Instrument ===== */

.c-compass {
	gap: 12px;
}

.cmp-dial {
	width: min(100%, 236px);
	margin-inline: auto;
}

.fg-sweep {
	fill: color-mix(in srgb, var(--bar) 16%, transparent);
	stroke: none;
}

.fg-needle {
	stroke: var(--bar);
	stroke-width: 3;
	stroke-linecap: round;
}

.cmp-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cmp-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.cmp-cap b {
	color: var(--ink);
}

.c-abacus {
	gap: 14px;
}

.aba-frame {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 14px;
	border: 2px solid var(--metal);
	border-radius: 10px;
	background: var(--card-sunk);
}

.aba-rail {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aba-lab {
	width: 74px;
	flex: none;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aba-wire {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	height: 22px;
}

.aba-thread {
	position: absolute;
	inset: 50% 0 auto;
	height: 2px;
	background: var(--metal);
}

.aba-left,
.aba-right {
	position: relative;
	display: flex;
	gap: 2px;
}

.aba-left b,
.aba-right b {
	width: 14px;
	height: 18px;
	border-radius: 6px / 9px;
	background: var(--track);
	box-shadow: inset 0 0 0 1px var(--line);
}

.aba-left b {
	background: var(--bar);
	box-shadow: none;
}

.aba-read {
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
}

.c-vernier {
	gap: 16px;
}

.ver-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ver-body {
	position: relative;
	height: 92px;
	padding-top: 6px;
	border-radius: 10px;
	background: var(--card-sunk);
}

.ver-main {
	position: relative;
	height: 40px;
	margin: 0 14px;
	border-bottom: 1.5px solid var(--muted);
}

.ver-tick {
	position: absolute;
	bottom: 0;
	width: 1px;
	height: 9px;
	background: var(--line);
	transform: translateX(-0.5px);
}

.ver-tick.is-major {
	height: 17px;
	background: var(--muted);
}

.ver-tick b {
	position: absolute;
	top: -16px;
	left: 50%;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 10px;
	transform: translateX(-50%);
}

.ver-cursor {
	position: absolute;
	top: 8px;
	bottom: 10px;
	width: 2px;
	margin-left: 13px;
	background: var(--bar);
}

.ver-cursor::after {
	content: '';
	position: absolute;
	top: -5px;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--bar);
	transform: translate(-50%, 0) rotate(45deg);
}

.ver-slide {
	position: absolute;
	bottom: 12px;
	display: flex;
	gap: 6px;
	margin-left: 14px;
	transform: translateX(-50%);
}

.ver-vtick {
	width: 1px;
	height: 12px;
	background: var(--line);
}

.ver-vtick.is-on {
	height: 18px;
	background: var(--bar);
}

.ver-read {
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
}

.ver-read b {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.c-column {
	gap: 0;
}

.col-stack {
	display: flex;
	gap: 18px;
	align-items: stretch;
}

.col-meter {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 4px;
	width: 26px;
}

.col-meter i {
	flex: 1;
	min-height: 6px;
	border-radius: 3px;
	background: var(--track);
}

.col-meter i.is-on {
	background: var(--bar);
}

.col-copy {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
}

.col-next {
	margin: 0;
	color: var(--muted);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.col-next span {
	display: block;
	margin-top: 4px;
	color: var(--tree);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.col-now {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.col-now b {
	display: block;
	margin-bottom: 2px;
	color: var(--ink);
	font-size: clamp(40px, 14cqi, 58px);
	line-height: 1;
	letter-spacing: -0.045em;
}

.col-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.c-balance-beam {
	gap: 12px;
}

.bmb-scene {
	width: min(100%, 320px);
	margin-inline: auto;
}

.fg-beam {
	stroke: var(--metal);
	stroke-width: 5;
	stroke-linecap: round;
}

.fg-hang {
	stroke: var(--line);
	stroke-width: 1.4;
}

.fg-pan {
	fill: color-mix(in srgb, var(--tree) 20%, var(--card-sunk));
	stroke: var(--line);
	stroke-width: 1.2;
}

.fg-pan-open {
	fill: var(--card-sunk);
}

.fg-fulcrum {
	fill: var(--metal);
	stroke: none;
}

.bmb-scale {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bmb-scale i {
	flex: 1;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px);
}

.bmb-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.bmb-cap b {
	color: var(--ink);
}

/* ================================================== 3 · Chronology ===== */

.c-heatmap {
	gap: 10px;
}

.hm-months {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	padding-left: 18px;
	color: var(--muted);
	font-size: 9px;
	letter-spacing: 0.02em;
}

.hm-body {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.hm-days {
	display: grid;
	grid-template-rows: repeat(7, 1fr);
	gap: 2px;
	width: 12px;
	flex: none;
	color: var(--muted);
	font-size: 8px;
	line-height: 1;
}

.hm-days span {
	display: grid;
	place-items: center;
}

.hm-grid {
	display: grid;
	grid-template-columns: repeat(53, minmax(0, 1fr));
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.hm-grid i {
	aspect-ratio: 1;
	min-width: 0;
	border-radius: 2px;
}

.hm-cap {
	margin: 0;
	color: var(--muted);
	font-size: 11.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hm-cap b {
	color: var(--ink);
}

.c-weekly {
	gap: 10px;
}

.wkb-chart {
	display: flex;
	gap: 8px;
}

.wkb-yaxis {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: space-between;
	width: 16px;
	color: var(--muted);
	font-size: 9px;
	text-align: right;
	line-height: 1;
}

.wkb-plot {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 124px;
}

.wkb-grid {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.wkb-grid i {
	height: 1px;
	background: var(--line);
	opacity: 0.7;
}

.wkb-bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	gap: 3px;
}

.wkb-bar {
	flex: 1;
	min-width: 2px;
	border-radius: 2px 2px 0 0;
	background: color-mix(in srgb, var(--bar) 55%, transparent);
}

.wkb-bar.is-now {
	background: var(--bar);
}

.wkb-xaxis {
	padding-left: 24px;
}

.c-area {
	gap: 10px;
}

.are-chart {
	display: flex;
	gap: 8px;
}

.are-yaxis {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	color: var(--muted);
	font-size: 9px;
	text-align: right;
	line-height: 1;
}

.are-plot {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 120px;
}

.are-flagpost {
	position: absolute;
	top: 0;
	right: 0;
	padding: 3px 7px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--bar) 20%, var(--card-sunk));
	color: var(--ink);
	font-size: 10.5px;
	font-weight: 700;
}

.are-xaxis {
	padding-left: 28px;
}

.c-sparks {
	gap: 12px;
}

.spk-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.spk-pane {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 11px 8px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--card-sunk);
}

.spk-pane.is-lead {
	border-color: color-mix(in srgb, var(--bar) 45%, var(--line));
}

.spk-lab {
	margin: 0;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.spk-line {
	height: 34px;
}

.spk-val {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.spk-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.c-timeline {
	gap: 12px;
}

.tml-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tml-item {
	position: relative;
	display: grid;
	grid-template-columns: 44px 18px 1fr;
	align-items: start;
	gap: 8px;
	padding-bottom: 14px;
}

.tml-item:last-child {
	padding-bottom: 0;
}

.tml-when {
	padding-top: 1px;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 10.5px;
	text-align: right;
}

.tml-node {
	position: relative;
	display: block;
	width: 10px;
	height: 10px;
	margin: 4px auto 0;
	border-radius: 50%;
	background: var(--track);
	box-shadow: inset 0 0 0 2px var(--line);
}

.tml-item:not(:last-child) .tml-node::after {
	content: '';
	position: absolute;
	top: 14px;
	left: 50%;
	width: 1.5px;
	height: calc(100% + 14px);
	background: var(--line);
	transform: translateX(-50%);
}

.tml-item.is-live .tml-node {
	background: var(--bar);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bar) 22%, transparent);
}

.tml-what {
	font-size: 13px;
}

.tml-item.is-live .tml-what {
	font-weight: 600;
}

.tml-mini {
	display: block;
	width: min(100%, 160px);
	height: 5px;
	margin-top: 7px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.tml-mini em {
	display: block;
	height: 100%;
	background: var(--bar);
}

/* ================================================ 4 · Distribution ===== */

.c-dotplot {
	gap: 10px;
}

.dot-rows {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.dot-row {
	display: grid;
	grid-template-columns: 30px 1fr 24px;
	align-items: center;
	gap: 10px;
	font-size: 11px;
}

.dot-lab {
	color: var(--muted);
	letter-spacing: 0.04em;
}

.dot-track {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat;
}

.dot-stem {
	position: absolute;
	top: 50%;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--bar) 40%, transparent);
	transform: translateY(-50%);
}

.dot-mark {
	position: absolute;
	top: 50%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--bar) 70%, transparent);
	transform: translate(-50%, -50%);
}

.dot-row.is-now .dot-mark {
	background: var(--bar);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar) 20%, transparent);
}

.dot-val {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dot-row.is-now .dot-val,
.dot-row.is-now .dot-lab {
	color: var(--ink);
	font-weight: 700;
}

.c-histogram {
	gap: 10px;
}

.his-plot {
	position: relative;
	height: 122px;
	padding-top: 16px;
}

.his-bins {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 100%;
}

.his-bin {
	flex: 1;
	border-radius: 2px 2px 0 0;
	background: color-mix(in srgb, var(--muted) 30%, transparent);
}

.his-bin.is-you {
	background: var(--bar);
}

.his-median {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1.5px;
	margin-left: -0.75px;
	background: var(--tree);
	opacity: 0.7;
}

.his-median-lab {
	position: absolute;
	top: 0;
	padding: 1px 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tree) 20%, var(--card-sunk));
	color: var(--tree);
	font-size: 10px;
	font-weight: 700;
	transform: translateX(-50%);
}

.c-slope {
	gap: 10px;
}

.slp-body {
	display: grid;
	grid-template-columns: 68px 1fr 38px;
	gap: 8px;
	height: 150px;
}

.slp-side {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 10.5px;
}

.slp-side li {
	position: absolute;
	right: 0;
	white-space: nowrap;
}

.slp-side-end li {
	right: auto;
	left: 0;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.slp-side li:first-child {
	color: var(--ink);
	font-weight: 700;
}

.slp-mid {
	min-width: 0;
}

.slp-svg {
	height: 150px;
}

.c-radial {
	gap: 10px;
}

.rad-wrap {
	width: min(100%, 240px);
	margin-inline: auto;
}

.fg-petal {
	fill: color-mix(in srgb, var(--bar) 45%, transparent);
	stroke: none;
}

.fg-petal.is-now {
	fill: var(--bar);
}

.c-bands {
	gap: 10px;
}

.bnd-plot {
	height: 122px;
}

/* =================================================== 5 · Threshold ===== */

.c-stretch {
	gap: 8px;
}

.str-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

.str-num {
	display: flex;
	align-items: baseline;
	margin: 0;
	font-size: clamp(64px, 25cqi, 108px);
	line-height: 0.84;
	letter-spacing: -0.06em;
	color: var(--bar);
}

.str-num span {
	font-size: 0.36em;
	letter-spacing: -0.02em;
}

.str-cap {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
}

.str-track {
	position: relative;
	display: flex;
	align-items: center;
	height: 28px;
	border-radius: 8px;
	background: var(--track);
	overflow: hidden;
}

.str-done {
	height: 100%;
	background: color-mix(in srgb, var(--tree) 55%, transparent);
}

.str-left {
	position: absolute;
	right: 10px;
	color: var(--muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.str-foot {
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
}

.str-foot b {
	color: var(--ink);
}

.c-staircase {
	gap: 10px;
}

.sta-chart {
	display: flex;
	gap: 8px;
}

.sta-yaxis {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: space-between;
	width: 12px;
	padding-bottom: 10px;
	color: var(--muted);
	font-size: 9px;
	text-align: right;
	line-height: 1;
}

.sta-plot {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 124px;
}

.sta-now {
	position: absolute;
	top: 0;
	padding: 2px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tree) 20%, var(--card-sunk));
	color: var(--tree);
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
	transform: translateX(-50%);
}

.sta-xaxis {
	padding-left: 20px;
}

.sta-xaxis .is-now {
	color: var(--ink);
	font-weight: 700;
}

.c-bridge {
	gap: 12px;
}

.bri-scene {
	width: 100%;
}

.fg-bank {
	fill: var(--card-sunk);
	stroke: none;
}

.fg-cable {
	fill: none;
	stroke: var(--metal);
	stroke-width: 2;
}

.fg-stay {
	stroke: var(--line);
	stroke-width: 1;
}

.fg-deckline {
	stroke: var(--metal);
	stroke-width: 2;
}

.fg-plank {
	fill: var(--track);
}

.fg-plank.is-laid {
	fill: var(--bar);
}

.fg-pier {
	stroke: var(--metal);
	stroke-width: 3;
}

.bri-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.bri-cap b {
	color: var(--ink);
}

.c-dovetail {
	gap: 12px;
}

.dov-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.dov-joint {
	width: 100%;
	overflow: hidden;
}

.fg-timber {
	fill: color-mix(in srgb, var(--tree) 18%, var(--card-sunk));
	stroke: var(--line);
	stroke-width: 1.2;
}

.fg-timber-alt {
	fill: var(--card-sunk);
}

.fg-tooth {
	fill: color-mix(in srgb, var(--tree) 18%, var(--card-sunk));
	stroke: var(--line);
	stroke-width: 1.2;
}

.fg-tooth-alt {
	fill: var(--card-sunk);
}

.fg-gapline {
	stroke: var(--bar);
	stroke-width: 1.4;
	stroke-dasharray: 4 4;
}

.dov-scale {
	height: 6px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.dov-scale i {
	display: block;
	height: 100%;
	background: var(--bar);
}

.dov-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.dov-cap b {
	color: var(--ink);
}

.c-arch {
	gap: 12px;
}

.arc-scene {
	width: min(100%, 340px);
	margin-inline: auto;
}

.fg-stone {
	fill: var(--card-sunk);
	stroke: var(--line);
	stroke-width: 1;
}

.fg-stone.is-set {
	fill: color-mix(in srgb, var(--bar) 55%, var(--card-sunk));
	stroke: color-mix(in srgb, var(--bar) 40%, var(--line));
}

.fg-stone.is-key {
	stroke: var(--tree);
	stroke-width: 1.6;
	stroke-dasharray: 3 3;
}

.fg-pierstone {
	fill: var(--metal);
}

.arc-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.arc-cap b {
	color: var(--ink);
}

/* ================================================= 6 · Cartography ===== */

.c-plotgrid {
	gap: 12px;
}

.plg-frame {
	display: grid;
	grid-template-columns: 14px 1fr;
	grid-template-rows: 12px 1fr;
	gap: 5px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card-sunk);
}

.plg-cols {
	grid-column: 2;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	color: var(--muted);
	font-family: var(--mono);
	font-size: 9px;
	text-align: center;
	line-height: 1;
}

.plg-rows {
	grid-row: 2;
	display: grid;
	grid-template-rows: repeat(5, 1fr);
	place-items: center;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 9px;
}

.plg-grid {
	grid-area: 2 / 2;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
}

.plg-cell {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	position: relative;
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
}

.plg-cell .ico {
	width: 76%;
	height: 76%;
	stroke: var(--tree);
	stroke-width: 1.6;
}

.plg-cell.is-planted {
	border-color: var(--tree);
	background: color-mix(in srgb, var(--tree) 16%, transparent);
}

.plg-cell.is-part em {
	position: absolute;
	inset: auto 0 0;
	background: color-mix(in srgb, var(--bar) 55%, transparent);
}

.plg-cell.is-held {
	background: repeating-linear-gradient(
		45deg,
		var(--line) 0 2px,
		transparent 2px 5px
	);
}

.plg-key .k-planted {
	background: color-mix(in srgb, var(--tree) 45%, transparent);
}

.plg-key .k-part {
	background: color-mix(in srgb, var(--bar) 55%, transparent);
}

.plg-key .k-held {
	background: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 5px);
	box-shadow: inset 0 0 0 1px var(--line);
}

.c-nursery {
	gap: 12px;
}

.nur-beds {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 12px;
	border-radius: 12px;
	background: var(--card-sunk);
}

.nur-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline: calc(var(--depth) * 5px);
	opacity: calc(1 - var(--depth) * 0.07);
}

.nur-lab {
	width: 42px;
	flex: none;
	color: var(--muted);
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nur-bed {
	display: flex;
	flex: 1;
	gap: 4px;
	min-width: 0;
	padding: 5px 6px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--metal) 26%, transparent);
}

.nur-slot {
	position: relative;
	flex: 1;
	height: calc(19px - var(--depth) * 1.5px);
	border-radius: 3px;
	background: var(--track);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent);
	overflow: hidden;
}

.nur-slot.is-grown {
	background: var(--tree);
}

.nur-slot.is-part em {
	position: absolute;
	inset: auto 0 0;
	background: var(--bar);
}

.nur-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.nur-cap b {
	color: var(--ink);
}

.c-map {
	gap: 10px;
}

.map-frame {
	border-radius: 12px;
	background: var(--card-sunk);
	overflow: hidden;
}

.fg-region {
	fill: color-mix(in srgb, var(--tree) 14%, transparent);
	stroke: none;
}

.fg-region-2 {
	fill: color-mix(in srgb, var(--tree) 24%, transparent);
}

.fg-coast {
	fill: none;
	stroke: var(--line);
	stroke-width: 1.2;
}

.fg-pip {
	fill: color-mix(in srgb, var(--muted) 55%, transparent);
}

.fg-pip.is-you {
	fill: var(--bar);
	stroke: var(--card);
	stroke-width: 2;
}

.map-key .k-you {
	background: var(--bar);
	border-radius: 50%;
}

.map-key .k-other {
	background: color-mix(in srgb, var(--muted) 55%, transparent);
	border-radius: 50%;
}

.c-contour {
	gap: 10px;
}

.con-frame {
	border-radius: 12px;
	background: var(--card-sunk);
	overflow: hidden;
}

.fg-contour {
	fill: none;
	stroke: color-mix(in srgb, var(--tree) 42%, transparent);
	stroke-width: 1.2;
}

.fg-contour.is-peak {
	stroke: var(--bar);
	stroke-width: 2;
}

.fg-summit {
	fill: var(--bar);
	stroke: var(--card-sunk);
	stroke-width: 2;
}

.con-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.con-cap b {
	color: var(--ink);
}

.c-floor {
	gap: 10px;
}

.flr-strip {
	border-radius: 12px;
	background: var(--card-sunk);
	overflow: hidden;
}

.flr-surface {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 104px;
	border-bottom: 2px solid var(--metal);
}

.flr-seg {
	position: relative;
	display: flex;
	flex: 1;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	height: 100%;
	border-right: 1px dashed var(--line);
}

.flr-seg:last-of-type {
	border-right: 0;
}

.flr-grow {
	width: 9px;
	border-radius: 4px 4px 0 0;
	background: color-mix(in srgb, var(--tree) 55%, transparent);
}

.flr-seg.is-now .flr-grow {
	background: var(--bar);
}

.flr-tree {
	position: absolute;
	right: 8px;
	bottom: 2px;
	color: var(--tree);
}

.flr-tree .ico {
	width: 40px;
	height: 40px;
	stroke-width: 1.4;
}

.flr-layers {
	display: flex;
	flex-direction: column;
}

.flr-lyr {
	height: 12px;
	border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}

.flr-lyr-1 {
	background: color-mix(in srgb, var(--metal) 60%, transparent);
}

.flr-lyr-2 {
	background: color-mix(in srgb, var(--metal) 40%, transparent);
}

.flr-lyr-3 {
	background: color-mix(in srgb, var(--metal) 22%, transparent);
}

/* ====================================================== 7 · Motion ===== */

.c-replay {
	gap: 14px;
}

.rpl-stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	height: 128px;
	padding: 0 10px 14px;
	border-radius: 14px;
	background: var(--card-sunk);
	overflow: hidden;
}

.rpl-frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	opacity: 0.26;
	transform: translateY(4px) scale(0.92);
	transform-origin: 50% 100%;
}

.rpl-frame:last-of-type {
	opacity: 1;
	transform: none;
}

.rpl-frame .ico {
	width: 48px;
	height: 48px;
	stroke: var(--tree);
	stroke-width: 1.3;
}

.rpl-frame:nth-child(1) .ico {
	width: 26px;
	height: 26px;
}

.rpl-frame:nth-child(2) .ico {
	width: 36px;
	height: 36px;
}

.rpl-frame:nth-child(3) .ico {
	width: 44px;
	height: 44px;
}

.rpl-soil {
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 999px;
	background: var(--metal);
}

.rpl-sweep {
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--bar) 16%, transparent),
		transparent
	);
	opacity: 0;
}

.c-replay.is-running .rpl-frame {
	animation: rpl-in 1.5s ease forwards;
	animation-delay: calc(var(--i) * 280ms);
}

.c-replay.is-running .rpl-sweep {
	animation: rpl-sweep 1.5s ease forwards;
}

@keyframes rpl-in {
	0% {
		opacity: 0.26;
		transform: translateY(4px) scale(0.92);
	}
	34% {
		opacity: 1;
		transform: translateY(0) scale(1.08);
	}
	60%,
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes rpl-sweep {
	0% {
		opacity: 0;
		transform: translateX(-40%);
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateX(280%);
	}
}

.rpl-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rpl-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: none;
	font-size: 12.5px;
	font-weight: 600;
}

.rpl-btn:hover {
	border-color: var(--tree);
	color: var(--tree);
}

.rpl-btn .ico {
	width: 15px;
	height: 15px;
}

.rpl-cap {
	margin: 0;
	color: var(--muted);
	font-size: 11.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c-scrub {
	gap: 14px;
}

.scr-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.scr-glass {
	position: relative;
	display: grid;
	place-items: center;
	height: 168px;
	border-radius: 14px;
	background: var(--card-sunk);
	overflow: hidden;
}

.scr-fill {
	position: absolute;
	inset: auto 0 0;
	background: color-mix(in srgb, var(--bar) 34%, transparent);
	transition: height 90ms ease-out;
}

.scr-tree {
	position: relative;
	color: var(--tree);
}

.scr-tree .ico {
	width: 100px;
	height: 100px;
	stroke-width: 1.2;
}

.scr-read {
	position: absolute;
	top: 12px;
	right: 14px;
	font-family: var(--mono);
	font-size: 22px;
	font-variant-numeric: tabular-nums;
}

.scr-control {
	display: block;
}

.scr-control input {
	width: 100%;
	margin: 0;
	accent-color: var(--bar);
	background: none;
}

.scr-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.scr-cap b {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.c-compare {
	gap: 10px;
}

.cpr-switch {
	display: inline-flex;
	align-self: flex-start;
	padding: 3px;
	border-radius: 999px;
	background: var(--card-sunk);
}

.cpr-switch button {
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}

.cpr-switch button[aria-pressed='true'] {
	background: var(--card-raise);
	color: var(--ink);
	box-shadow: var(--shadow);
}

.cpr-plot {
	position: relative;
	height: 116px;
}

.cpr-grid {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.cpr-grid i {
	height: 1px;
	background: var(--line);
	opacity: 0.7;
}

.cpr-set {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	gap: 4px;
}

.cpr-set span {
	flex: 1;
	min-width: 2px;
	border-radius: 2px 2px 0 0;
	background: color-mix(in srgb, var(--bar) 55%, transparent);
	transition: height 200ms ease;
}

.cpr-set span.is-now {
	background: var(--bar);
}

.cpr-long {
	gap: 2px;
}

.c-compare[data-range='short'] .cpr-long,
.c-compare[data-range='long'] .cpr-short {
	display: none;
}

.cpr-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.cpr-cap b {
	color: var(--ink);
}

.c-zoom {
	gap: 10px;
}

.zom-year {
	position: relative;
	padding: 4px 0;
}

.zom-cols {
	display: grid;
	grid-template-columns: repeat(53, 1fr);
	gap: 2px;
	height: 26px;
}

.zom-col {
	border-radius: 2px;
}

.zom-lens {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15.1%;
	border: 2px solid var(--bar);
	border-radius: 7px;
	background: color-mix(in srgb, var(--bar) 10%, transparent);
	pointer-events: none;
	transition: left 90ms ease-out;
}

.zom-detail {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
	gap: 4px;
	width: min(100%, 320px);
	margin-inline: auto;
	padding: 10px;
	border-radius: 12px;
	background: var(--card-sunk);
}

.zom-cell {
	aspect-ratio: 1;
	border-radius: 3px;
}

.zom-l0 {
	background: var(--track);
}

.zom-l1 {
	background: color-mix(in srgb, var(--bar) 26%, var(--track));
}

.zom-l2 {
	background: color-mix(in srgb, var(--bar) 50%, var(--track));
}

.zom-l3 {
	background: color-mix(in srgb, var(--bar) 74%, var(--track));
}

.zom-l4 {
	background: var(--bar);
}

.zom-control input {
	width: 100%;
	margin: 0;
	accent-color: var(--bar);
	background: none;
}

.zom-cap {
	margin: 0;
	color: var(--muted);
	font-size: 11.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zom-cap b {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.c-carousel {
	gap: 12px;
}

.car-window {
	overflow: hidden;
	border-radius: 14px;
	background: var(--card-sunk);
}

.car-track {
	display: flex;
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.c-carousel[data-slide='1'] .car-track {
	transform: translateX(-100%);
}

.c-carousel[data-slide='2'] .car-track {
	transform: translateX(-200%);
}

.car-pane {
	display: flex;
	flex: 0 0 100%;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-height: 156px;
	padding: 20px 22px;
}

.car-kicker {
	margin: 0;
	color: var(--muted);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.car-tree {
	color: var(--tree);
}

.car-tree .ico {
	width: 46px;
	height: 46px;
	stroke-width: 1.3;
}

.car-line {
	margin: 0;
	font-size: 15px;
}

.car-line b {
	font-size: 20px;
}

.car-line-quiet {
	color: var(--muted);
	font-size: 13.5px;
}

.car-rail {
	height: 10px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.car-rail i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--bar);
}

.car-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.car-arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: none;
	color: var(--muted);
}

.car-arrow:hover {
	border-color: var(--tree);
	color: var(--tree);
}

.car-dots {
	display: flex;
	gap: 7px;
}

.car-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--track);
}

.car-dot[aria-pressed='true'] {
	background: var(--bar);
	transform: scale(1.25);
}

.car-foot {
	margin: 0;
	color: var(--muted);
	font-size: 11.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===================================================== 8 · Network ===== */

.c-canopy,
.c-roots,
.c-flow,
.c-goalnet,
.c-chord {
	gap: 10px;
}

.cnp-frame,
.rts-frame,
.flw-frame {
	border-radius: 12px;
	background: var(--card-sunk);
	overflow: hidden;
}

.gnt-frame,
.chd-frame {
	width: min(100%, 250px);
	margin-inline: auto;
}

.cnp-cap,
.rts-cap,
.flw-cap,
.gnt-cap,
.chd-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.rts-cap b {
	color: var(--ink);
}

.fg-soilline {
	stroke: var(--metal);
	stroke-width: 2;
	stroke-dasharray: 6 4;
}

.fg-root {
	stroke: color-mix(in srgb, var(--tree) 70%, transparent);
	stroke-linecap: round;
	fill: none;
}

.fg-root-5 {
	stroke-width: 3.4;
}

.fg-root-4 {
	stroke-width: 2.6;
}

.fg-root-3 {
	stroke-width: 1.9;
}

.fg-root-2 {
	stroke-width: 1.3;
	stroke: color-mix(in srgb, var(--tree) 50%, transparent);
}

.fg-root-1 {
	stroke-width: 0.9;
	stroke: color-mix(in srgb, var(--tree) 36%, transparent);
}

.fg-tip {
	fill: var(--bar);
}

.fg-ribbon {
	stroke: none;
}

.fg-ribbon-0 {
	fill: color-mix(in srgb, var(--tree) 20%, transparent);
}

.fg-ribbon-1 {
	fill: color-mix(in srgb, var(--tree) 32%, transparent);
}

.fg-ribbon-2 {
	fill: color-mix(in srgb, var(--bar) 42%, transparent);
}

.fg-stagebar {
	fill: var(--metal);
}

.fg-goalring {
	fill: none;
	stroke: var(--track);
	stroke-width: 7;
}

.fg-goalarc {
	fill: none;
	stroke: color-mix(in srgb, var(--bar) 65%, transparent);
	stroke-width: 7;
	stroke-linecap: round;
}

.fg-spoke {
	stroke: var(--line);
	stroke-width: 1.2;
}

.fg-spoke.is-you {
	stroke: var(--bar);
	stroke-width: 2.2;
}

.fg-chord {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
}

.fg-chord-0 {
	stroke: color-mix(in srgb, var(--bar) 34%, transparent);
}

.fg-chord-1 {
	stroke: color-mix(in srgb, var(--tree) 34%, transparent);
}

.fg-chord-2 {
	stroke: color-mix(in srgb, var(--muted) 34%, transparent);
}

.fg-arc {
	fill: none;
	stroke-width: 7;
	stroke-linecap: butt;
}

/* Chord labels ride over the arcs, so they carry a backing like the years do. */
.c-chord .fg-label {
	fill: var(--ink);
	font-weight: 600;
	paint-order: stroke fill;
	stroke: var(--card);
	stroke-width: 3;
	stroke-linejoin: round;
}

.fg-arc-0 {
	stroke: var(--bar);
}

.fg-arc-1 {
	stroke: color-mix(in srgb, var(--tree) 80%, transparent);
}

.fg-arc-2 {
	stroke: color-mix(in srgb, var(--tree) 55%, transparent);
}

.fg-arc-3 {
	stroke: color-mix(in srgb, var(--muted) 60%, transparent);
}

.fg-arc-4 {
	stroke: color-mix(in srgb, var(--muted) 38%, transparent);
}

/* ===================================================== 9 · Almanac ===== */

.c-calendar {
	gap: 8px;
}

.cal-heads,
.cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

.cal-heads {
	color: var(--muted);
	font-size: 9.5px;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.cal-day {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1.25;
	border-radius: 6px;
	font-style: normal;
}

.cal-day b {
	color: var(--ink);
	font-size: 10.5px;
	font-weight: 600;
	opacity: 0.72;
}

.cal-day.hm-l3 b,
.cal-day.hm-l4 b {
	color: var(--hero-ink);
	opacity: 0.9;
}

.cal-day.is-out {
	background: none;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 45%, transparent);
}

.cal-day.is-marked {
	box-shadow: 0 0 0 2px var(--tree);
}

.cal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.cal-note {
	margin: 0;
	color: var(--muted);
	font-size: 11px;
}

.cal-id {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.c-rings {
	gap: 10px;
}

.rng-frame {
	width: min(100%, 250px);
	margin-inline: auto;
	border-radius: 12px;
	background: var(--card-sunk);
}

.fg-bark {
	fill: var(--card-sunk);
	stroke: var(--metal);
	stroke-width: 3;
}

.fg-ringline {
	fill: none;
	stroke: color-mix(in srgb, var(--metal) 80%, transparent);
	stroke-width: 1.4;
}

.fg-ringline.is-late {
	stroke-width: 2.6;
	stroke: color-mix(in srgb, var(--tree) 55%, transparent);
}

.fg-ringline.is-now {
	stroke: color-mix(in srgb, var(--bar) 70%, transparent);
	stroke-width: 2;
	stroke-dasharray: 4 6;
}

/* Year labels sit on top of the rings, so they carry their own backing. */
.fg-year {
	fill: var(--ink);
	font-size: 8.5px;
	font-weight: 700;
	paint-order: stroke fill;
	stroke: var(--card-sunk);
	stroke-width: 3;
	stroke-linejoin: round;
}

.fg-pith {
	fill: var(--tree);
}

.fg-coreline {
	stroke: var(--line);
	stroke-width: 1;
	stroke-dasharray: 2 3;
}

.rng-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.c-stream {
	gap: 10px;
}

.stm-plot {
	height: 130px;
}

.c-phenology {
	gap: 8px;
}

.phe-months {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	margin-left: 70px;
	color: var(--muted);
	font-size: 9px;
	text-align: center;
}

.phe-rows {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.phe-row {
	display: grid;
	grid-template-columns: 62px 1fr;
	align-items: center;
	gap: 8px;
}

.phe-lab {
	color: var(--muted);
	font-size: 10.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phe-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	height: 16px;
	border-radius: 4px;
	background: var(--card-sunk);
}

.phe-tick {
	border-right: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.phe-tick:last-child {
	border-right: 0;
}

.phe-span {
	position: absolute;
	top: 3px;
	bottom: 3px;
	border-radius: 999px;
}

.phe-span-0 {
	background: color-mix(in srgb, var(--muted) 34%, transparent);
}

.phe-span-1 {
	background: color-mix(in srgb, var(--tree) 40%, transparent);
}

.phe-span-2 {
	background: color-mix(in srgb, var(--tree) 62%, transparent);
}

.phe-span-3 {
	background: var(--bar);
}

.phe-span-4 {
	background: color-mix(in srgb, var(--tree) 48%, transparent);
}

.phe-now {
	position: relative;
	height: 20px;
	margin-left: 70px;
	border-top: 1px solid var(--line);
}

.phe-now i {
	position: absolute;
	top: -1px;
	width: 2px;
	height: 9px;
	margin-left: -1px;
	background: var(--tree);
}

.phe-now i::after {
	content: 'today';
	position: absolute;
	top: 9px;
	left: 50%;
	color: var(--tree);
	font-size: 9px;
	font-weight: 700;
	transform: translateX(-50%);
}

.phe-cap {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.phe-cap b {
	color: var(--ink);
}

.c-waffle {
	gap: 12px;
}

.waf-body {
	display: flex;
	align-items: stretch;
	gap: 16px;
}

.waf-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.waf-unit {
	aspect-ratio: 1;
	border-radius: 2px;
	background: var(--track);
}

.waf-unit.is-on {
	background: var(--bar);
}

.waf-side {
	display: flex;
	flex: none;
	width: 116px;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

.waf-done {
	color: var(--tree);
}

.waf-done .ico {
	width: 34px;
	height: 34px;
	stroke-width: 1.4;
}

.waf-lab {
	margin: 0;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.35;
}

.waf-lab b {
	color: var(--ink);
	font-size: 13px;
}

.waf-lab-next b {
	color: var(--bar);
}

.waf-cap {
	margin: 0;
	color: var(--muted);
	font-size: 11.5px;
}

/* ==================================================== 10 · Console ===== */

.c-filter {
	gap: 10px;
}

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

.flt-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: none;
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 600;
}

.flt-chip .ico {
	width: 13px;
	height: 13px;
}

.flt-chip[aria-pressed='true'] {
	border-color: var(--tree);
	background: color-mix(in srgb, var(--tree) 14%, transparent);
	color: var(--tree);
}

.flt-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flt-row {
	display: grid;
	grid-template-columns: 78px 1fr 24px;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
}

.flt-row[hidden] {
	display: none;
}

.flt-lab {
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flt-bar {
	height: 12px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.flt-bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bar) 70%, transparent);
}

.flt-val {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.flt-empty {
	margin: 0;
	padding: 14px 0;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}

.flt-empty[hidden] {
	display: none;
}

.c-live {
	gap: 16px;
}

.liv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.liv-body {
	display: flex;
	align-items: center;
	gap: 20px;
}

.liv-ring {
	width: 132px;
	flex: none;
}

.fg-track {
	fill: none;
	stroke: var(--track);
	stroke-width: 10;
}

.fg-progress {
	fill: none;
	stroke: var(--bar);
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dashoffset 90ms linear;
}

.fg-ring-num {
	fill: var(--ink);
	font-size: 15px;
	font-weight: 700;
}

.liv-copy {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.liv-lead {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}

.liv-lead b {
	color: var(--ink);
	font-size: 22px;
	letter-spacing: -0.02em;
}

.liv-sub {
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 12px;
}

.liv-btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: none;
	font-size: 12px;
	font-weight: 600;
}

.liv-btn .ico {
	width: 14px;
	height: 14px;
}

.c-live.is-live .liv-btn {
	border-color: var(--tree);
	color: var(--tree);
}

.c-reveal {
	gap: 12px;
}

.rev-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rev-strip {
	position: relative;
	min-height: 136px;
	border-radius: 14px;
	background: var(--card-sunk);
	overflow: hidden;
}

.rev-under {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 18px 50px;
}

.rev-tree {
	color: var(--tree);
	flex: none;
}

.rev-tree .ico {
	width: 52px;
	height: 52px;
	stroke-width: 1.3;
}

.rev-copy {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
}

.rev-cover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 0;
	background: var(--card-raise);
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	transition: transform 320ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.c-reveal.is-revealed .rev-cover {
	/* Only the top 40px of the cover stays on screen, so the label moves up. */
	align-items: flex-start;
	padding-top: 12px;
	transform: translateY(calc(100% - 40px));
	background: color-mix(in srgb, var(--card-raise) 70%, transparent);
	color: var(--muted);
	font-size: 12px;
}

.rev-rail {
	height: 10px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.rev-rail i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--bar);
}

.rev-cap {
	margin: 0;
	color: var(--muted);
	font-size: 11.5px;
}

.c-bullet {
	gap: 12px;
}

.blt-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.blt-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.blt-lab {
	color: var(--muted);
	font-size: 11px;
	letter-spacing: 0.04em;
}

.blt-track {
	position: relative;
	height: 22px;
	border-radius: 4px;
	overflow: hidden;
}

.blt-band {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 4px;
}

.blt-band-1 {
	width: 100%;
	background: color-mix(in srgb, var(--muted) 12%, var(--card-sunk));
}

.blt-band-2 {
	width: 72%;
	background: color-mix(in srgb, var(--muted) 20%, var(--card-sunk));
}

.blt-band-3 {
	width: 42%;
	background: color-mix(in srgb, var(--muted) 30%, var(--card-sunk));
}

.blt-measure {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 0;
	border-radius: 3px;
	background: var(--bar);
}

.blt-target {
	position: absolute;
	top: 2px;
	bottom: 2px;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--ink);
}

.c-console {
	gap: 14px;
}

.cns-id {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cns-panes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.cns-pane {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 12px 13px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card-sunk);
}

.cns-lab {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--muted);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cns-lab .dtag {
	font-size: 8.5px;
	padding: 2px 5px;
}

.cns-val {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.cns-val b {
	color: var(--ink);
	font-size: 24px;
	letter-spacing: -0.03em;
}

.cns-tree {
	position: absolute;
	right: 10px;
	bottom: 8px;
	color: var(--tree);
	opacity: 0.5;
}

.cns-tree .ico {
	width: 30px;
	height: 30px;
	stroke-width: 1.3;
}

.cns-sub {
	margin: 0;
	color: var(--muted);
	font-size: 11.5px;
}

.cns-sub b {
	color: var(--ink);
}

.cns-heat {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
	gap: 2px;
	margin-top: auto;
}

.cns-heat i {
	aspect-ratio: 1;
	min-width: 0;
	border-radius: 2px;
}

.cns-spark {
	height: 40px;
	margin-top: auto;
}

/* ============================================ narrow panels (390px) ==== */
/* The card is its own container, so these rules fire on the mock's width,
   not the viewport. A 390px product panel lands here. */

@container (max-width: 404px) {
	.card {
		padding: 16px;
	}

	.rct-tape {
		width: 100%;
		padding: 20px 16px 16px;
	}

	.rct-when {
		width: 40px;
	}

	.man-table {
		font-size: 11px;
	}

	.man-table th {
		font-size: 9px;
	}

	.deed-body {
		font-size: 14px;
	}

	.deed-sign i {
		width: 84px;
	}

	.cmp-dial,
	.rad-wrap,
	.gnt-frame,
	.chd-frame,
	.rng-frame {
		width: min(100%, 210px);
	}

	.aba-lab {
		width: 60px;
		font-size: 9px;
	}

	.aba-left b,
	.aba-right b {
		width: 11px;
		height: 15px;
	}

	.hm-months {
		font-size: 8px;
		padding-left: 16px;
	}

	.hm-grid,
	.hm-days {
		gap: 1.5px;
	}

	.hm-days {
		width: 10px;
		font-size: 7px;
	}

	.wkb-plot,
	.cpr-plot {
		height: 104px;
	}

	.are-plot,
	.sta-plot {
		height: 104px;
	}

	.spk-grid {
		gap: 8px;
	}

	.spk-pane {
		padding: 8px 9px 7px;
	}

	.spk-lab {
		font-size: 9px;
	}

	.tml-item {
		grid-template-columns: 38px 16px 1fr;
	}

	.dot-row {
		grid-template-columns: 26px 1fr 22px;
		gap: 8px;
	}

	.his-plot {
		height: 106px;
	}

	.slp-body {
		grid-template-columns: 56px 1fr 34px;
	}

	.plg-grid {
		gap: 3px;
	}

	.plg-frame {
		padding: 10px;
	}

	.nur-lab {
		width: 30px;
		font-size: 9px;
	}

	.nur-bed {
		gap: 3px;
	}

	.flr-surface {
		height: 88px;
	}

	.flr-tree .ico {
		width: 30px;
		height: 30px;
	}

	.rpl-stage {
		height: 108px;
	}

	.rpl-frame .ico {
		width: 38px;
		height: 38px;
	}

	.rpl-btn {
		padding: 7px 11px;
		font-size: 11.5px;
	}

	.zom-cols {
		gap: 1px;
	}

	.zom-detail {
		gap: 3px;
		padding: 8px;
	}

	.car-pane {
		min-height: 140px;
		padding: 16px;
	}

	.cal-heads,
	.cal-grid {
		gap: 3px;
	}

	.cal-day b {
		font-size: 9px;
	}

	.stm-plot {
		height: 112px;
	}

	.phe-months,
	.phe-now {
		margin-left: 58px;
	}

	.phe-row {
		grid-template-columns: 52px 1fr;
	}

	.waf-body {
		gap: 12px;
	}

	.waf-side {
		width: 92px;
	}

	.waf-done .ico {
		width: 26px;
		height: 26px;
	}

	.flt-row {
		grid-template-columns: 64px 1fr 22px;
		gap: 8px;
	}

	.liv-body {
		gap: 14px;
	}

	.liv-ring {
		width: 104px;
	}

	.liv-lead b {
		font-size: 19px;
	}

	.rev-tree .ico {
		width: 40px;
		height: 40px;
	}

	.rev-under {
		gap: 12px;
		padding: 14px 14px 48px;
	}

	.cns-panes {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column of panes would blow the twelve-week grid up to a billboard. */
	.cns-heat {
		width: min(100%, 220px);
		min-height: 46px;
	}
}

/* ============================================== wide panels (1280px) === */
/* Nothing should stretch into an unreadable line, and nothing that is
   square or ratio-locked should grow into a billboard. */

@container (min-width: 700px) {
	.card {
		padding: 26px 30px;
	}

	.cns-panes {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.spk-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hm-body,
	.zom-year,
	.cal-grid,
	.cal-heads,
	.waf-body,
	.bnd-plot,
	.stm-plot,
	.wkb-chart,
	.are-chart,
	.sta-chart,
	.his-plot,
	.dot-rows,
	.flt-rows,
	.blt-rows,
	.tml-list,
	.phe-rows,
	.man-table,
	.aba-frame,
	.ver-body,
	.dov-scale,
	.pun-grid,
	.rev-rail,
	.pbar {
		max-width: 760px;
	}

	.phe-months,
	.phe-now,
	.wkb-xaxis,
	.are-xaxis,
	.sta-xaxis,
	.dot-axis,
	.his-axis,
	.stm-axis,
	.blt-axis,
	.flr-axis {
		max-width: 760px;
	}

	.bri-scene,
	.dov-joint,
	.map-frame,
	.con-frame,
	.cnp-frame,
	.rts-frame,
	.flw-frame,
	.flr-strip,
	.plg-frame,
	.nur-beds {
		max-width: 820px;
		margin-inline: auto;
	}

	.rev-strip,
	.rpl-stage,
	.car-window,
	.deed-sheet,
	.cpr-plot {
		max-width: 660px;
		margin-inline: auto;
	}

	/* The four signed-off cards keep the exact wide-panel caps they shipped with. */
	.scr-glass {
		max-width: 640px;
		margin-inline: auto;
	}

	.str-track {
		max-width: 680px;
	}

	.cmp-dial,
	.rad-wrap,
	.gnt-frame,
	.chd-frame,
	.rng-frame,
	.arc-scene,
	.bmb-scene {
		width: min(100%, 280px);
	}

	.bal-body,
	.col-stack {
		max-width: 760px;
	}

	.zom-detail {
		width: min(100%, 380px);
	}

	.spk-line {
		height: 44px;
	}

	.cns-spark {
		height: 52px;
	}

	.car-pane {
		min-height: 180px;
	}
}

/* ==================================================== page responsive == */

@media (max-width: 720px) {
	.masthead {
		padding: 32px 16px 18px;
	}

	/* Wrapped, a four-group toolbar would eat half a phone screen, so the chip
	   rows scroll sideways and the bar gives up its sticky slot. */
	.toolbar {
		position: static;
		padding: 12px 16px;
	}

	.chip-scroller {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.chip-scroller::-webkit-scrollbar {
		display: none;
	}

	.toolbar-line-end {
		flex-wrap: wrap;
	}

	.grid {
		padding: 18px 16px 32px;
		gap: 18px;
	}

	.inputs-panel {
		width: 100%;
	}

	.result-count {
		margin-left: 0;
	}

	.concept {
		padding: 14px 12px 16px;
	}

	.stage {
		padding: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}