/* After typesafe.ai: near-black on white, one pink band, ordered-dither dot
   fields, and old operating system windows (black title bar, grey body, inset
   double border). One look, light only, as theirs is.
   This is the part every Jev site shares; a site's own styles come after it.
   The dither fields are drawn into --dither-paper and --dither-pink by ui.js. */
@font-face { font-family: "Inter Tight"; font-weight: 500; font-display: swap; src: url("/fonts/inter-tight-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url("/fonts/vt323.woff2") format("woff2"); }
/* SerenityOS's pixel emoji, the four the components draw (`PixelEmoji`): fetched only by a page that shows one. */
@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; }
:root {
  --ink: #1e1e1e;
  --paper: #fefefe;
  --grey: #dedede;
  --mid: #c4c4c4;
  --pink: #f386a1;
  --plum: #8a2456;
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --pixel: "VT323", "Courier New", monospace;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* The paper's dither is the body's, so two white sections share one field
   with no seam where the second begins. */
body {
  margin: 0; color: var(--ink);
  background: var(--paper) var(--dither-paper, none) top center / 1200px 900px repeat;
  image-rendering: pixelated;
  font: 14px/1.5 var(--mono);
}
.wrap { max-width: 46rem; margin: 0 auto; padding-inline: 16px; }
.sheet { padding-block: 0 3.5rem; }
.band {
  background: var(--pink) var(--dither-pink, none) top center / 1200px 900px repeat;
  image-rendering: pixelated; padding-block: 2.5rem 3rem;
  border-block: 1px solid var(--ink);
}

/* Reading aids every page owns. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.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); }
.skip:focus { top: 8px; }

nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
nav a, nav span {
  font: 500 1.05rem/1 var(--display); letter-spacing: -0.02em;
  padding: 0.55rem 0.5rem; background: var(--paper); color: var(--ink); text-decoration: none;
}
nav a.dark { background: var(--ink); color: var(--paper); }
/* The dark links sit together on the right. */
nav a:first-child { margin-right: auto; }

.headline { position: relative; margin-block: 3rem 2.5rem; padding: 1.25rem 0.75rem; }
/* Crop marks, as around their headlines. */
.headline::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 10px 1px,
    linear-gradient(var(--ink), var(--ink)) top left / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) top right / 10px 1px,
    linear-gradient(var(--ink), var(--ink)) top right / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) bottom left / 10px 1px,
    linear-gradient(var(--ink), var(--ink)) bottom left / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) bottom right / 10px 1px,
    linear-gradient(var(--ink), var(--ink)) bottom right / 1px 10px;
  background-repeat: no-repeat;
}
.eyebrow { font: 500 0.95rem var(--display); letter-spacing: -0.01em; margin: 0 0 0.75rem; text-align: center; }
h1 {
  font: 500 clamp(2.6rem, 11vw, 6rem)/0.92 var(--display);
  letter-spacing: -0.045em; margin: 0; text-align: center; text-wrap: balance;
}

/* A window. */
.win { border: 1px solid var(--ink); background: var(--grey); min-width: 0; }
.bar-title {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  background: var(--ink); color: var(--paper);
  font: 1.25rem/1 var(--pixel); padding: 0.2rem 0.4rem; min-height: 1.6rem;
}
.bar-title .meta { margin-left: auto; color: var(--mid); }
.bar-title a { color: inherit; }
/* A section's heading, when the window is one: the bar's own text. */
.bar-title :is(h2, h3) { font: inherit; margin: 0; }
.win > .body {
  margin: 3px; border: 1px solid var(--ink); padding: 0.9rem; min-width: 0;
  display: grid; gap: 0.9rem;
}
.win.white > .body { background: var(--paper); }
.icon { width: 1.1rem; height: 1.1rem; flex: none; shape-rendering: crispEdges; }
.icon.big { width: 3rem; height: 3rem; background: var(--paper); border: 1px solid var(--ink); padding: 3px; }
.stack { display: grid; gap: 1.25rem; min-width: 0; }

form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
input {
  flex: 1 1 14rem; min-width: 0;
  font: 15px var(--mono); color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: 0; padding: 0.6rem 0.7rem;
}
button {
  font: 1.35rem/1 var(--pixel); padding: 0.5rem 1.1rem; border-radius: 0; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
}
button:disabled { opacity: 0.55; cursor: progress; }
button.ghost { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
input:focus-visible { outline-offset: 0; }

pre { margin: 0; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.fine { margin: 0; font-size: 0.8rem; }
.note { margin: 0.25rem 0 0; font: 1.2rem/1.15 var(--pixel); }
.note::before { content: "! "; }
.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; }

/* One row: a label, a value cut with an ellipsis instead of wrapping, and a
   button that copies it (ui.js, `data-copy`). Where the value would be under
   12rem it drops to a line of its own. */
.share { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; min-width: 0; }
.share span, .share button { flex: none; white-space: nowrap; }
.share a, .share code { color: inherit; flex: 1 1 12rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A command is the point: it wraps rather than being cut. */
.win .clone code { white-space: normal; overflow-wrap: anywhere; flex-basis: 100%; }

footer { padding-block: 1.5rem 3rem; font-size: 0.8rem; }
footer a { color: inherit; }
footer .about { display: inline-grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; max-width: 30rem; }
/* Text set straight on the dot field gets paper of its own, so it reads. */
footer .about > span, footer .clone { background: var(--paper); padding: 0.4rem 0.6rem; }
footer .clone { margin-top: 0.9rem; max-width: 40rem; }

/* A pixel emoji (components.rs, `PixelEmoji`): the font's box is a little wider than tall, so it is
   given one, and a glyph it does not hold falls back to the system's. */
.pe { display: inline-block; font: 400 1em/1 "Pixel Emoji", sans-serif; width: 1.25em; text-align: center; vertical-align: -0.1em; }
/* An hourglass that turns over twice a second and a half: sand at the top, sand at the bottom
   (the two glyphs, one over the other, each shown for half of every turn). Still, at the top,
   for a reader who asks for less motion. */
.hourglass { display: inline-grid; vertical-align: middle; }
.hourglass .pe { grid-area: 1 / 1; }
.hourglass .top { animation: sand-top 1.5s steps(1, end) infinite; }
.hourglass .bottom { animation: sand-bottom 1.5s steps(1, end) infinite; }
@keyframes sand-top { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes sand-bottom { 0% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .hourglass .top, .hourglass .bottom { animation: none; }
  .hourglass .bottom { opacity: 0; }
}

/* A call to Jev, as a window that folds, and a probability as a rule with a square on it
   (wire.rs, after lmjtfy's tool-call panels). */
details.win > summary { cursor: pointer; list-style: none; }
details.win > summary::-webkit-details-marker { display: none; }
details.win > summary .fold::before { content: "+"; }
details.win[open] > summary .fold::before { content: "\2013"; }
.fold { width: 1ch; text-align: center; }
.wire { display: grid; gap: 0.3rem; min-width: 0; }
.wire + .wire { border-top: 1px dotted var(--ink); padding-top: 0.8rem; }
.json .k { font-weight: 500; }
.json .s { color: var(--plum); }
.json .n { background: var(--paper); padding: 0 0.15em; }
.bars { display: grid; gap: 0.55rem; margin-top: 1rem; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; align-items: baseline; }
.bar .label { font: 1.2rem/1.1 var(--pixel); overflow-wrap: anywhere; justify-self: start; padding: 0 0.3rem; background: var(--grey); }
.bar.won .label { background: var(--ink); color: var(--paper); }
.bar .pct { font: 1.2rem/1.1 var(--pixel); font-variant-numeric: tabular-nums; }
.bar .track { grid-column: 1 / -1; height: 1px; background: var(--ink); position: relative; margin-block: 4px 5px; }
.bar .thumb { position: absolute; top: -4px; width: 9px; height: 9px; margin-left: -4px; background: var(--ink); }
.bar:not(.won) .thumb { background: var(--paper); border: 1px solid var(--ink); }
/* A decision is made at this point on the rule. */
.bar .cut { position: absolute; top: -9px; width: 0; height: 19px; border-left: 1px dashed var(--plum); }

/* A flow drawn from data (flow.rs): steps down the left, the ways each can end on the right. */
.flow-svg { overflow-x: auto; min-width: 0; }
.flow-svg svg { display: block; width: 100%; min-width: 660px; height: auto; font: 11px var(--mono); }
.flow-svg rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.flow-svg text { fill: var(--ink); }
.flow-svg text.head { font-weight: 500; }
.flow-svg text.dim { opacity: 0.65; }
.flow-svg path { stroke: var(--ink); stroke-width: 1; fill: none; }
.flow-svg polygon { fill: var(--ink); }
.flow-svg g.jev rect { fill: var(--pink); stroke-width: 2; }
.flow-svg g.end rect { fill: var(--ink); }
.flow-svg g.end text { fill: var(--paper); }
.flow-svg g.exit rect { fill: var(--grey); stroke-dasharray: 3 3; }