proctolog 0.1.0

data/public/terminal.css

@@ -0,0 +1,4426 @@
+/* The look of the desk, laid over every page last: a terminal's. One fixed
+   face, straight rules and square work surfaces; a pane at the left that
+   always shows the route, the page beside it, a status line at the foot.
+   The sheets before this one lay each page out; this one says what the desk
+   is made of, so it names the same tokens they use and overrides their faces. */
+
+:root {
+	/* The plaque's black ground carries into the pane; charcoal sheets separate
+	   the work, with grey title plates and shade characters at their edges.
+	   There is no colour. What the owner is on and
+	   what waits for them stand in full relief, white and bold; what is settled
+	   or only said in passing lies back in grey. So the sheets' colours for
+	   "open", "met" and the kinds of a note all come down to these two. */
+	color-scheme: dark;
+	--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+	--serif: var(--mono);
+	--prose: var(--mono);
+	--paper: #141414;
+	--panel: #101010;
+	--surface: #1d1d1d;
+	--surface-head: #2b2b2b;
+	--rest: #303030;
+	--plate: #cacaca;
+	--ink: #ededed;
+	--quiet: #ababab;
+	--rule: #393939;
+	--rule-soft: #292929;
+	--rule-strong: #626262;
+	--shade-ramp: url("/terminal-shades.svg");
+	--apl-seam: url("/terminal-apl.svg");
+	--cuneiform: url("/terminal-cuneiform.svg");
+	--grain-wedges: url("/terminal-grain-wedges.svg");
+	--grain-weave: url("/terminal-grain-weave.svg");
+	--grain-dots: url("/terminal-grain-dots.svg");
+	--chalk: var(--ink);
+	--pin: var(--ink);
+	--ok: var(--quiet);
+	--met: var(--quiet);
+	--waiting: var(--quiet);
+	--remark: var(--quiet);
+	--change: var(--ink);
+	--question: var(--ink);
+	--side: 320px;
+	--group-gap: 24px;
+	--row-pad: 4px;
+	--control-gap: 8px;
+
+	/* One bead, 2.3px across, every 6px: the line round the plaque's figure,
+	   and the only line the desk draws that is not a hairline. It frames the
+	   desk, at the pane's edge and over the bar at its foot. */
+	--bead: #686868;
+	--beads-across: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5'%3E%3Ccircle cx='3' cy='2.5' r='1.15'/%3E%3C/svg%3E");
+	--beads-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='6'%3E%3Ccircle cx='2.5' cy='3' r='1.15'/%3E%3C/svg%3E");
+}
+
+html {
+	font-size: 93.75%;
+	scrollbar-color: var(--rule) var(--paper);
+}
+
+/* The sheets before this one name sans and serif faces of their own, rule by
+   rule; here every one of them is the terminal's. */
+body,
+body * {
+	border-radius: 0 !important;
+	font-family: var(--mono) !important;
+	font-style: normal !important;
+}
+
+body em,
+body i,
+body cite {
+	font-style: italic !important;
+}
+
+body {
+	font-size: 1rem;
+	line-height: 1.6;
+	caret-color: var(--pin);
+	font-variant-numeric: tabular-nums;
+}
+
+button,
+input,
+textarea,
+select {
+	box-sizing: border-box;
+}
+
+button:disabled {
+	cursor: default;
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: var(--quiet);
+	opacity: 1;
+}
+
+::selection {
+	background: var(--ink);
+	color: var(--paper);
+}
+
+:focus-visible {
+	outline: 2px solid var(--pin);
+	outline-offset: 2px;
+}
+
+a {
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.22em;
+}
+
+h1 {
+	font-size: 1.55rem;
+	font-weight: 700;
+	line-height: 1.3;
+	letter-spacing: 0;
+	text-wrap: balance;
+}
+
+.burst .lede,
+.films-head .tally,
+.main > .empty {
+	max-width: 76ch;
+	color: var(--quiet);
+	font-size: 0.933rem;
+}
+
+/* The title plate has a cut corner and a stippled lower edge. Its full width
+   belongs to the title, with no ornament that could be mistaken for a control. */
+.burst h1,
+.pull-request h1,
+.films-head h1,
+.film-head h1 {
+	position: relative;
+	box-sizing: border-box;
+	padding: 8px 16px;
+	border-block: 1px solid #dedede;
+	background: var(--plate);
+	color: var(--panel);
+	clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
+}
+
+.burst h1::after,
+.pull-request h1::after,
+.films-head h1::after,
+.film-head h1::after {
+	content: "";
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 2px;
+	background: #777;
+	mask: var(--shade-ramp) left center / 64px 12px repeat-x;
+	pointer-events: none;
+}
+
+/* The shell: the route at the left, the page beside it */
+
+body.shell {
+	display: grid;
+	grid-template-columns: var(--side) minmax(0, 1fr);
+	max-width: none;
+	min-height: 100vh;
+	margin: 0;
+	padding: 0;
+}
+
+/* The page beside the pane: one column of reading set off from the pane's
+   edge by a gutter, where the cursor's mark stands. The docked list of keys
+   takes its room from the foot of the page. */
+body.shell > .main {
+	--gutter: 56px;
+	position: relative;
+	min-width: 0;
+	max-width: none;
+	padding: 32px 2.6rem max(110px, calc(var(--foot-height, 0px) + 24px)) var(--gutter);
+}
+
+.side {
+	position: sticky;
+	top: 0;
+	height: 100vh;
+	padding: 0 0 4rem;
+	overflow-y: auto;
+	background: var(--panel);
+	font-size: 0.867rem;
+	scrollbar-color: var(--rule) var(--panel);
+}
+
+/* The pane's edge is beaded. It stays put while the route scrolls under it. */
+body.shell::before {
+	content: "";
+	position: fixed;
+	z-index: 9;
+	top: 0;
+	bottom: 0;
+	left: calc(var(--side) - 3px);
+	width: 5px;
+	background: var(--bead);
+	mask: var(--beads-down) repeat-y;
+	pointer-events: none;
+}
+
+.side p,
+.side h2 {
+	margin: 0;
+	padding: 0 16px;
+}
+
+/* The plaque lies on the pane's own ground, the desk's pages beside it. */
+
+.side .head {
+	display: grid;
+	grid-template-columns: 172px minmax(0, 1fr);
+	gap: 12px;
+	align-items: center;
+	padding: 14px 16px 0 14px;
+}
+
+.side .plaque {
+	display: block;
+	width: 172px;
+	height: 172px;
+}
+
+.side > .name {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	gap: 12px;
+	align-items: baseline;
+	margin-top: 16px;
+	padding-block: 10px;
+	border-block: 1px solid var(--rule-soft);
+	background: var(--surface);
+	color: var(--quiet);
+	line-height: 1.4;
+	overflow-wrap: anywhere;
+}
+
+.side .name a {
+	margin: 0;
+	color: var(--ink);
+	font-size: 1rem;
+	font-weight: 700;
+	text-decoration: none;
+}
+
+.side .overall {
+	display: grid;
+	gap: 8px;
+	margin-top: 8px;
+	color: var(--quiet);
+}
+
+.side .overall meter {
+	width: 100%;
+	height: 3px;
+	border: 0;
+	background: var(--rule);
+}
+
+.side .overall meter::-webkit-meter-bar {
+	height: 3px;
+	background: var(--rule);
+}
+
+.side .overall meter::-webkit-meter-optimum-value {
+	background: var(--ink);
+}
+
+.side .overall meter::-moz-meter-bar {
+	background: var(--ink);
+}
+
+/* The part the pages are focused on, with the key back to the whole burst. */
+
+.side .focus {
+	margin: 8px 0 0;
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.side .focus a {
+	color: var(--quiet);
+	font-weight: 400;
+	text-decoration: none;
+}
+
+.side .focus a:hover {
+	color: var(--ink);
+}
+
+.side .focus kbd {
+	margin-right: 0.6ch;
+	border-color: var(--rule);
+	color: var(--quiet);
+}
+
+/* How many notices wait at the head of the route: they wait for the owner,
+   so they stand in full relief. */
+
+.side .notices {
+	margin: 8px 0 0;
+}
+
+.side .notices a {
+	color: var(--ink);
+	font-weight: 700;
+	text-decoration: none;
+}
+
+/* When GitHub was read, whether it has moved on since, and the way to read it again */
+
+.side .read {
+	display: grid;
+	gap: 4px;
+	margin-top: var(--group-gap);
+	padding: 12px 16px 0;
+	border-top: 1px solid var(--rule-soft);
+	color: var(--quiet);
+}
+
+.side .read p {
+	padding: 0;
+}
+
+.side .read .moved {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.side .read .moved[hidden] {
+	display: none;
+}
+
+.side .read .again {
+	color: var(--quiet);
+}
+
+.side .read .again:hover {
+	color: var(--ink);
+}
+
+.side .stops [data-moved] .title::before {
+	content: "* ";
+	color: var(--ink);
+	font-weight: 700;
+}
+
+/* A row of the pane held under the pointer: its title in full, its marks in
+   words, the way to GitHub. Beside the pane, over the page, and quiet. */
+
+.side-card {
+	inset: auto;
+	width: min(44ch, calc(100vw - 24px));
+	margin: 0;
+	padding: 10px 14px 12px;
+	border: 1px solid var(--rule-strong);
+	background: var(--surface);
+	color: var(--ink);
+	font-size: 0.867rem;
+	line-height: 1.45;
+}
+
+.side-card .name {
+	margin: 0;
+	font-weight: 700;
+}
+
+.side-card .name .number {
+	color: var(--quiet);
+	font-weight: 400;
+}
+
+.side-card dl {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 2px 1.2ch;
+	margin: 10px 0 0;
+}
+
+.side-card dl div {
+	display: contents;
+}
+
+.side-card dt {
+	color: var(--ink);
+	font-weight: 700;
+	white-space: pre;
+}
+
+.side-card dd {
+	margin: 0;
+	color: var(--quiet);
+}
+
+.side-card .ways {
+	display: flex;
+	gap: 2ch;
+	margin: 10px 0 0;
+	padding-top: 8px;
+	border-top: 1px solid var(--rule-soft);
+}
+
+.side-card .ways a {
+	color: var(--quiet);
+}
+
+.side-card .ways a:hover {
+	color: var(--ink);
+}
+
+.side .desk {
+	display: grid;
+	gap: 2px;
+	margin: 0;
+	font-size: inherit;
+	letter-spacing: 0;
+	text-transform: none;
+}
+
+.side .desk a {
+	display: grid;
+	grid-template-columns: 1ch minmax(0, 1fr);
+	column-gap: 0.6ch;
+	align-items: baseline;
+	padding: 2px 6px;
+	color: var(--quiet);
+}
+
+.side .desk a::before {
+	content: "";
+}
+
+.side .desk a:hover {
+	background: var(--rest);
+	color: var(--ink);
+}
+
+.side .desk a[aria-current] {
+	box-shadow: none;
+	background: var(--plate);
+	color: var(--panel);
+	font-weight: 700;
+}
+
+.side .desk a[aria-current]::before {
+	content: ">";
+}
+
+.side h2 {
+	margin-top: var(--group-gap);
+	padding: 6px 12px;
+	border-block: 1px solid var(--rule-soft);
+	background: var(--surface-head);
+	color: var(--quiet);
+	font-size: 0.8rem;
+	font-weight: 600;
+	letter-spacing: 0.025em;
+	text-transform: uppercase;
+}
+
+.side .stops + h2 {
+	margin-top: var(--group-gap);
+}
+
+.side .stops {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	background: var(--panel);
+}
+
+.side .stops li:nth-child(even) {
+	background: var(--paper);
+}
+
+.side .stops a {
+	display: grid;
+	grid-template-columns: 1ch 4ch minmax(0, 1fr) auto;
+	gap: 0.6ch;
+	align-items: baseline;
+	padding: 2px 12px;
+	border-block: 1px solid transparent;
+	color: var(--quiet);
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.side .stops .mark {
+	white-space: pre;
+}
+
+.side .stops .title {
+	overflow: hidden;
+	color: var(--ink);
+	text-overflow: ellipsis;
+}
+
+.side .stops .number {
+	margin: 0;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	text-align: right;
+}
+
+.side .stops a:hover {
+	background: var(--rest);
+	color: var(--ink);
+}
+
+.side .stops [aria-current] a {
+	border-color: var(--quiet);
+	background: var(--rest);
+}
+
+.side .stops [aria-current] .number,
+.side .stops [aria-current] .mark {
+	color: var(--ink);
+}
+
+.side .stops [aria-current] .title {
+	color: var(--ink);
+	font-weight: 700;
+	white-space: normal;
+}
+
+.side .stops [aria-current] .fraction {
+	border-color: var(--rule-strong);
+	color: var(--ink);
+}
+
+/* The bars: how far, drawn square */
+
+meter,
+.progress meter,
+.progress-line meter {
+	border: 1px solid var(--quiet);
+	background: none;
+}
+
+meter::-webkit-meter-bar,
+.progress meter::-webkit-meter-bar {
+	border: 0;
+	background: none;
+}
+
+meter::-webkit-meter-optimum-value,
+.progress meter::-webkit-meter-optimum-value {
+	background: var(--ok);
+}
+
+meter::-moz-meter-bar,
+.progress meter::-moz-meter-bar {
+	background: var(--ok);
+}
+
+/* Controls: a button is a box with its word in it; the main one is inverse */
+
+button {
+	font-size: inherit;
+}
+
+button.quiet,
+.elsewhere button,
+.code-link,
+.session-link {
+	padding: 0.12rem 0.7rem;
+	border: 1px solid var(--rule);
+	background: none;
+	color: var(--ink);
+	font-size: inherit;
+	text-decoration: none;
+}
+
+button.quiet:hover,
+.elsewhere button:hover,
+.code-link:hover,
+.session-link:hover {
+	border-color: var(--ink);
+	background: var(--rest);
+	color: var(--ink);
+}
+
+/* A link that opens a Claude session, among buttons: its words centred as theirs are. */
+.session-link:not([hidden]) {
+	display: inline-flex;
+	align-items: center;
+}
+
+button.quiet:disabled {
+	border-style: dashed;
+	color: var(--quiet);
+	cursor: default;
+}
+
+button.quiet[aria-pressed="true"] {
+	border-color: var(--ink);
+	background: var(--ink);
+	color: var(--paper);
+}
+
+button.primary {
+	padding: 0.35rem 1rem;
+	border: 1px solid var(--ink);
+	background: var(--ink);
+	color: var(--paper);
+	font-weight: 700;
+}
+
+button.primary:hover {
+	background: var(--pin);
+	border-color: var(--pin);
+}
+
+input[type="text"],
+textarea,
+select {
+	border: 1px solid var(--quiet);
+	background: var(--panel);
+	color: var(--ink);
+	font-size: 1rem;
+}
+
+textarea:focus-visible,
+input:focus-visible {
+	border-color: var(--pin);
+	outline: 1px solid var(--pin);
+	outline-offset: 0;
+}
+
+kbd {
+	display: inline-block;
+	box-sizing: border-box;
+	min-width: 1.7em;
+	padding: 0 0.4em;
+	border: 1px solid var(--rule-strong);
+	color: var(--ink);
+	font-size: 0.8rem;
+	line-height: 1.45;
+	text-align: center;
+}
+
+button.primary kbd {
+	border-color: currentcolor;
+	color: inherit;
+	opacity: 1;
+}
+
+/* Marks made of letters, where the sheets before drew dots */
+
+/* Whose turn it is is said in words; it is the owner's that stands out. */
+.turn::before,
+.turn[data-turn]::before {
+	content: none;
+}
+
+.turn {
+	color: var(--quiet);
+	font-weight: 400;
+}
+
+.turn[data-turn="owner"] {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.progress[data-done="true"] .fraction::after {
+	content: " ok";
+	color: var(--ok);
+}
+
+/* No stripe down a side: a thing that stands apart gets a box of its own */
+
+.card,
+.respond {
+	border: 1px solid var(--rule);
+}
+
+.respond {
+	border-color: var(--rule-strong);
+	padding: 12px 16px;
+	background: var(--surface);
+}
+
+.flash,
+.flash.alert,
+.finish,
+.taken-in,
+.unmatched,
+.unreadable,
+[data-stop][aria-current] {
+	border: 1px solid var(--rule);
+	box-shadow: none;
+}
+
+.flash.alert,
+.unreadable {
+	border-color: var(--ink);
+}
+
+.taken-in,
+.unmatched,
+.unreadable {
+	box-sizing: border-box;
+	background: none;
+}
+
+.finish {
+	border-color: var(--ok);
+	background: none;
+}
+
+[data-stop][aria-current] {
+	border-color: var(--ink);
+	background: var(--rest);
+}
+
+.ledger tr[data-stop][aria-current] {
+	border: 0;
+	outline: 1px solid var(--ink);
+	outline-offset: -1px;
+}
+
+/* The foot of the desk: the bar that says where the owner is and the few keys
+   that matter there, and above it, once ? has docked it, the list of them all.
+   It is beaded along its top, as the pane is along its edge. */
+
+.foot {
+	position: fixed;
+	inset: auto 0 0 0;
+	z-index: 8;
+	background: var(--panel);
+	font-size: 0.867rem;
+}
+
+body.shell .foot {
+	left: var(--side);
+}
+
+.foot::before {
+	content: "";
+	position: absolute;
+	top: -2px;
+	right: 0;
+	left: 0;
+	height: 5px;
+	background: var(--bead);
+	mask: var(--beads-across) repeat-x;
+}
+
+.modebar {
+	position: static;
+	align-items: center;
+	gap: 16px;
+	padding: 8px 16px 8px 56px;
+	border-top: 0;
+	background: none;
+	font-size: inherit;
+}
+
+.modebar .mode {
+	gap: 4px 20px;
+	align-items: center;
+}
+
+.modebar .mode strong {
+	padding: 0 1ch;
+	background: var(--ink);
+	color: var(--paper);
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+.modebar kbd,
+.modebar .all-keys {
+	border-color: var(--rule-strong);
+	background: var(--paper);
+	color: var(--ink);
+}
+
+.modebar kbd {
+	min-width: 2em;
+	padding: 1px 0.45em;
+}
+
+.modebar kbd + kbd {
+	margin-left: 4px;
+}
+
+.modebar .all-keys {
+	padding: 3px 0.6em;
+	border: 1px solid var(--rule-strong);
+	font-size: 0.8rem;
+}
+
+.modebar .all-keys kbd {
+	min-width: 0;
+	padding: 0;
+	border: 0;
+}
+
+.modebar .all-keys:hover {
+	border-color: var(--ink);
+	color: var(--ink);
+}
+
+.modebar .all-keys[aria-expanded="true"] {
+	border-color: var(--ink);
+}
+
+.keys-help {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+	gap: 16px 28px;
+	width: auto;
+	max-height: 46vh;
+	padding: 16px 16px 16px 56px;
+	overflow-y: auto;
+	border: 0;
+	border-bottom: 1px solid var(--rule);
+	background: none;
+}
+
+.keys-help[hidden],
+.keys-help [hidden] {
+	display: none;
+}
+
+.keys-help h3 {
+	margin: 0 0 8px;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	font-weight: 400;
+	letter-spacing: 0.04em;
+}
+
+.keys-help dl {
+	display: grid;
+	grid-template-columns: max-content minmax(0, 1fr);
+	gap: 3px 1.2ch;
+	align-items: baseline;
+}
+
+.keys-help dl div {
+	display: contents;
+}
+
+.keys-help dt kbd + kbd {
+	margin-left: 3px;
+}
+
+/* The keys of the block the owner is on lead the list, in full relief. */
+.keys-help .this-block dd {
+	font-weight: 700;
+}
+
+.keys-help .this-block kbd {
+	border-color: var(--ink);
+}
+
+.toast {
+	right: 1.1rem;
+	bottom: calc(var(--foot-height, 2.2rem) + 0.6rem);
+	border: 1px solid var(--ink);
+	background: var(--ink);
+	color: var(--paper);
+	font-size: 0.9rem;
+}
+
+/* What the desk said lately, where the toast said it, newest first. */
+
+.messages {
+	inset: auto 1.1rem calc(var(--foot-height, 2.2rem) + 0.6rem) auto;
+	width: min(64ch, calc(100vw - 2.2rem));
+	max-height: 60vh;
+	margin: 0;
+	padding: 12px 16px;
+	overflow-y: auto;
+	border: 1px solid var(--ink);
+	background: var(--paper);
+	color: var(--ink);
+	font-size: 0.867rem;
+}
+
+.messages h3 {
+	margin: 0 0 8px;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	font-weight: 400;
+	letter-spacing: 0.04em;
+}
+
+.messages ol {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.messages li {
+	padding: 6px 0;
+	border-top: 1px solid var(--rule);
+}
+
+.messages li p {
+	margin: 0;
+	white-space: pre-line;
+}
+
+.messages .where,
+.messages .none {
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+.messages .where a {
+	color: inherit;
+}
+
+.draft-tools .data {
+	border: 1px solid var(--ink);
+	box-shadow: none;
+}
+
+.draft-tools .data h2 {
+	font-size: 1.1rem;
+	font-weight: 700;
+}
+
+/* A picture looked at closely: the whole window, the picture on a dark stage */
+
+.viewer {
+	width: 100vw;
+	max-width: none;
+	height: 100vh;
+	max-height: none;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: var(--paper);
+	color: var(--ink);
+}
+
+.viewer[open] {
+	display: grid;
+	grid-template-rows: minmax(0, 1fr) auto auto auto;
+}
+
+.viewer .stage {
+	position: relative;
+	overflow: hidden;
+	cursor: crosshair;
+	touch-action: none;
+}
+
+.viewer .stage[data-zoomed="true"] {
+	cursor: grab;
+}
+
+/* What is looked at, laid in its own pixels and moved and scaled as one: a
+   picture, or a pair's halves side by side or one over the other. */
+.viewer .canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform-origin: 0 0;
+	isolation: isolate;
+}
+
+.viewer img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	max-width: none;
+	user-select: none;
+}
+
+.viewer img[hidden] {
+	display: none;
+}
+
+.viewer .canvas[data-view="onion"] .second {
+	opacity: 0.5;
+}
+
+.viewer .canvas[data-view="difference"] .second {
+	mix-blend-mode: difference;
+}
+
+.viewer .stage:has(.canvas[data-view="swipe"]) {
+	cursor: ew-resize;
+}
+
+/* The swipe's divider and the changed regions: as thin on the screen at any
+   zoom, white inside black, so that they show on a light picture and a dark. */
+.viewer .divider,
+.viewer .change {
+	position: absolute;
+	pointer-events: none;
+}
+
+.viewer .divider {
+	top: 0;
+	bottom: 0;
+	width: calc(var(--line) * 2);
+	margin-left: calc(var(--line) * -1);
+	background: #fff;
+	box-shadow: 0 0 0 var(--line) #000;
+}
+
+.viewer .divider[hidden] {
+	display: none;
+}
+
+.viewer .outlines {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+.viewer .change {
+	margin: calc(var(--line) * -2);
+	border: calc(var(--line) * 2) solid #fff;
+	outline: var(--line) solid #000;
+}
+
+.viewer .change[data-current] {
+	outline-width: calc(var(--line) * 3);
+}
+
+.viewer .swipe {
+	margin: 0.3rem 1.1rem;
+}
+
+.viewer .keys .current {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+/* A region being drawn, and the place a note is being written on: white
+   inside black, so that it shows on a light picture and a dark, with all
+   outside it dimmed. */
+.viewer .marking {
+	position: absolute;
+	border: 2px solid #fff;
+	outline: 1px solid #000;
+	box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.5);
+	pointer-events: none;
+}
+
+.viewer .marking[hidden] {
+	display: none;
+}
+
+/* The notes on a picture, as thin on the screen at any zoom as the changed
+   regions; a pin is a ring. */
+.viewer .notes {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+.viewer .note {
+	position: absolute;
+	margin: calc(var(--line) * -2);
+	border: calc(var(--line) * 2) solid #fff;
+	outline: var(--line) solid #000;
+}
+
+.viewer .note.pin {
+	width: calc(var(--line) * 14);
+	height: calc(var(--line) * 14);
+	margin: calc(var(--line) * -7);
+	border-radius: 50%;
+}
+
+/* A note saved opens at a click, and says so under the pointer. */
+.viewer[data-takes-notes] .canvas:is([data-view=""], [data-view="side"], [data-view="blink"]) .note[data-note] {
+	pointer-events: auto;
+	cursor: pointer;
+}
+
+.viewer[data-takes-notes] .note[data-note]:hover {
+	border-width: calc(var(--line) * 3);
+}
+
+.viewer .note.drafted {
+	border-width: calc(var(--line) * 3);
+	box-shadow: 0 0 0 calc(var(--line) * 100000) rgb(0 0 0 / 0.5);
+}
+
+/* The note's form, beside the place it is about. */
+.viewer .beside-note {
+	position: absolute;
+	z-index: 1;
+	width: min(24rem, calc(100% - 24px));
+	cursor: auto;
+}
+
+.viewer .beside-note[hidden] {
+	display: none;
+}
+
+.viewer .beside-note .respond {
+	margin: 0;
+	box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.6);
+}
+
+.viewer .caption,
+.viewer .keys {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.2rem 1.4rem;
+	margin: 0;
+	padding: 0.3rem 1.1rem;
+	border-top: 1px solid var(--rule);
+	color: var(--quiet);
+	font-size: 0.86rem;
+}
+
+.viewer .caption {
+	color: var(--ink);
+}
+
+.viewer .caption:empty {
+	display: none;
+}
+
+/* The way out by pointer, in the corner where windows keep theirs. */
+.viewer .close {
+	position: absolute;
+	top: 0.6rem;
+	right: 0.8rem;
+	z-index: 2;
+	min-width: 2.2rem;
+	padding: 0.1rem 0.6ch;
+	border: 1px solid var(--rule-strong);
+	background: var(--paper);
+	color: var(--ink);
+	font: 1rem / 1.6 var(--mono);
+	cursor: pointer;
+}
+
+.viewer .close:hover,
+.viewer .close:focus-visible {
+	background: var(--ink);
+	color: var(--paper);
+}
+
+/* A picture that takes no note is only looked at. */
+.viewer:not([data-takes-notes]) .stage:not([data-zoomed="true"]) {
+	cursor: default;
+}
+
+.viewer kbd {
+	border-color: var(--quiet);
+	color: var(--ink);
+}
+
+.viewer kbd + kbd {
+	margin-left: 0.3ch;
+}
+
+.decision-pictures img {
+	cursor: zoom-in;
+}
+
+/* A pull request's page, as a cursor reads it. One column: the title, a line
+   on where it stands, the description's sections, then the sections of its
+   review. The reading rests on one block; that block alone carries keys, in
+   the margin beside it, and an outline at the right says which section it is
+   in. Everything else waits until it is asked for. */
+
+/* The column is 68 of the page's characters wide, in rem so that the margin
+   beside it, set smaller, measures the same; it gives way before the keys
+   beside it and the outline do. */
+body[data-page="pull_requests"] > .main {
+	--rail: 15rem;
+	--measure: min(
+		41rem,
+		calc(100vw - var(--side) - var(--gutter) - var(--rail) - 18px - 14rem - 28px)
+	);
+}
+
+.pull-request,
+.since,
+.lost,
+.page,
+[data-round-results],
+body[data-page="pull_requests"] .flash {
+	max-width: var(--measure);
+}
+
+.pull-request {
+	position: relative;
+	margin: 0;
+}
+
+.along[hidden] {
+	display: none;
+}
+
+.review-actions,
+.review-actions .along {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px 16px;
+}
+
+.review-actions {
+	margin: 16px 0 24px;
+	padding: 12px 16px;
+	border-block: 1px solid var(--rule);
+	background: var(--surface);
+	font-size: 0.867rem;
+}
+
+.review-actions .along {
+	margin: 0;
+	font-size: inherit;
+}
+
+.review-actions :is(a, button) {
+	color: var(--quiet);
+	text-decoration: none;
+}
+
+.review-actions :is(a, button):hover {
+	color: var(--ink);
+}
+
+.review-actions [data-enter-decisions] {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.review-actions button {
+	padding: 3px 8px;
+	border: 1px solid var(--rule-strong);
+	background: var(--panel);
+	font-size: inherit;
+	cursor: pointer;
+}
+
+.review-actions button:disabled {
+	color: var(--quiet);
+	opacity: 0.5;
+}
+
+.review-actions [hidden] {
+	display: none;
+}
+
+.queue-empty {
+	padding: 16px;
+	border: 1px solid var(--rule);
+	background: var(--surface);
+}
+
+.queue-empty p {
+	margin: 0 0 12px;
+}
+
+.queue-empty > a {
+	display: inline-block;
+}
+
+.queue-empty > button + a {
+	margin-left: 16px;
+}
+
+.pull-request h1 {
+	margin: 0;
+	font-size: 1.4rem;
+}
+
+.pull-request h1 .number {
+	margin-right: 0.6ch;
+	color: inherit;
+	font-weight: 400;
+}
+
+.side .stops .fraction {
+	min-width: 4ch;
+	padding-left: 0.6ch;
+	border-left: 1px solid var(--rule-soft);
+	color: var(--quiet);
+	font-size: 0.8rem;
+	text-align: right;
+}
+
+.pull-request .status {
+	display: block;
+	margin: 8px 0 var(--group-gap);
+	padding: 0 16px;
+	border: 0;
+	color: var(--quiet);
+	font-size: 0.933rem;
+}
+
+.status .turn {
+	display: inline;
+	font-size: inherit;
+	white-space: normal;
+}
+
+.pull-request .recordings {
+	margin: -16px 0 26px;
+	color: var(--quiet);
+}
+
+/* What can be done with the whole pull request: beside its title, while the
+   reading rests there. */
+
+.pull-request .whole {
+	position: absolute;
+	top: 5px;
+	left: calc(100% + 28px);
+	display: none;
+}
+
+.pull-request:has(h1:focus, .whole:focus-within) .whole {
+	display: grid;
+}
+
+.whole,
+.cursor .beside {
+	gap: var(--control-gap);
+	justify-items: start;
+	width: 13.5rem;
+	overflow: hidden;
+	color: var(--quiet);
+	font-size: 0.867rem;
+	white-space: nowrap;
+}
+
+.whole :is(button, a),
+.cursor .beside button {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: inherit;
+	font: inherit;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.whole :is(button, a):hover,
+.cursor .beside button:hover {
+	color: var(--ink);
+}
+
+.whole kbd,
+.cursor .beside kbd {
+	margin-right: 0.6ch;
+	border-color: var(--rule);
+	color: var(--quiet);
+}
+
+.whole .keyless {
+	text-decoration: underline;
+}
+
+.whole form {
+	margin: 0;
+}
+
+/* The cursor: a mark in the gutter at the block the reading rests on, and that
+   block's keys beside it. The script puts it there; the block itself is not
+   outlined. */
+
+.cursor {
+	position: absolute;
+	right: 0;
+	left: 0;
+	height: 0;
+	pointer-events: none;
+}
+
+.cursor[hidden] {
+	display: none;
+}
+
+.cursor .mark {
+	position: absolute;
+	left: calc(var(--gutter) - 2.4ch);
+	display: flex;
+	align-items: center;
+	height: var(--line, 1.6em);
+	font-weight: 700;
+}
+
+/* Under the mark, a rule as long as the block the reading rests on. */
+.cursor .reach {
+	position: absolute;
+	top: var(--line, 1.6em);
+	left: calc(var(--gutter) - 2ch);
+	height: max(0px, calc(var(--height, 0px) - var(--line, 1.6em)));
+	border-left: 1px solid var(--rule-strong);
+}
+
+.cursor .beside {
+	position: absolute;
+	top: 2px;
+	left: calc(var(--gutter) + var(--measure) + 28px);
+	display: grid;
+	pointer-events: auto;
+}
+
+[data-reading]:focus,
+[data-reading]:focus-visible,
+li[data-decision]:focus-visible,
+.finish:focus-visible {
+	outline: none;
+}
+
+[data-reading] {
+	scroll-margin-block: 2.5rem calc(4rem + var(--keys-height, 0px));
+}
+
+/* The rail at the right of a pull request's page: the outline, and Try it
+   under it, which takes what height is left above the key bar and scrolls
+   within it. */
+
+.rail {
+	position: fixed;
+	top: 36px;
+	right: 18px;
+	bottom: 56px;
+	z-index: 2;
+	display: flex;
+	flex-direction: column;
+	gap: var(--group-gap);
+	width: var(--rail);
+}
+
+/* The outline: the page's sections, the one the reading is in marked, and a
+   count only where something waits for the owner. */
+
+.outline {
+	display: grid;
+	flex: none;
+	padding: 8px;
+	border: 1px solid var(--rule);
+	background: var(--panel);
+	font-size: 0.867rem;
+}
+
+.outline :is(button, a) {
+	display: flex;
+	gap: 1ch;
+	justify-content: space-between;
+	padding: 4px 6px 4px 0;
+	border: 0;
+	background: none;
+	color: var(--quiet);
+	font: inherit;
+	text-align: left;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.outline [hidden] {
+	display: none;
+}
+
+.outline :is(button, a):hover,
+.outline [aria-current] {
+	color: var(--ink);
+}
+
+.outline [aria-current] {
+	background: var(--plate);
+	color: var(--panel);
+	font-weight: 700;
+}
+
+.outline :is(button, a)[aria-current] .count {
+	color: inherit;
+}
+
+.outline .name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.outline .name::before {
+	content: "  ";
+	white-space: pre;
+}
+
+.outline [aria-current] .name::before {
+	content: "> ";
+	font-weight: 700;
+}
+
+.outline .apart {
+	margin-top: 12px;
+	padding-top: 12px;
+	border-top: 1px solid var(--rule);
+}
+
+.outline .count {
+	color: var(--quiet);
+}
+
+.outline .count[data-waits="true"],
+details.section > summary .count[data-waits="true"] {
+	color: var(--ink);
+}
+
+.outline .count[data-waits="true"] {
+	font-weight: 700;
+}
+
+/* The checkout, the server and the scenarios read as separate groups. The
+   same beads as Standing distinguish what is ready from what still waits. */
+
+.try {
+	min-height: 0;
+	padding: 0;
+	overflow-y: auto;
+	border: 1px solid var(--rule);
+	background: var(--surface);
+	font-size: 0.867rem;
+	line-height: 1.5;
+	scrollbar-width: thin;
+}
+
+.try h2 {
+	margin: 0;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--rule);
+	background: var(--surface-head);
+	color: var(--ink);
+	font-size: 0.933rem;
+	font-weight: 700;
+}
+
+.try code {
+	overflow-wrap: anywhere;
+}
+
+.try .conditions {
+	grid-template-columns: 9px minmax(0, 1fr);
+	row-gap: 12px;
+	column-gap: 1ch;
+	margin: 12px;
+	padding: 0;
+	font-size: inherit;
+}
+
+.try .conditions li {
+	row-gap: 4px;
+	padding: 0;
+}
+
+.try .conditions .detail,
+.try .conditions .remedy button {
+	grid-column: 2;
+}
+
+.try .conditions [data-met="true"] .name {
+	font-weight: 400;
+}
+
+/* Starting: the bead breathes, as on the Scenarios page. */
+@media (prefers-reduced-motion: no-preference) {
+	.try .conditions [data-state="starting"]::before {
+		animation: breathe 1.2s ease-in-out infinite alternate;
+	}
+}
+
+.try .conditions .server-state {
+	padding-top: 12px;
+	border-top: 1px solid var(--rule);
+}
+
+.try .server-action {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px 1ch;
+	align-items: baseline;
+}
+
+.try .server-action form {
+	margin: 0;
+}
+
+.try .conditions button.quiet {
+	min-height: 28px;
+	padding: 3px 1ch;
+	font: inherit;
+}
+
+.try .server-state[data-state="down"] button {
+	border-color: var(--plate);
+	background: var(--plate);
+	color: var(--panel);
+	font-weight: 700;
+}
+
+/* The way to the fix stands where a bead would, without one: it is no
+   condition, only what to do about the two above it. */
+.try .conditions li.remedy::before {
+	display: none;
+}
+
+.try .conditions .remedy button {
+	justify-self: start;
+}
+
+/* The fix opens in a popup beside the rail, level with its top, over the
+   page: the rail stays as short as it was. */
+.try-pop {
+	position: fixed;
+	inset: 42px auto auto;
+	right: calc(18px + var(--rail) + 14px);
+	width: min(72ch, 56vw);
+	max-height: calc(100vh - 110px);
+	margin: 0;
+	padding: 18px 20px 16px;
+	overflow: auto;
+	border: 1px solid var(--ink);
+	background: var(--panel);
+	color: var(--ink);
+	font-size: 0.867rem;
+	line-height: 1.5;
+	box-shadow: 0 16px 40px rgb(0 0 0 / 0.55);
+}
+
+.try-pop::backdrop {
+	background: rgb(0 0 0 / 0.35);
+}
+
+.try-pop h3 {
+	margin: 0 0 10px;
+	font-size: 1rem;
+}
+
+.try-pop p {
+	margin: 0 0 10px;
+}
+
+.try-pop .steps {
+	margin: 16px 0;
+	padding: 0;
+	list-style: none;
+	counter-reset: step;
+}
+
+.try-pop .steps > li {
+	position: relative;
+	margin-top: 16px;
+	padding-left: 3ch;
+	counter-increment: step;
+}
+
+.try-pop .steps > li::before {
+	content: counter(step) ".";
+	position: absolute;
+	left: 0;
+	color: var(--quiet);
+}
+
+.try-pop .steps p {
+	margin-bottom: 6px;
+}
+
+/* Words to copy: set apart as a terminal would show them, the button at
+   their corner. */
+.copyable {
+	position: relative;
+	margin: 0 0 8px;
+}
+
+.copyable pre {
+	margin: 0;
+	padding: 8px 8ch 8px 10px;
+	border: 1px solid var(--rule);
+	background: var(--rest);
+	font-size: 0.8rem;
+	line-height: 1.5;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.copyable pre code {
+	padding: 0;
+	background: none;
+}
+
+.copyable button {
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	padding: 0 1ch;
+	font-size: 0.75rem;
+}
+
+/* The end of the log of a server that has stopped shows while the pointer or
+   the focus is on its line: beside the rail, level with the line, over the
+   page. Without anchors it stands at the top. */
+.rail {
+	anchor-name: --rail;
+}
+
+.try .log {
+	anchor-name: --log-end;
+	color: var(--ink);
+	text-decoration: underline dotted;
+	text-underline-offset: 0.22em;
+	cursor: help;
+}
+
+.try .tail {
+	position: fixed;
+	top: 42px;
+	right: calc(18px + var(--rail) + 14px);
+	z-index: 9;
+	display: none;
+	width: min(84ch, 52vw);
+	max-height: 70vh;
+	margin: 0;
+	padding: 10px 12px;
+	overflow: auto;
+	border: 1px solid var(--ink);
+	background: var(--panel);
+	color: var(--ink);
+	font-size: 0.75rem;
+	line-height: 1.4;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	box-shadow: 0 10px 30px rgb(0 0 0 / 0.5);
+}
+
+@supports (anchor-name: --a) {
+	.try .tail {
+		top: auto;
+		right: calc(anchor(--rail left) + 14px);
+		bottom: anchor(--log-end bottom);
+		position-try-fallbacks: flip-block;
+	}
+}
+
+.try li:has(.log:is(:hover, :focus-visible)) .tail {
+	display: block;
+}
+
+.try .tries {
+	margin-top: 0;
+	padding: 12px;
+	border-top: 1px solid var(--rule);
+	background: var(--panel);
+}
+
+.try .tries h3 {
+	margin: 0 0 4px;
+	color: var(--ink);
+	font-size: inherit;
+}
+
+.try .tries .lede {
+	margin: 0 0 12px;
+	color: var(--quiet);
+}
+
+.try .tries ol {
+	display: grid;
+	gap: 12px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.try .tries li {
+	display: grid;
+	gap: 4px;
+}
+
+/* A scenario's button carries its name: the thing pressed is the thing tried. */
+.try .try-one {
+	width: 100%;
+	padding: 8px 1ch;
+	border: 1px solid var(--plate);
+	background: var(--plate);
+	color: var(--panel);
+	font: inherit;
+	font-weight: 700;
+	text-align: left;
+	overflow-wrap: anywhere;
+	cursor: pointer;
+}
+
+.try .try-one:hover,
+.try .try-one:focus-visible {
+	background: var(--ink);
+	color: var(--paper);
+}
+
+.try .try-one:disabled {
+	border-style: dashed;
+	border-color: var(--rule);
+	background: none;
+	color: var(--quiet);
+	cursor: default;
+}
+
+.try .tries .how {
+	padding: 0;
+	color: var(--quiet);
+	overflow-wrap: anywhere;
+}
+
+body[data-focus] .outline :is(button, a):not([aria-current]) {
+	color: var(--quiet);
+}
+
+/* The sections: a heading and what it holds at a glance; open, its blocks. */
+
+.page {
+	display: block;
+}
+
+details.section {
+	margin-bottom: 8px;
+	padding-inline: 16px;
+	border: 1px solid var(--rule);
+	background: var(--surface);
+}
+
+details.section:focus-within {
+	border-color: var(--rule-strong);
+}
+
+details.section:last-child {
+	border-bottom: 1px solid var(--rule);
+}
+
+main.description + details.section {
+	margin-top: var(--group-gap);
+}
+
+details.section > summary {
+	position: relative;
+	gap: 1.4ch;
+	align-items: baseline;
+	margin-inline: -16px;
+	padding: 9px 16px;
+	background: var(--surface);
+	color: var(--quiet);
+}
+
+details.section[open] > summary,
+details.section > summary:hover {
+	background: var(--surface-head);
+	color: var(--ink);
+}
+
+details.section[open] > summary {
+	margin-bottom: 12px;
+	border-bottom: 1px solid var(--rule);
+	box-shadow: inset 0 1px #3d3d3d, 0 1px #151515;
+}
+
+/* The fold has a visible state even when its heading has no count. */
+details.section > summary::after {
+	content: "+";
+	flex: none;
+	margin-left: auto;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+details.section[open] > summary::after {
+	content: "−";
+}
+
+details.section > summary::before,
+.pr-scenarios > summary::before,
+.pr-scenarios[open] > summary::before {
+	content: none;
+}
+
+/* The open fold has an etched joint, using only a thin slice of APL's grid.
+   No complete sign is presented as a label, status or action. */
+details.section[open] > summary::before {
+	content: "";
+	position: absolute;
+	right: 0;
+	bottom: -1px;
+	left: 0;
+	width: auto;
+	height: 3px;
+	background: var(--rule-strong);
+	mask: var(--apl-seam) left center / 28px 7px repeat-x;
+	pointer-events: none;
+}
+
+details.section .heading,
+.pr-scenarios .heading {
+	font-size: 1rem;
+	font-weight: 700;
+	letter-spacing: 0;
+	line-height: 1.2;
+	text-transform: none;
+}
+
+details.section > summary .count {
+	margin-left: 0;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+[data-quotable] {
+	padding: 0 0 0.9rem;
+	font-size: 1rem;
+	line-height: 1.62;
+}
+
+[data-quotable] :is(pre, table) {
+	border-color: var(--rule-strong);
+}
+
+[data-quotable] code {
+	background: var(--rest);
+}
+
+.description [data-quotable] > p,
+.description [data-quotable] > ul,
+.description [data-quotable] > ol {
+	max-width: none;
+}
+
+/* The + for a note by pointer stands in the gutter, under the pointer alone:
+   where the reading rests, the cursor's mark stands there instead. */
+
+.plus {
+	left: -1.6rem;
+	border-color: var(--rule-strong);
+	line-height: 1;
+}
+
+.task-list-item > .plus {
+	left: -3.3rem;
+}
+
+[data-reading]:focus > .plus,
+[data-reading]:focus > :first-child > .plus {
+	opacity: 0;
+	pointer-events: none;
+}
+
+/* A decision as it is read: a bead where GitHub drew a box, hollow while it
+   is still to review and solid once it is. It is a row that opens, and says
+   so under the pointer. */
+
+.description li[data-decision] > input[type="checkbox"],
+.description li[data-decision] > p > input[type="checkbox"] {
+	display: none;
+}
+
+.description [data-quotable] li[data-decision] {
+	padding-left: 2.6ch;
+}
+
+.description li[data-decision]::before {
+	content: "";
+	position: absolute;
+	top: 0.56em;
+	left: 0;
+	box-sizing: border-box;
+	width: 9px;
+	height: 9px;
+	border: 1px solid var(--ink);
+	border-radius: 50%;
+}
+
+.description li[data-decision]:not([data-said=""])::before {
+	border-color: var(--quiet);
+	background: var(--quiet);
+}
+
+.description li[data-decision][data-choice="stale"]::before {
+	border-color: var(--ink);
+	border-style: dashed;
+	background: none;
+}
+
+.description [data-decision][aria-current] {
+	background: none;
+	outline: 0;
+}
+
+body:not([data-focus]) .description li[data-decision] {
+	cursor: pointer;
+}
+
+body:not([data-focus]) .description li[data-decision]:hover {
+	background: var(--rest);
+}
+
+/* Which decisions the list shows: two words, the one in force in full relief. */
+
+.views {
+	gap: 2.4ch;
+	margin: 0 0 14px;
+	font-size: 0.867rem;
+}
+
+.views button.quiet,
+.views button.quiet[aria-pressed="true"] {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--quiet);
+}
+
+.views button.quiet[aria-pressed="true"] {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.views button.quiet:hover {
+	color: var(--ink);
+}
+
+.views .count {
+	margin-left: 0.4ch;
+	color: var(--quiet);
+	font-weight: 400;
+}
+
+/* Standing: what should hold, a bead to each, in two columns: the condition,
+   then what makes it so. A hollow bead in full relief waits; a solid one is met,
+   and its line lies back with it. The verdict is the bead's to say: its words
+   are for a screen reader. Whether the scenarios were tried follows apart,
+   always quiet, because nothing waits on it. */
+
+.standing {
+	margin: 0;
+	padding: 0 0 14px;
+	border: 0;
+}
+
+/* The lines share their columns, so the conditions and what makes them so each
+   line up, the first as wide as the longest condition. */
+.conditions {
+	grid-template-columns: 9px fit-content(44ch) minmax(0, 1fr);
+	column-gap: 2ch;
+	font-size: 0.867rem;
+}
+
+.conditions li {
+	grid-column: 1 / -1;
+	grid-template-columns: subgrid;
+	align-items: start;
+	padding: 2px 0;
+	border: 0;
+}
+
+/* On a phone, what makes it so goes under the condition. */
+@media (max-width: 40rem) {
+	.conditions {
+		grid-template-columns: 9px minmax(0, 1fr);
+	}
+
+	.conditions .detail {
+		grid-column: 2;
+	}
+}
+
+.conditions li::before {
+	content: "";
+	width: 9px;
+	height: 9px;
+	box-sizing: border-box;
+	margin-top: calc((1lh - 9px) / 2);
+	border: 1px solid var(--ink);
+	border-radius: 50%;
+}
+
+.conditions [data-met="false"] .name {
+	font-weight: 700;
+}
+
+.conditions [data-met="true"],
+.conditions li.optional {
+	color: var(--quiet);
+}
+
+.conditions [data-met="true"]::before {
+	border-color: var(--quiet);
+	background: var(--quiet);
+}
+
+/* Yours to judge: no fact decides it. */
+.conditions [data-met="nil"]::before {
+	border-style: dashed;
+}
+
+.conditions li.optional {
+	margin-top: 8px;
+}
+
+.conditions li.optional::before {
+	border-color: var(--quiet);
+}
+
+.conditions li.optional .name {
+	font-weight: 400;
+}
+
+.conditions .detail {
+	color: var(--quiet);
+}
+
+.standing .good-to-go {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 2ch;
+	align-items: baseline;
+	justify-items: start;
+	margin-top: 16px;
+	font-size: 0.867rem;
+	text-align: left;
+}
+
+.standing .good-to-go button {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--ink);
+	font: inherit;
+	font-weight: 700;
+	cursor: pointer;
+}
+
+.standing .good-to-go button.quiet {
+	color: var(--quiet);
+	font-weight: 400;
+	text-decoration: underline;
+}
+
+.standing .good-to-go kbd {
+	margin-right: 0.6ch;
+	font-weight: 400;
+}
+
+/* Set aside as waiting: a question until it is, then a sentence that says on what. */
+.standing .waiting {
+	display: block;
+	margin-top: 12px;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.standing .waiting > summary {
+	width: fit-content;
+	cursor: pointer;
+	list-style: none;
+}
+
+.standing .waiting > summary::-webkit-details-marker {
+	display: none;
+}
+
+.standing .waiting > summary::before {
+	content: "+ ";
+}
+
+.standing .waiting[open] > summary::before {
+	content: "- ";
+}
+
+.standing details.waiting form {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 1.2ch;
+	align-items: baseline;
+	margin: 8px 0 0 2ch;
+}
+
+.standing details.waiting form .hint {
+	flex-basis: 100%;
+	margin: 0;
+}
+
+.standing .waiting input {
+	flex: 0 1 40ch;
+	padding: 0.1rem 0.5rem;
+	border-color: var(--rule);
+	background: none;
+	font-size: inherit;
+}
+
+.standing div.waiting {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 2ch;
+	align-items: baseline;
+}
+
+.standing div.waiting :is(p, form) {
+	margin: 0;
+}
+
+.standing div.waiting strong {
+	color: var(--ink);
+}
+
+.standing div.waiting button {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--quiet);
+	font: inherit;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+/* Its scenarios, in the page's one column: what to do, then how to open it
+   and what was seen. */
+.pr-scenarios {
+	margin: 0;
+	border-bottom: 0;
+	font-size: 0.867rem;
+}
+
+.pr-scenarios .hint {
+	margin: 0 0 10px;
+}
+
+.pr-scenarios .scenario {
+	grid-template-columns: minmax(0, 1fr);
+	gap: 8px;
+	padding: 0 0 14px;
+	border: 0;
+}
+
+.pr-scenarios .scenario h4 {
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.pr-scenarios .scenario .act,
+.pr-scenarios .scenario .seen {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 1.4rem;
+	align-items: baseline;
+	justify-items: start;
+	text-align: left;
+}
+
+.connections {
+	margin: 0;
+	padding: 0 0 14px;
+	border: 0;
+	font-size: 0.867rem;
+}
+
+/* Notes: each as its words, then quietly what kind it is, how it stands and
+   what it was written on. */
+
+.margin {
+	position: static;
+	max-height: none;
+	padding-bottom: 14px;
+	overflow: visible;
+	font-size: 0.867rem;
+}
+
+.margin h3 {
+	margin: 0 0 6px;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	font-weight: 400;
+	letter-spacing: 0.07em;
+}
+
+.margin .cards + h3 {
+	margin-top: 16px;
+}
+
+.margin .card,
+.lost .card {
+	padding: 0;
+	border: 0;
+	background: none;
+}
+
+.margin .card .meta {
+	color: var(--quiet);
+	font-size: inherit;
+	letter-spacing: 0;
+	text-transform: none;
+}
+
+.margin .card .text {
+	color: var(--ink);
+	line-height: 1.55;
+}
+
+.margin .empty {
+	max-width: none;
+}
+
+/* The handover: how far the choices are, and what goes to the agent. */
+
+.draft-tools.compact {
+	position: static;
+	padding: 0 0 14px;
+	border: 0;
+	background: none;
+	font-size: 0.867rem;
+}
+
+/* The decisions in the page as it is read: each a row, its choices kept for
+   when it is the one at hand */
+
+.description [data-decision] > .beneath > .actions {
+	display: none;
+}
+
+.box:not([aria-current]) .beneath > .actions {
+	display: none;
+}
+
+/* The menu of choices: the key, what it does, and for the alternative, which */
+
+.beneath > .actions,
+.box .beneath > .actions,
+.task-list-item > .beneath > .actions {
+	display: grid;
+	gap: 0;
+	width: auto;
+	max-width: none;
+	margin-top: 14px;
+	border-top: 1px solid var(--rule);
+	font-size: 1rem;
+	opacity: 1;
+	background: var(--panel);
+}
+
+button.choice,
+.beneath > .actions > a {
+	display: grid;
+	grid-template-columns: 3ch minmax(0, 1fr);
+	gap: 0 1.4ch;
+	align-items: baseline;
+	padding: 8px 8px;
+	border: 0;
+	border-bottom: 1px solid var(--rule);
+	background: none;
+	color: var(--ink);
+	font-size: 1rem;
+	text-align: left;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.beneath > .actions > a {
+	display: block;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+button.choice:hover,
+button.choice:focus-visible,
+.beneath > .actions > a:hover {
+	background: var(--rest);
+}
+
+button.choice kbd {
+	min-width: 0;
+	padding: 0;
+	font-weight: 400;
+}
+
+/* Which alternative it is stands under the words that choose it. */
+button.choice .what {
+	grid-column: 2;
+	color: var(--quiet);
+}
+
+button.choice[data-choice-clear] {
+	grid-template-columns: minmax(0, 1fr);
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+button.choice[aria-pressed="true"] .does {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+button.choice[aria-pressed="true"] {
+	background: var(--plate);
+	color: var(--panel);
+}
+
+button.choice[aria-pressed="true"] :is(.does, .what, kbd),
+button.choice[aria-pressed="true"] .does::after {
+	color: inherit;
+}
+
+button.choice[aria-pressed="true"] .does::after {
+	content: "  <- your choice";
+	color: var(--quiet);
+	font-weight: 400;
+	white-space: pre;
+}
+
+.draft-status {
+	color: var(--quiet);
+}
+
+.box[data-choice="stale"] .draft-status {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+button.choice[hidden] {
+	display: none;
+}
+
+.choice-editor textarea {
+	width: 100%;
+	max-width: none;
+	min-height: 7rem;
+	padding: 0.6rem 0.8rem;
+	line-height: 1.5;
+}
+
+.choice-editor :is(textarea, input):focus-visible {
+	border-color: var(--ink);
+	outline: 1px solid var(--ink);
+	outline-offset: 2px;
+}
+
+/* A choice's one line, a note on the alternative or a rule, spans the
+   column as the longer answer does. */
+.choice-editor input[type="text"] {
+	box-sizing: border-box;
+	flex-basis: 100%;
+	width: 100%;
+	padding: 0.45rem 0.8rem;
+}
+
+/* Which decision of how many: a bead each. Hollow, it is still to review;
+   solid, it is chosen; ringed, it is the one at hand. */
+
+.stepper {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	align-items: center;
+	margin: 12px 0 20px;
+}
+
+.stepper:empty {
+	display: none;
+}
+
+.stepper .cell,
+.finish .bead {
+	box-sizing: border-box;
+	width: 9px;
+	height: 9px;
+	border: 1px solid var(--ink);
+	border-radius: 50% !important;
+	cursor: pointer;
+}
+
+.stepper .cell:not([data-state=""]),
+.finish [data-line-of]:not([data-state=""]) .bead {
+	border-color: var(--quiet);
+	background: var(--quiet);
+}
+
+/* A choice the description has since moved under needs another look. */
+.stepper .cell[data-state="stale"],
+.finish [data-line-of][data-state="stale"] .bead {
+	border-color: var(--ink);
+	border-style: dashed;
+	background: none;
+}
+
+.stepper .cell[data-at],
+#decisions:has(> summary:focus) .stepper .cell[data-first] {
+	border-color: var(--ink);
+	outline: 0;
+	box-shadow:
+		0 0 0 2px var(--paper),
+		0 0 0 3px var(--ink);
+}
+
+/* While the reading rests on the decisions' heading, the decision f would
+   begin on says so, at the end of its lead, as a choice says it is yours. */
+#decisions:has(> summary:focus) li[data-first] > strong:first-of-type::after,
+#decisions:has(> summary:focus)
+	li[data-first]
+	> p:first-of-type
+	> strong:first-child::after {
+	content: "  <- f begins here";
+	color: var(--quiet);
+	font-weight: 400;
+	white-space: pre;
+}
+
+.stepper .place {
+	margin-left: 1.2ch;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+/* Deciding: one decision is all the page shows, read from the top down: the
+   line its group is led in with, its lead set large, its words, its pictures,
+   then its choices as a menu. It stays at the top of the page whichever
+   decision it is. Everything else of the pull request waits behind Escape. */
+
+body[data-focus] .status,
+body[data-focus] .review-actions,
+body[data-focus] .pull-request .recordings,
+body[data-focus] .since,
+body[data-focus] .lost,
+body[data-focus] [data-round-results],
+body[data-focus] .views,
+body[data-focus] details.section:not(#decisions),
+body[data-focus] #decisions > summary,
+body[data-focus] .plus,
+body[data-focus] li[data-decision]:not([aria-current]),
+body[data-focus]
+	#decisions
+	[data-quotable]
+	> :not(:has([data-decision][aria-current])),
+body[data-focus="decide"] .finish,
+body[data-focus="done"] #decisions [data-quotable] {
+	display: none;
+}
+
+body[data-focus] #decisions,
+body[data-focus] details.section:last-child {
+	border: 0;
+	padding-inline: 0;
+	background: none;
+}
+
+/* The pull request is named, quietly, in one line. */
+body[data-focus] .pull-request h1 {
+	color: var(--quiet);
+	font-size: 1rem;
+	font-weight: 400;
+	padding: 8px 12px;
+	border-color: var(--rule);
+	background: var(--surface-head);
+}
+
+/* The line a description leads a group of decisions in with stays, as its label. */
+body[data-focus="decide"]
+	#decisions
+	[data-quotable]
+	> :has(+ * [data-decision][aria-current]) {
+	display: block;
+	margin: 0 0 4px;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	letter-spacing: 0.07em;
+	text-transform: uppercase;
+}
+
+body[data-focus] #decisions [data-quotable] > ul,
+body[data-focus] #decisions [data-quotable] > ol {
+	max-width: none;
+	margin: 0;
+	padding: 0;
+}
+
+body[data-focus="decide"]
+	.description
+	[data-quotable]
+	li[data-decision][aria-current] {
+	margin: 0;
+	padding: 16px;
+	border: 1px solid var(--rule);
+	background: var(--surface);
+	color: var(--ink);
+	font-size: 1.1rem;
+	line-height: 1.7;
+	list-style: none;
+	outline: none;
+}
+
+/* The bead of the list as it is read stands aside: the stepper has one. */
+body[data-focus] .description li[data-decision]::before {
+	content: none;
+}
+
+/* One already reviewed says so before anything else, in reverse like the name
+   of a mode, and its words lie back: passing over it on the way, it cannot be
+   taken for one still to decide. One chosen on before its words changed says
+   that instead, in outline, for it is to decide again. */
+body[data-focus="decide"]
+	.description
+	li[data-decision][aria-current]:not([data-said=""])::before {
+	content: "● reviewed · " attr(data-said);
+	position: static;
+	display: block;
+	width: fit-content;
+	height: auto;
+	margin: 0 0 1.1rem;
+	padding: 0.2rem 1.2ch;
+	border: 1px solid var(--ink);
+	border-radius: 0;
+	background: var(--ink);
+	color: var(--paper);
+	font-size: 0.867rem;
+	font-weight: 700;
+	letter-spacing: 0.07em;
+	line-height: 1.6;
+	text-transform: uppercase;
+}
+
+body[data-focus="decide"]
+	.description
+	li[data-decision][aria-current][data-choice="stale"]::before {
+	content: "◌ changed since your choice · " attr(data-said);
+	border-style: dashed;
+	background: none;
+	color: var(--ink);
+}
+
+body[data-focus="decide"]
+	.description
+	li[data-decision][aria-current]:not([data-said=""], [data-choice="stale"]),
+body[data-focus="decide"]
+	.description
+	li[data-decision][aria-current]:not([data-said=""], [data-choice="stale"])
+	:is(strong, a, code) {
+	color: var(--quiet);
+}
+
+body[data-focus="decide"]
+	li[data-decision][aria-current]
+	> strong:first-of-type,
+body[data-focus="decide"]
+	li[data-decision][aria-current]
+	> p:first-of-type
+	> strong:first-child {
+	display: block;
+	margin-bottom: 0.8rem;
+	font-size: 1.3rem;
+	line-height: 1.35;
+	text-wrap: balance;
+}
+
+body[data-focus] li[data-decision] > input[type="checkbox"],
+body[data-focus] li[data-decision] > p > input[type="checkbox"] {
+	display: none;
+}
+
+/* Under the decision at hand: its pictures, then its choices. */
+body[data-focus] li[data-decision] > .beneath {
+	max-width: none;
+	margin: 1.2rem 0 0;
+	font-size: 1rem;
+}
+
+body[data-focus] li[data-decision][aria-current] > .beneath > .actions {
+	display: grid;
+	margin-top: 1rem;
+}
+
+body[data-focus] .decision-screenshots[open] > summary {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+/* A decision's pictures share the column, side by side while they fit. */
+body[data-focus] .decision-pictures {
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+	align-items: start;
+}
+
+body[data-focus] .decision-pictures img {
+	max-height: 46vh;
+	width: auto;
+	max-width: 100%;
+	border: 1px solid var(--rule);
+}
+
+body[data-focus="done"] .finish {
+	margin-top: 2rem;
+	padding: 1rem 1.2rem;
+}
+
+.finish .actions {
+	gap: 0.6rem 1rem;
+	margin-top: 0.9rem;
+}
+
+.finish .actions a {
+	padding: 0.12rem 0.7rem;
+	border: 1px solid var(--rule);
+	color: var(--ink);
+	text-decoration: none;
+}
+
+.finish .actions a:hover {
+	border-color: var(--ink);
+	background: var(--rest);
+}
+
+/* Alone on the page, where the decisions end lists them, a line each under
+   its grade: a bead, its lead, and what was chosen or what holds it. One
+   reviewed lies back in grey, as it does while it is decided. The beads above
+   say the same of the blocking alone, so they stand aside. Under the page the
+   decisions themselves are just above, and only what to do next stays. */
+
+body:not([data-focus="done"]) .finish .grade > :not(.leave),
+body[data-focus="done"] .stepper {
+	display: none;
+}
+
+.finish h3 {
+	margin: 1.6rem 0 0.2rem;
+	font-size: 0.8rem;
+	font-weight: 700;
+	letter-spacing: 0.07em;
+	text-transform: uppercase;
+}
+
+.finish h3 .count {
+	margin-left: 1ch;
+	color: var(--quiet);
+	font-weight: 400;
+}
+
+.finish .meaning {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.finish .lines {
+	margin: 0.6rem -0.8ch 0;
+	padding: 0;
+	list-style: none;
+}
+
+.finish [data-line-of] {
+	display: grid;
+	grid-template-columns: 9px minmax(0, 1fr) auto;
+	gap: 1.6ch;
+	align-items: center;
+	padding: 0.15rem 0.8ch;
+	cursor: pointer;
+}
+
+.finish [data-line-of]:focus {
+	background: var(--rest);
+}
+
+.finish [data-line-of] .lead {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.finish [data-line-of]:not([data-state=""]) .lead,
+.finish [data-line-of] .said {
+	color: var(--quiet);
+}
+
+.finish [data-line-of] .said {
+	font-size: 0.867rem;
+}
+
+/* Unfolded, a line shows its decision's own words under its lead, and the
+   choice in full, in the column the lead stands in. */
+.finish [data-line-of] .more {
+	grid-column: 2 / -1;
+	margin: 0.3rem 0 0.7rem;
+	font-size: 0.933rem;
+	line-height: 1.6;
+	cursor: auto;
+}
+
+.finish [data-line-of]:not([aria-expanded="true"]) .more {
+	display: none;
+}
+
+.finish [data-line-of][aria-expanded="true"] .lead {
+	white-space: normal;
+}
+
+.finish .more .words > :first-child {
+	margin-top: 0;
+}
+
+/* The lead stands whole on the line above, so its words do not repeat it,
+   whether its box's checkbox came with them or not. */
+.finish .more .words input,
+.finish .more .words > strong:first-child,
+.finish .more .words > input:first-child + strong,
+.finish .more .words > p:first-child > strong:first-child {
+	display: none;
+}
+
+.finish .more .words p {
+	margin: 0 0 0.5rem;
+}
+
+.finish .more .choice {
+	margin: 0.4rem 0 0;
+	padding-left: 1.2ch;
+	border-left: 1px solid var(--rule-strong);
+	color: var(--quiet);
+}
+
+.finish .more .choice[hidden] {
+	display: none;
+}
+
+.finish .leave {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 1.6ch;
+	align-items: baseline;
+	margin-top: 0.6rem;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.finish .leave[hidden] {
+	display: none;
+}
+
+/* The page of every decision: a pull request's decisions under its heading, a
+   line each with a bead, and the one at hand opened out with its menu, as on
+   a pull request's own page while it is decided. */
+
+body:not([data-page="pull_requests"]):not([data-page="bursts"]) > .main {
+	--measure: min(64rem, 100%);
+}
+
+body[data-page="decisions"] .burst,
+body[data-page="decisions"] main.decisions,
+body[data-page="decisions"] .draft-tools,
+body[data-page="decisions"] .unmatched,
+body[data-page="decisions"] .recorded,
+body[data-page="decisions"] .empty {
+	max-width: var(--measure);
+}
+
+.burst .tally {
+	max-width: 76ch;
+}
+
+.part {
+	margin-top: var(--group-gap);
+	border: 1px solid var(--rule);
+	background: var(--surface);
+}
+
+.part header {
+	position: relative;
+	padding: 10px 16px;
+	border-top: 0;
+	border-bottom: 0;
+	background: var(--surface-head);
+}
+
+.part h2 {
+	margin: 0;
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.part h2 .number {
+	margin-right: 0.6ch;
+	color: var(--quiet);
+	font-weight: 400;
+	text-decoration: none;
+}
+
+.part .facts,
+.part .refused {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.lead-in {
+	margin: 12px 0 4px;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	font-weight: 400;
+	letter-spacing: 0.07em;
+	text-transform: uppercase;
+}
+
+/* The non-blocking decisions, folded under their heading, which reads like
+   a lead-in with how many wait beside it. One gesture leaves them. */
+
+details.non-blocking > summary {
+	margin: 14px 0 4px;
+	color: var(--ink);
+	font-size: 0.8rem;
+	font-weight: 700;
+	letter-spacing: 0.07em;
+	text-transform: uppercase;
+	cursor: pointer;
+}
+
+details.non-blocking > summary .count {
+	margin-left: 1ch;
+	color: var(--quiet);
+	font-weight: 400;
+	letter-spacing: 0;
+	text-transform: none;
+}
+
+/* Pictures no line links, folded where they stood: one quiet line until
+   the reader opens it. */
+
+details.more-pictures > summary {
+	margin: 10px 0;
+	color: var(--quiet);
+	font-size: 0.867rem;
+	cursor: pointer;
+}
+
+.part .facts [data-leave-non-blocking] {
+	margin-left: 1ch;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--ink);
+	font: inherit;
+	cursor: pointer;
+}
+
+.boxes {
+	margin: 0;
+}
+
+/* In rem, not ch: a line that shows its lead alone has no type size of its own. */
+.box {
+	position: relative;
+	padding: 6px 10.5rem 6px 2.6rem;
+	border: 0;
+	background: none;
+	box-shadow: none;
+	border-top: 1px solid var(--rule-soft);
+	scroll-margin-block: 12rem 4rem;
+}
+
+.box::before {
+	content: "";
+	position: absolute;
+	top: 0.75rem;
+	left: 12px;
+	box-sizing: border-box;
+	width: 9px;
+	height: 9px;
+	border: 1px solid var(--ink);
+	border-radius: 50%;
+}
+
+.box:not([data-said=""])::before {
+	border-color: var(--quiet);
+	background: var(--quiet);
+}
+
+.box[data-choice="stale"]::before {
+	border-color: var(--ink);
+	border-style: dashed;
+	background: none;
+}
+
+/* Selected for one answer with others: a mark beside its bead. */
+.box[data-selected] > .body::before {
+	content: "+";
+	position: absolute;
+	top: 0.3rem;
+	left: 26px;
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.box[aria-current][data-selected] > .body::before {
+	top: 1rem;
+}
+
+/* By theme: one kind of question across the burst under a heading the
+   cursor rests on, each decision with its pull request above it. */
+
+.theme-group {
+	margin-top: var(--group-gap);
+	border: 1px solid var(--rule);
+	background: var(--surface);
+}
+
+.theme-group header {
+	position: relative;
+	padding: 10px 16px;
+	border-top: 0;
+	background: var(--surface-head);
+}
+
+.theme-group h2 {
+	position: relative;
+	margin: 0;
+	font-size: 1rem;
+	font-weight: 700;
+	outline: 0;
+}
+
+.theme-group h2 .count,
+.theme-group .facts,
+.box .of {
+	color: var(--quiet);
+	font-size: 0.867rem;
+	font-weight: 400;
+}
+
+.theme-group h2[aria-current]::before {
+	content: ">";
+	position: absolute;
+	left: -2.4ch;
+}
+
+.box .of {
+	margin: 0 0 2px;
+}
+
+/* What was chosen on it, at the line's end. */
+.box:not([aria-current])::after {
+	content: attr(data-said);
+	position: absolute;
+	top: 5px;
+	right: 12px;
+	color: var(--quiet);
+	font-size: 0.867rem;
+	line-height: 1.85;
+}
+
+.box .body input[type="checkbox"] {
+	display: none;
+}
+
+/* A line of the list is the decision's lead alone. */
+.box:not([aria-current]) .body {
+	display: block;
+	max-width: none;
+	overflow: hidden;
+	color: var(--quiet);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	-webkit-line-clamp: none;
+}
+
+.box:not([aria-current]) .body:has(> strong, > p:first-child > strong) {
+	font-size: 0;
+}
+
+.box:not([aria-current]) .body > strong:first-of-type,
+.box:not([aria-current]) .body > p:first-child > strong:first-child {
+	font-size: 1rem;
+	font-weight: 400;
+}
+
+.box:not([aria-current]) .body > :not(strong, p:first-child),
+.box:not([aria-current]) .body br {
+	display: none;
+}
+
+.box:not([aria-current]) .body > p:first-child {
+	display: inline;
+	margin: 0;
+}
+
+/* One a review file names, or that asks the owner something, waits in full relief. */
+.box[data-waiting="true"]:not([aria-current]) .body > strong:first-of-type,
+.box[data-waiting="true"]:not([aria-current])
+	.body
+	> p:first-child
+	> strong:first-child {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.box:not([aria-current]) .beneath {
+	display: none;
+}
+
+.box[aria-current] {
+	margin: 0;
+	padding: 16px 16px 12px 2.6rem;
+	border-top: 1px solid var(--rule);
+	background: var(--rest);
+	outline: 0;
+}
+
+.box[aria-current]::before {
+	top: 1.45rem;
+}
+
+.box[aria-current] .body {
+	max-width: none;
+	color: var(--ink);
+	font-size: 1rem;
+	line-height: 1.62;
+}
+
+.box[aria-current] .body > strong:first-of-type,
+.box[aria-current] .body > p:first-child > strong:first-child {
+	display: block;
+	margin-bottom: 8px;
+}
+
+.box[aria-current] .beneath {
+	max-width: none;
+	margin-top: 14px;
+	font: inherit;
+	font-size: 1rem;
+}
+
+.box[aria-current] .beneath .status {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.box .beneath > .actions {
+	margin-top: 0;
+}
+
+/* The cursor at the decision at hand, in the gutter, as on a pull request's page. */
+.decisions .box[aria-current] .body::before {
+	content: ">";
+	position: absolute;
+	top: 14px;
+	left: -2.4ch;
+	color: var(--ink);
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.box:focus-visible {
+	outline: 0;
+}
+
+.unmatched {
+	padding: 10px 14px;
+	font-size: 0.867rem;
+}
+
+.unmatched h2,
+.connections h2,
+.lost h2,
+.since h2 {
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.recorded {
+	margin-top: 30px;
+	padding: 11px 0 0;
+	border-top: 1px solid var(--rule);
+	font-size: 0.867rem;
+}
+
+.recorded summary {
+	color: var(--ink);
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.recorded .count {
+	margin-left: 1.4ch;
+	font-weight: 400;
+}
+
+/* The bar of the choices, on the page of every decision and on the prompt: how
+   far they are in a line over a thin bar, what to do with them by key, and the
+   ways to look at them as words, the one in force in full relief. */
+
+.draft-tools {
+	box-sizing: border-box;
+	padding: 12px 16px 16px;
+	border-block: 0;
+	border-bottom: 1px solid var(--rule-strong);
+	background: var(--panel);
+	font-size: 0.867rem;
+}
+
+.draft-tools .bar {
+	gap: 12px 3.2ch;
+}
+
+.draft-tools .bar .actions {
+	gap: var(--control-gap) 2.4ch;
+}
+
+.progress-line {
+	gap: 0.3rem 1.6ch;
+	font-size: 0.867rem;
+}
+
+.progress-line strong {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.progress-line meter,
+.progress-line meter::-webkit-meter-bar {
+	width: 10rem;
+	height: 3px;
+	border: 0;
+	background: var(--rule);
+}
+
+.progress-line meter::-webkit-meter-optimum-value {
+	background: var(--ink);
+}
+
+.progress-line meter::-moz-meter-bar {
+	background: var(--ink);
+}
+
+.progress-line .left {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.round-line {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.draft-tools button.quiet,
+.draft-tools button.primary,
+.filters button.quiet,
+.filters a,
+.views button.quiet {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--quiet);
+	font: inherit;
+	font-size: 0.867rem;
+	font-weight: 400;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.draft-tools button.primary {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.draft-tools button:hover,
+.filters :is(a, button):hover {
+	color: var(--ink);
+}
+
+.draft-tools button kbd {
+	margin-right: 0.6ch;
+	font-weight: 400;
+}
+
+/* The session that reads the handover just kept, in the bar's plain manner. */
+.draft-tools .session-link {
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 0.867rem;
+}
+
+.draft-tools .session-link:hover {
+	text-decoration: underline;
+}
+
+.draft-tools button.primary kbd {
+	border-color: var(--rule-strong);
+	color: var(--ink);
+}
+
+.filters {
+	gap: var(--control-gap) 2.4ch;
+	align-items: baseline;
+	margin-top: 12px;
+	padding-top: 10px;
+	border-top: 1px solid var(--rule);
+}
+
+.filters [data-filter="open"],
+.filters [data-filter="all"] {
+	margin-left: 0;
+}
+
+.filters button.quiet[aria-pressed="true"],
+.filters a[aria-current] {
+	border: 0;
+	text-decoration: underline;
+	text-underline-offset: 0.4em;
+	background: var(--plate);
+	color: var(--panel);
+	font-weight: 700;
+}
+
+.filters .count {
+	margin-left: 0.4ch;
+	color: var(--quiet);
+	font-weight: 400;
+	opacity: 1;
+}
+
+.filters [aria-pressed="true"] .count,
+.filters [aria-current] .count {
+	color: inherit;
+}
+
+.filters .by-state {
+	font-size: 0.867rem;
+}
+
+.filters .by-state > summary {
+	color: var(--quiet);
+}
+
+.filters .by-state p {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px 2.4ch;
+	margin-top: 6px;
+}
+
+.draft-tools .data {
+	padding: 14px 16px;
+	font-size: 0.867rem;
+}
+
+.draft-tools .data .actions {
+	gap: 6px 2.4ch;
+}
+
+.draft-tools .data button.quiet,
+.import-choices {
+	color: var(--ink);
+	text-decoration: underline;
+}
+
+/* Scenarios: the server in one line with a bead for its state, then each
+   scenario a row: what to do, how to open it, what was seen. */
+
+body[data-page="scenarios"] .burst,
+body[data-page="scenarios"] main.scenarios {
+	max-width: var(--measure);
+}
+
+.server {
+	gap: 4px 2.4ch;
+	margin: 16px 0 0;
+	padding: 12px 16px;
+	border: 1px solid var(--rule);
+	background: var(--panel);
+	font-size: 0.867rem;
+}
+
+.server .status {
+	gap: 1.2ch;
+	padding: 0;
+	border: 0;
+	font-weight: 700;
+}
+
+/* Up is a solid bead; starting, a hollow one that breathes; down, a hollow grey one. */
+.light {
+	box-sizing: border-box;
+	width: 9px;
+	height: 9px;
+	border-radius: 50% !important;
+	border: 1px solid var(--quiet);
+	background: none;
+}
+
+.server[data-state="up"] .light {
+	border-color: var(--ink);
+	background: var(--ink);
+}
+
+.server[data-state="starting"] .light {
+	border-color: var(--ink);
+	background: none;
+}
+
+.server .where {
+	flex-basis: 100%;
+	min-width: 0;
+	margin-left: calc(9px + 1.2ch);
+	overflow-wrap: anywhere;
+}
+
+.server .action {
+	margin: 0 0 0 calc(9px + 1.2ch);
+}
+
+.scenarios h2 {
+	margin: var(--group-gap) 0 0;
+	padding: 8px 12px;
+	border: 1px solid var(--rule);
+	background: var(--surface-head);
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.scenarios .lede {
+	padding: 8px 12px;
+	background: var(--surface);
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.scenarios h3 {
+	margin: var(--group-gap) 0 8px;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	font-weight: 400;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+.scenarios h3 .number {
+	color: var(--quiet);
+}
+
+.scenario {
+	grid-template-columns: minmax(0, 1fr) minmax(8rem, 11rem) minmax(10rem, 15rem);
+	gap: 12px 2.4ch;
+	padding: 16px 0;
+	border-top: 1px solid var(--rule);
+	background: var(--surface);
+}
+
+.scenario:nth-child(even) {
+	background: var(--panel);
+}
+
+.scenario > .text {
+	padding-left: 12px;
+}
+
+.scenario > .act,
+.scenario > .seen {
+	padding: 8px 12px;
+	border-left: 1px solid var(--rule);
+	background: var(--surface-head);
+}
+
+.scenario:target {
+	background: none;
+	box-shadow: none;
+}
+
+.scenario h4 {
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.scenario .n {
+	min-width: 3ch;
+	color: var(--quiet);
+	font-weight: 400;
+}
+
+.scenario .expect,
+.steps {
+	font-size: 0.867rem;
+}
+
+.act small,
+.seen .line {
+	font-size: 0.8rem;
+}
+
+/* Opening is the act of a row; what was seen is said in words, the one given in full relief. */
+.open,
+.action {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--ink);
+	font-weight: 700;
+	text-decoration: underline;
+	text-underline-offset: 0.22em;
+}
+
+.open:disabled {
+	border: 0;
+	color: var(--quiet);
+	font-weight: 400;
+	text-decoration: none;
+}
+
+.results {
+	gap: var(--control-gap) 1.6ch;
+}
+
+.result,
+.result:hover {
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 0.8rem;
+}
+
+.result {
+	color: var(--quiet);
+}
+
+.result:hover,
+.result[aria-pressed="true"] {
+	color: var(--ink);
+}
+
+.result[aria-pressed="true"] {
+	font-weight: 700;
+	text-decoration: underline;
+	text-underline-offset: 0.4em;
+}
+
+.seen .line[data-result="ok"] {
+	color: var(--quiet);
+}
+
+.seen .line[data-result="not_ok"] {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+/* Recordings: a line to each, and the player. */
+
+body[data-page="recordings"] .films-head,
+body[data-page="recordings"] .folder,
+body[data-page="recordings"] .empty {
+	max-width: var(--measure);
+}
+
+.films-head h1,
+.film-head h1 {
+	margin: 0;
+	font-size: 1.4rem;
+}
+
+.films-head .tally {
+	margin: 10px 0 0;
+}
+
+.folder h2 {
+	margin: var(--group-gap) 0 0;
+	padding: 8px 12px;
+	border: 1px solid var(--rule);
+	background: var(--surface-head);
+	color: var(--ink);
+	font-size: 0.8rem;
+	font-weight: 400;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+.folder h2 a {
+	color: inherit;
+}
+
+.films {
+	border: 0;
+}
+
+.films li {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	gap: 2.4ch;
+	align-items: baseline;
+	padding: 8px 12px;
+	border: 0;
+	border-bottom: 1px solid var(--rule-soft);
+	background: var(--surface);
+}
+
+.films li:nth-child(even) {
+	background: var(--panel);
+}
+
+.films .title {
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.films .facts {
+	font-size: 0.867rem;
+}
+
+.film-head .crumbs,
+.film-head .facts {
+	font-size: 0.867rem;
+}
+
+.titling [data-fill] {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.screen {
+	border-color: var(--rule);
+	background: var(--rest);
+}
+
+.controls {
+	gap: var(--control-gap) 2.4ch;
+	padding: 12px;
+	border-bottom: 1px solid var(--rule-strong);
+	background: var(--panel);
+	font-size: 0.867rem;
+}
+
+.controls button,
+.controls .note-here {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.controls button:hover {
+	color: var(--ink);
+}
+
+.controls button.primary {
+	min-width: 0;
+	padding: 1px 1ch;
+	background: var(--ink);
+	color: var(--paper);
+	font-weight: 700;
+}
+
+.controls .note-here {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.controls kbd {
+	margin-left: 0.6ch;
+	border-color: var(--rule);
+	color: var(--quiet);
+	font-weight: 400;
+}
+
+.timeline,
+.segments {
+	border-color: var(--rule);
+	background: none;
+}
+
+.segments li,
+.segments li:nth-child(even) {
+	border-left: 1px solid var(--rule-strong);
+	background: none;
+	color: var(--quiet);
+}
+
+.segments li.here {
+	background: var(--rest);
+	color: var(--ink);
+}
+
+.playhead {
+	background: var(--ink);
+}
+
+.pin {
+	border-color: var(--paper);
+	background: var(--kind, var(--ink));
+}
+
+/* The steps and notes beside the player are not the pane, though they share its name. */
+.film .side {
+	position: static;
+	height: auto;
+	padding: 0;
+	overflow: visible;
+	background: none;
+}
+
+.film .side h2,
+.film .side p {
+	padding: 0;
+}
+
+.film .side .name {
+	margin: 0;
+	color: inherit;
+}
+
+.steps {
+	border-left: 0;
+}
+
+.steps button {
+	padding: 4px 0 4px 2.4ch;
+	font-size: 0.867rem;
+}
+
+.steps li {
+	position: relative;
+}
+
+.steps li[aria-current] {
+	background: none;
+	box-shadow: none;
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.steps li[aria-current]::before {
+	content: ">";
+	position: absolute;
+	top: 4px;
+	left: 0;
+	font-size: 0.867rem;
+}
+
+/* The player's keys: a bar at the foot, as on every page with keys. */
+body[data-page="recordings"] footer.keys {
+	position: fixed;
+	inset: auto 0 0 var(--side);
+	z-index: 8;
+	display: flex;
+	gap: 20px;
+	margin: 0;
+	padding: 6px 16px 6px 56px;
+	background: var(--panel);
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+body[data-page="recordings"] footer.keys::before {
+	content: "";
+	position: absolute;
+	top: -2px;
+	right: 0;
+	left: 0;
+	height: 5px;
+	background: var(--bead);
+	mask: var(--beads-across) repeat-x;
+}
+
+/* The prompt: the bar of the choices, what the agent returned, and the handover as it would go. */
+
+body[data-page="prompts"] .burst,
+body[data-page="prompts"] .draft-tools,
+body[data-page="prompts"] .round-results,
+body[data-page="prompts"] .handover,
+body[data-page="prompts"] .taken-in,
+body[data-page="prompts"] .unreadable,
+body[data-page="prompts"] .main > details {
+	max-width: var(--measure);
+}
+
+.round-results h2 {
+	margin: 0 0 6px;
+	padding: 8px 80px 8px 12px;
+	border: 1px solid var(--rule);
+	background: var(--surface-head);
+	font-size: 1rem;
+	font-weight: 700;
+}
+
+.round-results > p {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.round-results > button,
+.round-result button {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--ink);
+	font-size: 0.867rem;
+	text-decoration: underline;
+	text-underline-offset: 0.22em;
+	cursor: pointer;
+}
+
+.round-result {
+	position: relative;
+	border-top: 1px solid var(--rule);
+	padding-inline: 16px;
+	background: var(--surface);
+}
+
+/* The response the reading is in, marked down its whole side; on a pull
+   request's page the cursor marks the block in it. */
+.round-result[aria-current] {
+	background: none;
+	outline: 0;
+	box-shadow: inset 3px 0 0 var(--ink);
+}
+
+body[data-page="prompts"] .round-result[aria-current]::before {
+	content: ">";
+	position: absolute;
+	top: 1rem;
+	left: -2.4ch;
+	font-weight: 700;
+}
+
+.handover {
+	box-sizing: border-box;
+	padding: 16px 20px;
+	border-color: var(--rule-strong);
+	color: var(--ink);
+	font-size: 0.867rem;
+	line-height: 1.65;
+	background: var(--panel);
+}
+
+body[data-page="prompts"] .main > details > summary {
+	margin-top: 20px;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.action,
+form.button_to button.action {
+	margin: 0;
+	padding: 1px 1ch;
+	border: 1px solid var(--ink);
+	background: var(--ink);
+	color: var(--paper);
+	font-weight: 700;
+	text-decoration: none;
+}
+
+/* The route: a line to each pull request. The one the cursor is on opens out,
+   its title in full and what else there is to know of it, its keys beside it. */
+
+body[data-page="bursts"] > .main {
+	--measure: min(64rem, calc(100% - 15rem));
+}
+
+.burst,
+.route {
+	max-width: var(--measure);
+}
+
+.burst h1 {
+	margin: 0;
+	font-size: 1.4rem;
+}
+
+.burst .tally {
+	max-width: none;
+	margin: 12px 0 16px;
+	color: var(--quiet);
+}
+
+.burst .tally .yours {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.burst .taken-in,
+.burst .gone {
+	margin: 0 0 10px;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--quiet);
+}
+
+.route h2 {
+	margin: var(--group-gap) 0 0;
+	padding: 8px 12px;
+	border: 1px solid var(--rule);
+	background: var(--surface-head);
+	color: var(--ink);
+	font-size: 0.8rem;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+.lines {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	border: 1px solid var(--rule);
+	border-top: 0;
+	background: var(--surface);
+}
+
+.lines li {
+	position: relative;
+	padding: var(--row-pad) 12px;
+	border: 0;
+	border-bottom: 1px solid var(--rule-soft);
+	background: var(--surface);
+	cursor: pointer;
+}
+
+.lines li:nth-child(even) {
+	background: var(--panel);
+}
+
+.lines p {
+	margin: 0;
+}
+
+.lines .what {
+	display: grid;
+	grid-template-columns: 6ch minmax(0, 1fr) auto;
+	gap: 1ch;
+	align-items: baseline;
+}
+
+.lines .stands {
+	min-width: 8ch;
+	text-align: right;
+}
+
+.lines .number {
+	margin: 0;
+	color: var(--quiet);
+	text-decoration: none;
+}
+
+.lines .title {
+	overflow: hidden;
+	color: inherit;
+	text-decoration: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.lines .stands,
+.lines .facts {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.lines .facts,
+.lines .beside {
+	display: none;
+}
+
+.lines li:hover .title {
+	text-decoration: underline;
+	text-decoration-color: var(--rule-strong);
+}
+
+.lines [aria-current] {
+	border: 0;
+	border-bottom: 1px solid var(--rule-strong);
+	background: var(--rest);
+}
+
+.lines [aria-current]::before {
+	content: ">";
+	position: absolute;
+	left: -2.4ch;
+	font-weight: 700;
+}
+
+.lines [aria-current] .title {
+	font-weight: 700;
+	white-space: normal;
+}
+
+.lines [aria-current] .facts {
+	display: block;
+	padding: 4px 0 8px 7ch;
+	line-height: 1.65;
+}
+
+.lines [aria-current] .beside {
+	position: absolute;
+	top: 5px;
+	left: calc(100% + 28px);
+	display: grid;
+	gap: var(--control-gap);
+	justify-items: start;
+	color: var(--quiet);
+	font-size: 0.867rem;
+	white-space: nowrap;
+	cursor: default;
+}
+
+.lines .beside :is(a, button) {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: inherit;
+	font: inherit;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.lines .beside :is(a, button):hover {
+	color: var(--ink);
+}
+
+.lines .beside kbd {
+	margin-right: 0.6ch;
+	border-color: var(--rule);
+	color: var(--quiet);
+}
+
+.lines .beside form {
+	margin: 0;
+}
+
+.lines .moved {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+/* The notices at the head of the route. What joined or left is a line like
+   the route's; what left with choices lists them; a disagreement is a line
+   of words with its fix said quietly after it. */
+
+.notices {
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--rule);
+}
+
+.notices .lines .what {
+	font-weight: 700;
+}
+
+.notices .departed .what {
+	margin: 4px 0 0;
+	font-weight: 700;
+}
+
+.notices .departed .number {
+	margin-right: 1ch;
+	color: var(--quiet);
+}
+
+.notices .departed ul,
+.notices .disagreements {
+	margin: 2px 0 6px;
+	padding: 0 0 0 7ch;
+	list-style: none;
+}
+
+.notices .disagreements {
+	padding: 0;
+}
+
+.notices .disagreements li {
+	padding: 3px 0;
+	font-weight: 700;
+}
+
+.notices :is(.fix, .text) {
+	color: var(--quiet);
+	font-weight: 400;
+}
+
+/* The rules made in the burst, at the foot of the route: a line each like
+   the route's, and under the one being edited, its one line to write in. */
+
+.rules {
+	margin-top: 16px;
+	padding-top: 8px;
+	border-top: 1px solid var(--rule);
+}
+
+.rules .edit {
+	display: flex;
+	gap: 1ch;
+	align-items: baseline;
+	padding: 2px 0 6px 7ch;
+}
+
+.rules .edit[hidden] {
+	display: none;
+}
+
+.rules .edit input {
+	flex: 1;
+	padding: 2px 1ch;
+	border: 1px solid var(--rule-strong);
+	background: none;
+	color: var(--ink);
+	font: inherit;
+}
+
+.rules .edit .said {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.rules [data-state="withdrawn"] .title {
+	color: var(--quiet);
+	text-decoration: line-through;
+}
+
+/* Wedge strokes replace a straight dividing rule, cut into a shallow seam.
+   Repetition reads as material rather than a row of unexplained symbols. */
+.route h2,
+.scenarios h2,
+.folder h2,
+.round-results h2 {
+	position: relative;
+}
+
+.route h2::after,
+.scenarios h2::after,
+.folder h2::after,
+.round-results h2::after,
+.part header::after,
+.theme-group header::after {
+	content: "";
+	position: absolute;
+	right: 0;
+	bottom: -1px;
+	left: 0;
+	height: 4px;
+	background: var(--rule-strong);
+	mask: var(--cuneiform) left center / 42px 10px repeat-x;
+	pointer-events: none;
+}
+
+@supports (mask-composite: intersect) {
+	.route h2::after,
+	.scenarios h2::after,
+	.folder h2::after,
+	.round-results h2::after,
+	.part header::after,
+	.theme-group header::after {
+		mask-image: var(--cuneiform), linear-gradient(to right, #000, transparent 85%);
+		mask-size: 42px 10px, 100% 100%;
+		mask-position: left center;
+		mask-repeat: repeat-x, no-repeat;
+		mask-composite: intersect;
+		pointer-events: none;
+	}
+}
+
+/* Grain distinguishes group bands and working trays; long reading stays on
+   solid paper. The glyphs repeat as a field, never as a row of controls. */
+.route h2,
+.scenarios h2,
+.folder h2,
+.round-results h2,
+.part header,
+.theme-group header,
+.side > h2,
+.try > h2 {
+	background-image: var(--grain-wedges);
+}
+
+.draft-tools,
+details.section[open] > summary {
+	background-image: var(--grain-weave);
+}
+
+.scenario > .act {
+	background-image: var(--grain-dots);
+}
+
+/* A window too narrow for the column, its keys and the outline at once gives
+   up the outline first: the reading keeps its width, and [ and ] still go
+   from section to section. */
+
+@media (max-width: 88rem) {
+	body[data-page="pull_requests"] > .main {
+		--measure: min(
+			41rem,
+			calc(100vw - var(--side) - var(--gutter) - 14rem - 28px)
+		);
+	}
+
+	.outline {
+		display: none;
+	}
+
+	/* Try it then waits at the foot of the page, after its last section. */
+	.rail {
+		position: static;
+		width: auto;
+		max-width: var(--measure);
+		margin-top: 30px;
+	}
+
+	.try {
+		overflow: visible;
+	}
+}
+
+/* Narrower still, the route folds over the page, and a block's keys are named
+   in the docked list alone. */
+
+@media (max-width: 68rem) {
+	body.shell {
+		display: block;
+	}
+
+	body.shell::before {
+		display: none;
+	}
+
+	body.shell .foot {
+		left: 0;
+	}
+
+	.side {
+		position: static;
+		height: auto;
+		max-height: 16rem;
+		padding-bottom: 0.8rem;
+		border-bottom: 1px solid var(--rule);
+	}
+
+	.side .head {
+		grid-template-columns: 72px minmax(0, 1fr);
+		padding-top: 6px;
+	}
+
+	.side .plaque {
+		width: 72px;
+		height: 72px;
+	}
+
+	.side .desk {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 0;
+		font-size: 0.8rem;
+	}
+
+	.side .desk a {
+		padding-block: 1px;
+	}
+
+	.side .name {
+		margin-top: 8px;
+		padding-block: 6px;
+	}
+
+	.side .overall {
+		gap: 4px;
+		margin-top: 4px;
+	}
+
+	body.shell > .main {
+		--gutter: 3.4ch;
+		padding-top: 1.2rem;
+		padding-right: 1rem;
+	}
+
+	body[data-page="pull_requests"] > .main,
+	body[data-page="bursts"] > .main {
+		--measure: 100%;
+	}
+
+	.modebar,
+	.keys-help {
+		padding-left: 1rem;
+	}
+
+	.cursor .beside {
+		display: none;
+	}
+
+	.lines [aria-current] .beside {
+		position: static;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px 16px;
+		padding-block: 8px;
+		border-top: 1px solid var(--rule-strong);
+	}
+
+	.pull-request .whole {
+		position: static;
+		width: auto;
+		margin-top: 8px;
+	}
+
+	body[data-page="recordings"] footer.keys {
+		left: 0;
+		flex-wrap: wrap;
+		padding-left: 1rem;
+	}
+
+	.scenario {
+		grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem);
+	}
+
+	.scenario > .text {
+		grid-column: 1 / -1;
+	}
+}
+
+@media (max-width: 40rem) {
+	body:not(.shell) {
+		padding: 24px 16px 80px;
+	}
+
+	.modebar {
+		flex-wrap: wrap;
+		gap: 8px;
+		padding-block: 8px;
+	}
+
+	.modebar .mode {
+		flex-basis: 100%;
+		gap: 4px 12px;
+	}
+
+	.keys-help {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.lines .what {
+		grid-template-columns: 6ch minmax(0, 1fr);
+	}
+
+	.lines .stands {
+		grid-column: 2;
+		text-align: left;
+	}
+
+	.lines .title {
+		white-space: normal;
+	}
+
+	.box,
+	.box[aria-current] {
+		padding-left: 40px;
+		padding-right: 12px;
+	}
+
+	.box:not([aria-current])::after {
+		position: static;
+		display: block;
+	}
+
+	.scenario,
+	.films li,
+	.film {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.scenario > *,
+	.film > * {
+		min-width: 0;
+	}
+
+	.scenario > .text {
+		grid-column: auto;
+	}
+
+	.scenario > .act,
+	.scenario > .seen {
+		border-left: 0;
+	}
+
+	.films li {
+		gap: 4px;
+	}
+
+	.import-choices {
+		flex-wrap: wrap;
+	}
+
+	.handover {
+		padding: 12px;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.side a,
+	.outline :is(button, a),
+	details.section > summary,
+	button.choice {
+		transition: color 120ms ease-out, background-color 120ms ease-out;
+	}
+
+	body[data-focus="decide"] li[data-decision][aria-current] {
+		animation: arrive 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	@keyframes arrive {
+		from {
+			opacity: 0.4;
+			transform: translateY(0.35rem);
+		}
+	}
+}
+
+/* Grouse's overlay, for a note on the desk itself, made of the same: square,
+   one face, and no colour. What it asks of the owner, and what went wrong,
+   stand in full relief, as on the desk. Its pill sits at the foot's right,
+   clear of the pane and the bar's own buttons at the left. */
+grouse-widget {
+	--grouse-accent: var(--ink);
+	--grouse-surface: var(--surface);
+	--grouse-ink: var(--ink);
+	--grouse-muted: var(--quiet);
+	--grouse-danger: var(--ink);
+	--grouse-radius: 0;
+	--grouse-font: var(--mono);
+}