/* The short prose pages: the blog index, a post, the FAQ, contact, the Discord
bot page, the MCP server's page and the Mods guide. One sheet, because between them they are four
tables, one prose column and one set piece, and three sheets of
near-identical furniture is how the old design ended up with `.blog` styling
the FAQ.
Every token here comes from cc.css, and so does the page kit: `.cols`, the
`.cx` context box, the `.sh` section head, `.kd`, `.fine` and `.qindex` were
hoisted there by #526. What is left of them below is only where one of these
four pages wants a different value. `.prose` is still page-local.
The page class shares its element with `.shell`, so the padding here is
longhand. A `padding:` shorthand would win on order and silently zero the
horizontal inset the masthead is aligned to. See DarkroomAssetsTest. */
.blog,
.faq,
.contact,
.botp {
padding-block: 22px 60px;
}
/* The Mods guide is the fifth page this sheet dresses, and it shares `.blog`
rather than repeating the rail and the prose column under a name of its own,
so the padding above already reaches it. `.mods` carries only its deltas.
The MCP server's page is the sixth and shares `.botp` on the same argument:
it is the bot page's furniture exactly, a wide context rail beside three
tables and a prose block, and it carries no delta at all. If it ever needs
one, it gets `.mcp` alongside rather than a sheet. */
/* ── kit deltas ─────────────────────────────────────────────────────────── */
/* The kit sets `.state`, `.cnt` and a row's `.m` with longhand, which leaves
line-height inherited from the box. This sheet set them with the `font:`
shorthand, which resets line-height to `normal`, and a chip in a flex row is
a line box, so the difference is a pixel or two of row height. */
.blog .cx .cxh .state, .faq .cx .cxh .state, .botp .cx .cxh .state,
.blog .cx li .m, .faq .cx li .m, .botp .cx li .m,
.blog .sh .cnt, .faq .sh .cnt, .botp .sh .cnt { line-height: normal; }
/* The meta beside a box's heading, rather than inside one of its rows. No
other section has one, so it did not go to cc.css. */
.blog .cx .cxh .m, .faq .cx .cxh .m, .botp .cx .cxh .m { font: 10.5px var(--mono); color: var(--ink-4); white-space: nowrap; }
/* docs.css styles a `.cxo` of its own and deliberately gives it no hover, so
hoisting this would have changed a page it does not belong to. */
.blog .cx .cxo:hover, .faq .cx .cxo:hover, .botp .cx .cxo:hover { color: var(--ink); }
/* ── prose ──────────────────────────────────────────────────────────────── */
/* Reading type, for a post and for a FAQ answer. Inter at 17px on 1.7 in the
first ink rung, not Literata at 16px on the second: the operator could not
read the first long post (2026-09-10, op:2026-09-10-0418-c31d), and a
technical post is mostly identifiers, which a sans carries at a size a serif
needs another two pixels for. The measure is 68ch of that face.
Vertical rhythm is one rule, `* + *`, so a paragraph, a list, a table and a
code block all sit the same distance apart and a heading only has to say how
much more air it wants above and how much less below. */
.prose { font: 17px/1.7 var(--reading); color: var(--ink); max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 500 27px/1.2 var(--display); font-variation-settings: "opsz" 48; letter-spacing: -.01em; color: var(--ink); margin-top: 2em; }
.prose h3 { font: 600 18.5px/1.3 var(--ui); color: var(--ink); margin-top: 1.7em; }
.prose h4 { font: 600 16px/1.4 var(--ui); color: var(--ink); margin-top: 1.5em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose a { color: var(--sig); text-decoration: underline; text-decoration-color: var(--sig-dim); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose a:hover, .prose a:focus-visible { text-decoration-color: currentColor; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { padding: 2px 0 2px 18px; border-left: 3px solid var(--sig); color: var(--ink-2); font-style: italic; }
.prose blockquote > * + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li, .prose li > ul, .prose li > ol { margin-top: .4em; }
.prose li::marker { color: var(--ink-3); }
.prose hr { border: 0; border-top: 1px solid var(--rule-2); margin-block: 2.2em; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
/* An identifier in running text is a chip: the mono face alone at .86em reads
as a lighter word, and a post like this one names two hundred of them. */
.prose code { font-family: var(--mono); font-size: .86em; color: var(--ink); background: var(--raise); border: 1px solid var(--rule); border-radius: 4px; padding: .08em .38em; }
.prose a code { color: inherit; }
/* A code block is the post's second column of reading, so it gets reading
size: 13.5px on 1.65, in the first ink rung, on the page's second surface.
The language rides on the `` as `data-lang` (App\Support\HighlightedCode)
and is painted into the corner; a fence with no language has no label. */
.prose pre { position: relative; font: 13.5px/1.65 var(--mono); color: var(--ink); background: var(--bg-2); border: 1px solid var(--rule-2); border-radius: 6px; padding: 15px 18px; overflow-x: auto; tab-size: 2; }
.prose pre code { font-size: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; }
.prose pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 7px; right: 11px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); pointer-events: none; }
/* Token colours for tempest/highlight's `hl-*` spans, all from the theme's own
palette so both themes stay contrast-checked: keywords in the off-hue,
strings in the add-hue, types in the notable amber, properties in the
agents blue. Scoped to `.prose` on purpose; a composed entry carries the
same spans and keeps its own plain code until someone decides otherwise. */
.prose .hl-keyword { color: var(--off); }
.prose .hl-type, .prose .hl-generic { color: var(--notable); }
.prose .hl-value { color: var(--add); }
.prose .hl-property { color: var(--d-agents); }
.prose .hl-attribute { color: var(--d-extend); }
.prose .hl-number, .prose .hl-literal { color: var(--t-notice); }
.prose .hl-operator { color: var(--ink-3); }
.prose .hl-variable { color: var(--ink); }
.prose .hl-comment { color: var(--ink-4); font-style: italic; }
/* Markdown tables: the release tables are a grid kit, but a post's table is
real `` markup from the renderer, and it had no rules at all. */
.prose table { width: 100%; border-collapse: collapse; font: 14.5px/1.5 var(--ui); }
.prose th, .prose td { padding: 9px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { font: 600 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--rule-2); }
.prose th:first-child, .prose td:first-child { padding-left: 0; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose td code { font-size: .9em; }
/* ── table column templates ─────────────────────────────────────────────── */
.tbl.t-posts .th, .tbl.t-posts .tr { grid-template-columns: 100px minmax(0, 1fr) 92px 64px; }
.tbl.t-ways .th, .tbl.t-ways .tr { grid-template-columns: 190px 210px minmax(0, 1fr) 96px; }
.tbl.t-kinds .th, .tbl.t-kinds .tr { grid-template-columns: 226px 132px minmax(0, 1fr); }
.tbl.t-cmds .th, .tbl.t-cmds .tr { grid-template-columns: 200px minmax(0, 1fr); }
.tbl.t-facts .th, .tbl.t-facts .tr { grid-template-columns: 200px minmax(0, 1fr); }
.tbl.t-cant .th, .tbl.t-cant .tr { grid-template-columns: 64px 250px minmax(0, 1fr); }
/* The tool list on /mcp. Without a template of its own a `.tbl` is a grid with
no columns, so all three cells stack into one and every row reads as three
lines; it did that from the day the page was written until 2026-09-20. */
.tbl.t-tools .th, .tbl.t-tools .tr { grid-template-columns: 168px 232px minmax(0, 1fr); }
.tbl.t-stories .th, .tbl.t-stories .tr { grid-template-columns: minmax(0, 1fr) 200px 72px; }
.tbl.t-story .th, .tbl.t-story .tr { grid-template-columns: 104px 96px minmax(0, 1fr); }
.tbl.t-watch .th, .tbl.t-watch .tr { grid-template-columns: 104px 96px minmax(0, 1fr); }
.tbl.t-posts .tr, .tbl.t-ways .tr, .tbl.t-kinds .tr, .tbl.t-cant .tr, .tbl.t-tools .tr { min-height: 46px; padding-top: 7px; padding-bottom: 7px; align-items: start; }
.tbl.t-stories .tr, .tbl.t-story .tr, .tbl.t-watch .tr { min-height: 46px; padding-top: 7px; padding-bottom: 7px; align-items: start; }
.tbl.t-stories .tr .t b, .tbl.t-story .tr .t b, .tbl.t-watch .tr .t b { display: block; font: 500 14px/1.3 var(--ui); color: var(--ink); white-space: normal; }
.tbl .tr .s { font: 12px/1.4 var(--ui); color: var(--ink-3); display: block; overflow: hidden; }
.tbl.t-posts .tr .t b { display: block; font: 500 14px/1.3 var(--ui); color: var(--ink); }
.tbl.t-ways .tr .t b, .tbl.t-kinds .tr .t b, .tbl.t-facts .tr .t b, .tbl.t-cant .tr .t b, .tbl.t-tools .tr .s b { font: 500 13px/1.35 var(--ui); color: var(--ink); white-space: normal; }
.tbl .tr .s code, .tbl .tr .s b { color: var(--ink-2); }
.tbl .tr .s a { color: var(--sig); }
.tbl .empty { grid-column: 1 / -1; padding: 16px 0; font: 12px var(--mono); color: var(--ink-4); }
/* A state pill: a dot in the state's own colour, then the word for it. The
kit's `.kd` is the release rail's mark, where the `` is a glyph and the
states are a diff's; these two pages paint a dot and name a switch instead,
so the whole variant is page-scoped over the top of it. */
.contact .kd, .botp .kd { gap: 6px; font-size: 11px; font-weight: 400; line-height: normal; }
.contact .kd i, .botp .kd i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; color: inherit; }
.contact .kd.k-on, .botp .kd.k-on { color: var(--add); }
.contact .kd.k-always, .botp .kd.k-always { color: var(--sig); }
.contact .kd.k-off, .botp .kd.k-off { color: var(--ink-4); }
.contact .kd.k-owner, .botp .kd.k-owner { color: var(--off); }
.contact .kd.k-new, .botp .kd.k-new { color: var(--sig); }
.contact .kd.k-new i, .botp .kd.k-new i { width: auto; height: auto; border-radius: 0; background: none; font-style: normal; color: inherit; }
/* ── blog ───────────────────────────────────────────────────────────────── */
.prose.post h2, .prose.post h3 { scroll-margin-top: calc(var(--mast-h) + 16px); }
.pmeta { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); font: 500 11.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.prose.post .pmeta + * { margin-top: 0; }
.prail { margin: 0; padding: 0; list-style: none; }
.prail li { padding: 7px 0; border-top: 1px solid var(--rule); font: 13px/1.4 var(--ui); }
.prail li:first-child { border-top: 0; padding-top: 0; }
.prail li a { color: var(--ink-2); }
.prail li a:hover, .prail li a:focus-visible { color: var(--sig); }
/* ── mods ───────────────────────────────────────────────────────────────── */
/* The guide's ten pages reuse the post's furniture: the same rail, the same
prose column, the same context box. What is below is only the two things a
post has no use for, because a post is one page and this is a section.
The rail's current row. A post's rail links to headings inside the page it is
already on, so nothing in it is ever "here"; the guide's rail links to nine
other pages and one that is this one, and the row for this one is a span
rather than a link to itself.
`justify-content` is here because the rail sits in a `.cx` box, and `.cx li`
is a flex row pushed apart at the ends so a label sits opposite its value.
Every other row holds one link and nothing moves, but the marker below is a
second item on this row, so without this it sits against the far edge with
the title it marks pushed away from it. */
.mods .prail li.here { color: var(--ink); font-weight: 500; justify-content: flex-start; gap: 6px; }
.mods .prail li.here::before { content: "▸"; color: var(--sig); }
/* The feet. Both steps sit on one row and both are the same size: which way
the reader is going is the ``, not the weight. */
.modfeet { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2.6em; padding-top: 18px; border-top: 1px solid var(--rule); }
.modfeet .step { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; padding: 11px 13px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-2); }
.modfeet .step:hover { border-color: var(--sig); }
.modfeet .step i { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ink-4); }
.modfeet .step b { font: 500 14px/1.35 var(--ui); color: var(--ink); }
.modfeet .step.on { text-align: right; }
/* The section index. A `.qindex` with a second line, which is the whole reason
it is not one: the FAQ's rows are questions and fit on one line, and these
carry a sentence saying what is on the page. */
.modindex { margin: 0; padding: 0; list-style: none; }
.modindex li { border-top: 1px solid var(--rule); }
.modindex li:first-child { border-top: 0; }
.modindex li a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 0; padding: 12px 0; text-decoration: none; }
.modindex .n { grid-row: 1 / span 2; font: 500 10.5px/1.7 var(--mono); color: var(--ink-4); }
.modindex .t { font: 500 16px/1.35 var(--ui); color: var(--ink); }
.modindex .d { font: 13.5px/1.5 var(--prose); color: var(--ink-3); }
.modindex li a:hover .t { color: var(--sig); }
/* ── mods api ───────────────────────────────────────────────────────────── */
/* The generated half of the section. Every rule below is about one thing: a
page here is between thirty and four hundred and forty-seven symbols long,
so a reader scrolling it needs the names to stand out from the bodies and
the bodies to stay out of the way until asked for.
The filter is cc.js's, so nothing here is behaviour. The one state it needs
a rule for is a hidden row, which the kit sets `hidden` on and the browser
already handles. */
/* The jump strip over the page: every noun, or on the types page every name in
the file. Wrapping pills rather than a column, because 447 names down the
side is a page of its own. */
.majump { display: flex; flex-wrap: wrap; gap: 5px; margin: 1.6em 0 2em; }
.majump a { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; background: var(--bg-2); }
.majump a:hover, .majump a:focus-visible { border-color: var(--sig); }
.majump code { font: 12px var(--mono); color: var(--ink-2); }
.majump a:hover code { color: var(--sig); }
.majump i { font: 500 10px/1 var(--mono); font-style: normal; color: var(--ink-4); }
.majump.wide code { font-size: 11px; }
.majump.wide a { padding: 3px 7px; }
/* A group heading: a noun, or an event map. It is its own block rather than a
wrapper around the symbols under it because the filter hides a group by
hiding one element, so the heading and the description it carries have to be
that one element or a filtered-out noun leaves its prose behind. */
.manoun { margin: 2.4em 0 1.1em; padding-bottom: 9px; border-bottom: 1px solid var(--rule-2); }
.manoun h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin: 0; scroll-margin-top: calc(var(--mast-h) + 16px); }
.manoun h2 code { font-family: var(--mono); font-size: .8em; color: var(--ink); }
.manote { margin: 8px 0 0; font: 12.5px/1.5 var(--ui); color: var(--ink-3); }
.manote code { font: 11.5px var(--mono); color: var(--ink-2); }
/* One symbol. The left border is the whole device: it makes a run of forty
verbs read as forty things rather than as one wall, and it costs no vertical
space, which a box with its own padding would. */
.masym { margin: 0 0 1.5em; padding-left: 13px; border-left: 2px solid var(--rule); scroll-margin-top: calc(var(--mast-h) + 16px); }
.masym:target { border-left-color: var(--sig); }
.masym h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 .5em; font-size: 16px; }
.masym h3 code { font-family: var(--mono); font-size: 14.5px; color: var(--ink); }
.masym > * + * { margin-top: .6em; }
/* The kind, said once. `optional`, `type`, `interface`, `verb`: all of them
are one short word qualifying the name beside them. */
.matag { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); border: 1px solid var(--rule-2); border-radius: 3px; padding: 3px 5px; }
/* The anchor link and the count sit at the end of a heading and neither is
part of the name, so both stay quiet until the row is hovered. */
.mahash { font: 12px var(--mono); color: var(--ink-4); text-decoration: none; opacity: 0; }
.masym:hover .mahash, .manoun:hover .mahash, .mahash:focus-visible { opacity: 1; }
.mact { margin-left: auto; font: 500 10.5px/1 var(--mono); color: var(--ink-4); white-space: nowrap; }
/* The mined doc comment. It is somebody else's prose about their own code, so
it is set a size down from the page's own writing rather than being made to
look like it. */
.madesc { font: 14px/1.6 var(--prose); color: var(--ink-2); max-width: 74ch; }
.madesc + .madesc { margin-top: .55em; }
.maparams { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font: 13px/1.5 var(--ui); }
.maparams dt code { font: 12px var(--mono); color: var(--ink); }
.maparams dd { margin: 0; color: var(--ink-3); }
.mareturns { font: 13px/1.5 var(--ui); color: var(--ink-3); }
.mareturns .k { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-right: 6px; }
/* A signature and a mined example are both TypeScript and both belong to the
declarations, so they read as one thing at one size. `.prose pre` gives them
the frame; these only take it down a point, because a signature is one line
and wants to sit closer to its name than a code block would. */
.masym pre { font-size: 12.5px; padding: 10px 12px; }
.masig { background: var(--bg-2); }
.maeg { border-left: 2px solid var(--rule-2); }
/* Payload and result, which is the one fact a hook author is on the events
page for. A two-column grid rather than prose: they are always exactly two
type names and reading them off a sentence is slower. */
.mashape { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.mashape dt { font: 500 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.mashape dd { margin: 0; }
.mashape dd code { font: 12.5px var(--mono); color: var(--ink); }
/* A folded declaration. The summary is the line count, because that is the
thing a reader is deciding on: `CoreEngineInterface` is 846 lines and its
name says nothing about whether opening it is a good idea. */
.mafold summary { cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--ink-3); padding: 6px 0; }
.mafold summary:hover { color: var(--sig); }
.mafold[open] summary { color: var(--ink-4); }
.madecl pre { max-height: 60vh; overflow: auto; }
/* The index: every symbol on the site's largest single list. One line each,
three columns, and the description is allowed to run out rather than wrap,
because a wrapped second line here doubles the page for a hint. */
.malist { margin: 1.4em 0 0; padding: 0; list-style: none; }
.malist li { border-top: 1px solid var(--rule); }
.malist li:first-child { border-top: 0; }
.malist li a { display: grid; grid-template-columns: minmax(0, 22em) max-content minmax(0, 1fr); align-items: baseline; gap: 4px 14px; padding: 7px 0; text-decoration: none; }
.malist code { font: 12.5px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.malist li a:hover code { color: var(--sig); }
.malist .g { font: 12.5px/1.5 var(--ui); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manone { font: 13px/1.6 var(--ui); color: var(--ink-3); padding: 12px 0; }
.manone a { color: var(--sig); }
/* The rail's filter box. `.fbox` is capped at 380px for a toolbar that spans
the page; in a rail it is the rail's width or it is a box with a gap beside
it. */
.modsapi .cx .fbox { max-width: none; margin: 0 0 9px; }
.modsapi .cx .manone { padding: 0 0 9px; }
/* Below the rail's breakpoint the index's three columns have nowhere to go,
so the hint drops and the name takes the row. It is a hint; the page it
links to has the whole description. */
@media (max-width: 860px) {
.malist li a { grid-template-columns: minmax(0, 1fr) max-content; }
.malist .g { display: none; }
.majump.wide { max-height: 40vh; overflow-y: auto; }
}
/* ── FAQ ────────────────────────────────────────────────────────────────── */
.qlist { margin: 0; }
.qa { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--mast-h) + 16px); }
.qa:last-child { border-bottom: 0; margin-bottom: 0; }
.qa dt { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; font: 400 21px/1.2 var(--display); font-variation-settings: "opsz" 96; color: var(--ink); }
.qa dt .n { font: 500 10.5px/1 var(--mono); color: var(--sig); }
.qa dt .hash { margin-left: auto; font: 12px var(--mono); color: var(--ink-4); opacity: 0; }
.qa:hover dt .hash, .qa dt .hash:focus-visible { opacity: 1; }
.qa dd { margin: 0; }
.qa dd.prose { font-size: 15.5px; line-height: 1.6; max-width: 74ch; }
.qa dd.prose > * + * { margin-top: .7em; }
/* ── the bot: the embed a server actually receives ──────────────────────── */
.dmock { display: flex; flex-direction: column; gap: 8px; }
.dping { font: 12px/1.4 var(--ui); color: var(--ink-3); }
.dping .ping { color: var(--sig); background: var(--sig-ghost); border-radius: 3px; padding: 1px 4px; }
.dembed { border-left: 3px solid var(--sig); border-radius: var(--radius); background: var(--raise); padding: 11px 13px 12px; }
.dembed p { font: 12.5px/1.45 var(--ui); color: var(--ink-2); }
.dembed p + p { margin-top: 7px; }
.dembed b { color: var(--ink); font-weight: 500; }
.dembed code { font: 11.5px var(--mono); color: var(--ink); }
.dauthor { display: flex; align-items: center; gap: 7px; font: 500 11px var(--mono) !important; color: var(--ink-3) !important; }
.dav { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sig); color: var(--bg); font: 600 8.5px/1 var(--mono); }
.dtitle { font: 500 14px/1.3 var(--ui) !important; color: var(--sig) !important; }
.dhl { margin: 9px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dhl li { border-left: 1px solid var(--rule-2); padding-left: 9px; }
.dhl b { display: block; font: 500 12.5px/1.3 var(--ui); color: var(--ink); }
.dhl span { display: block; font: 12px/1.35 var(--ui); color: var(--ink-3); }
.dfields { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 11px; }
.df { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.dv { display: block; font: 12px/1.4 var(--ui); color: var(--ink-2); }
.dfoot { margin-top: 10px; font: 10.5px var(--mono) !important; color: var(--ink-4) !important; }
.dbtns { display: flex; gap: 7px; margin-top: 10px; }
.dbtn { font: 500 11px/1 var(--ui); color: var(--bg); background: var(--sig); border-radius: 3px; padding: 7px 10px; }
.dbtn.ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-2); }
/* the three setup steps: a list, not a table, because the order is the point */
.steps { margin: 0; padding-left: 1.35em; }
.steps li { font: 13.5px/1.5 var(--prose); color: var(--ink-2); padding: 7px 0; border-top: 1px solid var(--rule); }
.steps li:first-child { border-top: 0; }
.steps li b { color: var(--ink); font-weight: 500; }
.steps li code { font: 12px var(--mono); color: var(--ink); }
/* Three and four fixed columns do not fit a phone; the contact and bot tables
ran 43px to 164px past the edge at 390 and gave the whole page a sideways
scroll. Same answer as the reference tables: the table scrolls, not the
page. The two-column tables wrap fine and stay as they are. */
@media (max-width: 860px) {
.tbl.t-ways, .tbl.t-kinds, .tbl.t-cant, .tbl.t-posts, .tbl.t-story, .tbl.t-watch, .tbl.t-tools { display: block; overflow-x: auto; }
.tbl.t-ways .th, .tbl.t-ways .tr, .tbl.t-kinds .th, .tbl.t-kinds .tr, .tbl.t-cant .th, .tbl.t-cant .tr, .tbl.t-posts .th, .tbl.t-posts .tr { min-width: 560px; }
.tbl.t-tools .th, .tbl.t-tools .tr { min-width: 620px; }
.tbl.t-cmds .th, .tbl.t-cmds .tr, .tbl.t-facts .th, .tbl.t-facts .tr { grid-template-columns: 120px minmax(0, 1fr); }
.tbl.t-story .th, .tbl.t-story .tr { min-width: 520px; }
.tbl.t-watch .th, .tbl.t-watch .tr { min-width: 520px; }
.tbl.t-stories .th, .tbl.t-stories .tr { grid-template-columns: minmax(0, 1fr) 118px 56px; }
/* A phone gets reading size a point down, and a post's table scrolls
rather than squeezing four columns of identifiers into 360px. */
.prose { font-size: 16px; }
.prose h2 { font-size: 24px; }
.prose pre { font-size: 13px; padding: 13px 14px; }
.prose table { display: block; overflow-x: auto; }
}