/* viawriter.net. The app's own palette (paper/color.odin): the ash spine,
   and EDIT's orange, the app's one colour, as the site's one accent: the
   italic sub-heads, the mark, the way to the download, a clip's progress,
   0.4 in the table. One face, IBM Plex Mono: regular,
   bold for headers, italic for sub-heads and bylines. No radius, no shadow;
   depth is a step of ground. */

/* IBM Plex Mono, served from here: Google's latin subset of the four faces the
   pages set (regular, italic, bold, bold italic), so the text waits on no
   second origin. OFL: fonts/LICENSE-IBMPlex.txt. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/plex-mono-400i.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plex-mono-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/plex-mono-700i.woff2) format("woff2"); }
:root {
	--bg: #000;
	--ash-900: #070707;
	--ash-850: #0d0d0d;
	--ash-800: #161616;
	--ash-700: #262626;
	--ash-600: #3a3a3a;
	--ash-400: #717171;
	--ash-300: #8c8c8c;
	--ash-200: #a4a4a4;
	--ash-100: #c4c4c4;
	--ash-50: #e1e1e1;
	--edit: #ff2e00; /* paper/color.odin EDIT; 5.6:1 on black */
	--mono: "IBM Plex Mono", ui-monospace, monospace;
	--gutter: 16px;
	--measure: 1200px;
	color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ash-200);
	font: 400 15px/1.65 var(--mono);
}
a { color: inherit; }
/* A link in the words -- not the menu, the wordmark or the download -- is
   ivory and underlined, its arrow with it: the orange is for the download. */
.copy a:not([class]), .copy a.arrow, .head .by a { color: var(--ash-50); text-decoration: underline; text-underline-offset: 3px; }
.copy a:not([class]):hover, .copy a.arrow:hover, .head .by a:hover { color: var(--ash-300); }
img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

/* labels: small caps-set */
.head, .foot { letter-spacing: 0.08em; }

.head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	font-size: 12px;
	text-transform: uppercase;
}
.head a { text-decoration: none; color: var(--ash-300); }
.head a:hover, .head a[aria-current] { color: var(--ash-50); }
/* the way to the download, in the corner: the table's link, centred on the
   wordmark, with what it is built with hung underneath so it does not move it */
.head { height: 76px; }
.cta-head { position: relative; }
.cta-head .dl-link { position: relative; margin: 0; }
.cta-head .dl-link svg { position: absolute; left: 100%; margin-left: 8px; } /* hung past the edge, so the words line up with the line below */
.cta-head .dl-link[aria-current] { pointer-events: none; }
.cta-head .by { position: absolute; top: 100%; right: 0; margin-top: 5px; white-space: nowrap; font-size: 11px; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--ash-400); }
@media (max-width: 520px) { .cta-head .by { display: none; } .cta-head .dl-link svg { position: static; margin: 0; } }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
/* About and Changelog, beside the wordmark: the Download link keeps the corner */
.nav { display: flex; gap: 24px; margin: 0 auto 0 40px; }
@media (max-width: 520px) { .nav { gap: 14px; margin-left: 20px; } .cta-head .dl-link .v { display: none; } }
.brand svg { width: 22px; height: 22px; color: var(--edit); }

/* the landing page: one column, a reading measure, the hierarchy in weight
   and size (h1 > h2 > h3, bold) with an italic sub-head under each */
.copy p, .copy ul, .copy .keys { max-width: 68ch; }
.copy p { margin: 0 0 16px; text-wrap: pretty; } /* no one-word last lines */
.copy ul { margin: 0 0 16px; padding-left: 20px; }
.copy li { margin: 0 0 8px; }
.copy li::marker { color: var(--ash-600); }
.copy section { padding: 56px 0 40px; border-top: 1px solid var(--ash-800); }
.copy section.hero { padding: 72px 0 56px; border-top: 0; }

/* a row: the text, and the flow beside it (right of it, when there is room) */
.row + .row { margin-top: 72px; }
@media (min-width: 900px) {
	.row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: start; }
	.row > .media { max-width: none; margin: 0; }
	.row > .text { padding-top: 8px; }
}

.copy h1 { margin: 0; font: 700 64px/1 var(--mono); color: var(--ash-50); }
.copy h2 { margin: 0 0 20px; font: 700 28px/1.25 var(--mono); color: var(--ash-50); }
.copy h3 { margin: 0 0 20px; font: 700 18px/1.35 var(--mono); color: var(--ash-50); }
.copy h2:has(+ .sub), .copy h3:has(+ .sub) { margin-bottom: 0; }
.copy .sub { margin: 6px 0 20px; font-style: italic; color: var(--edit); }
.copy h1 + .sub { margin: 16px 0 28px; font-size: 20px; }
.copy .lede { font-size: 17px; line-height: 1.7; color: var(--ash-100); }

/* keys: what to press, then what it does */
.keys {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px 24px;
	margin: 20px 0;
	padding: 16px 18px;
	background: var(--ash-850);
}
.keys dt { font-weight: 700; color: var(--ash-50); white-space: nowrap; }
.keys dd { margin: 0; }

.tip { font-size: 13px; font-style: italic; color: var(--ash-400); }
/* the author, in their own voice */
.copy .voice { font-style: italic; }
.copy .sig { font-style: italic; color: var(--ash-400); }
/* each first paragraph opens on its key sentence */
.copy p > b:first-child { color: var(--ash-50); }
/* a clip with a tip under it: the clip keeps its own spacing, the tip sits close */
div.media { margin: 32px 0 8px; }
div.media .clip { margin: 0; }
div.media .tip { margin: 12px 0 0; }

/* a clip: a 1400x900 window, silent, looping, played only while in view (site.js) */
.clip { display: block; width: 100%; max-width: 760px; aspect-ratio: 14 / 9; margin: 32px 0 8px; border: 1px solid var(--ash-700); padding-bottom: 2px;
  background: linear-gradient(var(--edit), var(--edit)) left bottom / var(--p, 0%) 2px no-repeat, var(--ash-900); }
/* the 2px under the picture is the clip's own padding: how far through the loop it is (site.js sets --p) */

.foot {
	padding-top: 24px;
	padding-bottom: 40px;
	border-top: 1px solid var(--ash-800);
	font-size: 11px;
	color: var(--ash-400);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
}

/* the download page: the commands, and the FAQ that holds everything else */
.sum { font-size: 11px; line-height: 1.5; color: var(--ash-400); overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.cmd {
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-left: 2px solid transparent;
	background: var(--ash-850);
	color: var(--ash-100);
	font: 400 13px/1.5 var(--mono);
	text-align: left;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	cursor: copy;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: start;
}
/* the copy tag: outside the text, so what is copied is the command alone */
.cmd::after { content: "copy"; font-style: italic; font-size: 12px; color: var(--ash-400); }
.cmd[data-state="copied"]::after { content: "copied"; color: var(--edit); }
.cmd:hover { background: var(--ash-800); }
/* Copied: the edge and the tag in the edit's orange, and a wash of it over the line that fades while the tag stands (owner, 10-20). */
@keyframes copied { from { background-color: rgba(255, 46, 0, 0.28); } to { background-color: transparent; } }
.cmd[data-state="copied"] { border-left-color: var(--edit); animation: copied 1.4s ease-out; }
.cmd { margin: 0 0 12px; max-width: 68ch; }

.copy details { max-width: 68ch; border-top: 1px solid var(--ash-800); }
.copy details:last-of-type { border-bottom: 1px solid var(--ash-800); }
.copy summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	font-weight: 700;
	color: var(--ash-100);
	list-style: none;
	cursor: pointer;
}
.copy summary::-webkit-details-marker { display: none; }
.copy summary::after { content: "+"; color: var(--ash-400); font-weight: 400; }
.copy details[open] summary::after { content: "−"; }
.copy summary:hover { color: var(--ash-50); }
.copy details > :last-child { margin-bottom: 18px; }

@media (max-width: 520px) {
	.copy section.hero { padding: 56px 0 40px; }
	.copy h1 { font-size: 48px; }
	.copy h1 + .sub { font-size: 17px; }
	.copy h2 { font-size: 24px; }
	.keys { grid-template-columns: 1fr; gap: 2px 0; }
	.keys dd { margin-bottom: 8px; }
}
.dl section { padding: 88px 0 72px; }
.dl section.hero { padding: 72px 0 64px; }
.dl h2 { margin-bottom: 32px; }
.dl h2 + h3 { margin-top: 0; }
.dl h3 { margin: 48px 0 12px; }
/* via 0.2 against 0.3: rows split by hairlines, named down the left, the
   width of the page; 0.3 reads brighter */
.built { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; line-height: 1.55; color: var(--ash-400); }
.built col.k { width: 92px; }
.built th, .built td { padding: 10px 20px 10px 0; text-align: left; vertical-align: top; }
.built thead th { padding-top: 8px; font: 700 14px/1.35 var(--mono); color: var(--ash-300); }
.built thead th:last-child { color: var(--edit); }
.built tbody th { font-weight: 400; font-style: italic; color: var(--ash-400); }
.built tbody td + td { color: var(--ash-200); }
.built tbody tr > * { border-top: 1px solid var(--ash-800); }
.built td::before { content: none; }
/* a bar under each measured cell, its length the cell's share of the row's
   largest (site.js sets .bar and --w); 0.4's in the accent. A cell with no number, none. */
.built td.bar { position: relative; padding-bottom: 18px; }
.built td.bar::after { content: ""; position: absolute; left: 0; bottom: 8px; width: calc((100% - 20px) * var(--w)); min-width: 2px; height: 4px; background: var(--ash-600); }
.built td.bar:last-child::after { background: var(--edit); }
/* a phone: the rows stand, each cell led by the version it is of (data-v) */
@media (max-width: 520px) {
	.built, .built tbody, .built tr, .built th { display: block; }
	.built colgroup, .built thead { display: none; }
	.built tbody tr { padding: 10px 0; border-top: 1px solid var(--ash-800); }
	.built tbody tr > * { border-top: 0; padding: 0; }
	.built tbody th { padding-bottom: 4px; }
	.built td { display: grid; grid-template-columns: 5em minmax(0, 1fr); padding: 1px 0; }
	.built td::before { content: attr(data-v); color: var(--ash-300); font-weight: 700; }
	.built td.bar { padding-bottom: 10px; }
	.built td.bar::after { left: 5em; bottom: 4px; width: calc((100% - 5em) * var(--w)); }
	.built .dl-link { grid-column: 2; }
}
/* the download, as the 0.3 column's last entry: the header's caps, as a link */
.dl-link { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 12px; color: var(--ash-50); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.dl-link u { text-underline-offset: 3px; }
.dl-link .v, .dl-link [data-version] { font-weight: 400; color: var(--ash-300); }
.dl-link svg, a.arrow svg { width: 11px; height: 7px; fill: none; stroke: var(--edit); stroke-width: 1.5; stroke-linecap: square; }
.dl-link:hover svg, a.arrow:hover svg { transform: translateX(2px); }
/* a link in the copy that goes somewhere: the same arrow, after its words */
a.arrow svg { margin-left: 0.4em; vertical-align: middle; stroke: currentColor; }
@media (max-width: 520px) {
	.built th, .built td { padding: 10px 8px; }
	.built col.k { width: 52px; }
	.built thead th { font-size: 13px; }
}
.dl h2 .n { margin-right: 0.4em; color: var(--ash-400); }
/* the download page's steps: one table, a row a step, the whole row the button.
   Depth on hover is a background step; what a click did shows at the right */
.dl .row { display: block; margin-top: 32px; } /* the steps alone: the clip is under them */
/* the install, then an update: under the steps, at the site's clip width (760, as the
   home page's). At the page's width it was a dark 1087x700 box that read as a gap, and
   it opens on an empty terminal when it plays (owner, 10-19). */
.dl .hero > .clip { margin-top: 48px; }
/* va's steps stand alone, at the width via's take beside their clip. */
.dl .va .steps { margin-top: 24px; }
@media (min-width: 900px) { .dl .va .steps { max-width: calc(50% - 24px); } }
/* Linux or Windows: two segments, the chosen one filled, as the app's own tabs are. */
.os { display: flex; margin-top: 24px; }
.os button { padding: 6px 14px; border: 1px solid var(--ash-800); border-radius: 0; background: none; color: var(--ash-400); font: 400 12px/1.55 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.os button + button { border-left: 0; }
.os button[aria-selected="true"] { background: var(--ash-50); border-color: var(--ash-50); color: #000; }
.os + .row { margin-top: 16px; }
div.step { cursor: default; }
div.step:hover { background: none; }
.step .say { font-size: 12px; color: var(--ash-300); }
/* What a reader need not see first: folded under one line, opened in place. */
.steps details.more { border-top: 1px solid var(--ash-800); }
.steps details.more > summary { padding: 12px 8px; color: var(--ash-400); font: 400 12px/1.55 var(--mono); list-style: none; cursor: pointer; }
.steps details.more > summary::-webkit-details-marker { display: none; }
.steps details.more > summary::before { content: "+ "; }
.steps details.more[open] > summary::before { content: "\2013  "; }
.steps details.more > summary:hover { color: var(--ash-50); }
.steps details.more > p { margin: 0; padding: 0 8px 12px; color: var(--ash-300); font-size: 13px; }
.steps details.more > p b { color: var(--ash-50); font-weight: 400; }
.os + p { margin-top: 16px; }
.steps { border-bottom: 1px solid var(--ash-800); }
.step { display: grid; grid-template-columns: 20px 136px minmax(0, 1fr) 56px; gap: 12px; align-items: baseline; width: 100%; padding: 12px 8px; border: 0; border-top: 1px solid var(--ash-800); background: none; color: var(--ash-300); font: 400 13px/1.55 var(--mono); text-align: left; text-decoration: none; cursor: pointer; }
.step:hover, .step:focus-visible { background: var(--ash-900); outline: 0; }
.step .n { color: var(--ash-400); }
.step b { color: var(--ash-50); }
.step b i { display: block; font-weight: 400; font-size: 11px; color: var(--ash-400); }
.step code { font: inherit; font-size: 12px; color: var(--ash-300); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.step .act { justify-self: end; font-size: 11px; font-style: italic; color: var(--ash-400); }
.step .act::after { content: "copy"; }
.step[data-state="copied"] .act::after { content: "copied"; color: var(--edit); }
.step[data-state="copied"] { animation: copied 1.4s ease-out; box-shadow: inset 2px 0 var(--edit); }
/* The download row: the address, then the button, the buy's shape in ivory with the
   arrow down; dead until the address reads as one (owner, 10-24). */
.step.get { grid-template-columns: 20px 136px minmax(0, 1fr) max-content; align-items: center; cursor: default; }
.step.get:hover, .step.get:focus-within { background: none; }
.step.get input { width: 100%; padding: 10px; border: 0; border-bottom: 1px solid var(--ash-600); background: var(--ash-850); color: var(--ash-50); font: inherit; font-size: 13px; }
.step.get input:focus { outline: 0; border-bottom-color: var(--ash-50); }
.step.get .act::after { content: none; }
.step.get .dl { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 0; background: var(--ash-50); color: var(--bg); font: 700 13px/1 var(--mono); letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; }
.step.get .dl svg { width: 7px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.step.get .dl:hover svg { transform: translateY(2px); }
.step.get .dl:disabled { background: var(--ash-800); color: var(--ash-400); cursor: default; }
.step.get .dl:disabled svg { transform: none; }
/* A gifted key's page: the download page's switch and lists under the key (keyd/gift.odin). */
.get-via { margin-top: 48px; }
p.mailnote { margin: 0; padding: 0 8px 12px 188px; /* under the field: the row's padding, number, label and gaps */ font-size: 11px; max-width: none; }
@media (max-width: 520px) {
	.step.get { grid-template-columns: 16px minmax(0, 1fr); }
	.step.get input, .step.get .say, .step.get .act { grid-column: 2; }
	.step.get .act { justify-self: start; }
	p.mailnote { padding-left: 24px; }
}
/* A row that goes somewhere rather than copies: its arrow alone at the right (keyd's key page). */
.step.go .act::after { content: none; }
.step.go .act { font-style: normal; color: var(--ash-50); }
/* The paid part: one more row of the steps' table, under either OS's rows, its
   number blank (not a step): the door's name with settings' note under it, the
   terms with the price in bold as its line, and the arrow where the others say
   copy, in the accent -- the one orange thing in the table; the whole row is the
   link. Under it, folded, the window's question and its terms. No section, no
   picture: the clips show the app (owner, 10-19). */
.steps.unlock .step:first-child { border-top: 0; } /* the rows above end in the same hairline */
/* The window's button at the row's right, on the edit's plate, the act column as wide as it needs.
   Until the merchant's review passes it is a span, dimmed, and the note stands under it (owner, 10-19). */
.steps.unlock .step { grid-template-columns: 20px 136px minmax(0, 1fr) max-content; align-items: start; }
.steps.unlock .act { display: grid; justify-items: end; gap: 6px; font-style: normal; }
.steps.unlock .act::after { content: none; }
.steps.unlock .buy { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--edit); color: var(--bg); font: 700 13px/1 var(--mono); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; }
.steps.unlock .buy svg { width: 11px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.steps.unlock a.buy:hover { background: var(--ash-50); }
.steps.unlock a.buy:hover svg { transform: translateX(2px); }
@media (max-width: 520px) {
	.steps.unlock .step { grid-template-columns: 16px 80px minmax(0, 1fr); }
	.steps.unlock .act { grid-column: 2 / -1; justify-items: start; margin-top: 4px; }
}
#buy { scroll-margin-top: 24px; }
/* The paid part's fold, more info, in the row's own foot: no hairline between, the line
   and what opens under the promise's column (owner, 10-24). Over the row, the window's
   question and the door's name as the page's other heads: an h2 (owner: a step up from
   h3), its sub in the edit's italic, the room above it an h3's. The rules below for the
   table's folds give way to these. */
.steps.unlock h2 { margin-top: 48px; }
/* The table's folds -- App library and terminal, Have more complex work?, the SmartScreen
   question -- read as the FAQ's do: a bold line, the + or − at the right, the width of the
   rows; the line and what opens under it start where the rows' labels do (owner, 10-19). */
.steps details.more { max-width: none; border-bottom: 0; }
.steps details.more > summary { padding: 14px 8px 14px 40px; color: var(--ash-50); font: 700 13px/1.55 var(--mono); }
.steps details.more > summary::before { content: none; }
.steps details.more[open] > summary::before { content: none; }
.steps details.more > summary:hover { color: var(--ash-100); }
.steps details.more > p { padding: 0 8px 14px 40px; }
@media (max-width: 520px) {
	.steps details.more > summary { padding: 14px 0 14px 24px; }
	.steps details.more > p { padding: 0 0 14px 24px; }
}
.steps details.more.info { border-top: 0; }
.steps details.more.info > summary { padding: 0 8px 14px 188px; color: var(--ash-400); font: 400 12px/1.55 var(--mono); }
.steps details.more.info > summary:hover, .steps details.more.info[open] > summary { color: var(--ash-50); }
.steps details.more.info > p { padding: 0 8px 14px 188px; }
.steps details.more.info > p b { font-weight: 700; } /* the table's folds draw bold as light alone; this one's lead line is bold (owner, 10-24) */
@media (max-width: 520px) {
	.steps details.more.info > summary { padding: 0 0 14px 112px; }
	.steps details.more.info > p { padding: 0 0 14px 24px; }
}
html { scroll-behavior: smooth; }
@media (max-width: 520px) { .step { grid-template-columns: 16px 80px minmax(0, 1fr) 44px; gap: 8px; padding: 12px 0; } }
.dl .hero h1 { margin-bottom: 20px; }

/* The changes page: a release a section, its kinds as small caps over their lines. */
.changes .release h2 small { margin-left: 12px; font: 400 14px/1 var(--mono); color: var(--ash-500); }
/* A line led by its kind where a list's dot would be, hung past it; a space between the kinds. */
.changes .kinds { list-style: none; padding: 0; margin: 0 0 24px; }
.changes .kinds li { padding-left: 5ch; text-indent: -5ch; }
.changes .kinds b { display: inline-block; width: 5ch; text-indent: 0; font: 700 12px/1 var(--mono); letter-spacing: .14em; color: var(--ash-400); }
.changes .none { color: var(--ash-500); }

/* The minimap (site.js), in the left margin as the app's is: dim, an
   abstraction of the page rather than a second one. Only where the margin
   holds it; under that, none, as in the app. */
.mm { position: fixed; left: 24px; top: 96px; bottom: 40px; width: 32px; overflow: hidden; cursor: pointer; user-select: none; touch-action: none; }
.mm canvas { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
.mm-view { position: absolute; top: 0; left: 0; right: 0; background: var(--ash-850); will-change: transform; }
.mm-here { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--edit); will-change: transform; }
.mm-hover { position: absolute; top: 0; right: 0; height: 2px; background: var(--ash-400); opacity: 0; }
.mm:hover .mm-hover { opacity: 1; }
@media (max-width: 1359px) { .mm { display: none; } }

/* The desk (keyd/desk.odin): the owner's pages, in the site's clothes. The
   status rows and the ledger are steps; the mail is a feed of notes, as the
   app's notepad stacks them: a hairline, who and when, the words. */
.desk .step { grid-template-columns: 20px 220px minmax(0, 1fr) 112px; cursor: default; }
.desk .step[data-copy], .desk a.step { cursor: pointer; }
.desk .step .act { font-style: normal; }
.desk .step.st .act::after, .desk .step.go .act::after { content: none; }
.desk .step .act a { color: var(--ash-300); text-decoration: none; }
.desk .step .act a:hover { color: var(--ash-50); }
.desk .step.lit { background: var(--ash-900); }
.desk .step.lit b { color: var(--edit); }
.desk .dot { display: inline-block; width: 8px; height: 8px; vertical-align: middle; background: var(--ash-600); }
.desk .dot.on { background: var(--ash-50); }
.desk .dot.bad { background: var(--edit); }
.desk .issue { align-items: center; margin-top: 32px; border-top: 0; border-bottom: 1px solid var(--ash-800); }
.desk input, .desk textarea { width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--ash-600); background: var(--ash-850); color: var(--ash-50); font: inherit; font-size: 13px; }
.desk .gift { display: flex; gap: 8px; }
.desk .gift input[type=number] { width: 64px; flex: none; }
/* The gift's giver, picked from the people: the field's own look, a caret at the right; where the
   browser lets a select be styled whole (base-select), its open list wears the desk's ink too. */
.desk select { width: 100%; padding: 8px 28px 8px 10px; border: 0; border-bottom: 1px solid var(--ash-600); border-radius: 0; background: var(--ash-850) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23717171' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px; color: var(--ash-50); font: inherit; font-size: 13px; appearance: none; cursor: pointer; }
.desk select:invalid { color: var(--ash-400); }
.desk select:focus { outline: 0; border-bottom-color: var(--edit); }
@supports (appearance: base-select) {
	.desk select, .desk select::picker(select) { appearance: base-select; }
	.desk select { background-image: none; }
	.desk select::picker-icon { color: var(--ash-400); }
	.desk select::picker(select) { border: 1px solid var(--ash-700); background: var(--ash-900); color: var(--ash-100); font: 400 13px/1.55 var(--mono); }
	.desk select option { padding: 6px 10px; }
	.desk select option:checked { color: var(--ash-50); }
	.desk select option:hover, .desk select option:focus { background: var(--ash-800); }
	.desk select option::checkmark { content: none; }
}
.desk input:focus, .desk textarea:focus { outline: 0; border-bottom-color: var(--edit); }
.desk button.go { justify-self: end; padding: 8px 14px; border: 1px solid var(--ash-600); background: none; color: var(--ash-50); font: 700 11px/1 var(--mono); letter-spacing: 0.08em; cursor: pointer; }
.desk button.go:hover { border-color: var(--ash-50); }
.desk .said { margin: 12px 8px 0; color: var(--ash-100); }
.desk .nums, .desk .orders { margin-bottom: 40px; }
.desk .built tr.sum > * { color: var(--ash-50); border-top: 1px solid var(--ash-600); }
.desk .tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 48px; }
.desk .built.top { width: auto; min-width: 260px; }
.desk .built.top thead th:last-child { color: var(--ash-300); }
.desk .built td:last-child { text-align: right; padding-right: 0; }
.desk .crumb { margin: 0 0 16px; font-size: 12px; }
.desk .crumb a { color: var(--ash-400); text-decoration: none; }
.desk h1.who { font-size: 28px; overflow-wrap: anywhere; }
.desk .feed { max-width: 72ch; margin-top: 40px; border-bottom: 1px solid var(--ash-800); }
.desk .note { padding: 20px 0; border-top: 1px solid var(--ash-800); }
.desk .note header { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ash-400); }
.desk .note header b { font-weight: 400; color: var(--ash-50); }
.desk .note header time { margin-left: auto; }
.desk .note pre { margin: 10px 0 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ash-100); }
.desk .note.out header b { color: var(--ash-300); }
.desk .note.out pre { color: var(--ash-300); }
/* A conversation's start in someone's feed: its subject, its state at the right in the
   list's ink (waiting in the edit's colour, as a lit row's name), CLOSE beside it.
   A closed one's messages read dimmer (keyd/mail.odin, topics_of). */
.desk .topic { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 10px 0; border-top: 1px solid var(--ash-600); font-size: 12px; }
.desk .feed > .topic:first-child { margin-top: 0; }
.desk .topic b { color: var(--ash-50); overflow-wrap: anywhere; }
.desk .topic span { margin-left: auto; font-size: 11px; letter-spacing: 0.06em; color: var(--ash-400); white-space: nowrap; }
.desk .topic.waiting span { color: var(--edit); }
.desk .topic.open span { color: var(--ash-100); }
.desk .topic.closed b { color: var(--ash-300); }
.desk .topic form { margin: 0; }
.desk .topic button.go { padding: 6px 10px; }
.desk .note.closed { opacity: 0.55; }
/* A line of someone's history, not a message: one row, quieter (keyd/people.odin). */
.desk .note.event { padding: 10px 0; }
.desk .note.event header b { color: var(--ash-300); }
.desk .note.reply { display: grid; gap: 12px; }
.desk .note.reply textarea { resize: vertical; min-height: 120px; }
.desk .note.reply .send { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.desk .echo { padding: 16px; background: var(--ash-850); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
@media (max-width: 720px) { .desk .step { grid-template-columns: 16px minmax(0, 1fr) 80px; } .desk .step > :nth-child(3) { grid-column: 2; } }
/* The desk's tables are read, not compared: no bars under the numbers (site.js draws them for .built), and the last head in ash. */
.desk .built td.bar { padding-bottom: 10px; }
.desk .built td.bar::after { content: none; }
.desk .built thead th:last-child { color: var(--ash-300); }
.desk .built.nums td, .desk .built.orders td { text-align: left; padding-right: 20px; }