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   This is the part every Jev site shares; a site's own styles come after it.
5   The dither fields are drawn into --dither-paper and --dither-pink by ui.js. */
6@font-face { font-family: "Inter Tight"; font-weight: 500; font-display: swap; src: url("/fonts/inter-tight-500.woff2") format("woff2"); }
7@font-face { font-family: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); }
8@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url("/fonts/vt323.woff2") format("woff2"); }
9/* SerenityOS's pixel emoji, the four the components draw (`PixelEmoji`): fetched only by a page that shows one. */
10@font-face { font-family: "Pixel Emoji"; font-display: swap; src: url("/fonts/pixel-emoji.woff2") format("woff2"); unicode-range: U+25B6, U+23F8, U+23F3, U+231B; }
11:root {
12  --ink: #1e1e1e;
13  --paper: #fefefe;
14  --grey: #dedede;
15  --mid: #c4c4c4;
16  --pink: #f386a1;
17  --plum: #8a2456;
18  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
19  --pixel: "VT323", "Courier New", monospace;
20  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
21  color-scheme: light;
22}
23* { box-sizing: border-box; }
24/* The paper's dither is the body's, so two white sections share one field
25   with no seam where the second begins. */
26body {
27  margin: 0; color: var(--ink);
28  background: var(--paper) var(--dither-paper, none) top center / 1200px 900px repeat;
29  image-rendering: pixelated;
30  font: 14px/1.5 var(--mono);
31}
32.wrap { max-width: 46rem; margin: 0 auto; padding-inline: 16px; }
33.sheet { padding-block: 0 3.5rem; }
34.band {
35  background: var(--pink) var(--dither-pink, none) top center / 1200px 900px repeat;
36  image-rendering: pixelated; padding-block: 2.5rem 3rem;
37  border-block: 1px solid var(--ink);
38}
39/* Words on the band stand on plain pink: the column they are in is a plate laid over the dots, so
40   the dots show beside and above it and never run under a letter (ink dots under ink text cannot be
41   read). typesafe.ai does the same: its dot fields are panels of their own, and its text never
42   crosses one. */
43.band > .wrap { background: var(--pink); padding-block: 0.6rem; }
44
45/* Reading aids every page owns. */
46.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
47.skip { position: absolute; left: 16px; top: -100px; z-index: 30; background: var(--ink); color: var(--paper); padding: 0.5rem 0.8rem; font: 1.25rem/1 var(--pixel); }
48.skip:focus { top: 8px; }
49
50nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
51nav a, nav span {
52  font: 500 1.05rem/1 var(--display); letter-spacing: -0.02em;
53  padding: 0.55rem 0.5rem; background: var(--paper); color: var(--ink); text-decoration: none;
54}
55nav a.dark { background: var(--ink); color: var(--paper); }
56/* The dark links sit together on the right. */
57nav a:first-child { margin-right: auto; }
58
59.headline { position: relative; margin-block: 3rem 2.5rem; padding: 1.25rem 0.75rem; }
60/* Crop marks, as around their headlines. */
61.headline::before {
62  content: ""; position: absolute; inset: 0; pointer-events: none;
63  background:
64    linear-gradient(var(--ink), var(--ink)) top left / 10px 1px,
65    linear-gradient(var(--ink), var(--ink)) top left / 1px 10px,
66    linear-gradient(var(--ink), var(--ink)) top right / 10px 1px,
67    linear-gradient(var(--ink), var(--ink)) top right / 1px 10px,
68    linear-gradient(var(--ink), var(--ink)) bottom left / 10px 1px,
69    linear-gradient(var(--ink), var(--ink)) bottom left / 1px 10px,
70    linear-gradient(var(--ink), var(--ink)) bottom right / 10px 1px,
71    linear-gradient(var(--ink), var(--ink)) bottom right / 1px 10px;
72  background-repeat: no-repeat;
73}
74.eyebrow { font: 500 0.95rem var(--display); letter-spacing: -0.01em; margin: 0 0 0.75rem; text-align: center; }
75h1 {
76  font: 500 clamp(2.6rem, 11vw, 6rem)/0.92 var(--display);
77  letter-spacing: -0.045em; margin: 0; text-align: center; text-wrap: balance;
78}
79
80/* A window. */
81.win { border: 1px solid var(--ink); background: var(--grey); min-width: 0; }
82.bar-title {
83  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
84  background: var(--ink); color: var(--paper);
85  font: 1.25rem/1 var(--pixel); padding: 0.2rem 0.4rem; min-height: 1.6rem;
86}
87.bar-title .meta { margin-left: auto; color: var(--mid); }
88.bar-title a { color: inherit; }
89/* A section's heading, when the window is one: the bar's own text. */
90.bar-title :is(h2, h3) { font: inherit; margin: 0; }
91.win > .body {
92  margin: 3px; border: 1px solid var(--ink); padding: 0.9rem; min-width: 0;
93  display: grid; gap: 0.9rem;
94}
95.win.white > .body { background: var(--paper); }
96.icon { width: 1.1rem; height: 1.1rem; flex: none; shape-rendering: crispEdges; }
97.icon.big { width: 3rem; height: 3rem; background: var(--paper); border: 1px solid var(--ink); padding: 3px; }
98.stack { display: grid; gap: 1.25rem; min-width: 0; }
99
100form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
101input {
102  flex: 1 1 14rem; min-width: 0;
103  font: 15px var(--mono); color: var(--ink); background: var(--paper);
104  border: 1px solid var(--ink); border-radius: 0; padding: 0.6rem 0.7rem;
105}
106button {
107  font: 1.35rem/1 var(--pixel); padding: 0.5rem 1.1rem; border-radius: 0; cursor: pointer;
108  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
109}
110button:disabled { opacity: 0.55; cursor: progress; }
111button.ghost { background: var(--paper); color: var(--ink); }
112:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
113input:focus-visible { outline-offset: 0; }
114
115pre { margin: 0; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
116.fine { margin: 0; font-size: 0.8rem; }
117.note { margin: 0.25rem 0 0; font: 1.2rem/1.15 var(--pixel); }
118.note::before { content: "! "; }
119.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; }
120
121/* One row: a label, a value cut with an ellipsis instead of wrapping, and a
122   button that copies it (ui.js, `data-copy`). Where the value would be under
123   12rem it drops to a line of its own. */
124.share { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; min-width: 0; }
125.share span, .share button { flex: none; white-space: nowrap; }
126.share a, .share code { color: inherit; flex: 1 1 12rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
127/* A command is the point: it wraps rather than being cut. */
128.win .clone code { white-space: normal; overflow-wrap: anywhere; flex-basis: 100%; }
129
130footer { padding-block: 1.5rem 3rem; font-size: 0.8rem; }
131footer a { color: inherit; }
132footer .about { display: inline-grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; max-width: 30rem; }
133/* Text set straight on the dot field gets paper of its own, so it reads. */
134footer .about > span, footer .clone { background: var(--paper); padding: 0.4rem 0.6rem; }
135footer .clone { margin-top: 0.9rem; max-width: 40rem; }
136
137/* A pixel emoji (components.rs, `PixelEmoji`): the font's box is a little wider than tall, so it is
138   given one, and a glyph it does not hold falls back to the system's. */
139.pe { display: inline-block; font: 400 1em/1 "Pixel Emoji", sans-serif; width: 1.25em; text-align: center; vertical-align: -0.1em; }
140/* An hourglass that turns over twice a second and a half: sand at the top, sand at the bottom
141   (the two glyphs, one over the other, each shown for half of every turn). Still, at the top,
142   for a reader who asks for less motion. */
143.hourglass { display: inline-grid; vertical-align: middle; }
144.hourglass .pe { grid-area: 1 / 1; }
145.hourglass .top { animation: sand-top 1.5s steps(1, end) infinite; }
146.hourglass .bottom { animation: sand-bottom 1.5s steps(1, end) infinite; }
147@keyframes sand-top { 0% { opacity: 1; } 50% { opacity: 0; } }
148@keyframes sand-bottom { 0% { opacity: 0; } 50% { opacity: 1; } }
149@media (prefers-reduced-motion: reduce) {
150  * { scroll-behavior: auto !important; }
151  .hourglass .top, .hourglass .bottom { animation: none; }
152  .hourglass .bottom { opacity: 0; }
153}
154
155/* A call to Jev, as a window that folds, and a probability as a rule with a square on it
156   (wire.rs, after lmjtfy's tool-call panels). */
157details.win > summary { cursor: pointer; list-style: none; }
158details.win > summary::-webkit-details-marker { display: none; }
159details.win > summary .fold::before { content: "+"; }
160details.win[open] > summary .fold::before { content: "\2013"; }
161.fold { width: 1ch; text-align: center; }
162.wire { display: grid; gap: 0.3rem; min-width: 0; }
163.wire + .wire { border-top: 1px dotted var(--ink); padding-top: 0.8rem; }
164.json .k { font-weight: 500; }
165.json .s { color: var(--plum); }
166.json .n { background: var(--paper); padding: 0 0.15em; }
167.bars { display: grid; gap: 0.55rem; margin-top: 1rem; }
168.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; align-items: baseline; }
169.bar .label { font: 1.2rem/1.1 var(--pixel); overflow-wrap: anywhere; justify-self: start; padding: 0 0.3rem; background: var(--grey); }
170.bar.won .label { background: var(--ink); color: var(--paper); }
171.bar .pct { font: 1.2rem/1.1 var(--pixel); font-variant-numeric: tabular-nums; }
172.bar .track { grid-column: 1 / -1; height: 1px; background: var(--ink); position: relative; margin-block: 4px 5px; }
173.bar .thumb { position: absolute; top: -4px; width: 9px; height: 9px; margin-left: -4px; background: var(--ink); }
174.bar:not(.won) .thumb { background: var(--paper); border: 1px solid var(--ink); }
175/* A decision is made at this point on the rule. */
176.bar .cut { position: absolute; top: -9px; width: 0; height: 19px; border-left: 1px dashed var(--plum); }
177
178/* A flow drawn from data (flow.rs): steps down the left, the ways each can end on the right. */
179.flow-svg { overflow-x: auto; min-width: 0; }
180.flow-svg svg { display: block; width: 100%; min-width: 660px; height: auto; font: 11px var(--mono); }
181.flow-svg rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
182.flow-svg text { fill: var(--ink); }
183.flow-svg text.head { font-weight: 500; }
184.flow-svg text.dim { opacity: 0.65; }
185.flow-svg path { stroke: var(--ink); stroke-width: 1; fill: none; }
186.flow-svg polygon { fill: var(--ink); }
187.flow-svg g.jev rect { fill: var(--pink); stroke-width: 2; }
188.flow-svg g.end rect { fill: var(--ink); }
189.flow-svg g.end text { fill: var(--paper); }
190.flow-svg g.exit rect { fill: var(--grey); stroke-dasharray: 3 3; }