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