/* Visual language: a printed technical reference for a terminal program.
   Structure comes from hairline rules, alignment, and small-caps monospace
   labels. No pills, no floating cards, no gradients competing with the
   screenshots, which are the only decorated objects on the page. */

:root {
	--bg: #0a0d10;
	--panel: #0e1317;
	--panel2: #12181d;
	--rule: #1b232b;
	--rule2: #2a3540;
	--text: #e9eef3;
	--muted: #b5c0ca;
	--dim: #a2aeba;
	--faint: #8996a3;
	--cyan: #3ec9f5;
	--green: #63d69f;
	--amber: #f0bd63;
	--red: #ff8087;
	--violet: #b39bff;
	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* Height of the sticky masthead; the scroll probe fails if this drifts. */
	--head-h: 113px;
}

* { box-sizing: border-box; }
/* No global smooth scrolling: nav links jump whole sections, and animating
   twenty thousand pixels feels like the page is running away. Short,
   deliberate moves opt in from script. */
html { scroll-padding-top: calc(var(--head-h) + 12px); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.92em; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 600; }
p { margin: 0; }

.wrap { width: min(1560px, calc(100% - 56px)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--panel2); padding: 10px 16px; }
.skip:focus { left: 0; }

/* Small-caps monospace label: the one recurring ornament on the page. */
.eyebrow,
.tabsec-head .count,
.stat span,
table.grid th,
.guide b,
.tag {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--dim);
	font-weight: 400;
}

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

.masthead {
	position: sticky; top: 0; z-index: 40;
	background: rgba(10, 13, 16, 0.9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rule2);
}
.masthead-inner {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 28px; padding: 13px 0 11px;
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-mark { color: var(--cyan); font-size: 15px; line-height: 1; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text b { font-size: 15px; letter-spacing: -0.1px; }
.brand-text small { color: var(--faint); font-size: 11px; font-family: var(--mono); }

/* Underline, not a capsule: the field reads as a line on a form. */
.search {
	display: flex; align-items: center; gap: 9px;
	border-bottom: 1px solid var(--rule2); padding: 4px 1px 5px;
	min-width: 360px; min-height: 44px; color: var(--faint);
	transition: border-color 0.15s;
}
.search:focus-within { border-bottom-color: var(--cyan); }
.search span { font-size: 13px; }
.search input {
	flex: 1; background: none; border: 0; outline: none; padding: 0;
	color: var(--text); font-family: var(--mono); font-size: 12.5px; min-width: 0;
}
.search input::placeholder { color: var(--faint); }
.search kbd { border: 0; background: none; padding: 0; color: var(--faint); font-size: 10.5px; }

/* Two words, one hairline underline each: the mode switch has to read as a
   control without becoming the loudest thing in the masthead. */
.masthead-tools { display: flex; align-items: flex-end; gap: 26px; min-width: 0; }
.modeswitch { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; }
.modeswitch .eyebrow { letter-spacing: 1.2px; }
.modeswitch button {
	background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
	padding: 3px 1px; min-height: 30px;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.6px; color: var(--faint);
	transition: color 0.12s, border-color 0.12s;
}
.modeswitch button:hover { color: var(--text); }
.modeswitch button.on { color: var(--text); border-bottom-color: var(--cyan); }

.tabnav {
	display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none;
	width: min(1560px, calc(100% - 56px)); margin-inline: auto;
}
.tabnav::-webkit-scrollbar { display: none; }
.tabnav button {
	display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
	min-height: 44px; padding: 9px 0 8px; border: 0; border-bottom: 2px solid transparent;
	background: none; cursor: pointer;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.9px;
	text-transform: uppercase; color: var(--dim);
	transition: color 0.12s, border-color 0.12s;
}
.tabnav button:hover { color: var(--text); }
.tabnav button.active { color: var(--text); border-bottom-color: var(--cyan); }
.tabnav button i { font-style: normal; font-size: 11px; opacity: 0.7; }
.tabnav button span { font-size: 10.5px; color: var(--faint); letter-spacing: 0.4px; }
.tabnav button.active span { color: var(--cyan); }

/* ---------- intro ---------- */

/* The capture is the reason to be here, so the hero is one screen of context at
   most: title, one paragraph, counts. */
.intro { padding: 34px 0 26px; }
.intro h1 { font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.9px; margin-bottom: 12px; }
.intro-copy p { color: var(--muted); font-size: 15px; max-width: 86ch; }
.intro-copy code { color: var(--cyan); }

.intro-stats { display: flex; flex-wrap: wrap; margin-top: 20px; border-top: 1px solid var(--rule2); }
.stat { display: flex; flex-direction: column; gap: 1px; padding: 12px 22px 0; border-left: 1px solid var(--rule); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat b { font-size: 21px; font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.stat span { color: var(--faint); font-size: 10.5px; }

kbd { font-family: var(--mono); font-size: 11.5px; color: var(--text); border-bottom: 1px solid var(--rule2); padding: 0 1px; }

/* Resolution order reads as a numbered row of layers below the panel, where it
   answers "why is my value different" instead of delaying the capture. */
.pipe {
	list-style: none; margin: 0; padding: 0; counter-reset: step;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px;
}
.pipe li {
	display: grid; grid-template-rows: auto auto; align-content: start; gap: 3px;
	padding: 12px 0 0; border-top: 1px solid var(--rule2);
}
.pipe li::before {
	counter-increment: step; content: counter(step, decimal-leading-zero);
	font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}
.pipe b { font-size: 13px; font-weight: 600; }
.pipe span { font-size: 12px; color: var(--dim); }
.pipe span code { color: var(--muted); }
.pipe-note { margin-top: 16px; font-size: 12px; color: var(--dim); max-width: 92ch; }
.pipe-note code { color: var(--muted); }

/* ---------- tab section ---------- */

.tabs { display: flex; flex-direction: column; }
.tabsec { padding: 32px 0 14px; border-top: 1px solid var(--rule2); }
.tabsec[hidden] { display: none; }
.tabsec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.tabsec-head h2 { font-size: 26px; letter-spacing: -0.5px; display: flex; align-items: baseline; gap: 10px; }
.tabsec-head h2 i { font-style: normal; font-size: 17px; opacity: 0.75; }
.tabsec-head .groups { display: flex; gap: 15px; flex-wrap: wrap; margin-left: auto; }
.tabsec-head .groups button {
	background: none; border: 0; min-height: 44px; padding: 0 8px; cursor: pointer;
	font-family: var(--mono); font-size: 11.5px; color: var(--dim);
}
.tabsec-head .groups button:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* 1099px is the 1x width of every capture; giving the column exactly that
   keeps the retina screenshot pixel-exact instead of resampled to mush. */
.split { display: grid; grid-template-columns: minmax(0, 1099px) minmax(340px, 1fr); gap: 34px; align-items: start; }

/* ---------- screenshot column ---------- */

.shotcol { position: sticky; top: calc(var(--head-h) + 14px); display: flex; flex-direction: column; min-width: 0; }
.shotbar { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.shotbar button {
	background: none; border: 0; border-bottom: 2px solid transparent; min-height: 44px; padding: 8px 4px 6px;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.3px;
	color: var(--dim); cursor: pointer;
}
.shotbar button:hover { color: var(--text); }
.shotbar button.on { color: var(--text); border-bottom-color: var(--cyan); }
.shotbar .shotnote { margin-left: auto; font-size: 11px; color: var(--faint); font-family: var(--mono); }

.shotview {
	/* Scroll chains to the page on purpose: this pane covers most of the
	   viewport, so trapping the wheel here would strand the reader. */
	overflow: auto;
	max-height: calc(100vh - var(--head-h) - 150px);
	margin-top: 14px;
	border: 1px solid var(--rule2); background: #05070a;
	scrollbar-width: thin; scrollbar-color: var(--rule2) transparent;
}
.shotframe { position: relative; width: max-content; }
.shotframe img { display: block; width: var(--shot-w, 100%); height: auto; }
.shotview.fit { overflow: hidden; }
.shotview.fit .shotframe { width: 100%; }
.shotview.fit .shotframe img { width: 100%; }

.hotspot {
	position: absolute; border: 0; padding: 0; margin: 0; background: transparent;
	cursor: pointer; border-radius: 2px; transition: background 0.1s, box-shadow 0.1s;
}
.hotspot:hover { background: rgba(62, 201, 245, 0.14); }
.hotspot.on {
	background: rgba(62, 201, 245, 0.16);
	box-shadow: inset 0 0 0 1px rgba(62, 201, 245, 0.85), 0 0 22px rgba(62, 201, 245, 0.26);
}
.hotspot.peek { background: rgba(62, 201, 245, 0.09); box-shadow: inset 0 0 0 1px rgba(62, 201, 245, 0.4); }

/* The capture's own tab strip and sidebar are the navigation in panel mode, so
   they answer the pointer instead of looking like a picture of a control. */
.navspot:hover, .groupspot:hover { background: rgba(62, 201, 245, 0.16); box-shadow: inset 0 0 0 1px rgba(62, 201, 245, 0.5); }
.navspot.self { cursor: default; }
.navspot.self:hover { background: transparent; box-shadow: none; }


/* ---------- settings list ---------- */

/* The cursor column is a fixed pixel width, not `ch`: a custom property that
   resolves against each user's font would land the marker, the group label and
   the row label on three different columns. */
.listcol { display: flex; flex-direction: column; min-width: 0; --mark: 16px; }

/* The TUI breaks its list with a dim section label sitting in the same column
   as the settings under it. The list keeps that, so a group reads the same way
   here as it does in the capture beside it. */
.grouphead {
	font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--dim);
	margin: 20px 0 0; padding: 0 0 5px calc(12px + var(--mark));
}
.grouphead:first-child { margin-top: 0; }

/* The TUI draws no rule between settings, and neither does this list: the
   value column sits right beside its label, so nothing has to be tracked
   across a gap. Groups do the separating. */
.setting.hit { box-shadow: inset 2px 0 0 var(--green); }
.setting.sel { background: var(--panel); box-shadow: inset 2px 0 0 var(--cyan); }

.rowbtn {
	display: block; width: 100%; min-height: 32px; text-align: left; cursor: pointer;
	font-family: inherit; background: none; border: 0; color: inherit; padding: 6px 10px 6px 12px;
}
.rowbtn:hover { background: var(--panel2); }
.rowbtn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
/* Cursor column, label column, value column: the widths the TUI itself uses,
   with the label field taken from the widest label in the tab. */
.rowline { display: grid; grid-template-columns: var(--mark) var(--labelw, 28ch) minmax(0, 1fr); align-items: baseline; }
.mark { font-family: var(--mono); font-size: 12.5px; color: var(--faint); opacity: 0; }
.mark::after { content: "\276F"; }
.rowbtn:hover .mark, .rowbtn:focus-visible .mark { opacity: 1; }
.setting.open .mark, .setting.sel .mark { opacity: 1; color: var(--cyan); }
.rowlabel { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rowlabel b {
	font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The dotted key answers a search; it is not something to read past on every
   row, so it appears in results and in the opened detail instead. */
.chip {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase;
	color: var(--faint); border: 1px solid var(--rule2); border-radius: 2px;
	padding: 1px 5px; white-space: nowrap;
}
.chip.secret { color: var(--red); border-color: rgba(255, 128, 135, 0.4); }

/* Reference mode reads like documentation, so the description stays in place.
   Beside a capture the same line would just push rows away from their row. */
.rowdesc { margin: 3px 0 0 var(--mark); max-width: 92ch; font-size: 12.5px; color: var(--dim); }
body[data-mode="panel"] .rowdesc,
.setting.open .rowdesc { display: none; }
.rowmeta { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.val {
	font-family: var(--mono); font-size: 12.5px; color: var(--green);
	max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.val.off { color: var(--faint); }


/* The opened detail belongs to its row, so it starts where the label does. */
.detail { display: none; padding: 0 12px 18px calc(12px + var(--mark)); }
.setting.open .detail { display: block; }
.detail p { font-size: 13.5px; color: var(--text); max-width: 76ch; }
.detail p.mech { color: var(--muted); margin-top: 9px; }

/* Warnings come from OMP's schema, so they read as source facts rather than
   repository-owned recommendations. */
.source-warning { margin-top: 12px; border-left: 2px solid var(--red); padding-left: 13px; }
.source-warning b {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--red);
}
.source-warning p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

.detail .kv {
	display: flex; flex-wrap: wrap; gap: 4px 20px;
	margin-top: 13px; padding-top: 9px; border-top: 1px solid var(--rule);
}
.tag { display: inline-flex; align-items: baseline; gap: 6px; color: var(--faint); }
.tag b { font-family: var(--mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 400; }
.tag.cond b { color: var(--amber); }
.tag.secret b { color: var(--red); }
.tag.impact b { color: var(--violet); }

.opts { margin-top: 14px; border-top: 1px solid var(--rule); }
.opt {
	display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 16px;
	padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px;
}
.opt code { color: var(--muted); }
.opt span { color: var(--dim); }
.opt.is-default code { color: var(--green); }

/* Editorial judgment reads as a margin note, not an alert box. */
.guide { margin-top: 15px; border-left: 2px solid var(--rule2); padding-left: 13px; }
.guide b { display: block; }
.guide.keep { border-left-color: rgba(99, 214, 159, 0.5); }
.guide.keep b { color: var(--green); }
.guide.consider { border-left-color: rgba(240, 189, 99, 0.5); }
.guide.consider b { color: var(--amber); }
.guide.change { border-left-color: rgba(255, 128, 135, 0.5); }
.guide.change b { color: var(--red); }
.guide p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.guide code { color: var(--text); }

.notshown { margin-top: 14px; font-size: 12px; color: var(--dim); border-left: 2px solid var(--rule2); padding-left: 13px; }

/* The capture band around one row: evidence attached to the setting, instead
   of the whole screen being the page. */
.where { margin: 16px 0 0; }
.wherecrop {
	position: relative; overflow: hidden; width: 100%;
	border: 1px solid var(--rule2); background: #05070a;
}
.wherecrop img { position: absolute; height: auto; max-width: none; }
.whereline {
	position: absolute; left: 0; width: 100%;
	box-shadow: inset 0 0 0 1px rgba(62, 201, 245, 0.85);
	background: rgba(62, 201, 245, 0.14);
}
.where figcaption {
	margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4px; color: var(--faint);
}

.rowactions { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.rowactions button {
	background: none; border: 0; min-height: 44px; padding: 0 6px; cursor: pointer;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.1px;
	text-transform: uppercase; color: var(--dim);
}
.rowactions button:hover { color: var(--cyan); }

/* ---------- config-only table ---------- */

.section { padding: 46px 0 0; border-top: 1px solid var(--rule2); }
.section-head h2 { font-size: 22px; letter-spacing: -0.3px; margin-bottom: 7px; }
.section-head p { color: var(--muted); font-size: 14px; max-width: 80ch; }
.table-card { overflow-x: auto; margin-top: 18px; border-top: 1px solid var(--rule2); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { text-align: left; padding: 9px 16px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid th { padding-top: 10px; padding-bottom: 8px; }
table.grid code { color: var(--muted); }
table.grid td.t { font-family: var(--mono); color: var(--dim); font-size: 12px; }
table.grid td.d { color: var(--muted); max-width: 92ch; }

.footer { padding: 34px 0 64px; margin-top: 46px; border-top: 1px solid var(--rule2); color: var(--faint); font-size: 12px; display: grid; gap: 6px; }
.footer code { color: var(--dim); }
.footer-note { max-width: 78ch; }
.footer-links a { color: var(--muted); }

.toast {
	position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
	background: var(--panel2); border: 1px solid var(--rule2); color: var(--text);
	padding: 8px 15px; font-size: 12px; font-family: var(--mono);
	opacity: 0; pointer-events: none; transition: opacity 0.16s, transform 0.16s; z-index: 60;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.empty-state { color: var(--dim); font-size: 13px; padding: 22px 0; }

/* ---------- reading modes and views ---------- */

/* Reference mode is the default: documentation first, capture on request. */
body[data-mode="reference"] .shotcol,
body[data-mode="reference"] .panel-only { display: none; }
body[data-mode="reference"] .split { grid-template-columns: minmax(0, 1fr); }
/* Panel mode navigates groups through the capture's own sidebar, so the chip
   row beside the heading would be a second copy of it. */
body[data-mode="panel"] .tabsec-head .groups { display: none; }
/* Panel mode already shows the whole capture, so the per-row crop would be a
   smaller copy of what is on screen. */
body[data-mode="panel"] .where { display: none; }

/* Search spans every tab, so results replace the single visible panel. */
.results { display: none; padding: 30px 0 10px; }
body[data-view="results"] .results { display: block; }
body[data-view="results"] .intro,
body[data-view="results"] #tabs,
body[data-view="results"] #resolution,
body[data-view="results"] #configonly { display: none; }
/* A row spanning a very wide window puts its value a screen away from its own
   label. Reading columns are capped; the capture pane is not. */
body[data-mode="reference"] .listcol,
.results-head,
.reslist { max-width: 1180px; }

.results-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule2); }
.results-head b { font-size: 15px; font-weight: 600; }
.results-head span { color: var(--faint); font-size: 12.5px; }
.results-head button {
	margin-left: auto; background: none; border: 0; cursor: pointer; min-height: 44px; padding: 0 6px;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--dim);
}
.results-head button:hover { color: var(--cyan); }
.reslist { list-style: none; margin: 0; padding: 0; }
.res {
	display: grid; grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
	gap: 18px; align-items: baseline; width: 100%; min-height: 44px; text-align: left;
	background: none; border: 0; border-bottom: 1px solid var(--rule); color: inherit; cursor: pointer;
	padding: 9px 10px 9px 12px; font-family: inherit;
}
.res:hover, .res.at { background: var(--panel2); }
.res.at { box-shadow: inset 2px 0 0 var(--cyan); }
.res-where { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--faint); }
.res b { font-size: 13.5px; font-weight: 550; }
.res code { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1520px) {
	.split { grid-template-columns: 1fr; }
	.shotcol { position: static; }
	.shotview { max-height: 78vh; }
	.pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
	.shotview { max-height: 70vh; }
}
/* Brand plus a 360px field plus the mode switch stops fitting one line well
   before the phone layout takes over, and 5px of horizontal scroll on a tablet
   is still horizontal scroll. */
@media (max-width: 900px) {
	.masthead-inner { flex-wrap: wrap; }
	.masthead-tools { flex: 1; justify-content: space-between; }
	.search { min-width: 0; flex: 1; max-width: 480px; }
}
@media (max-width: 720px) {
	:root { --head-h: 121px; }
	.wrap, .tabnav { width: calc(100% - 24px); }
	.masthead-inner {
		display: grid; grid-template-columns: minmax(0, 1fr) auto;
		align-items: center; gap: 6px 12px; padding: 7px 0 5px;
	}
	.brand { gap: 8px; }
	.brand-text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.brand-text small, .modeswitch .eyebrow { display: none; }
	.masthead-tools { display: contents; }
	.search {
		grid-column: 1 / -1; grid-row: 2; min-width: 0; min-height: 36px;
		padding-block: 2px 4px;
	}
	.modeswitch {
		grid-column: 2; grid-row: 1; gap: 10px; padding: 0;
	}
	.modeswitch button { min-height: 28px; }
	.tabnav { gap: 18px; scroll-snap-type: x proximity; }
	.tabnav button { min-height: 40px; padding-block: 7px 6px; scroll-snap-align: start; }
	.tabsec-head { gap: 8px 12px; margin-bottom: 10px; }
	.tabsec-head h2 { font-size: 23px; }
	.tabsec-head .groups {
		width: 100%; margin-left: 0; flex-wrap: nowrap;
		overflow-x: auto; scrollbar-width: none;
	}
	.tabsec-head .groups button { min-height: 38px; padding-inline: 4px; white-space: nowrap; }
	/* Closed rows are a scan-friendly index on phones. Tapping one reveals the
	   source description, mechanics, options, and guidance in its detail. */
	.rowdesc { display: none; }
	.rowline { grid-template-columns: var(--mark) minmax(0, 1fr); row-gap: 2px; }
	.rowmeta { grid-column: 2; gap: 8px; }
	.res { grid-template-columns: 1fr; gap: 2px; }
	.intro-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
	.intro-stats .stat { padding: 9px 8px 0 0; border-left: 0; }
	.stat b { font-size: 18px; }
	.intro { padding: 18px 0 16px; }
	.intro h1 { font-size: 25px; margin-bottom: 8px; }
	.intro-copy p { font-size: 13.5px; }
	.pipe { grid-template-columns: 1fr; }
}
/* A finger needs a taller row than a cursor does. */
@media (pointer: coarse) {
	.rowbtn { min-height: 44px; padding: 11px 10px 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}