@mvarble/mesearch 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Matthew Varble
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,123 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/mvarble/mesearch/main/logo.svg" alt="mesearch logo; man on toilet looking at phone" width="128">
+</p>
+
+# mesearch
+
+An opinionated static site for a library of notes --- the kind an agent writes for you while you learn something. You keep documents in a fixed layout under `content/`; mesearch turns them into a site that reads like a textbook, with the math rendered, a map of how the documents depend on one another, an index, and sequences to read in order.
+
+```sh
+pnpm add @mvarble/mesearch
+pnpm exec mesearch init      # content/, config, stylesheet, AGENTS.md, lint config
+pnpm dev                     # live site while you write
+pnpm build                   # static site in build/
+```
+
+Where [mkdoc](https://github.com/mvarble/mkdoc) renders one document without a project around it, mesearch is installed in a `package.json` and builds a whole site. Where [the blog](https://github.com/mvarble/blog) is a SvelteKit app you maintain, mesearch is the SvelteKit app: a project holds only documents and a little configuration, and everything about how the site looks and works ships in this package.
+
+## A project
+
+```
+project/
+    package.json            depends on @mvarble/mesearch
+    AGENTS.md               how agents should write for this site
+    mesearch.config.ts      title, base path, KaTeX macros
+    mesearch.css            optional: overrides for any of the site's variables
+    content/
+        description.md                  what the site is about; opens the home page
+        concepts/<slug>/index.md        one concept per folder
+        concepts/<slug>/description.md  optional preview, for the map and the index
+        writeups/<slug>/index.md        one writeup per folder
+        writeups/<slug>/description.md
+        sequences/<slug>/index.md       writeups to be read in order
+```
+
+Documents are `.md` or `.svx` ([mdsvex](https://mdsvex.pngwn.io/), which can import and render Svelte components). A document's folder holds whatever else it uses --- images, data, components --- referenced relatively. Packages a document imports (`three`, say) are installed in the project like any other dependency.
+
+### Frontmatter
+
+```yaml
+---
+title: Net interest margin
+created: 2026-10-01
+updated: 2026-10-03
+depends_on: [basis-points, writeups/bank-balance-sheets]
+katex_macros:
+    '\NIM': '\mathrm{NIM}'
+---
+```
+
+- `title` is required, and may contain inline math.
+- `created` and `updated` default to the first and last commits that touched the document's folder, then to file times.
+- `depends_on` names what a reader needs first, by slug: a bare slug when it is unambiguous between concepts and writeups, `concepts/<slug>` or `writeups/<slug>` otherwise.
+- `katex_macros` are added, for this document, to mesearch's own macros (`\bbR`, `\calF`, `\bfx`, `\defeq`, …) and the site's.
+- A sequence lists its writeups in reading order under `documents:`.
+
+### Links, equations and the map
+
+Link documents the way their folders sit on disk --- `[basis points](../basis-points/)`, `[the writeup](../../writeups/x/index.md#section)` --- and mesearch rewrites the links to site URLs. A link to a document that does not exist is reported when the site builds.
+
+`$$ ... @tag(slug) $$` numbers a display equation and `[](eq:slug)` refers to it as `(1)`. From another document the reference is `eq:concepts/<slug>/<eq-slug>`.
+
+A theorem, definition or remark is a small document with `type: statement` and a `kind`, shown with `<Statement {...theorem} />` (from `@mvarble/mesearch/Statement.svelte`). Statements count along with the document's equations, and `[%full](statement:slug)` refers to one as "Theorem 2". `@mvarble/mesearch/Proof.svelte` frames a proof.
+
+Bibliography entries go in `.bib` files anywhere under `content/`. `[](cite:key)` renders as `[Foll99]` and `[Theorem 1.8](cite:key)` as `[Foll99, Theorem 1.8]`. Hovering a citation shows the reference. Following it jumps to a short list of references at the end of the page, which holds only what that page cites. There is no site-wide bibliography page.
+
+The map on the home page is drawn from all of this:
+
+- Every concept and writeup is a node.
+- A solid arrow runs from each `depends_on` entry to the document that lists it. Neighbours in a sequence are joined the same way, so following the arrows is a reading order.
+- A dashed line joins two documents when one links to the other and neither depends on the other.
+
+## What the site does
+
+**The home page** opens with the site's description. Below it is the map, laid out by a force simulation in which nodes repel each other, edges pull, and each node is drawn towards a band set by its depth in the dependency order. The layout is computed when the site builds, so the map works without JavaScript. With JavaScript, nodes can be dragged, the map pans and zooms (Ctrl/⌘ + scroll, or pinch), and clicking a node opens a preview with its description and its neighbours. The preview is a drawer beside the map on wide screens and a sheet from the bottom on narrow ones. Then come the sequences, and the index, which can be filtered and sorted by date updated, date created or title.
+
+**Each document** has a header with its kind, title, dates, reading time and what it builds on, and its sequence position when it has one. On wide screens two sidebars flank the text: on the left, the sequence it belongs to, drawn as a line of stations; on the right, its headings, with the section being read marked as you scroll. On narrower screens both fold into the header. The footer links what it leads to, what it relates to, and the previous and next parts of its sequence.
+
+**Everywhere**, a slim rail down the left edge (a floating dock at the bottom of a phone) holds search, the map, the index and the theme. Search (`/` or Ctrl/⌘-K) looks through titles, summaries and headings. The theme follows the device until you choose light or dark, and a page read without JavaScript is light.
+
+Text is justified and hyphenated, and inline math never breaks across a line. Display math scrolls sideways when it is too wide, with its equation number kept in view.
+
+## Configuration
+
+```ts
+// mesearch.config.ts
+import { defineConfig } from '@mvarble/mesearch';
+
+export default defineConfig({
+    title: 'Probability, from the ground up',
+    author: 'Ada',
+    base: '/probability', // when served from a subdirectory, as on GitHub Pages
+    katexMacros: { '\\PP': '\\mathbb{P}' },
+    graph: { charge: -900, linkDistance: 80, gravity: 0.02 },
+});
+```
+
+## Styling
+
+Every colour, font, size and spacing is a CSS variable. `mesearch init` writes a `mesearch.css` listing them all, commented out at their defaults, for both the light and the dark theme. Uncomment one to change it. The file loads after mesearch's own styles, so any other rule in it applies as well, and it can `@import` a font from Google Fonts or from npm.
+
+## Commands
+
+```
+mesearch init [dir]     scaffold a project (never overwrites without --force)
+mesearch dev            serve the site, updating as documents change
+    -p, --port <n>  --host [addr]  --open
+mesearch build          write the static site
+    -o, --out <dir>     (default: build)
+    --base <path>       URL prefix, overriding the config
+    --force             overwrite an output directory mesearch did not write
+```
+
+The site in `build/` is plain files: serve it from anywhere.
+
+## Writing with agents
+
+`AGENTS.md` describes the layout, the frontmatter, the link conventions and the prose register for any agent writing in the project, and ends with a section for opinions particular to the site. The [`/explain` and `/explain-concept`](https://github.com/mvarble/config/tree/main/dot_pi/agent/extensions/explain) pi commands write into this layout and defer to `AGENTS.md` on anything particular to the site. Their own `authoring.md` covers how to write the mathematics, numbered equations, statements, proofs and citations.
+
+## How it works
+
+mesearch is a SvelteKit app shipped as source in this package. On every run the CLI writes a small `.mesearch/` folder into the project, holding a `svelte.config.js` and a `vite.config.js` that each call into this package, and runs SvelteKit from there with its routes pointed at the app here. The project needs no SvelteKit of its own; Svelte and SvelteKit always resolve to mesearch's copies, so a project cannot end up with two of them.
+
+The content goes through [`@mvarble/mesearch-cms`](https://github.com/mvarble/mesearch/tree/main/packages/cms) and [`@mvarble/mesearch-markdown`](https://github.com/mvarble/mesearch/tree/main/packages/markdown). The pages are built from [`@mvarble/mesearch-ui`](https://github.com/mvarble/mesearch/tree/main/packages/ui). The blog shares all three.

package/app/ambient.d.ts

@@ -0,0 +1,24 @@
+// Modules served by mesearch's Vite plugins.
+
+declare module '$cms' {
+    export const cms: import('@mvarble/mesearch-cms/presets/mesearch').MesearchCms;
+}
+
+declare module '$cms/loaders' {
+    const loaders: Record<string, () => Promise<{ default: import('svelte').Component }>>;
+    export default loaders;
+}
+
+declare module '$site' {
+    const site: {
+        title: string;
+        author?: string;
+        lang: string;
+        base: string;
+        katexMacros: Record<string, string>;
+        graph: { charge: number; linkDistance: number; gravity: number };
+    };
+    export default site;
+}
+
+declare module '$site/user-styles';

package/app/app.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="%mesearch.lang%" data-theme="light">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+        <script>
+            // Before anything paints: the stored theme, or else the system's.
+            // A page read without JavaScript keeps the light theme it ships with.
+            (function () {
+                var root = document.documentElement;
+                var theme;
+                root.classList.add('js');
+                try {
+                    theme = localStorage.getItem('mesearch:theme');
+                } catch (e) {}
+                if (theme !== 'light' && theme !== 'dark') {
+                    theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+                root.dataset.theme = theme;
+            })();
+        </script>
+        %sveltekit.head%
+    </head>
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
+</html>

package/app/components/Proof.svelte

@@ -0,0 +1,19 @@
+<!--
+    A proof, for a document to wrap one in:
+
+        import Proof from '@mvarble/mesearch/Proof.svelte';
+
+        <Proof>
+
+        Take any open cover ...
+
+        </Proof>
+-->
+<script lang="ts">
+    import type { ComponentProps } from 'svelte';
+    import { Proof } from '@mvarble/mesearch-ui';
+
+    let props: ComponentProps<typeof Proof> = $props();
+</script>
+
+<Proof {...props} />

package/app/components/Statement.svelte

@@ -0,0 +1,19 @@
+<!--
+    What a document imports to show a statement --- a theorem, a definition ---
+    written as a document of its own:
+
+        import Statement from '@mvarble/mesearch/Statement.svelte';
+        import * as heineBorel from './statements/heine-borel.md';
+
+        <Statement {...heineBorel} />
+
+    The content layer numbers it along with the page's equations.
+-->
+<script lang="ts">
+    import type { ComponentProps } from 'svelte';
+    import { Statement } from '@mvarble/mesearch-ui';
+
+    let props: ComponentProps<typeof Statement> = $props();
+</script>
+
+<Statement {...props} />

package/app/error.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>%sveltekit.error.message%</title>
+        <style>
+            body {
+                font:
+                    17px/1.6 Georgia,
+                    serif;
+                color: #1a1d1c;
+                background: #f9f8f3;
+                display: grid;
+                place-items: center;
+                min-height: 100vh;
+                margin: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <p>%sveltekit.status% · %sveltekit.error.message%</p>
+    </body>
+</html>

package/app/hooks.server.ts

@@ -0,0 +1,8 @@
+import type { Handle } from '@sveltejs/kit';
+import site from '$site';
+
+// The shell's `lang` comes from the site's config.
+export const handle: Handle = ({ event, resolve }) =>
+    resolve(event, {
+        transformPageChunk: ({ html }) => html.replace('%mesearch.lang%', site.lang),
+    });

package/app/lib/format.ts

@@ -0,0 +1,6 @@
+import site from '$site';
+
+export { plain } from '@mvarble/mesearch-ui';
+
+// A site path under the configured base, always with a trailing slash.
+export const href = (pathname: string) => `${site.base}/${pathname ? pathname + '/' : ''}`;

package/app/lib/server/refs.ts

@@ -0,0 +1,32 @@
+import type { MesearchDocument } from '@mvarble/mesearch-cms/presets/mesearch';
+import { inlineHtml } from '@mvarble/mesearch-ui/server';
+import site from '$site';
+
+import { href, plain } from '$lib/format';
+import type { DocumentRef, IndexEntry } from '$lib/types';
+
+// Titles and summaries as HTML, their math rendered with the site's macros
+// and the document's own.
+const html = (doc: MesearchDocument, text: string) =>
+    inlineHtml(text, { ...site.katexMacros, ...doc.katexMacros });
+
+export const toRef = (doc: MesearchDocument): DocumentRef => ({
+    key: doc.key,
+    kind: doc.kind,
+    url: href(doc.key),
+    title: plain(doc.title),
+    titleHtml: html(doc, doc.title),
+});
+
+export const toIndexEntry = (doc: MesearchDocument): IndexEntry => ({
+    ...toRef(doc),
+    summary: plain(doc.summary),
+    summaryHtml: html(doc, doc.summary),
+    created: doc.created,
+    updated: doc.updated,
+    readingMinutes: doc.readingMinutes,
+    sequences: doc.sequences,
+    descriptionFilename: doc.descriptionFilename,
+});
+
+export { html as inlineHtml };

package/app/lib/types.ts

@@ -0,0 +1,16 @@
+import type { IndexEntry as UiIndexEntry } from '@mvarble/mesearch-ui';
+
+export type {
+    DocumentRef,
+    GraphLink,
+    GraphNode,
+    SearchEntry,
+    TocEntry,
+    TrackItem,
+} from '@mvarble/mesearch-ui';
+
+// An index entry, with what the home page needs besides.
+export interface IndexEntry extends UiIndexEntry {
+    sequences: string[];
+    descriptionFilename?: string;
+}

package/app/params/kind.ts

@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+
+// The folders documents live in, which are also the first segment of a URL.
+export const match: ParamMatcher = (param) =>
+    param == 'concepts' || param == 'writeups' || param == 'sequences';

package/app/routes/+error.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import site from '$site';
+    import { href } from '$lib/format';
+</script>
+
+<svelte:head>
+    <title>{page.status} · {site.title}</title>
+</svelte:head>
+
+<main id="main" class="error">
+    <p class="eyebrow">{page.status}</p>
+    <h1>{page.status == 404 ? 'Not in the library' : 'Something went wrong'}</h1>
+    <p>{page.error?.message}</p>
+    <p><a href={href('')}>Back to {site.title}</a></p>
+</main>
+
+<style>
+    .error {
+        width: min(var(--measure), 100% - 2 * var(--gutter));
+        margin: 0 auto;
+        padding: 6rem 0;
+    }
+
+    .eyebrow {
+        color: var(--accent);
+    }
+
+    h1 {
+        font: 600 2.4rem / 1.1 var(--font-serif);
+        margin: 0.5rem 0 1rem;
+    }
+
+    a {
+        color: var(--accent);
+    }
+</style>

package/app/routes/+layout.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import '@mvarble/mesearch-ui/fonts';
+    import 'katex/dist/katex.min.css';
+    import '@mvarble/mesearch-markdown/styles/katex.css';
+    import '@mvarble/mesearch-ui/styles/index.css';
+    // The project's own stylesheet, last, so that it can override anything.
+    import '$site/user-styles';
+
+    import { goto, invalidateAll } from '$app/navigation';
+    import { Shell, configure } from '@mvarble/mesearch-ui';
+    import site from '$site';
+    import { href } from '$lib/format';
+
+    let { children } = $props();
+
+    configure({ lang: site.lang });
+
+    // While the dev server runs, a change to the content refreshes the page's
+    // data in place rather than reloading it.
+    if (import.meta.hot) {
+        import.meta.hot.on('mesearch-cms:update', () => void invalidateAll());
+    }
+</script>
+
+<svelte:head>
+    <meta name="generator" content="mesearch" />
+    {#if site.author}<meta name="author" content={site.author} />{/if}
+</svelte:head>
+
+<Shell
+    title={site.title}
+    home={href('')}
+    links={[
+        { url: `${href('')}#atlas`, label: 'Graph', icon: 'graph' },
+        { url: `${href('')}#index`, label: 'Index', icon: 'list' },
+    ]}
+    search={`${site.base}/search.json`}
+    navigate={goto}
+>
+    {@render children()}
+</Shell>

package/app/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const trailingSlash = 'always';

package/app/routes/+page.server.ts

@@ -0,0 +1,37 @@
+import { layoutGraph } from '@mvarble/mesearch-ui/server';
+import { cms } from '$cms';
+import site from '$site';
+
+import { toIndexEntry, toRef } from '$lib/server/refs';
+
+export const load = () => {
+    const documents = cms.documents.list().map(toIndexEntry);
+    const byKey = new Map(documents.map((doc) => [doc.key, doc]));
+
+    // The graph is laid out here, at build time, so the page arrives with a
+    // finished picture whether or not its JavaScript ever runs.
+    const graph = cms.graph();
+    const nodes = layoutGraph(
+        graph.nodes
+            .map((key) => byKey.get(key))
+            .filter((doc) => !!doc)
+            .map((doc) => ({ ...doc, sequenced: doc.sequences.length > 0 })),
+        graph.edges,
+        site.graph,
+    );
+
+    const sequences = cms.sequences.list().map((sequence) => ({
+        ...toIndexEntry(sequence),
+        documents: sequence.documents
+            .map((key) => cms.documents.get(key))
+            .filter((doc) => !!doc)
+            .map(toRef),
+    }));
+
+    return {
+        description: cms.description(),
+        documents,
+        sequences,
+        graph: { nodes, links: graph.edges },
+    };
+};

package/app/routes/+page.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+    import { Graph, Index } from '@mvarble/mesearch-ui';
+    import site from '$site';
+    import { href } from '$lib/format';
+
+    let { data } = $props();
+
+    let entries = $derived(Object.fromEntries(data.documents.map((doc) => [doc.key, doc])));
+    let counts = $derived({
+        concepts: data.documents.filter((doc) => doc.kind == 'concept').length,
+        writeups: data.documents.filter((doc) => doc.kind == 'writeup').length,
+        sequences: data.sequences.length,
+    });
+    const plural = (n: number, word: string) => `${n} ${word}${n == 1 ? '' : 's'}`;
+</script>
+
+<svelte:head>
+    <title>{site.title}</title>
+</svelte:head>
+
+<main id="main" class="home">
+    <header class="hero">
+        <p class="eyebrow">{site.author ?? 'A library of notes'}</p>
+        <h1>{site.title}</h1>
+        {#if data.Description}
+            <div class="lede prose">
+                <data.Description />
+            </div>
+        {/if}
+        <p class="counts">
+            {[
+                plural(counts.concepts, 'concept'),
+                plural(counts.writeups, 'writeup'),
+                ...(counts.sequences ? [plural(counts.sequences, 'sequence')] : []),
+            ].join(' · ')}
+        </p>
+    </header>
+
+    <section id="atlas" class="atlas" aria-labelledby="atlas-heading">
+        <div class="section-head">
+            <h2 id="atlas-heading">The map</h2>
+            <p>
+                Arrows run from what a document builds on to the document itself, so following them
+                is a reading order. Dashed lines join documents that refer to one another.
+            </p>
+        </div>
+        <Graph
+            nodes={data.graph.nodes}
+            links={data.graph.links}
+            {entries}
+            descriptions={data.descriptions}
+            tuning={site.graph}
+        />
+    </section>
+
+    {#if data.sequences.length}
+        <section class="sequences" aria-labelledby="sequences-heading">
+            <div class="section-head">
+                <h2 id="sequences-heading">Sequences</h2>
+                <p>Writeups meant to be read in order.</p>
+            </div>
+            <ul class="cards">
+                {#each data.sequences as sequence (sequence.key)}
+                    <li class="card kind-sequence">
+                        <a href={href(sequence.key)}>
+                            <span class="eyebrow">{plural(sequence.documents.length, 'part')}</span>
+                            <span class="card-title">{@html sequence.titleHtml}</span>
+                            {#if sequence.summaryHtml}<span class="card-summary"
+                                    >{@html sequence.summaryHtml}</span
+                                >{/if}
+                            <ol class="parts">
+                                {#each sequence.documents as part (part.key)}
+                                    <li>{@html part.titleHtml}</li>
+                                {/each}
+                            </ol>
+                        </a>
+                    </li>
+                {/each}
+            </ul>
+        </section>
+    {/if}
+
+    <section id="index" class="index-section" aria-labelledby="index-heading">
+        <div class="section-head">
+            <h2 id="index-heading">Index</h2>
+            <p>Everything, most recently changed first.</p>
+        </div>
+        <Index entries={data.documents} />
+    </section>
+</main>
+
+<style>
+    .home {
+        width: min(72rem, 100% - 2 * var(--gutter));
+        margin: 0 auto;
+        padding: clamp(2.5rem, 6vw, 5rem) 0 4rem;
+    }
+
+    .hero {
+        max-width: var(--measure);
+        margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
+    }
+
+    .hero .eyebrow {
+        color: var(--accent);
+        margin: 0 0 0.9rem;
+    }
+
+    h1 {
+        margin: 0 0 1.25rem;
+        font: 600 clamp(2.6rem, 1.6rem + 4vw, 4.2rem) / 1.02 var(--font-serif);
+        letter-spacing: -0.025em;
+        text-wrap: balance;
+    }
+
+    .lede {
+        font-size: 1.2rem;
+        line-height: 1.65;
+        color: var(--ink-soft);
+    }
+
+    .counts {
+        margin: 1.5rem 0 0;
+        font: 500 var(--font-size-ui) / 1.4 var(--font-ui);
+        color: var(--muted);
+        letter-spacing: 0.02em;
+    }
+
+    section {
+        margin-bottom: clamp(3rem, 7vw, 5rem);
+        scroll-margin-top: 1.5rem;
+    }
+
+    .section-head {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: 0.4rem 1.5rem;
+        margin-bottom: 1.25rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid var(--rule);
+    }
+
+    h2 {
+        margin: 0;
+        font: 600 1.6rem / 1.2 var(--font-serif);
+    }
+
+    .section-head p {
+        flex: 1 1 20rem;
+        margin: 0;
+        font: 400 0.9rem / 1.5 var(--font-ui);
+        color: var(--muted);
+    }
+
+    .cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+        gap: 1rem;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .card a {
+        display: flex;
+        flex-direction: column;
+        gap: 0.45rem;
+        height: 100%;
+        padding: 1.2rem 1.3rem;
+        border: 1px solid var(--rule);
+        border-top: 3px solid var(--kind);
+        border-radius: var(--radius);
+        background: var(--paper-raised);
+        color: inherit;
+        text-decoration: none;
+        transition:
+            box-shadow 150ms,
+            transform 150ms;
+    }
+
+    .card a:hover {
+        box-shadow: var(--shadow);
+        transform: translateY(-1px);
+    }
+
+    .card .eyebrow {
+        color: var(--kind);
+    }
+
+    .card-title {
+        font: 600 1.25rem / 1.25 var(--font-serif);
+    }
+
+    .card-summary {
+        font-size: 0.95rem;
+        color: var(--ink-soft);
+        line-height: 1.55;
+    }
+
+    .parts {
+        margin: 0.3rem 0 0;
+        padding-left: 1.3rem;
+        font: 0.85rem / 1.6 var(--font-ui);
+        color: var(--muted);
+    }
+
+    .parts li::marker {
+        color: var(--kind);
+        font-variant-numeric: tabular-nums;
+    }
+</style>