/* subsystem.co. Tokens are composed from static/themes; nothing below names a colour. */

:root, [data-theme="dark"] {
	color-scheme: dark;
	--page: #0A0A0B;
	--surface: #141313;
	--raised: #1D1C1A;
	--sunken: #1D1C1A;
	--head-ground: #262421;
	--code-inline: #1D1C1A;
	--rule: #302D29;
	--rule-strong: #807A70;
	--focus: #7FB0EC;
	--ink: #F2EFE6;
	--ink-body: #E3E0D7;
	--ink-quiet: #A9A399;
	--ink-faint: #7C766D;
	--link: #7FB0EC;
	--link-visited: #5A87BE;
	--zebra: #101010;
	--select-ground: #1F3A5C;
	--target-ground: #3A3113;
	--field-ground: #1D1C1A;
	--placeholder: #9A948A;
	--hit-ground: #5A4A1E;
	--hit-ink: #F2EFE6;
	--syn-text: #D6D2C8;
	--syn-comment: #BCB5A6;
	--syn-keyword: #EFE0BC;
	--syn-string: #E8A247;
	--syn-name: #7FB0EC;
	--syn-number: #6FD08A;
	--syn-meta: #9A948A;
	--syn-error: #F07070;
	--syn-linenum: #969086;
	--syn-emph-ground: #262420;
	--syn-add-ground: #1B2A1E;
	--syn-del-ground: #2A1C1B;
	--sig-ground: #141313;
	--sig-name: #F2EFE6;
	--sig-param: #EFE0BC;
	--sig-type: #A9A399;
	--sig-default: #E8A247;
	--sig-badge-ink: #E3E0D7;
	--sig-badge-ground: #302D29;
}

[data-theme="light"] {
	color-scheme: light;
	--page: #F7F5F0;
	--surface: #EDEAE2;
	--raised: #FFFFFF;
	--sunken: #060606;
	--head-ground: #E2DED4;
	--code-inline: #EDEAE2;
	--rule: #DCD7CB;
	--rule-strong: #767065;
	--focus: #1F5AA8;
	--ink: #17140D;
	--ink-body: #231F18;
	--ink-quiet: #5C564A;
	--ink-faint: #7C766D;
	--link: #1F5AA8;
	--link-visited: #0E3466;
	--zebra: #F1EEE7;
	--select-ground: #CBDCF2;
	--target-ground: #F6E7B0;
	--field-ground: #FFFFFF;
	--placeholder: #6B655A;
	--hit-ground: #F3D9A6;
	--hit-ink: #17140D;
	--syn-text: #D6D2C8;
	--syn-comment: #BCB5A6;
	--syn-keyword: #EFE0BC;
	--syn-string: #E8A247;
	--syn-name: #7FB0EC;
	--syn-number: #6FD08A;
	--syn-meta: #9A948A;
	--syn-error: #F07070;
	--syn-linenum: #969086;
	--syn-emph-ground: #1C1A15;
	--syn-add-ground: #0B1A0E;
	--syn-del-ground: #1C0B0B;
	--sig-ground: #141313;
	--sig-name: #F2EFE6;
	--sig-param: #EFE0BC;
	--sig-type: #A9A399;
	--sig-default: #E8A247;
	--sig-badge-ink: #E3E0D7;
	--sig-badge-ground: #302D29;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		color-scheme: light;
		--page: #F7F5F0;
		--surface: #EDEAE2;
		--raised: #FFFFFF;
		--sunken: #060606;
		--head-ground: #E2DED4;
		--code-inline: #EDEAE2;
		--rule: #DCD7CB;
		--rule-strong: #767065;
		--focus: #1F5AA8;
		--ink: #17140D;
		--ink-body: #231F18;
		--ink-quiet: #5C564A;
		--ink-faint: #7C766D;
		--link: #1F5AA8;
		--link-visited: #0E3466;
		--zebra: #F1EEE7;
		--select-ground: #CBDCF2;
		--target-ground: #F6E7B0;
		--field-ground: #FFFFFF;
		--placeholder: #6B655A;
		--hit-ground: #F3D9A6;
		--hit-ink: #17140D;
		--syn-text: #D6D2C8;
		--syn-comment: #BCB5A6;
		--syn-keyword: #EFE0BC;
		--syn-string: #E8A247;
		--syn-name: #7FB0EC;
		--syn-number: #6FD08A;
		--syn-meta: #9A948A;
		--syn-error: #F07070;
		--syn-linenum: #969086;
		--syn-emph-ground: #1C1A15;
		--syn-add-ground: #0B1A0E;
		--syn-del-ground: #1C0B0B;
		--sig-ground: #141313;
		--sig-name: #F2EFE6;
		--sig-param: #EFE0BC;
		--sig-type: #A9A399;
		--sig-default: #E8A247;
		--sig-badge-ink: #E3E0D7;
		--sig-badge-ground: #302D29;
	}
}

/* Layout and type. Every colour is a token from static/themes; naming one here fails the build. */

/* Fonts (#2795). Each family is a folder in static/fonts holding its licence, and only the faces
   declared here are published. Three variables in :root choose the family for headings, text and
   code, so trying another font is a folder and an edit to this file. A weight a family lacks is
   drawn in its nearest, so the 600 asked of a family cut at 400 and 700 draws its true 700. */

@font-face {
	font-family: "Lexend";
	src: url("/s/fonts/lexend/lexend-latin-400-normal.0601e0a909.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lexend";
	src: url("/s/fonts/lexend/lexend-latin-600-normal.c3c291158a.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("/s/fonts/inter/inter-latin-400-normal.8909904ab6.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("/s/fonts/inter/inter-latin-400-italic.7ea9d2f127.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("/s/fonts/inter/inter-latin-700-normal.6f56409fd3.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("/s/fonts/inter/inter-latin-700-italic.facd8f930c.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* Code asks for three faces: its text, comments in italic, and keywords and signature names at 600. */

@font-face {
	font-family: "JetBrains Mono";
	src: url("/s/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.14425ba9c6.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/s/fonts/jetbrains-mono/jetbrains-mono-latin-400-italic.87ddac4a62.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/s/fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.400c6bfda1.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-heading: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-code: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--measure: 50rem;            /* a reading column: 800 px at a browser's default text size, whatever the font (#2815) */
	--reading: 1rem;             /* the one size every reading column is set in (#2711) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
}

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

html {
	background-color: var(--page);
	color: var(--ink-body);
	font-family: var(--font-text);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.62;
}

/* Every heading, and the site's and the apps' names in the masthead, are set in the heading family. */
h1,
h2,
h3,
h4,
h5,
h6,
.wordmark,
.apps {
	font-family: var(--font-heading);
}

::selection {
	background-color: var(--select-ground);
	color: var(--ink);
}


/* Links. Always underlined, so colour is never the only sign; hover thickens the line. */

a {
	color: var(--link);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:visited {
	color: var(--link-visited);
}

a:hover {
	text-decoration-thickness: 2px;
}

/* A visited link is never drawn on the target ground: no ground that dark stays visible. */
:target a,
:target a:visited {
	color: var(--link);
}

/* The focus ring is the link blue, so its offset and thickness carry what colour cannot. */
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip {
	position: absolute;
	left: -9999px;
}

/* Read by a screen reader, drawn nowhere: a label whose field already says what it is for. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip:focus {
	left: var(--space-4);
	top: var(--space-4);
	z-index: 10;
	padding: var(--space-2) var(--space-4);
	background-color: var(--raised);
	color: var(--ink);
}


/* Masthead */

/* The marks the names now carry ask for room, so the space between one part of the masthead and
   the next is the narrower step: a mark separates two names by itself (#2861). */
.masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-6);
	padding: var(--space-4) var(--space-6);
	background-color: var(--surface);
	border-bottom: 1px solid var(--rule);
}

.wordmark,
.wordmark:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--ink);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

/* The site's own mark stands beside its name, and carries a little more weight because the name
   beside it is set bolder than the apps' are. */
.wordmark .nav-icon {
	stroke-width: 2;
}

.apps ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.apps a,
.apps a:visited,
.sidebar a,
.sidebar a:visited {
	color: var(--ink-quiet);
	text-decoration: none;
}

.apps a:hover,
.sidebar a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.apps a[aria-current="page"],
.sidebar a[aria-current="page"] {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--link);
	text-decoration-thickness: 2px;
}

/* An app's mark stands before its name in the masthead (#2861), and the line that marks a link
   runs under the name alone: drawn under the mark as well, it reads as part of the drawing. */
.apps a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.apps a:hover,
.apps a[aria-current="page"] {
	text-decoration: none;
}

.apps a:hover span,
.apps a[aria-current="page"] span {
	text-decoration: underline;
}

.apps a[aria-current="page"] span {
	text-decoration-color: var(--link);
	text-decoration-thickness: 2px;
}

/* Smaller than the name beside it, as furniture is, with a heavier stroke than the home page's
   mark because the file's own 2 thins out as the drawing shrinks. */
.nav-icon {
	width: 1.15em;
	height: 1.15em;
	stroke-width: 1.75;
}

/* The theme toggle, and beside it the analytics button once a reader has answered the banner (#3209). */
.theme-slot {
	display: flex;
	gap: var(--space-2);
	margin-left: auto;
}

/* The masthead's search is a plain form: it reaches the search page without JavaScript (#2605). */
.masthead-search {
	margin-left: auto;
}

.masthead-search + .theme-slot {
	margin-left: 0;
}

.masthead-search input,
.search-form input {
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	background-color: var(--field-ground);
	color: var(--ink);
	font: inherit;
}

.masthead-search input {
	width: 12rem;
	font-size: 0.875rem;
}

.masthead-search input::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

/* On a narrow screen the search takes a row of its own, under the apps and the theme. */
@media (max-width: 52rem) {

	.masthead-search {
		order: 1;
		flex: 1 1 100%;
		margin-left: 0;
	}

	.masthead-search + .theme-slot {
		margin-left: auto;
	}

	.masthead-search input {
		width: 100%;
	}
}

.theme-toggle,
.consent-toggle,
.consent button {
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	background-color: transparent;
	color: var(--ink-quiet);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

.theme-toggle:hover,
.consent-toggle:hover,
.consent button:hover {
	color: var(--ink);
}

/* The question Google's tag waits on (#3209). Fixed to the foot of the window, so it moves nothing on
   the page, and hidden until the script that answers it has run. Its two answers look the same,
   because refusing must be as easy to find as agreeing. */
.consent {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--rule-strong);
	background-color: var(--raised);
	color: var(--ink);
	font-size: 0.875rem;
}

.consent[hidden] {
	display: none;
}

.consent p {
	flex: 1 1 20rem;
	max-width: var(--measure);
	margin: 0;
}


/* Page layout */

/* The page is the sidebar, the gap, the measure and the padding (#2712), worked out rather than typed.
   None of them is measured in the text font, so trying a font never moves the page (#2815). */
.layout {
	display: grid;
	grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
	gap: var(--space-12);
	max-width: calc(15rem + var(--space-12) + var(--measure) + 2 * var(--space-6));
	margin: 0 auto;
	padding: var(--space-8) var(--space-6);
}

.sidebar ul {
	position: sticky;
	top: var(--space-6);
	display: grid;
	gap: var(--space-2);
	max-height: calc(100vh - 2 * var(--space-6));
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* A page that belongs under the one before it, such as a module of an API reference. */
.sidebar .nav-level-1 {
	padding-left: var(--space-3);
	font-size: 0.875rem;
}

/* A label that names code, such as a module or a setting, is set in the code font at the entry's own
   size, without the chip and the smaller size code has in running text (#2813). */
.sidebar code {
	padding: 0;
	background-color: initial;
	font-size: inherit;
}

/* The button a narrow screen shows in the list's place (#2609). */
.sidebar-toggle {
	display: none;
}

@media (max-width: 52rem) {

	.layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
		padding: var(--space-6) var(--space-4);
	}

	/* One link a row, each a finger's height, so no link can be tapped by touching its neighbour. */
	.sidebar ul {
		position: static;
		gap: 0;
		max-height: none;
		overflow-y: visible;
	}

	.sidebar a {
		display: flex;
		align-items: center;
		min-height: 3rem;
	}

	/* Where the page's script runs, the list waits behind its button; where it does not, the list stays open. */
	[data-sidebar-button] .sidebar-toggle {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		width: 100%;
		min-height: 3rem;
		padding: 0 var(--space-4);
		border: 1px solid var(--rule-strong);
		border-radius: 4px;
		background-color: transparent;
		color: var(--ink);
		font: inherit;
		cursor: pointer;
	}

	[data-sidebar-button] .sidebar-toggle[aria-expanded="false"] + ul {
		display: none;
	}

	[data-sidebar-button] .sidebar-toggle + ul {
		margin-top: var(--space-2);
	}

	/* A chevron drawn from two borders: pointing right while the list is closed, and down while it is open. */
	.sidebar-toggle::before {
		content: "";
		flex: none;
		width: 0.45em;
		height: 0.45em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateX(-0.1em) rotate(-45deg);
	}

	.sidebar-toggle[aria-expanded="true"]::before {
		transform: translateY(-0.15em) rotate(45deg);
	}
}


/* Which part of a guide a chapter is in (#3115). A guide is entered by situation rather than read
   from the first chapter, so a reader who arrives in the middle is told where they are. */
.page-part {
	margin: 0;
	color: var(--ink-quiet);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.page-part span {
	color: var(--ink);
	text-transform: none;
	letter-spacing: normal;
}

/* A section that is not an app says what it is, whom it is for and where its source is, above
   every page of it (#2578). */
.page-note {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--rule-strong);
	background-color: var(--raised);
	font-size: 0.95em;
}


/* Prose. Siblings are spaced by gap, so a block dropped in never doubles a margin. */

.prose {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
	max-width: var(--measure);
	font-size: var(--reading);
	overflow-wrap: break-word;   /* a bare URL in running text is one long word, and a phone is narrower than it */
}

.prose > * {
	margin: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
	color: var(--ink);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
	overflow-wrap: anywhere;   /* a qualified name like `subsequence.composition` is one long word */
}

.prose h1 {
	font-size: 2em;
}

.prose h2 {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
	font-size: 1.4em;
}

.prose h3 {
	margin-top: var(--space-2);
	font-size: 1.15em;
}

.prose h4 {
	font-size: 1em;
}

/* What a reader landed on, marked until they move. The ground needs room, or the text sits on its
   own edge and the mark reads as a box drawn round it; the negative margins keep that room outside
   the column, so a heading does not move sideways when it is the target. */
.prose :target {
	padding: var(--space-2) var(--space-3);
	margin-left: calc(-1 * var(--space-3));
	margin-right: calc(-1 * var(--space-3));
	border-radius: 4px;
	background-color: var(--target-ground);

	/* Landing on it puts it at the very top of the window, where its own top edge is the window's. */
	scroll-margin-top: var(--space-4);
}

.prose ul,
.prose ol {
	padding-left: 1.5rem;
}

.prose li + li {
	margin-top: var(--space-1);
}

.prose blockquote {
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--rule-strong);
	background-color: var(--surface);
}

.prose blockquote > * {
	margin: 0;
}

.prose blockquote > * + * {
	margin-top: var(--space-3);
}

.prose hr {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--rule);
}

.prose sub {
	color: var(--ink-quiet);
	font-size: 0.8em;
	line-height: 1.5;
	vertical-align: baseline;
}

/* Facts, such as a setting's type and default (#2611): each term beside what it is, in two columns.
   The terms' column has a floor, so one entry's facts line up with the next one's. */
.prose dl {
	display: grid;
	grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr);
	gap: var(--space-1) var(--space-4);
	font-size: 0.95em;
	line-height: 1.5;
}

.prose dt {
	color: var(--ink-quiet);
}

.prose dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}


/* Code */

code,
pre {
	font-family: var(--font-code);
}

:not(pre) > code {
	padding: 0.1em 0.35em;
	border-radius: 3px;
	background-color: var(--code-inline);
	color: var(--ink);
	font-size: 0.875em;
	overflow-wrap: anywhere;
}

a > code {
	color: inherit;
}

.prose pre.code {
	padding: var(--space-4);
	overflow-x: auto;
	border-radius: 6px;
	background-color: var(--sunken);
	color: var(--syn-text);
	font-size: 0.875em;
	line-height: 1.55;
	tab-size: 4;
}


/* A guide's code (#2742). A line above a block the build does not run, close to the block it is
   about; what an example made, set apart from code as output; and the piece so far, folded. */

.prose .code-note {
	color: var(--ink-quiet);
	font-size: 0.875em;
}

.prose .code-note + pre.code {
	margin-top: calc(var(--space-2) - var(--space-4));
}

.prose pre.code.summary {
	border-left: 3px solid var(--rule-strong);
	border-radius: 0 6px 6px 0;
	background-color: var(--surface);
	color: var(--ink-body);
}

.prose details {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--rule);
	border-radius: 6px;
}

.prose details > * {
	margin: 0;
}

.prose details > * + * {
	margin-top: var(--space-4);
}

.prose summary {
	color: var(--ink);
	font-weight: 600;
	cursor: pointer;
}

/* API signatures: the name, each parameter, its type and its default on their own tokens (#2340).
   Punctuation takes the type's ink, so the parts that vary are the ones that stand out. */

.prose pre.sig {
	padding: var(--space-3) var(--space-4);
	overflow-x: auto;
	border-radius: 6px;
	background-color: var(--sig-ground);
	color: var(--sig-type);
	font-size: 0.875em;
	line-height: 1.55;
}

.sig .sig-name {
	color: var(--sig-name);
	font-weight: 600;
}

.sig .sig-param {
	color: var(--sig-param);
}

.sig .sig-type {
	color: var(--sig-type);
}

.sig .sig-default {
	color: var(--sig-default);
}

.sig .sig-badge {
	padding: 0 0.35em;
	border-radius: 3px;
	background-color: var(--sig-badge-ground);
	color: var(--sig-badge-ink);
}


/* Tables. Wide ones scroll inside their own box rather than widening the page. */

.table-scroll {
	max-width: 100%;
	overflow-x: auto;
}

.prose table {
	border-collapse: collapse;
	font-size: 0.95em;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.prose th,
.prose td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.prose th {
	border-bottom-color: var(--rule-strong);
	background-color: var(--head-ground);
	color: var(--ink);
	font-weight: 600;
}

.prose tbody tr:nth-child(even) {
	background-color: var(--zebra);
}

.prose .align-left {
	text-align: left;
}

.prose .align-center {
	text-align: center;
}

.prose .align-right {
	text-align: right;
}


/* Where a page came from */

.page-source {
	margin-top: var(--space-8);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
	color: var(--ink-quiet);
	font-size: 0.875rem;
}


/* The chapters either side of a guide page. Two columns where both are there, one where the
   first or the last chapter has only a neighbour on one side, so neither ever drifts inwards. */

.page-neighbours {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--rule);
}

.neighbour {
	display: block;
	padding: var(--space-4);
	border: 1px solid var(--rule);
	border-radius: 4px;
	text-decoration: none;
}

.neighbour span {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--ink-quiet);
	font-size: 0.875rem;
}

.neighbour.before {
	grid-column: 1;
}

.neighbour.after {
	grid-column: 2;
	text-align: right;
}

@media (max-width: 40rem) {

	.page-neighbours {
		grid-template-columns: 1fr;
	}

	.neighbour.after {
		grid-column: 1;
		text-align: left;
	}
}


/* Home. One reading column, as the search page is: the introduction fills it, and each app
   is a section under a heading of its own (#2706). */

.home {
	max-width: calc(var(--measure) + 2 * var(--space-6));
	margin: 0 auto;
	padding: var(--space-12) var(--space-6);
	font-size: var(--reading);
}

.home h1 {
	margin: 0 0 var(--space-8);
	color: var(--ink);
	font-size: 2em;
	line-height: 1.25;
}

/* The introduction from the source brief (#2557): a page's prose, filling the home column. */
.home-intro {
	max-width: none;
	margin: 0 0 var(--space-8);
}

/* Where the introduction picks up after the app list (#3092). Without this it begins hard against
   the last app's description, and its first sentence reads as part of that app's entry. */
.app-section + .home-intro {
	margin-top: var(--space-8);
}

/* An app is its mark, its name and what it is (#2861). The mark stands to the left of both, and
   the rule that separates one app from the next runs the width of the column. */
.app-section {
	--app-mark: calc(1.4em * 1.25 + var(--space-2) + 1.62em);   /* the name's line, the gap, and the first line under it */

	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--space-4);
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
}

/* An app's name reads as a section heading: a step above a page's h2, beside the larger
   introduction. */
.app-section h2 {
	grid-column: 2;
	margin: 0;
	color: var(--ink);
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1.25;
}

.app-section p {
	grid-column: 2;
	margin: var(--space-2) 0 0;
	color: var(--ink-quiet);
}

/* The mark is drawn in the text's own colour, so it is right in every theme (#2340), and the file
   says nothing about its size or its stroke: both are set here. */
.app-icon {
	grid-row: 1 / span 2;
	align-self: start;
	width: var(--app-mark);
	height: var(--app-mark);
	color: var(--ink);
	stroke-width: 1.5;
}

/* A narrow screen gives its text less room around it; its reading size is the token's (#2711). */
@media (max-width: 52rem) {

	.home {
		padding: var(--space-8) var(--space-4);
	}
}


/* Search. A result is a page, with the sections of it that matched beneath it. */

.search {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: calc(var(--measure) + 2 * var(--space-6));
	margin: 0 auto;
	padding: var(--space-12) var(--space-6);
	font-size: var(--reading);
}

.search h1 {
	margin: 0;
	color: var(--ink);
	font-size: 2em;
	line-height: 1.25;
}

.search-form {
	display: grid;
	gap: var(--space-2);
}

.search-form label {
	color: var(--ink-quiet);
}

.search-form input {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	font-size: 1em;
}

.search-apps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ink-quiet);
	font-size: 0.9em;
}

.search-status {
	margin: 0;
	color: var(--ink-quiet);
}

.search-results {
	display: grid;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-result {
	display: grid;
	gap: var(--space-1);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
	overflow-wrap: anywhere;
}

.search-app,
.search-excerpt {
	margin: 0;
}

.search-app {
	color: var(--ink-quiet);
	font-size: 0.8em;
}

.search-title {
	font-size: 1.05em;
	font-weight: 600;
}

.search-sections {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-2) 0 0;
	padding-left: var(--space-4);
	border-left: 1px solid var(--rule);
	list-style: none;
}

/* A hit is a ground swap and a weight, so it never rests on colour alone. */
.search mark {
	padding: 0 0.1em;
	border-radius: 2px;
	background-color: var(--hit-ground);
	color: var(--hit-ink);
	font-weight: 600;
}

.search-more {
	justify-self: start;
	align-self: flex-start;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	background-color: transparent;
	color: var(--ink-quiet);
	font: inherit;
	cursor: pointer;
}

.search-more:hover {
	color: var(--ink);
}

.code .syn-comment { color: var(--syn-comment); }
.code .syn-keyword { color: var(--syn-keyword); }
.code .syn-string { color: var(--syn-string); }
.code .syn-name { color: var(--syn-name); }
.code .syn-number { color: var(--syn-number); }
.code .syn-meta { color: var(--syn-meta); }
.code .syn-error { color: var(--syn-error); }
.code .syn-comment { font-style: italic; }
.code .syn-keyword { font-weight: 600; }