/* ===========================================================================
Manifold — the look of the pages *beside* the front one (Help, About,
Contact).
`site.css` is the front page's own stylesheet, and it came from the design
with its styling in inline attributes, so it defines almost no classes. These
three pages are written by hand and wear classes, which is why the chrome
they share lives here rather than there.
Built out of the app's tokens (`tokens.css`), so the page and a screenshot of
the program agree in both faces. Every element wears a class and the class
carries the look — the rule the app states for itself, and the reason the
design this came from was re-expressed rather than pasted: a prototype keeps
its styling in inline attributes because the medium requires it.
=========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 16px/1.65 var(--font-ui);
-webkit-font-smoothing: antialiased;
/* The whole page answers a theme change the way the app's chrome does. */
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
body[dir="rtl"] { font-family: var(--font-ui); }
::selection { background: var(--selection); }
/* The bar, the brand and the page's own width live in `controls.css` now, with
the rest of the shared chrome — the front page loads `site.css` rather than
this file, and once its header became the same markup as everybody else's it
needed the same rules. Moved 2026-09-12, when the site was made to work on a
phone and the front page was the one page the media queries could not reach. */
/* A control the reader presses: the app's shape, the app's hover, the app's
answer to a press. Never a hover the neighbours do not have. */
.chip {
border: 1px solid var(--border); background: none; cursor: pointer;
font: inherit; font-size: 13px; line-height: 1.4;
}
/* ---- Buttons ---- */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: var(--radius-control);
border: 1px solid var(--border); background: var(--surface); color: var(--text);
font: inherit; font-size: 15px; font-weight: 550; text-decoration: none; cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out),
top var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}
/* The app's lift and press: `top`, never a transform — a transformed control is
the frame its own light is fixed to, and the light jumps off it. */
.btn:hover:not(:disabled) { background: var(--control-hover); border-color: var(--glass-rim); top: -1px; box-shadow: var(--control-lift); }
.btn:active:not(:disabled) { top: 0; box-shadow: none; }
.btn.primary {
background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
}
/* **The white is said again here**, exactly as the app has to say it: the base
hover sets `color` and is the more specific selector, so a primary button
loses its own colour the moment the pointer arrives without this. */
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; box-shadow: var(--control-lift); }
/* ---- Sections ---- */
.hero { padding: 96px 0 72px; }
.eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-faint); margin: 0 0 14px;
}
h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 20px; }
h2 { font-size: clamp(25px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
h3 { font-size: 17px; margin: 0 0 6px; }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--text-muted); max-width: 60ch; margin: 0 0 28px; }
.note { color: var(--text-muted); font-size: 15px; max-width: 62ch; }
section { padding: 72px 0; border-top: 1px solid var(--border-soft); }
section:first-of-type { border-top: 0; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 28px; }
.card {
/* **A box is a surface, not an outline.** A line round every card is a page
drawn as a form; the surface and the shadow already say where the card ends,
and the page reads as paper rather than as a table of fields. */
background: var(--surface); border: 0;
border-radius: var(--radius-lg); padding: 20px 22px;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-spring);
}
.card:hover { top: -2px; box-shadow: var(--shadow-md); }
.card p { margin: 0; color: var(--text-muted); font-size: 14.5px; }
.card .glyph { color: var(--math-accent); font-size: 20px; line-height: 1; margin-bottom: 10px; display: block; }
/* A list of things taken as read: dense, quiet, and not competing with the
things above it that are the point. */
.taken { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.taken li {
font-size: 13px; color: var(--text-muted);
border: 0; border-radius: 999px; padding: 4px 11px;
background: var(--surface);
}
/* ---- The paper, for showing what the app shows ---- */
.paper {
background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--paper-shadow);
padding: 26px 30px; color: var(--text);
font-family: var(--font-body);
}
.paper[dir="rtl"] { font-family: var(--font-body-he); }
/* ---- Downloads ---- */
.downloads { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 26px 0; }
.dl {
display: grid; gap: 6px; align-content: start;
background: var(--surface); border: 0; border-radius: var(--radius-lg);
padding: 18px 20px; text-decoration: none; color: var(--text);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-spring);
}
/* Only a download card lifts: help's key tables wear `.dl` too, and a block of
text that rises under the pointer promises a press it cannot keep. */
a.dl:hover { top: -2px; box-shadow: var(--shadow-md); }
.dl strong { font-size: 16.5px; }
.dl span { font-size: 14px; color: var(--text-muted); }
.dl em { font-size: 12.5px; color: var(--text-faint); font-style: normal; }
.needs { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14.5px; }
.needs td { padding: 9px 0; border-top: 1px solid var(--border-soft); vertical-align: top; }
.needs td:first-child { color: var(--text); font-weight: 550; padding-inline-end: 24px; white-space: nowrap; }
.needs td:last-child { color: var(--text-muted); }
pre {
background: var(--surface-alt); border: 0;
border-radius: var(--radius-md); padding: 14px 16px; overflow-x: auto;
font-size: 13.5px; line-height: 1.6;
}
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/**
* **A command is left-to-right wherever it is written about.**
*
* `.mfld` came out as `mfld.` and `\alpha` as `alpha\` on the Hebrew pages: a
* dot and a backslash are *neutral* characters, so the bidi algorithm places
* them by the direction of the paragraph around them, and around them is
* Hebrew. Isolating each one settles it — the same rule the editor itself
* follows for a formula, which is always `dir="ltr"` inside a paragraph that
* may not be.
*
* **`kbd` is deliberately not here.** A shortcut is written as several of them
* with a `+` between — `Ctrl+N` — and the `+` is outside
* the elements, so isolating each one would make three runs the RTL paragraph
* then orders right to left: `N+Ctrl`. They contain only strong Latin letters,
* so the algorithm already keeps them together and in order.
*/
code,
pre,
samp {
direction: ltr;
unicode-bidi: isolate;
}
footer { border-top: 1px solid var(--border); padding: 28px 0 56px; color: var(--text-faint); font-size: 13.5px; }
footer a { color: var(--text-muted); }
/* ---- Arriving ----
The app's own gesture: a thing arrives rather than appearing. The starting
state is written by `site.js`, not here — the same mechanism the front page
uses, so there is one of them rather than two, and a page whose script fails
shows its words rather than a blank sheet. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* Keyboard focus is drawn in `controls.css`, for every page alike. */
/* **The picture of the app wears the face the reader is in.** A light screenshot
on a dark page is a photograph of a different program; the app has two faces
and the page shows the matching one. */
.shot {
width: 100%; height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--paper-shadow);
transition: opacity var(--dur-base) var(--ease-out);
}
/* **The donate page.** Chips, a field and a button — the site's own controls,
which are plainer than the app's because a page has no glass to sit on. */
.sup-amounts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }
.sup-chip {
cursor: pointer;
font: inherit;
font-size: 14px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-control);
padding: 7px 14px;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sup-chip:hover { border-color: var(--accent); }
.sup-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sup-own {
font: inherit;
font-size: 14px;
color: var(--text);
padding: 7px 12px;
/* Wide enough for "1000.00" and no wider — a money field the width of the
page invites a number nobody meant. */
width: 130px;
}
.sup-wrong { color: var(--danger, #c0392b); font-size: 13.5px; margin: 10px 0 0; }
.sup-go { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
/* The button is the site's own `.btn.primary`, not a new one — it already has
the accent, the text colour on it and the hover. What it lacks is a disabled
state, because nothing else on the site has one. */
.btn.primary:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.sup-said { font-size: 13.5px; color: var(--text-muted); }
.sup-small { font-size: 13.5px; color: var(--text-faint); margin-top: 12px; }
/* **Arriving at one command among two hundred and forty-seven.**
A search result takes the reader to an entry in the reference below, and a
jump that lands on an unmarked line in a list that long is a jump that leaves
them looking. The app has a rule about this — a proofing card takes you to the
phrase and does not merely put it on screen — and this is the page's cheapest
honest version of it: the entry says which one it is, briefly.
`scroll-margin-top` because the heading would otherwise land under the top
bar, which reads as having jumped to the wrong place. */
#every dt {
scroll-margin-top: 84px;
border-radius: var(--radius-control);
}
/* **And the sections themselves**, for the same reason one level up. The rule
above was written for a command entry, and nothing linked to a *section* by
its address until the front page's cards did — so every one of them landed
with the heading thirty-three pixels above the top of the window, which reads
as having jumped to the wrong place. */
main.wrap h2[id],
main.wrap h3[id] {
scroll-margin-top: 84px;
}
/* **What the command is**, under its name and shortcut. The reference was a
list of names, which tells a reader who already knows exactly what they
already knew; this is the sentence the app itself shows in the command
palette, printed here from the same source. */
.cmd-what {
display: block;
margin-top: 2px;
opacity: 0.85;
}
#every dd kbd + .cmd-what { margin-top: 5px; }
#every dt:target {
background: color-mix(in srgb, var(--accent) 16%, transparent);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
/* It fades rather than staying lit: the mark is for finding the line, and a
permanent highlight on a page somebody goes on reading is a distraction
they cannot dismiss. */
animation: found 2.4s var(--ease-out) forwards;
}
@keyframes found {
0%, 55% { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}