1/* After typesafe.ai: near-black on white, one pink band, ordered-dither dot
2   fields, and old operating system windows (black title bar, grey body, inset
3   double border). One look, light only, as theirs is.
4   Layout: a white sheet holding the headline and the Ask and Jev windows,
5   then a full-width pink band holding one window per call. */
6:root {
7  --ink: #1e1e1e;
8  --paper: #fefefe;
9  --grey: #dedede;
10  --mid: #c4c4c4;
11  --pink: #f386a1;
12  --plum: #8a2456;
13  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
14  --pixel: "VT323", "Courier New", monospace;
15  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
16  color-scheme: light;
17}
18* { box-sizing: border-box; }
19/* The paper's dither is the body's, so the two white sections share one field
20   with no seam where the transcript begins. */
21body {
22  margin: 0; color: var(--ink);
23  background: var(--paper) var(--dither-paper, none) top center / 1200px 900px repeat;
24  image-rendering: pixelated;
25  font: 14px/1.5 var(--mono);
26}
27.wrap { max-width: 46rem; margin: 0 auto; padding-inline: 16px; }
28
29/* The dither fields are drawn once by page.js into two CSS variables, at one
30   image pixel per dot, and scaled up unsmoothed. */
31.sheet { padding-block: 0 3.5rem; }
32.band {
33  background: var(--pink) var(--dither-pink, none) top center / 1200px 900px repeat;
34  image-rendering: pixelated; padding-block: 2.5rem 3rem;
35  border-block: 1px solid var(--ink);
36}
37
38nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
39nav a, nav span {
40  font: 500 1.05rem/1 var(--display); letter-spacing: -0.02em;
41  padding: 0.55rem 0.5rem; background: var(--paper); color: var(--ink); text-decoration: none;
42}
43nav a.dark { background: var(--ink); color: var(--paper); }
44/* The dark links sit together on the right. */
45nav a:first-child { margin-right: auto; }
46
47.headline { position: relative; margin-block: 3rem 2.5rem; padding: 1.25rem 0.75rem; }
48/* Crop marks, as around their headlines. */
49.headline::before, .headline::after {
50  content: ""; position: absolute; inset: 0; pointer-events: none;
51  background:
52    linear-gradient(var(--ink), var(--ink)) top left / 10px 1px,
53    linear-gradient(var(--ink), var(--ink)) top left / 1px 10px,
54    linear-gradient(var(--ink), var(--ink)) top right / 10px 1px,
55    linear-gradient(var(--ink), var(--ink)) top right / 1px 10px,
56    linear-gradient(var(--ink), var(--ink)) bottom left / 10px 1px,
57    linear-gradient(var(--ink), var(--ink)) bottom left / 1px 10px,
58    linear-gradient(var(--ink), var(--ink)) bottom right / 10px 1px,
59    linear-gradient(var(--ink), var(--ink)) bottom right / 1px 10px;
60  background-repeat: no-repeat;
61}
62.headline::after { display: none; }
63.eyebrow { font: 500 0.95rem var(--display); letter-spacing: -0.01em; margin: 0 0 0.75rem; text-align: center; }
64h1 {
65  font: 500 clamp(2.6rem, 11vw, 6rem)/0.92 var(--display);
66  letter-spacing: -0.045em; margin: 0; text-align: center; text-wrap: balance;
67}
68
69/* A window. */
70.win { border: 1px solid var(--ink); background: var(--grey); min-width: 0; }
71.bar-title {
72  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
73  background: var(--ink); color: var(--paper);
74  font: 1.25rem/1 var(--pixel); padding: 0.2rem 0.4rem; min-height: 1.6rem;
75}
76.bar-title .meta { margin-left: auto; color: var(--mid); }
77.win > .body {
78  margin: 3px; border: 1px solid var(--ink); padding: 0.9rem; min-width: 0;
79  display: grid; gap: 0.9rem;
80}
81.win.white > .body { background: var(--paper); }
82.icon { width: 1.1rem; height: 1.1rem; flex: none; shape-rendering: crispEdges; }
83.icon.big { width: 3rem; height: 3rem; background: var(--paper); border: 1px solid var(--ink); padding: 3px; }
84
85.stack { display: grid; gap: 1.25rem; min-width: 0; }
86
87form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
88input {
89  flex: 1 1 14rem; min-width: 0;
90  font: 15px var(--mono); color: var(--ink); background: var(--paper);
91  border: 1px solid var(--ink); border-radius: 0; padding: 0.6rem 0.7rem;
92}
93button {
94  font: 1.35rem/1 var(--pixel); padding: 0.5rem 1.1rem; border-radius: 0; cursor: pointer;
95  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
96}
97button:disabled { opacity: 0.55; cursor: progress; }
98button.ghost { background: var(--paper); color: var(--ink); }
99:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
100input:focus-visible { outline-offset: 0; }
101
102.live { margin: 0; min-height: 1.4rem; font: 1.2rem/1.15 var(--pixel); }
103.live .dot { display: inline-block; width: 0.5em; height: 0.5em; background: var(--paper); border: 1px solid var(--ink); margin-right: 0.5em; }
104.live .dot.yes { background: var(--ink); }
105.live .meta { color: #555; }
106
107#transcript { display: grid; gap: 0; min-width: 0; }
108.step { margin: 0 0 0.5rem; min-height: 1.4rem; font: 1.25rem/1.15 var(--pixel); text-transform: uppercase; letter-spacing: 0.03em; }
109.row { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.5rem; align-items: baseline; }
110.row > * { min-width: 0; }
111.who { font: 1.3rem/1 var(--pixel); }
112.q { overflow-wrap: anywhere; white-space: pre-wrap; }
113.said { display: grid; gap: 1.6rem; min-width: 0; }
114.result { min-width: 0; }
115.asked { margin: 0 0 0.5rem; font: 1.2rem/1.15 var(--pixel); color: #444; }
116.answer {
117  font: 500 clamp(3.4rem, 15vw, 6.5rem)/0.88 var(--display);
118  letter-spacing: -0.05em; margin: 0; color: var(--ink);
119  animation: stamp 260ms cubic-bezier(.2,1.6,.4,1);
120}
121.answer.pick { font-size: clamp(1.9rem, 8vw, 3.4rem); line-height: 0.95; overflow-wrap: anywhere; letter-spacing: -0.04em; }
122.answer.pick .of { font: 1.3rem/1 var(--pixel); letter-spacing: 0; white-space: nowrap; color: #444; }
123.answer.quiet { font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1; letter-spacing: -0.03em; animation: none; }
124@keyframes stamp { from { transform: scale(1.8) rotate(-6deg); opacity: 0; } }
125.why { margin: 0.75rem 0 0; }
126.verdict { font: 1.2rem/1.15 var(--pixel); margin: 0.6rem 0 0; color: #444; }
127
128/* A probability, as their benchmark sliders: an inverted label, the figure
129   at the right, and a rule with a square at the value. */
130.bars { display: grid; gap: 0.55rem; margin-top: 1rem; }
131.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; align-items: baseline; }
132.bar .label { font: 1.2rem/1.1 var(--pixel); overflow-wrap: anywhere; justify-self: start; padding: 0 0.3rem; background: var(--grey); }
133.bar.won .label { background: var(--ink); color: var(--paper); }
134.bar .pct { font: 1.2rem/1.1 var(--pixel); font-variant-numeric: tabular-nums; }
135.bar .track { grid-column: 1 / -1; height: 1px; background: var(--ink); position: relative; margin-block: 4px 5px; }
136.bar .thumb { position: absolute; top: -4px; width: 9px; height: 9px; margin-left: -4px; background: var(--ink); }
137.bar:not(.won) .thumb { background: var(--paper); border: 1px solid var(--ink); }
138
139/* A call: a window that folds. */
140details.win > summary { cursor: pointer; list-style: none; }
141details.win > summary::-webkit-details-marker { display: none; }
142details.win > summary .fold::before { content: "+"; }
143details.win[open] > summary .fold::before { content: "\2013"; }
144.fold { width: 1ch; text-align: center; }
145.wire { display: grid; gap: 0.3rem; min-width: 0; }
146.wire + .wire { border-top: 1px dotted var(--ink); padding-top: 0.8rem; }
147.label-s { font: 1.15rem/1 var(--pixel); text-transform: uppercase; letter-spacing: 0.04em; justify-self: start; background: var(--ink); color: var(--paper); padding: 0.05rem 0.35rem; }
148pre { margin: 0; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
149.json .k { font-weight: 500; }
150.json .s { color: var(--plum); }
151.json .n { background: var(--paper); padding: 0 0.15em; }
152.note { margin: 0.25rem 0 0; font: 1.2rem/1.15 var(--pixel); }
153.note::before { content: "! "; }
154
155.fine { margin: 0; font-size: 0.8rem; }
156#budget .bars { margin-top: 0; }
157#budget .bar .pct { white-space: nowrap; }
158/* One row: the link takes what the label and the button leave, and is cut
159   with an ellipsis instead of wrapping. Where that would leave it under
160   12rem it drops to a line of its own. The button copies the whole link. */
161.share { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; min-width: 0; }
162.share span, .share button { flex: none; white-space: nowrap; }
163.share a, .share code { color: inherit; flex: 1 1 12rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
164/* The rules as a Rete network (diagram.rs, whose header says what each mark
165   means). A node or a line is one of four things:
166     holds  a rule that fired stands on it        filled ink, heavy line
167     spare  known to hold, and nothing needed it  ink outline, plain line
168     waits  on a fact not known yet               thin outline
169     fails  a test on it failed                   dashed, faint box, text kept readable
170   A rule that holds is pink, and one that decided a step carries its number.
171   On a narrow screen the drawing keeps its size and scrolls sideways. */
172.rete { overflow-x: auto; min-width: 0; }
173.rete svg { display: block; width: 100%; min-width: 660px; height: auto; font: 11px var(--mono); }
174.rete rect, .rete circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
175.rete text { fill: var(--ink); }
176.rete line, .rete path { stroke: var(--ink); stroke-width: 1; fill: none; opacity: 0.3; }
177.rete polygon { fill: var(--ink); opacity: 0.3; }
178.rete .frame rect { fill: none; stroke-dasharray: 1 3; }
179.rete .frame text { opacity: 0.7; }
180
181.rete line.holds, .rete path.holds, .rete .back.holds path { stroke-width: 2; opacity: 1; }
182.rete .back.holds polygon { opacity: 1; }
183.rete g.holds rect, .rete g.holds circle { fill: var(--ink); }
184.rete g.holds text { fill: var(--paper); }
185.rete g.rule.holds rect { fill: var(--pink); }
186.rete g.rule.holds text { fill: var(--ink); font-weight: 500; }
187.rete g.rule rect.nth { fill: var(--ink); }
188.rete g.rule text.nth { fill: var(--paper); }
189
190.rete line.spare, .rete path.spare { opacity: 0.7; }
191.rete g.spare rect, .rete g.spare circle { stroke-width: 1.5; }
192
193.rete line.fails, .rete path.fails, .rete .back.fails path { stroke-dasharray: 2 3; opacity: 0.2; }
194.rete .back.fails polygon { opacity: 0.2; }
195.rete g.fails rect, .rete g.fails circle { stroke-dasharray: 2 3; stroke-opacity: 0.35; }
196.rete g.fails text { opacity: 0.55; }
197/* The shared budget and the feed belong to the home page. They go once there
198   is an answer on the page, or a `?q=` question about to be typed. The
199   LMJTFY link in the corner is the way back. */
200body:has(#transcript > *) :is(#budget, #feed, #tally),
201body:has(#ask[data-type]:not([data-type=""])) :is(#budget, #feed, #tally) { display: none; }
202/* The feed: one line a question, cut with an ellipsis, its answer kept whole
203   up to half the row. It scrolls inside its window. */
204#feed:not(:has(.entry)) { display: none; }
205#more { justify-content: center; }
206.feed { list-style: none; margin: 0; padding: 0 0.6rem 0 0; display: grid; gap: 0.35rem; max-height: 13rem; overflow-y: auto; }
207.feed li { display: flex; gap: 0.9rem; justify-content: space-between; align-items: baseline; min-width: 0; }
208/* The question gives way, not the answer: an answer is cut only when it is
209   longer than half the row. */
210.feed a { color: inherit; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
211.read-as { opacity: 0.6; }
212.feed .times { opacity: 0.6; font-weight: 400; }
213.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
214/* The playground: every test is a link, and what the rules say to do next. */
215.rete a { cursor: pointer; }
216.rete a:hover rect { stroke-width: 2; }
217.says { margin: 0; font-weight: 500; }
218.feed .said-s { flex: 0 0 auto; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
219footer { padding-block: 1.5rem 3rem; font-size: 0.8rem; }
220footer a { color: inherit; }
221footer .about { display: inline-grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; max-width: 30rem; }
222@media (prefers-reduced-motion: reduce) { .answer { animation: none; } }
223footer .clone { margin-top: 0.9rem; max-width: 40rem; }
224.inside { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; margin: 0; }
225.inside dt { margin: 0; }
226.inside dd { margin: 0; min-width: 0; }
227.latest p { margin: 0 0 0.3rem; overflow-wrap: anywhere; }
228@media (max-width: 34rem) { .inside { grid-template-columns: 1fr; } .inside dd { margin-bottom: 0.4rem; } }
229/* On the code page the command is the point: it wraps rather than being cut. */
230.win .clone code { white-space: normal; overflow-wrap: anywhere; flex-basis: 100%; }
231
232/* The code pages. */
233.crumbs a, .bar-title a { color: inherit; }
234.code-page { margin-top: 2rem; }
235.bar-title .meta a { color: inherit; }
236.listing { width: 100%; border-collapse: collapse; }
237.listing td { padding: 0.3rem 0.4rem; border-top: 1px solid var(--grey); vertical-align: middle; }
238.listing tr:first-child td { border-top: 0; }
239.listing .name { display: flex; gap: 0.5rem; align-items: center; min-width: 0; overflow-wrap: anywhere; }
240.listing .name a { color: inherit; }
241.listing .size { text-align: right; white-space: nowrap; color: inherit; opacity: 0.7; }
242.source { padding: 0; overflow-x: auto; }
243.source pre { margin: 0; padding: 0.6rem 0; font: 0.85rem/1.45 var(--mono); counter-reset: none; }
244.source .line { display: block; padding-inline: 0.6rem 1rem; white-space: pre; }
245.source .line:target { background: var(--pink); }
246.source .number { display: inline-block; width: 3.5em; margin-right: 1rem; text-align: right; color: inherit; opacity: 0.45; text-decoration: none; user-select: none; }
247.md { line-height: 1.55; overflow-wrap: anywhere; }
248.md h1, .md h2, .md h3 { font-family: var(--display); line-height: 1.15; margin: 1.4rem 0 0.6rem; text-align: left; letter-spacing: -0.02em; }
249.md h1 { font-size: 2.2rem; }
250.md h2 { font-size: 1.5rem; }
251.md h3 { font-size: 1.15rem; }
252.md p, .md ul, .md ol { margin: 0 0 0.8rem; }
253.md h1:first-child, .md h2:first-child { margin-top: 0.2rem; }
254.md pre { background: var(--paper); border: 1px solid var(--ink); padding: 0.6rem 0.8rem; overflow-x: auto; }
255.md table { border-collapse: collapse; display: block; overflow-x: auto; }
256.md th, .md td { border: 1px solid var(--ink); padding: 0.3rem 0.55rem; text-align: left; vertical-align: top; overflow-wrap: normal; }
257.md td:first-child, .md th:first-child { white-space: nowrap; }
258.md th { background: var(--ink); color: var(--paper); }
259.md a { color: inherit; }
260
261/* Pages open now, and the toasts pushed over /live. */
262nav .online { font: 1.05rem/1 var(--pixel, var(--mono)); align-self: center; padding: 0.55rem 0.5rem; }
263/* `nav span` is a button's look; the wrapper and the list's parts are not
264   buttons. */
265nav .online-wrap { position: relative; display: flex; align-self: center; outline: none; padding: 0; background: none; }
266nav .places { display: none; position: absolute; top: 100%; right: 0; z-index: 20; min-width: 14rem; max-height: 60vh; overflow-y: auto;
267  margin: 0; padding: 0.3rem 0; list-style: none; background: var(--paper); border: 1px solid var(--ink); }
268nav .online-wrap:is(:hover, :focus-within) .places:has(li) { display: block; }
269nav .places li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.2rem 0.7rem; font: 1.1rem/1.2 var(--pixel, var(--mono)); white-space: nowrap; }
270nav .places span { font: inherit; letter-spacing: normal; padding: 0; background: none; }
271/* Windows has no flag emoji of its own, and the rest of the site is pixels:
272   SerenityOS's pixel emoji, cut down to the 26 letters a flag is made of and
273   the two vote thumbs (third-party/serenity-emoji). Fetched only when a page
274   shows one. */
275@font-face {
276  font-family: "Serenity Emoji";
277  src: url("/emoji.woff2") format("woff2");
278  unicode-range: U+1F1E6-1F1FF, U+1F44D-1F44E;
279  font-display: swap;
280}
281nav .places .flag { font-family: "Serenity Emoji", sans-serif; font-size: 1.1rem; }
282nav .places .where { flex: 1; }
283nav .places .times { opacity: 0.6; }
284nav .online::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; background: var(--pink); border: 1px solid var(--ink); }
285#toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; display: flex; flex-direction: column; gap: 0.5rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
286.toast { pointer-events: auto; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: 0.6rem 0.8rem; font: 0.85rem/1.4 var(--mono); overflow-wrap: anywhere; animation: toast-in 0.25s steps(4); transition: opacity 0.4s; }
287.toast a { color: inherit; }
288/* The toasts sit inside nav, so nav's own link and button looks are undone. */
289nav #toasts a { font: inherit; letter-spacing: normal; padding: 0; background: none; text-decoration: underline; }
290.toast.gone { opacity: 0; }
291@keyframes toast-in { from { transform: translateY(1rem); opacity: 0; } }
292@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
293
294/* The two views of a directory, and a document's contents. */
295.bar-title.tabs { gap: 0; padding: 0; }
296.bar-title .tab { padding: 0.35rem 0.8rem; color: inherit; text-decoration: none; }
297.bar-title .tab.on { background: var(--paper); color: var(--ink); }
298.md .imports { border: 1px dashed var(--ink); padding: 0.45rem 0.7rem; }
299.md .toc { border: 1px solid var(--ink); background: var(--paper); padding: 0.6rem 0.9rem; margin: 0 0 1.2rem; }
300.md .toc-title { font: 1.15rem/1 var(--pixel); margin: 0 0 0.4rem; }
301.md .toc ol { margin: 0; padding-left: 1.4rem; }
302.md .toc li.sub { margin-left: 1.2rem; list-style: circle; }
303.md pre.mermaid { background: var(--paper); text-align: center; border: 1px solid var(--ink); }
304
305/* A document's diagrams and pictures open full size (page.js). */
306.md pre.mermaid svg, .md img { cursor: zoom-in; }
307.md img { max-width: 100%; height: auto; }
308dialog.zoom { width: 96vw; max-width: none; height: 94vh; max-height: none; padding: 0; border: 2px solid var(--ink); background: var(--paper); }
309dialog.zoom::backdrop { background: rgb(30 30 30 / 0.6); }
310dialog.zoom .close { position: sticky; top: 0.5rem; float: right; margin: 0.5rem; z-index: 1; background: var(--paper); }
311dialog.zoom .zoomed { padding: 1rem; overflow: auto; height: calc(100% - 2rem); }
312dialog.zoom .zoomed svg, dialog.zoom .zoomed img { display: block; width: 100%; min-width: 900px; height: auto; max-width: none; margin: 0 auto; }
313.toast.stays { background: var(--pink); display: flex; gap: 0.6rem; align-items: center; }
314.toast.stays .reload { font: 1.1rem/1 var(--pixel); padding: 0.3rem 0.8rem; }
315.toast.stays button { flex: none; white-space: nowrap; }
316.toast.stays .dismiss { margin-left: auto; padding: 0.1rem 0.5rem; }
317
318/* The code pages are an editor (view/code.rs): the top bar, then a sidebar
319   of folding panels beside a main pane, each scrolling on its own, the page
320   itself not scrolling. Wide content (diagrams, tables, source) scrolls
321   inside the pane instead of running out of it. */
322body.editor { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); }
323.editor-top { padding: 0.4rem 1rem; border-bottom: 1px solid var(--ink); background: var(--paper); }
324.ide { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); }
325.side { overflow: auto; border-right: 1px solid var(--ink); background: var(--grey); }
326.pane { overflow: auto; min-width: 0; background: var(--paper); }
327
328.panel { border-bottom: 1px solid var(--ink); }
329.panel > summary { list-style: none; cursor: pointer; background: var(--ink); color: var(--paper);
330  font: 1.1rem/1 var(--pixel); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.4rem 0.7rem; }
331.panel > summary::-webkit-details-marker { display: none; }
332.panel > summary::before { content: "▾ "; }
333.panel:not([open]) > summary::before { content: "▸ "; }
334.panel-body { padding: 0.6rem 0.7rem; font-size: 0.85rem; }
335.panel-body .share { flex-direction: column; align-items: stretch; }
336.panel-body .share code { white-space: normal; overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--ink); padding: 0.4rem 0.5rem; }
337.panel-body .verdict { margin: 0.5rem 0 0; }
338
339.explorer { padding: 0.3rem 0; }
340.explorer .row { display: flex; gap: 0.4rem; align-items: center; color: inherit; text-decoration: none;
341  font: 0.82rem/1.55 var(--mono); white-space: nowrap; padding: 0 0.6rem 0 calc(1.3rem + var(--depth, 0) * 0.85rem); }
342.explorer .row:hover { background: var(--paper); }
343.explorer .row.on { background: var(--pink); }
344.explorer .row .icon { flex: none; }
345.explorer details.folder > summary { list-style: none; position: relative; }
346.explorer details.folder > summary::-webkit-details-marker { display: none; }
347.explorer details.folder > summary::before { content: "▸"; position: absolute; top: 0; left: calc(0.45rem + var(--depth, 0) * 0.85rem);
348  font: 0.75rem/1.85 var(--mono); cursor: pointer; }
349.explorer details.folder[open] > summary::before { content: "▾"; }
350.explorer details.folder > summary > .row { padding-left: calc(1.3rem + var(--depth, 0) * 0.85rem); }
351.explorer > .row { padding-left: 0.6rem; }
352.explorer > .verdict { margin: 0.4rem 0; padding: 0 0.7rem; }
353
354.projects { list-style: none; margin: 0; padding: 0.3rem 0; }
355.projects li { padding: 0.3rem 0.7rem; display: grid; gap: 0.1rem; }
356.projects li.on { background: var(--pink); }
357.projects a { display: flex; gap: 0.4rem; align-items: center; color: inherit; font: 0.85rem/1.3 var(--mono); }
358.projects .verdict { margin: 0; font-size: 0.78rem; }
359.panel-body pre.cargo { margin: 0.4rem 0; padding: 0.5rem; background: var(--paper); border: 1px solid var(--ink);
360  font: 0.72rem/1.5 var(--mono); white-space: pre; overflow-x: auto; }
361.panel-body .crates { margin: 0.5rem 0; padding-left: 1rem; font-size: 0.8rem; }
362.outline { margin: 0; padding: 0.5rem 0.7rem 0.6rem 1.8rem; font: 0.82rem/1.5 var(--mono); }
363.outline li.sub { margin-left: 1rem; list-style: circle; }
364.outline a { color: inherit; }
365
366.crumbs-bar { padding: 0.45rem 1rem; font: 0.85rem/1.3 var(--mono); border-bottom: 1px solid var(--grey); }
367.crumbs-bar a { color: inherit; }
368.tabs-bar { display: flex; align-items: stretch; background: var(--grey); border-bottom: 1px solid var(--ink);
369  position: sticky; top: 0; z-index: 2; overflow-x: auto; }
370.tab { display: flex; gap: 0.4rem; align-items: center; padding: 0.45rem 0.9rem; border-right: 1px solid var(--ink);
371  font: 0.85rem/1 var(--mono); color: inherit; text-decoration: none; white-space: nowrap; }
372.tab.on { background: var(--paper); border-bottom: 3px solid var(--pink); padding-bottom: calc(0.45rem - 3px); }
373.tab-note { opacity: 0.6; }
374.tab.step { background: var(--ink); color: var(--paper); max-width: 16rem; }
375.tab.step:hover { background: var(--pink); color: var(--ink); }
376.tab.step .step-label { overflow: hidden; text-overflow: ellipsis; }
377.tab.step .arrow { font-size: 0.75rem; }
378.tab.step.next { margin-left: auto; border-right: 0; border-left: 1px solid var(--ink); }
379.tab-meta { margin-left: auto; padding: 0.45rem 0.9rem; font: 0.8rem/1 var(--mono); white-space: nowrap; align-self: center; }
380.tab-meta a { color: inherit; }
381
382.doc { padding: 1.5rem 2rem 4rem; max-width: 62rem; min-width: 0; }
383.doc.source { max-width: none; padding: 0; }
384.doc.md :is(pre, table, pre.mermaid) { max-width: 100%; overflow-x: auto; }
385.doc.md img { max-width: 100%; }
386.contents-list { font: 0.9rem/1.7 var(--mono); }
387
388@media (max-width: 52rem) {
389  body.editor { height: auto; overflow: visible; }
390  .ide { display: flex; flex-direction: column; }
391  .pane { order: 1; overflow: visible; }
392  .side { order: 2; border-right: 0; border-top: 1px solid var(--ink); }
393  .doc { padding: 1rem; }
394  .tabs-bar { flex-wrap: wrap; }
395  .tab { flex: 1 1 auto; }
396  .tab.step { flex: 0 0 auto; }
397  .tab.step .step-label { display: none; }
398}
399
400/* Text set straight on the dot field gets paper of its own, so it reads. */
401footer .about > span, footer .clone { background: var(--paper); padding: 0.4rem 0.6rem; }
402
403/* Was Jev right? A vote each, one per browser. */
404.rating { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.8rem; }
405.rating:empty { display: none; }
406.rating .vote { font: 1.1rem/1 var(--pixel, var(--mono)); padding: 0.3rem 0.6rem; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }
407.rating .vote.on { background: var(--pink); }
408.rating .vote:disabled { cursor: default; opacity: 0.6; }
409.rating .glyph { font-family: "Serenity Emoji", sans-serif; }
410
411/* A call's answers: ◀ answer n of m ▶, and ↻ to ask again. */
412.versions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
413.versions .step, .again { font: 1.05rem/1 var(--pixel, var(--mono)); padding: 0.25rem 0.55rem; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }
414.versions .step:hover, .again:hover { background: var(--pink); }
415
416/* A source file read as Docco reads one (view/code.rs, `source`): each run
417   of comments, rendered, beside the code under it. One row per run, so a
418   comment and its code start level. Narrow, the code goes under. */
419.doc.docco { max-width: none; padding: 0; }
420.docco .sec { display: grid; grid-template-columns: minmax(18rem, 34rem) minmax(0, 1fr); border-bottom: 1px solid var(--grey); }
421.docco .prose { padding: 0.7rem 1.2rem; font-size: 0.92rem; min-width: 0; }
422.docco .prose > :last-child { margin-bottom: 0; }
423.docco .prose h1 { font-size: 1.5rem; }
424.docco .prose h2 { font-size: 1.2rem; }
425.docco .source { background: color-mix(in srgb, var(--paper), var(--grey) 35%); border-left: 1px solid var(--grey); min-width: 0; }
426@media (max-width: 60rem) {
427  .docco .sec { grid-template-columns: minmax(0, 1fr); }
428  .docco .source { border-left: 0; border-top: 1px solid var(--grey); }
429}
430/* The colours of code (tree::annotate::Kind::class): the page's own ink,
431   plum and pink, and nothing brought in. */
432.source .c { opacity: 0.5; }
433.source .k { color: var(--plum); font-weight: 500; }
434.source .s, .source .n { color: color-mix(in srgb, var(--plum), var(--pink) 45%); }
435.source .t { font-weight: 500; }
436.source .f { color: color-mix(in srgb, var(--ink), var(--plum) 55%); }
437.source .m { opacity: 0.65; }
438
439/* The explorer's and the tabs' icons: Jerry's pixel icons
440   (third-party/jerrys-pixel-icons), sixteen pixels drawn large, shown small
441   and kept sharp. A folder has two, and its `details` says which shows. */
442img.icon.px { width: 18px; height: 18px; image-rendering: pixelated; }
443.explorer .shut, .explorer .opened { display: contents; }
444.explorer details.folder:not([open]) > summary .opened, .explorer details.folder[open] > summary .shut { display: none; }