pageship 0.1.1 → 0.3.0

package/dist/skills/pageship-docs/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: pageship-docs
+description: First step for any document people read, such as a report, plan, spec, explainer, review, decision record or slide deck, in HTML or Markdown. Load it before any other pageship- skill. Use when the user asks for one of these documents, asks to regenerate, redesign, edit, rename, move or copy an HTML source file, or asks to record whether they want HTML or Markdown.
+license: MIT
+metadata:
+  version: "0.3.0"
+---
+
+# Pageship documents
+
+The result is Markdown or one standalone HTML source file. You never publish yourself; you hand the file to the `pageship` skill, which does.
+
+## 1. Settle the format
+
+Take the first rule that applies.
+
+- **Prompt rule.** The request names HTML or Markdown, or asks to convert a file from one to the other. Follow it.
+- **Existing-file rule.** A request to regenerate, redesign, edit, rename, move or copy an existing file keeps its format.
+- **Fixed-format rule.** A tool or a repository convention fixes the file as Markdown: READMEs, changelogs, glossaries, ADRs, agent instruction files, skill files, issue and pull request text, commit messages.
+- **Project rule.** The project's agent instructions (`AGENTS.md`, `CLAUDE.md` and the files they import) record a format preference. Follow it.
+- **Global rule.** The global agent instructions (such as `~/.claude/CLAUDE.md` or `~/.codex/AGENTS.md`) record one. Follow it.
+- **Ask rule.** Nothing records a format. Read [the ask rule](references/ask.md), ask its question, and stop until the user answers.
+
+## 2. Pick the document kind
+
+For Markdown, go to step 3.
+
+| Kind            | The reader wants                                          | Skill                      |
+| --------------- | --------------------------------------------------------- | -------------------------- |
+| Report          | What was found, what it means and what to do about it     | `pageship-report`          |
+| Plan            | Where the work is going, the steps and what is decided    | `pageship-plan`            |
+| Spec            | A contract for what to build and how to test it           | `pageship-spec`            |
+| Explainer       | How something works                                       | `pageship-explainer`       |
+| Review report   | Findings on a change or plan, by severity, with a verdict | `pageship-review-report`   |
+| Decision record | What was decided, the options and the consequences        | `pageship-decision-record` |
+| Slide deck      | Slides to present from a browser                          | `pageship-slide-deck`      |
+
+Load the skill of the kind that fits. When none fits exactly, or its skill is not installed, use the closest installed kind and tell the user which.
+
+## 3. Choose the path
+
+A new file goes at the path the user names, or else where the project keeps such documents, or else at a short descriptive path in the project, such as `docs/<name>.html`.
+
+## 4. Write the file
+
+For Markdown, write one file by the [content rules](references/content.md) alone, then hand over.
+
+For HTML, the kind skill gives the parts, the order and its own rules, which win over this skeleton:
+
+1. **Gather.** Read the request, every file it points to and the project's glossary. Where the kind asks for an **inventory**, list every item of the source in its order and words, until an item covers every sentence of the source. Done when you can point to where each fact you plan to write comes from.
+2. **Sort.** Put every statement of the source into exactly one of the kind's parts.
+3. **Write.** One file by the [content rules](references/content.md), the [file rules](references/file.md) and the [design rules](references/design.md), in the kind's order, under its headings or the closest glossary terms. A part the source leaves empty keeps its heading and one line saying the source gives none. Done when every sorted statement, or every inventory item, is in the file.
+4. **Check.** Run [the check](references/check.md), with the checks the kind and pattern skills add.
+
+Then hand over. Your final message lists, however briefly you otherwise reply:
+
+- the file's path;
+- the structure you added that the source didn't have, as [the check lists it](references/check.md#the-structure-you-added);
+- the open questions, marking the ones you added;
+- the checks that ran and the ones you skipped;
+- what the kind and pattern skills add to this list.
+
+For an HTML file, end the hand-over with the next step for publishing. When the user asked in this conversation to publish this document, or accepted an offer to, load `pageship` and publish it. Otherwise, when the `pageship` skill is installed, offer to publish the file through it; for a file with a document marker, offer to publish the change as a new revision of its document.
+
+## Starting at a kind or pattern skill
+
+When the user named a kind skill, or named a pattern skill and asked for just that pattern, write HTML unless the request names another format, and start at step 3. A lone pattern is the file's main content, under an `h1`, with no parts to sort. In every other case, start at step 1.

package/dist/skills/pageship-docs/references/ask.md

@@ -0,0 +1,18 @@
+# The ask rule
+
+Ask once, with your multiple-choice tool when you have one (`AskUserQuestion` in Claude Code, `request_user_input` in Codex), or else as a numbered question. Offer exactly these choices:
+
+1.  HTML always
+2.  HTML in this project
+3.  HTML just this time
+4.  Markdown
+
+## Save the preference, only with consent
+
+Ask with the same tool:
+
+- after "HTML always", whether to save it to the global agent instructions; after "HTML in this project", to the project's. Name the file in the question;
+- after "Markdown", whether to save it, with the choices "This project", "All projects" and "Don't save";
+- after "HTML just this time", nothing.
+
+When the user agrees, add one plain sentence as its own paragraph at the end of the instruction file the agent loads, such as "Write documents for people to read as HTML source files, not Markdown." or "Write documents for people to read as Markdown, not HTML." When that file only imports another (a `CLAUDE.md` holding just `@AGENTS.md`), write to the imported file. Create a file only when no instruction file exists.

package/dist/skills/pageship-docs/references/check.md

@@ -0,0 +1,39 @@
+# Check before delivery
+
+Run these checks on the finished file and fix what they find.
+
+The files a check makes, such as screenshots, PDFs and scripts, are scratch: save them by absolute path in the system temporary folder, never in the project, and delete them, wherever they landed, once the check is done.
+
+## Checks that need no browser
+
+- Every `<script src>` and `<link rel="stylesheet">` tag matches a tag in the [file rules](file.md) exactly: the same URL, `integrity` and `crossorigin="anonymous"`. A script or stylesheet inside the file as a `data:` URL matches none. A hosted font matches by its address instead: a stylesheet link to `https://fonts.googleapis.com/css2?family=...`, with no `integrity`. A font preload (`rel="preload" as="font"`) needs no match.
+- No relative paths load anything: search for `src="` and `url(` and confirm each one is `https://`, `data:` or a `#fragment`.
+- The file uses nothing on the sandbox list in the file rules.
+- The marker is as the file rules say: the same last line as before, or none at all.
+- Every number, name and date in the file appears in the source. Each gap is an open question.
+- Light and dark each set every variable in [the design rules](design.md#the-looks-colour-variables), each colour clears its floor, `--accent-2` sits as far from `--accent` as the table says, and both accents colour something on screen.
+
+## Checks in a browser
+
+Use a browser tool when you have one, such as `agent-browser` or Playwright; without one, skip this section. Open the file from disk and:
+
+- At 1280px and at 390px wide, confirm the page doesn't scroll sideways: `document.documentElement.scrollWidth` is no larger than `clientWidth`.
+- Look at a screenshot at each width, in light and in dark. Fix overlapping, clipped or unreadable content.
+- Read the console. Fix every error, including failed integrity checks.
+- Use every control by keyboard and confirm it works and shows focus.
+
+## Claims
+
+Read the file sentence by sentence beside the source, captions, labels and tooltips included. Keep each claim the source states. A claim one step past it goes, or becomes an open question: a cause, when something starts or ends, a count, how far a rule reaches, or a new name for something the source names. A caption claims only what its figure draws. Done when you can point to the source's words behind every sentence.
+
+## The structure you added
+
+After every other check, the kind's and pattern skills' included, read the file top to bottom beside the source, and list for the hand-over every place they differ in structure:
+
+- headings, labels, headlines and numbering you wrote;
+- text you wrote that the source has no counterpart for, such as a summary, a lead or a slide's main point;
+- parts and items in a different order from the source's;
+- source lists you split, merged or grouped, such as five figures spread over three slides;
+- items you put under a part or in a place the source doesn't give them, such as a guess under assumptions or a decision shown as a deadline.
+
+A change a skill's rule made, such as a kind's order of the file, is still yours: list it. Write "kept the source's order" only when nothing moved. Done when a reader comparing the file with the source finds nothing your list leaves out.

package/dist/skills/pageship-docs/references/content.md

@@ -0,0 +1,29 @@
+# Content rules
+
+The source is the request and the files and data it points to, or the project's own material when the request asks about that. Other project files give terms, not content: name a relevant one in the hand-over instead of adding from it.
+
+## The glossary
+
+Look for the project's glossary: `CONTEXT.md`, `GLOSSARY.md`, a glossary page in the docs, or the README's terms section. Use its terms as written, and its preferred term over any word it says to avoid. Where it lacks a term, keep the source's word.
+
+## Say only what the source says
+
+- Every fact traces to the source: names, numbers, dates, owners, causes and outcomes come from it word for word or by plain arithmetic on its figures. So do links between facts: a reading rests on some evidence only when the source says so.
+- A gap stays a gap. Write it under **Open questions** as a question the reader can answer, such as "Which regions does the outage cover?", never filled with an example, a likely cause or a typical value. Say it is missing from the source ("the brief gives no March figure"), not from the world ("not recorded").
+- Decisions, assumptions and open questions stay apart, each under its own heading or label.
+- Label every number as the source does: measured, estimate, target or forecast, with its unit, period and source. A number the source gives without its kind gets no kind label.
+- Label illustrative or sample data as illustrative, next to the data.
+- Wording keeps its strength: quote the source where a paraphrase could change it. "Should" stays "should", "suggests" stays "suggests" and "we" stays "we". Give an item a status, such as agreed, decided, proposed, pending, done or blocked, only when the source uses that status for that item.
+- Add no interpretation, recommendation, option, reason or finding of your own unless the user asks for your analysis, and then label each as yours.
+
+## Describe code from what you read
+
+- Each claim about what code does names the function or file it comes from, in code you read in this session. A step belongs to the function that runs it, not to one that calls it or returns a value it acts on.
+- Counts and lists of files come from listing them, such as with `git ls-files`.
+- A test catches a bug only when you ran it against the bug, or traced the bug's case through the code.
+
+## Lead with the point
+
+- The first lines state the most important point: the finding, the decision or the answer.
+- Describe behaviour and outcomes, not the steps someone took to build them.
+- Write plainly: the short common word ("use", "is", "has", "to"), an adjective or adverb only where it states a fact from the source, and findings and recommendations at the source's strength. End on the last fact.

package/dist/skills/pageship-docs/references/design.md

@@ -0,0 +1,60 @@
+# Design rules
+
+## Who sets the look
+
+Take the look from the first source that has one:
+
+1. The user's explicit visual instructions.
+2. The project's design system: its tokens, stylesheets or brand guide.
+3. An installed design skill: one in your list of available skills, not a skill file found elsewhere on disk. Prefer Anthropic's `frontend-design`, then the Taste Skill stack (`design-taste-frontend` and its companion skills). Follow its guidance on type, colour values and character. When it asks questions or offers options, take its default and keep going.
+4. Otherwise, copy [the plain default](plain-default.md).
+
+Whatever sets the look, these rules own structure, density, reading width, print, the colour count below and the [file rules](file.md). A design skill's one-accent or colour-lock rule shapes the values it picks, but the colour count here wins whatever a design skill says about accents: two accents, four series colours and three status colours. A document is for reading: leave out the landing-page parts a design skill may suggest, such as hero banners, decorative sections, marketing copy and entrance animations.
+
+## The look's colour variables
+
+Every source file sets these fourteen variables in `:root`, once for light and once more under `@media (prefers-color-scheme: dark)`. The look's source fills their values: a design system from its tokens, a design skill from the palette it chooses, the plain default as written. Each takes a plain colour value: hex, `rgb()`, `hsl()`, `oklch()`, or `light-dark()` of those. Pattern skills colour their parts from these variables and no other colour.
+
+| Variable                     | Colours                                                                                                                                                                     | Floor against `--bg` |
+| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| `--bg`                       | The page background.                                                                                                                                                        |                      |
+| `--fg`                       | Text.                                                                                                                                                                       | 4.5:1                |
+| `--muted`                    | Secondary text: meta lines, captions, axis labels, connector labels.                                                                                                        | 4.5:1                |
+| `--line`                     | Hairlines: rules, table borders, frames, gridlines.                                                                                                                         |                      |
+| `--surface`                  | Tinted panels: callouts, code blocks, caption strips, diagram nodes.                                                                                                        |                      |
+| `--accent`                   | The first accent: the title area, section headings, callout bars, focus outlines and the focus of each figure.                                                              | 3:1                  |
+| `--accent-2`                 | The second accent: links, the title rule and quote bars. In each theme, at least 60° from the first in OKLCH hue, so it stands out from the first accent and from the page. | 4.5:1                |
+| `--series-1` to `--series-4` | Chart series and diagram node categories, in this order. Four hues apart from each other and from the accents.                                                              | 3:1                  |
+| `--good`, `--warn`, `--bad`  | A status the source gives, such as on track, at risk and blocked: green, amber and red tuned to the look.                                                                   | 3:1                  |
+
+Spend colour by the 60-30-10 rule: the neutrals fill most of the page, the first accent carries the look, and the second accent is the small share that stands out. Both accents colour something a reader sees in every source file, as the table places them. The first accent meets 4.5:1 where it colours text, such as headings.
+
+A status the source gives shows in the source's words, in an element with `data-status="good"`, `"warn"` or `"bad"` that carries the matching colour on a dot, border or bar beside the words; the words stay `--fg`. The words are the element's own text, or a `.status` label inside it when the element holds more, such as a card. Rate it only as the source's word does: good for done or on track, warn for at risk, bad for blocked, late or missed. Any other status, such as in progress or not started, stays `--muted` with no `data-status`.
+
+## Base rules every file meets
+
+- **Light and dark.** Both themes follow the system setting through `prefers-color-scheme`.
+- **Contrast.** Text meets WCAG AA: 4.5:1 for body text, 3:1 for large text, icons and control borders. Each colour variable meets its floor in the table above, in light and in dark.
+- **Reading width.** Prose lines hold about 70 characters (`max-width: 70ch` on prose).
+- **Type size.** Body text is at least 16px. Nothing a reader needs is smaller than 13px, including captions, table text, labels and code.
+- **Phone width.** At 390px wide the page never scrolls sideways and keeps at least 12px of side padding, so no text or figure frame touches the screen's edge. Wide content scrolls inside its own box: a `<div class="scroll">` (`overflow-x: auto`) around a diagram or chart, the `.table-scroll` box `pageship-table` gives, or a code block's own `pre`.
+- **Print.** A print stylesheet shows all content, expands anything collapsed (`details::details-content { content-visibility: visible }`), hides controls, prints dark text on white, and avoids breaking inside figures, table rows and callouts.
+- **Links and controls.** Hovering a link or control changes how it looks, such as a thicker underline or a tinted background, and keyboard focus shows a visible outline. Every control is a native interactive element. Before adding one, load `pageship-interaction`.
+- **Motion.** Nothing moves until the reader acts. Under `prefers-reduced-motion: reduce`, nothing animates and every state shows in full. Before making anything move, load `pageship-motion`.
+- **Headings.** One `h1`, then levels in order. The document has a `lang` attribute and a `title`.
+
+## The form of each figure
+
+Take each figure's form from what the reader wants of it. Before writing a form that has a pattern skill, load that skill, and follow it for every such figure in the file, including one an edit adds or changes.
+
+| The reader wants                                                                                               | Form                                   | Skill                  |
+| -------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ---------------------- |
+| To look up or compare exact values of items with two or more attributes                                        | Table                                  | `pageship-table`       |
+| The shape of numbers: a trend, a distribution, a ranking, a gap, or more values than anyone reads              | Chart                                  | `pageship-chart`       |
+| The shape and the exact values                                                                                 | Chart, then a table of the same values | Both                   |
+| A few headline numbers that carry the document                                                                 | Key figures                            | `pageship-key-figures` |
+| How things connect: a path that branches, a structure, dependencies, who hands what to whom, or events in time | Diagram                                | `pageship-diagram`     |
+| The lines of code the text is about                                                                            | Code block                             | `pageship-code-block`  |
+| An image, video or audio the source gives                                                                      | Media                                  | `pageship-media`       |
+| Items with one attribute each, or steps in one line with no branch whose timing doesn't matter                 | List                                   |                        |
+| One or two relationships, or two or three numbers that aren't parts of a whole                                 | Sentence                               |                        |

package/dist/skills/pageship-docs/references/file.md

@@ -0,0 +1,52 @@
+# File rules
+
+## One standalone file
+
+- Write one `.html` file with its CSS in a `<style>` element and its JavaScript in `<script>` elements, with no build step or framework.
+- Load nothing from beside the file. Images and media use absolute `https://` URLs or inline `data:` URLs, and drawings are inline SVG.
+- Use system fonts by default. A hosted font from Google Fonts is allowed when the look calls for it, followed by system fallbacks in the `font-family` list.
+
+## Trusted libraries only
+
+A file loads scripts and stylesheets from this list and nowhere else. Copy the tag exactly, with its version, `integrity` and `crossorigin`. Load a library only when the file uses it. Load scripts with a classic `<script src>` tag; a module `import` from a URL can't be checked by integrity.
+
+Tailwind's browser build, only when the look you follow is built on Tailwind:
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3/dist/index.global.js"
+  integrity="sha384-2ql948lIdLcGEE0/qxNiudyTjgauA3RDJERu5xW75kFCvSl5a9odyQYCb6tEjnmB"
+  crossorigin="anonymous"
+></script>
+```
+
+Mermaid, only when a pattern skill calls for it:
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/mermaid@11.17.2/dist/mermaid.min.js"
+  integrity="sha384-EOXBFmc3gx5mb+vn0vPvvGqACToJD24hhacX5Yx+8NUUQrHIle/Qi5Bg9o3zKwW2"
+  crossorigin="anonymous"
+></script>
+```
+
+Hosted fonts from `https://fonts.googleapis.com/css2?...` through a `<link rel="stylesheet">`, which can't carry `integrity`.
+
+## The Pageship sandbox
+
+A published file runs with scripts allowed and everything else blocked, so it works without these:
+
+- forms and form submission
+- new windows, popups and links with `target="_blank"`
+- `alert`, `confirm` and `prompt`
+- cookies, `localStorage`, `sessionStorage` and IndexedDB
+- cross-window messages (`postMessage`, `BroadcastChannel`)
+
+Keep state in page variables and in the URL fragment (`#section`, `history.replaceState`).
+
+## The document marker
+
+A file the Pageship CLI has published ends with a document marker, such as `<!-- pageship:v1 document=Ab12Cd -->`. Only the CLI writes or changes it.
+
+- When you regenerate, redesign, edit, rename or move a file that has a marker, the new file ends with the same marker, copied byte for byte as its last line, after `</html>`. Read the old file's last line before writing, and check the new file's last line after.
+- A new file has no marker, even when it starts as a copy of another file.

package/dist/skills/pageship-docs/references/plain-default.md

@@ -0,0 +1,331 @@
+# The plain default
+
+A document look: serif prose with sans headings, labels and figure text, a plum title band and section headings, steel-blue links, framed figures with a caption strip, and tinted callouts. Extend this stylesheet with the same variables and font stacks; keep its sizes, widths and print rules.
+
+```css
+:root {
+  color-scheme: light dark;
+  --bg: #fcfbfa;
+  --fg: #1e1a1d;
+  --muted: #665c63;
+  --line: #dcd5da;
+  --surface: #f4f0f3;
+  --accent: #5d2750;
+  --accent-2: #006e8e;
+  --series-1: #2a7f78;
+  --series-2: #3f6fb5;
+  --series-3: #6c7a1a;
+  --series-4: #6a56b0;
+  --good: #2f7d4a;
+  --warn: #a85a00;
+  --bad: #b3261e;
+  --sans:
+    -apple-system, "Segoe UI", "Ubuntu Sans", Ubuntu, Roboto, "Helvetica Neue", Arial,
+    "Liberation Sans", sans-serif;
+  --serif:
+    Charter, "Iowan Old Style", "Palatino Linotype", Palatino, P052, "Book Antiqua", Georgia, serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font: 17px/1.6 var(--serif);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #161317;
+    --fg: #ece7ea;
+    --muted: #aaa1a7;
+    --line: #3a3339;
+    --surface: #1f1b20;
+    --accent: #dca5d2;
+    --accent-2: #71c1e0;
+    --series-1: #5fc4ba;
+    --series-2: #89aef0;
+    --series-3: #b9c35a;
+    --series-4: #b2a3f0;
+    --good: #6fcf8a;
+    --warn: #f0b25a;
+    --bad: #f38b84;
+  }
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  border-top: 0.5rem solid var(--accent);
+}
+main {
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 2.5rem 1.25rem 5rem;
+}
+main :is(p, li, dd, blockquote) {
+  max-width: 70ch;
+}
+h1,
+h2,
+h3,
+h4,
+table,
+figcaption,
+dt,
+.meta,
+small,
+button,
+summary {
+  font-family: var(--sans);
+}
+h1 {
+  font-size: 2.5rem;
+  line-height: 1.1;
+  letter-spacing: -0.015em;
+  margin: 0 0 0.75rem;
+}
+h1::after {
+  content: "";
+  display: block;
+  width: 3.5rem;
+  height: 0.25rem;
+  margin-top: 1.25rem;
+  background: var(--accent-2);
+}
+h2 {
+  font-size: 1.5rem;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--accent);
+  margin: 3.5rem 0 1rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--line);
+}
+h3 {
+  font-size: 1.125rem;
+  line-height: 1.3;
+  margin: 2rem 0 0.5rem;
+}
+h4 {
+  font-size: 1rem;
+  margin: 1.5rem 0 0.25rem;
+}
+p,
+ul,
+ol,
+dl {
+  margin: 0 0 1rem;
+}
+li + li {
+  margin-top: 0.25rem;
+}
+a {
+  color: var(--accent-2);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.15em;
+}
+a:hover {
+  text-decoration-thickness: 2px;
+}
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.meta,
+small,
+figcaption {
+  color: var(--muted);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.meta {
+  margin: 0 0 2rem;
+}
+blockquote {
+  margin: 1.25rem 0;
+  padding: 0.25rem 0 0.25rem 1.25rem;
+  border-left: 3px solid var(--accent-2);
+}
+dt {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--muted);
+  margin-top: 0.75rem;
+}
+dd {
+  margin: 0.125rem 0 0;
+}
+code,
+pre,
+kbd,
+samp {
+  font-family: var(--mono);
+  font-size: 0.875rem;
+}
+pre {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+:not(pre) > code {
+  background: var(--surface);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+hr {
+  border: 0;
+  border-top: 1px solid var(--line);
+  margin: 2rem 0;
+}
+.scroll {
+  overflow-x: auto;
+}
+figure {
+  width: fit-content;
+  min-width: min(100%, 28rem);
+  max-width: 100%;
+  margin: 2rem 0;
+  padding: 1.25rem;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+}
+figcaption {
+  margin: 1rem -1.25rem -1.25rem;
+  padding: 0.75rem 1.25rem;
+  background: var(--surface);
+  border-top: 1px solid var(--line);
+  border-radius: 0 0 4px 4px;
+  contain: inline-size;
+}
+figcaption:first-child {
+  margin: -1.25rem -1.25rem 1rem;
+  border-top: 0;
+  border-bottom: 1px solid var(--line);
+  border-radius: 4px 4px 0 0;
+}
+table {
+  border-collapse: collapse;
+  font-size: 0.9375rem;
+  font-variant-numeric: tabular-nums;
+}
+th,
+td {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--line);
+  vertical-align: top;
+}
+thead th {
+  border-bottom: 2px solid var(--fg);
+}
+td.num,
+th.num {
+  text-align: right;
+}
+.callout {
+  background: var(--surface);
+  border-left: 4px solid var(--accent);
+  border-radius: 0 4px 4px 0;
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+}
+.callout > :last-child {
+  margin-bottom: 0;
+}
+details {
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  margin: 1rem 0;
+}
+summary {
+  font-weight: 600;
+  cursor: pointer;
+}
+button {
+  font: 600 0.9375rem var(--sans);
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--muted);
+  border-radius: 4px;
+  padding: 0.375rem 0.875rem;
+}
+button:hover,
+summary:hover {
+  background: var(--surface);
+}
+button:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"]) {
+  border: 2px solid var(--accent);
+  padding: calc(0.375rem - 1px) calc(0.875rem - 1px);
+}
+@media (max-width: 40rem) {
+  main {
+    padding: 1.5rem 1rem 3rem;
+  }
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    margin-top: 2.5rem;
+  }
+  figure {
+    min-width: 100%;
+    padding: 0.75rem 0;
+    border-width: 1px 0;
+    border-radius: 0;
+  }
+  figcaption {
+    margin: 0.75rem 0 -0.75rem;
+    border-radius: 0;
+  }
+  figcaption:first-child {
+    margin: -0.75rem 0 0.75rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+@media print {
+  :root {
+    --bg: #fff;
+    --fg: #000;
+    --muted: #333;
+    --line: #bbb;
+    --surface: #fff;
+    --accent: #5d2750;
+    --accent-2: #006e8e;
+    --series-1: #2a7f78;
+    --series-2: #3f6fb5;
+    --series-3: #6c7a1a;
+    --series-4: #6a56b0;
+    --good: #2f7d4a;
+    --warn: #a85a00;
+    --bad: #b3261e;
+  }
+  main {
+    max-width: none;
+    padding: 0;
+  }
+  button,
+  [role="toolbar"] {
+    display: none;
+  }
+  details::details-content {
+    content-visibility: visible;
+  }
+  figure,
+  tr,
+  .callout,
+  pre {
+    break-inside: avoid;
+  }
+  .scroll,
+  pre {
+    overflow: visible;
+    white-space: pre-wrap;
+  }
+}
+```