@bkazemi/verily 0.9.5 → 0.10.0

package/README.md

@@ -118,7 +118,7 @@ const verily = createVerily({
 
 Sign-in methods need an app registered with the provider. The callback URL is always `<baseUrl>/callback`, and every place you run Verily, development included, needs its own registered.
 
-- **GitHub:** [register an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) and set its callback URL. An OAuth app has only one, so development and production each need their own app.
+- **GitHub:** run `npx verily github-app <callback>...`, open the address it prints in a browser signed in to GitHub, and click **Create GitHub App**. It prints the client id and secret. One app can list up to 10 callback URLs, so development and production can share it. Add `--org <name>` for an organization to own the app, or `--name <name>` if the default name is taken. You can instead [register an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) by hand, which has only one callback URL.
 - **Discord:** create an application in the [Discord developer portal](https://discord.com/developers/applications) and add the callback URL under **OAuth2 → Redirects**. One application can list several. Discord shows the client secret only when you reset it.
 - **YouTube:** in the [Google Cloud console](https://console.cloud.google.com/), enable the YouTube Data API v3, create an OAuth client of type **Web application**, and add the callback URL as an authorized redirect URI. One client can list several. The `youtube.readonly` scope is sensitive: until Google verifies your app, users see a warning and only 100 accounts can ever use it, so apply for verification before offering it publicly.
 
@@ -168,7 +168,7 @@ import { init } from '@bkazemi/verily';
 const client = init({ backendUrl: '/api/verily' });
 ```
 
-Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.5/dist/verily.js`. The script defines a global `Verily`.
+Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.10.0/dist/verily.js`. The script defines a global `Verily`.
 
 Then place the badge wherever the account appears:
 
@@ -217,6 +217,8 @@ It lists up to four verified accounts, then counts the rest, such as `+2 more`.
 
 With several accounts, each card shows the name, status and verifier, with the method and dates behind a Details toggle. Add `details-open`, or pass `{ detailsOpen: true }`, to start every card open.
 
+A sign-in counts until its record expires, a year by default. To ask for more recent proof, add `max-age`, such as `max-age="30d"`, or pass `{ maxAgeMs }`. A record whose account was last proved before then reads as Unconfirmed until its holder renews it. A bare number is seconds, and `s`, `m`, `h` and `d` set the unit. A published proof is reread on a schedule, so `max-age` mostly affects sign-ins and mailed codes. Each card shows when its account was last proved. For a published proof that is Last checked. For a sign-in or code it is Approved, or Authenticated where a renewal by another method moved the approval later.
+
 The badge refreshes every 30 seconds and reads only public evidence. The client can also start and end connections, and draw a badge into your own element:
 
 ```js
@@ -370,7 +372,7 @@ A static site only needs the script and the badge markup; the backend runs somew
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.5/dist/verily.js"
+  src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.10.0/dist/verily.js"
   defer
 ></script>
 <verily-badge
@@ -460,7 +462,7 @@ const { [user.id]: connections } = await verily.connections([user.id]);
 const verified = connections.filter((c) => c.status === 'verified');
 ```
 
-Show only `verified` records as verified. A `retired` record carries `retiredAt` and can be shown as history, never as a current account. `mark` is `preferred` or `unused` where the user set one; it is their ordering, not something checked.
+Show only `verified` records as verified. Pass `{ maxAgeMs }` to read a record whose account was last proved longer ago than that as `unconfirmed`. A `retired` record carries `retiredAt` and can be shown as history, never as a current account. `mark` is `preferred` or `unused` where the user set one; it is their ordering, not something checked.
 
 To show them, hand the records to the badge. It draws them as given and fetches nothing, so it works for unlisted links, which a browser cannot read for itself:
 
@@ -598,7 +600,7 @@ An instance sets `dns: true`.
 
 ## Operations
 
-Verification lasts 30 days, flows 10 minutes, and sharing links 7 days. Change them with `validityMs`, `flowTtlMs` and `shareTtlMs`. Evidence is never cached.
+Verification lasts a year, flows 10 minutes, and sharing links 7 days. Change them with `validityMs`, `flowTtlMs` and `shareTtlMs`. Evidence is never cached. A published proof that `recheck()` still finds extends its record once half the term is gone, so only a sign-in or a mailed code needs renewing. Raising `validityMs` lengthens records still running on the next `recheck()`; lowering it shortens nothing.
 
 A user's DNS setup is saved for seven days. If propagation outlasts a flow's ten minutes, they choose DNS again and get the same TXT value and the last domain entered. Each return reads the proof afresh. The TXT record has to stay after verification, for the ongoing checks.
 

package/dist/browser/evidence-dialog.js

@@ -1,4 +1,4 @@
-import { attestationLabel, externalId, externalIdGroups, externalLink, externalName, externalSince, lastProved, localSide, proofTitle, statusLabel, } from '../core/index.js';
+import { attestationLabel, externalId, externalIdGroups, externalLink, externalName, externalSince, authenticatedEarlier, lastProved, localSide, proofTitle, statusLabel, } from '../core/index.js';
 import { markStyles, verificationMark } from './mark.js';
 import dialogCss from './evidence-dialog.css.js';
 import { providerMark } from './provider-mark.js';
@@ -561,11 +561,15 @@ function externalCard(evidence, manage, later = () => { }, fold, warned = () =>
             evidence.expiresAt,
         ]);
     }
-    // When an artifact was last read belongs with the other times, not inside a sentence.
-    // Only artifact methods drift: a sign-in is established once and does not go stale.
+    // When the account was last proved: a published proof when it was last read, and a
+    // sign-in or mailed code when it happened, where that is not already the approval date.
     const main = evidence.attestations.external[0];
-    if (main.artifactUrl && !retired)
-        dateRows.push(['Last checked', main.confirmedAt]);
+    if (!retired) {
+        if (main.artifactUrl)
+            dateRows.push(['Last checked', main.confirmedAt]);
+        else if (authenticatedEarlier(evidence))
+            dateRows.push(['Authenticated', evidence.authenticatedAt]);
+    }
     for (const [label, time] of dateRows) {
         dates.append(node('dt', label), node('dd', moment(time)));
     }

package/dist/browser/index.d.ts

@@ -20,6 +20,11 @@ export interface Arrangement {
      * open or shut each either way.
      */
     detailsOpen?: boolean;
+    /**
+     * How recently an account must have been proved to count as verified, in milliseconds.
+     * An older record reads as unconfirmed. Unset, a record counts until it expires.
+     */
+    maxAgeMs?: number;
 }
 /**
  * Presents records the page already holds, without asking any backend for them. This is
@@ -51,9 +56,10 @@ export declare function init({ backendUrl, handoffUrl }: {
     /** The site's current public connections, so an embed need not hardcode ids. */
     listPublished(): Promise<Evidence[]>;
     getConnection(id: string): Promise<Evidence>;
-    mountBadge(element: HTMLElement, { connectionId, evidence }: {
+    mountBadge(element: HTMLElement, { connectionId, evidence, maxAgeMs, }: {
         connectionId: string;
         evidence?: Evidence;
+        maxAgeMs?: number;
     }): Promise<void>;
     /**
      * Several of one subject's public connections as a single pill. One that cannot be

package/dist/browser/index.js

@@ -1,4 +1,4 @@
-import { accountsOf } from '../core/index.js';
+import { accountsOf, parseMaxAge, withMaxAge } from '../core/index.js';
 import { routePath } from '../core/routes.js';
 import { badgeShown, quietBadge, renderBadge, renderBadgeMessage, renderBadgePending, renderConnectPill, } from './badge.js';
 import { openConnectDialog, } from './connect-dialog.js';
@@ -92,7 +92,7 @@ function details(element) {
                         throw error;
                 }
             }
-        }, latestGroup.get(element), accounts, managers.get(element), openHosts.has(element));
+        }, latestGroup.get(element), (records) => accounts(aged(element, records)), managers.get(element), openHosts.has(element));
     }
 }
 /**
@@ -103,6 +103,24 @@ function details(element) {
 const stackedHosts = new WeakSet();
 const quietHosts = new WeakSet();
 const openHosts = new WeakSet();
+/** The max age each host was given, where the page set one. */
+const maxAges = new WeakMap();
+/** Sets or clears a host's max age. */
+function bound(element, maxAgeMs) {
+    if (maxAgeMs === undefined)
+        maxAges.delete(element);
+    else
+        maxAges.set(element, maxAgeMs);
+}
+/**
+ * The records as this host's max age has them read. Call it on records already resolved
+ * by `standing()`, since a signed record can carry different proof dates.
+ */
+function aged(element, records) {
+    const maxAgeMs = maxAges.get(element);
+    const now = Date.now();
+    return records.map((e) => withMaxAge(e, maxAgeMs, now));
+}
 /**
  * How many accounts a pill names before it counts the rest. A stacked pill pays for each
  * row in the page's height. A panel floats over the page and pays nothing, but it cannot
@@ -111,7 +129,8 @@ const openHosts = new WeakSet();
 const stackedAccounts = 4;
 const peekedAccounts = 8;
 /** Records how a host's pill is arranged, from what the page last said. */
-function arrange(element, { stacked, peek, detailsOpen }) {
+function arrange(element, { stacked, peek, detailsOpen, maxAgeMs }) {
+    bound(element, maxAgeMs);
     if (detailsOpen)
         openHosts.add(element);
     else
@@ -164,7 +183,7 @@ function accounts(records) {
  * `load` gives the records afresh when the dialog opens and as it stays open.
  */
 function presentGroup(element, records, load) {
-    const ordered = accounts(records.map(standing));
+    const ordered = accounts(aged(element, records.map(standing)));
     const verified = ordered.filter(live);
     const lead = verified[0] ?? ordered[0];
     latestGroup.set(element, records);
@@ -448,7 +467,8 @@ export function init({ backendUrl, handoffUrl }) {
                 throw new Error('Invalid evidence response');
             return data;
         },
-        async mountBadge(element, { connectionId, evidence }) {
+        async mountBadge(element, { connectionId, evidence, maxAgeMs, }) {
+            bound(element, maxAgeMs);
             // Evidence already in hand renders at once. Otherwise a host with nothing to show
             // gets the waiting pill, whose frame and mark the finished badge keeps; a host that
             // already shows a badge keeps it up until the check answers, so a periodic refresh
@@ -477,7 +497,7 @@ export function init({ backendUrl, handoffUrl }) {
                     return [fresh];
                 });
                 const draw = () => {
-                    const badge = renderBadge(element, standing(e));
+                    const badge = renderBadge(element, aged(element, [standing(e)])[0]);
                     // Null means the pill on screen is unchanged. Its handler stands, and reads the above.
                     if (badge)
                         opens(element, badge);
@@ -503,7 +523,10 @@ export function init({ backendUrl, handoffUrl }) {
             const ids = [...new Set(connectionIds)];
             arrange(element, arrangement);
             if (ids.length === 1)
-                return client.mountBadge(element, { connectionId: ids[0] });
+                return client.mountBadge(element, {
+                    connectionId: ids[0],
+                    maxAgeMs: arrangement.maxAgeMs,
+                });
             if (!badgeShown(element))
                 renderBadgePending(element);
             const read = async () => {
@@ -713,6 +736,7 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
             'stacked',
             'peek',
             'details-open',
+            'max-age',
         ];
         handed;
         /**
@@ -773,6 +797,7 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
                 stacked: this.getAttribute('stacked') !== null,
                 peek: this.getAttribute('peek') !== 'off',
                 detailsOpen: this.getAttribute('details-open') !== null,
+                maxAgeMs: parseMaxAge(this.getAttribute('max-age')),
             };
             // The holder's own badge, where the page says so: its dialog connects another
             // account, renews one and removes one, through the backend named. The host hears
@@ -838,7 +863,11 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
                 return;
             }
             if (backendUrl)
-                void init({ backendUrl }).mountBadge(this, { connectionId, evidence });
+                void init({ backendUrl }).mountBadge(this, {
+                    connectionId,
+                    evidence,
+                    maxAgeMs: arrangement.maxAgeMs,
+                });
         }
     });
 }

package/dist/core/index.d.ts

@@ -615,6 +615,30 @@ export declare function fresh(attestation: Attestation, now: number, freshness?:
  * proved when it happened, and a published proof when it was last read.
  */
 export declare function lastProved(evidence: Pick<Evidence, 'authenticatedAt' | 'attestations'>): number;
+/**
+ * Whether a sign-in or mailed code happened more than a day before the record was last
+ * approved. That only happens after a renewal by another method. Otherwise the two dates
+ * match and a card shows only the approval.
+ */
+export declare function authenticatedEarlier(evidence: Pick<Evidence, 'authenticatedAt' | 'approvedAt'>): boolean;
+/**
+ * Whether a record's account was last proved within `maxAgeMs` of `now`. A reader who
+ * wants recent proof sets its own bound: a sign-in counts once, a year ago or this morning,
+ * and only the reader knows how old is too old.
+ */
+export declare function recent(evidence: Pick<Evidence, 'authenticatedAt' | 'attestations'>, maxAgeMs: number, now: number): boolean;
+/**
+ * The record as a reader with a `maxAgeMs` bound sees it. A verified record last proved
+ * before the bound reads as unconfirmed: not disproved, only not proved recently enough.
+ * With no bound the record is returned as is.
+ */
+export declare function withMaxAge<T extends Evidence>(evidence: T, maxAgeMs: number | undefined, now: number): T;
+/**
+ * A max age written as a whole number with an optional unit: `s`, `m`, `h` or `d`. A bare
+ * number is seconds, as in HTTP and OpenID Connect. Returns milliseconds, or undefined
+ * for anything else.
+ */
+export declare function parseMaxAge(text: string | null | undefined): number | undefined;
 /**
  * The word for a record's state. Evidence can be read after it was issued, so an approval
  * that has run out since reads as expired whatever status it was issued with.

package/dist/core/index.js

@@ -80,6 +80,46 @@ export function lastProved(evidence) {
     const main = evidence.attestations.external[0];
     return main.artifactUrl ? main.confirmedAt : evidence.authenticatedAt;
 }
+/**
+ * Whether a sign-in or mailed code happened more than a day before the record was last
+ * approved. That only happens after a renewal by another method. Otherwise the two dates
+ * match and a card shows only the approval.
+ */
+export function authenticatedEarlier(evidence) {
+    return evidence.approvedAt - evidence.authenticatedAt > 86400000;
+}
+/**
+ * Whether a record's account was last proved within `maxAgeMs` of `now`. A reader who
+ * wants recent proof sets its own bound: a sign-in counts once, a year ago or this morning,
+ * and only the reader knows how old is too old.
+ */
+export function recent(evidence, maxAgeMs, now) {
+    return now - lastProved(evidence) <= maxAgeMs;
+}
+/**
+ * The record as a reader with a `maxAgeMs` bound sees it. A verified record last proved
+ * before the bound reads as unconfirmed: not disproved, only not proved recently enough.
+ * With no bound the record is returned as is.
+ */
+export function withMaxAge(evidence, maxAgeMs, now) {
+    return maxAgeMs !== undefined &&
+        evidence.status === 'verified' &&
+        !recent(evidence, maxAgeMs, now)
+        ? { ...evidence, status: 'unconfirmed' }
+        : evidence;
+}
+/**
+ * A max age written as a whole number with an optional unit: `s`, `m`, `h` or `d`. A bare
+ * number is seconds, as in HTTP and OpenID Connect. Returns milliseconds, or undefined
+ * for anything else.
+ */
+export function parseMaxAge(text) {
+    const match = /^\s*(\d+)\s*([smhd]?)\s*$/.exec(text ?? '');
+    if (!match)
+        return undefined;
+    const unit = { '': 1000, s: 1000, m: 60000, h: 3600000, d: 86400000 }[match[2]];
+    return Number(match[1]) * unit;
+}
 /**
  * The word for a record's state. Evidence can be read after it was issued, so an approval
  * that has run out since reads as expired whatever status it was issued with.

package/dist/instance/bin.js

@@ -1,9 +1,13 @@
 #!/usr/bin/env node
+import { parseArgs } from 'node:util';
 import { serve } from './serve.js';
 import { init } from './init.js';
+import { githubApp } from './github-app.js';
 const usage = `Usage:
   verily serve                    Run an instance on Node, from the environment.
-  verily init cloudflare [dir]    Write a Cloudflare project into dir.`;
+  verily init cloudflare [dir]    Write a Cloudflare project into dir.
+  verily github-app <callback>... [--org <name>] [--name <name>]
+                                  Create a GitHub App for sign-in, up to 10 callbacks.`;
 /** Writes the starter, then says what to do with it. */
 async function start(directory) {
     await init(directory);
@@ -15,6 +19,29 @@ Next, in that directory:
   3. npx wrangler secret put OWNER_KEY
   4. npm run deploy`);
 }
+/** Runs the manifest flow, then prints the app's credentials. */
+async function createGithubApp(args) {
+    const { values, positionals } = parseArgs({
+        args,
+        allowPositionals: true,
+        options: { org: { type: 'string' }, name: { type: 'string' } },
+    });
+    const app = await githubApp({
+        callbacks: positionals,
+        org: values.org,
+        name: values.name,
+        onReady: (url) => console.log(`Open ${url} in a browser signed in to GitHub.`),
+    });
+    console.log(`Created ${app.htmlUrl}
+
+GITHUB_CLIENT_ID=${app.clientId}
+GITHUB_CLIENT_SECRET=${app.clientSecret}
+
+Keep the secret on the server. GitHub shows it only this once.
+
+To show a logo when people sign in, upload one under Display information at
+${app.htmlUrl}`);
+}
 const [command, target, directory] = process.argv.slice(2);
 try {
     if (command === 'serve') {
@@ -25,6 +52,9 @@ try {
     else if (command === 'init' && target === 'cloudflare') {
         await start(directory ?? '.');
     }
+    else if (command === 'github-app') {
+        await createGithubApp(process.argv.slice(3));
+    }
     else {
         console.error(usage);
         process.exit(command === undefined || command === '--help' || command === '-h' ? 0 : 2);

package/dist/instance/github-app.d.ts

@@ -0,0 +1,26 @@
+/** What `githubApp()` gets back from GitHub once the app is created. */
+export interface GithubAppCredentials {
+    clientId: string;
+    clientSecret: string;
+    /** The app's settings page on GitHub. */
+    htmlUrl: string;
+}
+/**
+ * Registers a GitHub App for sign-in through GitHub's manifest flow. A local server serves a
+ * form that posts the manifest to GitHub, the holder clicks Create there, and GitHub
+ * redirects back with a code that is exchanged for the app's client id and secret.
+ *
+ * The app is public, so any GitHub account can sign in with it, and asks for no
+ * permissions and no webhook.
+ */
+export declare function githubApp(options: {
+    /** The callback URLs to register, at most 10. */
+    callbacks: string[];
+    /** The organization to own the app. Without one, the signed-in GitHub account owns it. */
+    org?: string;
+    /** The app's name, unique across GitHub. Defaults to one made from the first callback. */
+    name?: string;
+    fetch?: typeof fetch;
+    /** Called with the local address to open in a browser. */
+    onReady: (url: string) => void;
+}): Promise<GithubAppCredentials>;

package/dist/instance/github-app.js

@@ -0,0 +1,94 @@
+import { randomBytes } from 'node:crypto';
+import { createServer } from 'node:http';
+import { escape } from '../server/escape.js';
+/**
+ * Registers a GitHub App for sign-in through GitHub's manifest flow. A local server serves a
+ * form that posts the manifest to GitHub, the holder clicks Create there, and GitHub
+ * redirects back with a code that is exchanged for the app's client id and secret.
+ *
+ * The app is public, so any GitHub account can sign in with it, and asks for no
+ * permissions and no webhook.
+ */
+export async function githubApp(options) {
+    const { callbacks, org } = options;
+    const request = options.fetch ?? fetch;
+    if (callbacks.length === 0)
+        throw new Error('Name at least one callback URL');
+    if (callbacks.length > 10)
+        throw new Error('GitHub allows at most 10 callback URLs');
+    for (const callback of callbacks)
+        if (!URL.canParse(callback) || !/^https?:$/.test(new URL(callback).protocol))
+            throw new Error(`${callback} is not an http or https URL`);
+    if (org !== undefined && !/^[a-z\d](?:[a-z\d-]*[a-z\d])?$/i.test(org))
+        throw new Error(`${org} is not a GitHub organization name`);
+    // GitHub caps app names at 34 characters.
+    const name = options.name ?? `Verily ${new URL(callbacks[0]).hostname}`.slice(0, 34);
+    const state = randomBytes(16).toString('base64url');
+    const server = createServer();
+    await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
+    const local = `http://127.0.0.1:${server.address().port}`;
+    const manifest = {
+        name,
+        description: `Sign-in for Verily on ${new URL(callbacks[0]).hostname}.`,
+        url: new URL(callbacks[0]).origin,
+        redirect_url: `${local}/done`,
+        callback_urls: callbacks,
+        public: true,
+        hook_attributes: { url: new URL(callbacks[0]).origin, active: false },
+        default_permissions: {},
+    };
+    const target = new URL(org
+        ? `https://github.com/organizations/${org}/settings/apps/new`
+        : 'https://github.com/settings/apps/new');
+    target.searchParams.set('state', state);
+    const credentials = new Promise((resolve, reject) => {
+        server.on('request', (req, res) => {
+            const url = new URL(req.url ?? '/', local);
+            const reply = (status, title, text, body = '') => {
+                res.writeHead(status, { 'Content-Type': 'text/html; charset=utf-8' });
+                res.end(`<!doctype html><meta charset="utf-8"><title>${escape(title)}</title><p>${escape(text)}</p>${body}`);
+            };
+            if (url.pathname === '/') {
+                // The form submits itself, with a button for when scripts are off.
+                return reply(200, 'Create the GitHub App', 'Sending you to GitHub to create the app.', `<form method="post" action="${escape(target.href)}">` +
+                    `<input type="hidden" name="manifest" value="${escape(JSON.stringify(manifest))}">` +
+                    '<button>Continue to GitHub</button></form>' +
+                    '<script>document.forms[0].submit()</script>');
+            }
+            if (url.pathname !== '/done')
+                return reply(404, 'Not found', 'Not found.');
+            const code = url.searchParams.get('code');
+            // A request without the state this run made did not come from GitHub's redirect.
+            if (url.searchParams.get('state') !== state || !code)
+                return reply(400, 'Wrong link', 'This link is not from this run. Nothing was created.');
+            void convert(code).then((result) => {
+                reply(200, 'GitHub App created', 'The app is created. Go back to the terminal.');
+                resolve(result);
+            }, (error) => {
+                reply(502, 'Failed', 'GitHub did not return the app. See the terminal.');
+                reject(error);
+            });
+        });
+    });
+    async function convert(code) {
+        const response = await request(`https://api.github.com/app-manifests/${encodeURIComponent(code)}/conversions`, {
+            method: 'POST',
+            headers: { Accept: 'application/vnd.github+json', 'User-Agent': 'Verily-V0' },
+            signal: AbortSignal.timeout(15000),
+        });
+        const app = await response.json().catch(() => undefined);
+        if (!response.ok ||
+            !isRecord(app) ||
+            typeof app.client_id !== 'string' ||
+            typeof app.client_secret !== 'string' ||
+            typeof app.html_url !== 'string')
+            throw new Error(`GitHub did not return the app (HTTP ${response.status})`);
+        return { clientId: app.client_id, clientSecret: app.client_secret, htmlUrl: app.html_url };
+    }
+    options.onReady(`${local}/`);
+    // Closing waits for the last reply to be sent, then drops idle connections.
+    return await credentials.finally(() => server.close());
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}

package/dist/instance/index.js

@@ -907,8 +907,10 @@ class Server {
             html `<p class="evidence"><a href="${e.evidenceUrl}">Inspect evidence</a></p>`, html `<dl>${rows.map(([label, value]) => html `<dt>${label}</dt><dd>${value}</dd>`)}</dl>`, shown && html `<p class="fine">${shown}</p>`, !site &&
             e.visibility === 'public' &&
             html `
-              <p class="fine">Embed on your site</p>
-              <pre><code>${highlightHtml(embed)}</code></pre>
+              <details class="embed">
+                <summary class="fine">Embed on your site</summary>
+                <pre><code>${highlightHtml(embed)}</code></pre>
+              </details>
             `, html `
             ${(goes.length > 0 || listing) && html `<div class="actions">${goes}${listing}</div>`}
             ${ending}

package/dist/instance/starter.js

@@ -20,7 +20,7 @@ const wrangler = `// Your instance's Cloudflare settings. Fill in account_id and
   "account_id": "YOUR_CLOUDFLARE_ACCOUNT_ID",
   "main": "worker.ts",
   "compatibility_date": "2026-07-01",
-  "compatibility_flags": ["nodejs_compat"],
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
   // The library loads undici only on Node, so the Worker build gets a stand-in for it.
   "alias": { "undici": "@bkazemi/verily/instance/undici" },
 

package/dist/server/index.js

@@ -1,4 +1,4 @@
-import { attestationLabel, externalName, isArtifactProvider, isCodeProvider, isRedirectProvider, lastProved, accountsOf, localSide, proofTitle, providerMethod, statusLabel, signedBy, } from '../core/index.js';
+import { attestationLabel, externalName, isArtifactProvider, isCodeProvider, isRedirectProvider, authenticatedEarlier, lastProved, accountsOf, localSide, proofTitle, providerMethod, statusLabel, signedBy, } from '../core/index.js';
 import { artifactAttempts, codeAttempts, VerilyService, Unavailable, } from './service.js';
 import { copyScript, waitScript } from './copy.js';
 import { html } from './html.js';
@@ -400,7 +400,9 @@ function accountCard(e, external, now) {
         : [
             ['Approved', e.approvedAt],
             [e.expiresAt > now ? 'Valid until' : 'Expired on', e.expiresAt],
-            ['Last checked', external[0].artifactUrl ? external[0].confirmedAt : undefined],
+            external[0].artifactUrl
+                ? ['Last checked', external[0].confirmedAt]
+                : ['Authenticated', authenticatedEarlier(e) ? e.authenticatedAt : undefined],
         ])}
       </div>
     `, 

package/dist/server/service.d.ts

@@ -142,6 +142,8 @@ export declare class VerilyService {
     /** What a signed record says, if this instance signed it. */
     checked(signed: unknown): Promise<SignedDocument | undefined>;
     private get sendLimits();
+    /** How long an approval stands. A published proof that is still up extends it. */
+    private get validity();
     /** A proof is only as fresh as the schedule that reads it, so both live together. */
     private get freshness();
     validateLocal(local: LocalAccount): LocalAccount;

package/dist/server/service.js

@@ -173,6 +173,10 @@ export class VerilyService {
             address: this.options.sendLimits?.address ?? 5,
         };
     }
+    /** How long an approval stands. A published proof that is still up extends it. */
+    get validity() {
+        return this.options.validityMs ?? 365 * 86400000;
+    }
     /** A proof is only as fresh as the schedule that reads it, so both live together. */
     get freshness() {
         return this.options.freshnessMs ?? freshnessMs;
@@ -925,7 +929,7 @@ export class VerilyService {
                     authenticatedAt: flow.authenticatedAt,
                     approvedAt: this.now(),
                     connectedAt: this.now(),
-                    expiresAt: this.now() + (this.options.validityMs ?? 30 * 86400000),
+                    expiresAt: this.now() + this.validity,
                     attestations: {
                         local: this.declared(flow),
                         external: [this.attestation(flow, provider, connectionId)],
@@ -1229,7 +1233,7 @@ export class VerilyService {
         const created = createdAt === undefined ? {} : { createdAt };
         connection.local = flow.local;
         connection.approvedAt = this.now();
-        connection.expiresAt = this.now() + (this.options.validityMs ?? 30 * 86400000);
+        connection.expiresAt = this.now() + this.validity;
         connection.revocationReason = undefined;
         if (attestation.method === main.method) {
             connection.authenticatedAt = flow.authenticatedAt;
@@ -1537,6 +1541,19 @@ export class VerilyService {
         const interval = this.options.recheckMs ?? 86400000;
         const now = this.now();
         const spent = new Map();
+        // Validity counts from approval, so a longer term set since applies to running records.
+        await this.transaction(async (tx) => {
+            for (const connection of await tx.list('connections')) {
+                const term = connection.approvedAt + this.validity;
+                if (connection.revokedAt === undefined &&
+                    connection.retiredAt === undefined &&
+                    connection.expiresAt > now &&
+                    connection.expiresAt < term) {
+                    connection.expiresAt = term;
+                    await tx.put('connections', connection.id, connection);
+                }
+            }
+        });
         // When a proof was last read, or last tried. One whose last read did not confirm it,
         // because the read failed or the proof was missing, is tried again four times as soon.
         const tried = (a) => a.readAt ?? a.confirmedAt;
@@ -1718,6 +1735,10 @@ export class VerilyService {
             }
             held.confirmedAt = started;
             delete held.absentAt;
+            // A proof still up keeps its record running. It is moved only once half the term is
+            // gone, so a daily read does not report a new expiry every time.
+            if (current.expiresAt > started && current.expiresAt - started < this.validity / 2)
+                current.expiresAt = started + this.validity;
             // A zone can start or stop being signed, so the flag is as the last read found it.
             if (dnssec)
                 held.dnssec = true;

package/dist/server/style.css.d.ts

@@ -1,2 +1,2 @@
-declare const _default: ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    16px/1.65 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 {\n  margin-bottom: 1.25rem;\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) {\n  display: flex;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\nmain.single {\n  width: 100%;\n  max-width: 24rem;\n  margin: auto;\n  padding-bottom: 3rem;\n}\n\nh2 {\n  margin: 2rem 0 0.75rem;\n  font-size: 1.125rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\nh3 {\n  margin: 0 0 0.5rem;\n  font-size: 1rem;\n  font-weight: 620;\n}\n\np {\n  margin: 0 0 1rem;\n  overflow-wrap: break-word;\n}\n\na {\n  color: var(--accent);\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\na:hover {\n  text-decoration-thickness: 2px;\n}\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: 0.75rem 5.25rem 0.75rem 0.875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode {\n  font:\n    0.8125rem/1.6 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag {\n  color: var(--muted);\n}\n.hljs-name {\n  color: var(--syntax-tag);\n}\n.hljs-attr {\n  color: var(--syntax-attr);\n}\n.hljs-string {\n  color: var(--syntax-string);\n}\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.1875rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font:\n    500 0.75rem/1.5 system-ui,\n    sans-serif;\n  user-select: none;\n}\n\n.copy:hover {\n  color: var(--ink);\n  border-color: var(--muted);\n}\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: 0.75rem;\n  padding: 0.875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) {\n  max-width: 54rem;\n}\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.accounts .side {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  padding: 0.0625rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: 0.6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl {\n  margin-top: auto;\n}\n.accounts .rest {\n  display: flex;\n  flex-direction: column;\n}\n.accounts .rest > p:last-of-type {\n  margin-bottom: 0.625rem;\n}\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n  }\n  .subject {\n    width: calc(50% - 0.375rem);\n    margin-inline: auto;\n    text-align: center;\n  }\n  .subject .name {\n    justify-content: center;\n  }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 auto 0.75rem;\n  color: var(--muted);\n}\n\n.who {\n  margin: 0 0 0.125rem;\n  color: var(--muted);\n  font-size: 0.75rem;\n  font-weight: 550;\n  letter-spacing: 0.02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider {\n  display: inline-block;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.375rem;\n  vertical-align: -0.125rem;\n}\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 1rem;\n  margin: 0 0 0 -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n  font-size: 1.0625rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since {\n  position: relative;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n\n/* The dot sits in the gap before the date. */\n.name .since::before {\n  content: '\u00B7';\n  position: absolute;\n  left: -0.5rem;\n  transform: translateX(-50%);\n}\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a {\n  text-decoration: none;\n}\n\n.name a:hover {\n  text-decoration: underline;\n}\n\n.reference,\n.how {\n  margin: 0;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n}\n\n.identity + .how {\n  margin-top: 0.5rem;\n}\n.fingerprint {\n  font-family: ui-monospace, monospace;\n  text-wrap: balance;\n}\n.fingerprint span {\n  display: inline-block;\n  margin-right: 0.5ch;\n}\n.how.additional {\n  padding-left: 0.75rem;\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark {\n  display: inline-block;\n  margin-left: 0.3125rem;\n  padding: 0 0.375rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 0.0625rem;\n}\n\n.fine {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  margin-bottom: 0.625rem;\n}\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed {\n  font-size: 0.875rem;\n  line-height: 1.55;\n  margin-bottom: 0.875rem;\n}\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target {\n  margin-inline: -0.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: 0.8125rem;\n}\n\ndt {\n  color: var(--muted);\n}\n\ndd {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl {\n  margin: 0.5rem 0 1rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl {\n  padding-top: 0;\n  border-top: 0;\n}\n.side dl {\n  margin: 0.625rem 0 0;\n  padding-top: 0.625rem;\n}\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter {\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n}\nfooter > :last-child {\n  margin-bottom: 0;\n}\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child {\n  margin-bottom: 0;\n}\n\n/* What holds a control that cannot be undone. */\nsection.danger,\nsection.caution {\n  margin-top: 2rem;\n}\nsection.danger {\n  border-color: var(--warn);\n}\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution {\n  border-color: var(--caution);\n}\nsection > h2:first-child {\n  margin-top: 0;\n}\n\nform {\n  margin: 0 0 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin: 0 0 0.75rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\ninput,\ntextarea {\n  display: block;\n  width: 100%;\n  margin-top: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    0.875rem/1.5 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea {\n  resize: vertical;\n}\n\ninput:focus-visible,\ntextarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font:\n    500 0.9375rem/1.4 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button {\n  margin-left: 0.5rem;\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary {\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* A page's action and its alternative, side by side. */\n.choice {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choice form {\n  margin: 0;\n}\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices {\n  display: grid;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choices form {\n  margin: 0;\n}\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover {\n  border-color: var(--muted);\n}\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  vertical-align: -0.1875rem;\n}\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger {\n  border-color: var(--warn);\n  background: var(--warn);\n}\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.state {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  height: 1.625rem;\n  padding: 0 0.75rem 0 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n.verdict.pending {\n  opacity: 0.45;\n}\n.how .verdict {\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.3125rem;\n  vertical-align: -0.125rem;\n}\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\nh1 .verdict {\n  width: auto;\n  height: 2.25rem;\n}\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict {\n  width: auto;\n  height: 100%;\n}\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing {\n    padding: 0.3125rem 0.5rem;\n    text-box: trim-both cap alphabetic;\n  }\n  .state > span {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem 1.25rem;\n  font-size: 0.875rem;\n}\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n}\n\n.connection dl {\n  margin-bottom: 0.75rem;\n}\n.connection .side > :last-child {\n  margin-bottom: 0;\n}\n.connection pre {\n  margin: 0.75rem 0;\n  background: var(--surface);\n}\n.connection .actions {\n  margin-top: 0.875rem;\n}\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.actions form {\n  display: contents;\n}\n\n.actions button,\n.actions a.button {\n  margin: 0;\n  padding: 0.3125rem 0.75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n}\n\n.actions button:hover,\n.actions a.button:hover {\n  border-color: var(--muted);\n}\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--line);\n}\n.ending form {\n  margin: 0;\n}\n\n.ending button.danger {\n  padding: 0.3125rem 0.75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: 0.8125rem;\n}\n\nfieldset {\n  margin: 0 0 1.25rem;\n  padding: 1rem 1.125rem 0.25rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n}\n\nlegend {\n  padding: 0 0.375rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  color: var(--ink);\n  font-size: 0.9375rem;\n}\n\nfieldset input {\n  width: auto;\n  margin: 0;\n}\n\nfieldset p {\n  margin: 0.25rem 0 0.875rem 1.5rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n";
+declare const _default: ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    16px/1.65 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 {\n  margin-bottom: 1.25rem;\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) {\n  display: flex;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\nmain.single {\n  width: 100%;\n  max-width: 24rem;\n  margin: auto;\n  padding-bottom: 3rem;\n}\n\nh2 {\n  margin: 2rem 0 0.75rem;\n  font-size: 1.125rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\nh3 {\n  margin: 0 0 0.5rem;\n  font-size: 1rem;\n  font-weight: 620;\n}\n\np {\n  margin: 0 0 1rem;\n  overflow-wrap: break-word;\n}\n\na {\n  color: var(--accent);\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\na:hover {\n  text-decoration-thickness: 2px;\n}\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: 0.75rem 5.25rem 0.75rem 0.875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode {\n  font:\n    0.8125rem/1.6 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag {\n  color: var(--muted);\n}\n.hljs-name {\n  color: var(--syntax-tag);\n}\n.hljs-attr {\n  color: var(--syntax-attr);\n}\n.hljs-string {\n  color: var(--syntax-string);\n}\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.1875rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font:\n    500 0.75rem/1.5 system-ui,\n    sans-serif;\n  user-select: none;\n}\n\n.copy:hover {\n  color: var(--ink);\n  border-color: var(--muted);\n}\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: 0.75rem;\n  padding: 0.875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) {\n  max-width: 54rem;\n}\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.accounts .side {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  padding: 0.0625rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: 0.6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl {\n  margin-top: auto;\n}\n.accounts .rest {\n  display: flex;\n  flex-direction: column;\n}\n.accounts .rest > p:last-of-type {\n  margin-bottom: 0.625rem;\n}\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n  }\n  .subject {\n    width: calc(50% - 0.375rem);\n    margin-inline: auto;\n    text-align: center;\n  }\n  .subject .name {\n    justify-content: center;\n  }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 auto 0.75rem;\n  color: var(--muted);\n}\n\n.who {\n  margin: 0 0 0.125rem;\n  color: var(--muted);\n  font-size: 0.75rem;\n  font-weight: 550;\n  letter-spacing: 0.02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider {\n  display: inline-block;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.375rem;\n  vertical-align: -0.125rem;\n}\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 1rem;\n  margin: 0 0 0 -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n  font-size: 1.0625rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since {\n  position: relative;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n\n/* The dot sits in the gap before the date. */\n.name .since::before {\n  content: '\u00B7';\n  position: absolute;\n  left: -0.5rem;\n  transform: translateX(-50%);\n}\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a {\n  text-decoration: none;\n}\n\n.name a:hover {\n  text-decoration: underline;\n}\n\n.reference,\n.how {\n  margin: 0;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n}\n\n.identity + .how {\n  margin-top: 0.5rem;\n}\n.fingerprint {\n  font-family: ui-monospace, monospace;\n  text-wrap: balance;\n}\n.fingerprint span {\n  display: inline-block;\n  margin-right: 0.5ch;\n}\n.how.additional {\n  padding-left: 0.75rem;\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark {\n  display: inline-block;\n  margin-left: 0.3125rem;\n  padding: 0 0.375rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 0.0625rem;\n}\n\n.fine {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  margin-bottom: 0.625rem;\n}\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed {\n  font-size: 0.875rem;\n  line-height: 1.55;\n  margin-bottom: 0.875rem;\n}\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target {\n  margin-inline: -0.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: 0.8125rem;\n}\n\ndt {\n  color: var(--muted);\n}\n\ndd {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl {\n  margin: 0.5rem 0 1rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl {\n  padding-top: 0;\n  border-top: 0;\n}\n.side dl {\n  margin: 0.625rem 0 0;\n  padding-top: 0.625rem;\n}\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter {\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n}\nfooter > :last-child {\n  margin-bottom: 0;\n}\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child {\n  margin-bottom: 0;\n}\n\n/* What holds a control that cannot be undone. */\nsection.danger,\nsection.caution {\n  margin-top: 2rem;\n}\nsection.danger {\n  border-color: var(--warn);\n}\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution {\n  border-color: var(--caution);\n}\nsection > h2:first-child {\n  margin-top: 0;\n}\n\nform {\n  margin: 0 0 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin: 0 0 0.75rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\ninput,\ntextarea {\n  display: block;\n  width: 100%;\n  margin-top: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    0.875rem/1.5 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea {\n  resize: vertical;\n}\n\ninput:focus-visible,\ntextarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font:\n    500 0.9375rem/1.4 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button {\n  margin-left: 0.5rem;\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary {\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* A page's action and its alternative, side by side. */\n.choice {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choice form {\n  margin: 0;\n}\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices {\n  display: grid;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choices form {\n  margin: 0;\n}\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover {\n  border-color: var(--muted);\n}\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  vertical-align: -0.1875rem;\n}\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger {\n  border-color: var(--warn);\n  background: var(--warn);\n}\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.state {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  height: 1.625rem;\n  padding: 0 0.75rem 0 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n.verdict.pending {\n  opacity: 0.45;\n}\n.how .verdict {\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.3125rem;\n  vertical-align: -0.125rem;\n}\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\nh1 .verdict {\n  width: auto;\n  height: 2.25rem;\n}\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict {\n  width: auto;\n  height: 100%;\n}\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing {\n    padding: 0.3125rem 0.5rem;\n    text-box: trim-both cap alphabetic;\n  }\n  .state > span {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem 1.25rem;\n  font-size: 0.875rem;\n}\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n}\n\n.connection dl {\n  margin-bottom: 0.75rem;\n}\n.connection .side > :last-child {\n  margin-bottom: 0;\n}\n.connection pre {\n  margin: 0.75rem 0;\n  background: var(--surface);\n}\n\n/* The embed snippet is copied once, so it stays closed until asked for. */\n.embed summary {\n  width: fit-content;\n  cursor: pointer;\n}\n.embed summary:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n.embed pre {\n  margin-top: 0;\n}\n.connection .actions {\n  margin-top: 0.875rem;\n}\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.actions form {\n  display: contents;\n}\n\n.actions button,\n.actions a.button {\n  margin: 0;\n  padding: 0.3125rem 0.75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n}\n\n.actions button:hover,\n.actions a.button:hover {\n  border-color: var(--muted);\n}\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--line);\n}\n.ending form {\n  margin: 0;\n}\n\n.ending button.danger {\n  padding: 0.3125rem 0.75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: 0.8125rem;\n}\n\nfieldset {\n  margin: 0 0 1.25rem;\n  padding: 1rem 1.125rem 0.25rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n}\n\nlegend {\n  padding: 0 0.375rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  color: var(--ink);\n  font-size: 0.9375rem;\n}\n\nfieldset input {\n  width: auto;\n  margin: 0;\n}\n\nfieldset p {\n  margin: 0.25rem 0 0.875rem 1.5rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n";
 export default _default;

package/dist/server/style.css.js

@@ -1,2 +1,2 @@
 // Generated from style.css by scripts/css.mjs. Do not edit.
-export default ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    16px/1.65 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 {\n  margin-bottom: 1.25rem;\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) {\n  display: flex;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\nmain.single {\n  width: 100%;\n  max-width: 24rem;\n  margin: auto;\n  padding-bottom: 3rem;\n}\n\nh2 {\n  margin: 2rem 0 0.75rem;\n  font-size: 1.125rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\nh3 {\n  margin: 0 0 0.5rem;\n  font-size: 1rem;\n  font-weight: 620;\n}\n\np {\n  margin: 0 0 1rem;\n  overflow-wrap: break-word;\n}\n\na {\n  color: var(--accent);\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\na:hover {\n  text-decoration-thickness: 2px;\n}\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: 0.75rem 5.25rem 0.75rem 0.875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode {\n  font:\n    0.8125rem/1.6 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag {\n  color: var(--muted);\n}\n.hljs-name {\n  color: var(--syntax-tag);\n}\n.hljs-attr {\n  color: var(--syntax-attr);\n}\n.hljs-string {\n  color: var(--syntax-string);\n}\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.1875rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font:\n    500 0.75rem/1.5 system-ui,\n    sans-serif;\n  user-select: none;\n}\n\n.copy:hover {\n  color: var(--ink);\n  border-color: var(--muted);\n}\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: 0.75rem;\n  padding: 0.875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) {\n  max-width: 54rem;\n}\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.accounts .side {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  padding: 0.0625rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: 0.6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl {\n  margin-top: auto;\n}\n.accounts .rest {\n  display: flex;\n  flex-direction: column;\n}\n.accounts .rest > p:last-of-type {\n  margin-bottom: 0.625rem;\n}\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n  }\n  .subject {\n    width: calc(50% - 0.375rem);\n    margin-inline: auto;\n    text-align: center;\n  }\n  .subject .name {\n    justify-content: center;\n  }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 auto 0.75rem;\n  color: var(--muted);\n}\n\n.who {\n  margin: 0 0 0.125rem;\n  color: var(--muted);\n  font-size: 0.75rem;\n  font-weight: 550;\n  letter-spacing: 0.02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider {\n  display: inline-block;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.375rem;\n  vertical-align: -0.125rem;\n}\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 1rem;\n  margin: 0 0 0 -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n  font-size: 1.0625rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since {\n  position: relative;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n\n/* The dot sits in the gap before the date. */\n.name .since::before {\n  content: '·';\n  position: absolute;\n  left: -0.5rem;\n  transform: translateX(-50%);\n}\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a {\n  text-decoration: none;\n}\n\n.name a:hover {\n  text-decoration: underline;\n}\n\n.reference,\n.how {\n  margin: 0;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n}\n\n.identity + .how {\n  margin-top: 0.5rem;\n}\n.fingerprint {\n  font-family: ui-monospace, monospace;\n  text-wrap: balance;\n}\n.fingerprint span {\n  display: inline-block;\n  margin-right: 0.5ch;\n}\n.how.additional {\n  padding-left: 0.75rem;\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark {\n  display: inline-block;\n  margin-left: 0.3125rem;\n  padding: 0 0.375rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 0.0625rem;\n}\n\n.fine {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  margin-bottom: 0.625rem;\n}\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed {\n  font-size: 0.875rem;\n  line-height: 1.55;\n  margin-bottom: 0.875rem;\n}\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target {\n  margin-inline: -0.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: 0.8125rem;\n}\n\ndt {\n  color: var(--muted);\n}\n\ndd {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl {\n  margin: 0.5rem 0 1rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl {\n  padding-top: 0;\n  border-top: 0;\n}\n.side dl {\n  margin: 0.625rem 0 0;\n  padding-top: 0.625rem;\n}\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter {\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n}\nfooter > :last-child {\n  margin-bottom: 0;\n}\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child {\n  margin-bottom: 0;\n}\n\n/* What holds a control that cannot be undone. */\nsection.danger,\nsection.caution {\n  margin-top: 2rem;\n}\nsection.danger {\n  border-color: var(--warn);\n}\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution {\n  border-color: var(--caution);\n}\nsection > h2:first-child {\n  margin-top: 0;\n}\n\nform {\n  margin: 0 0 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin: 0 0 0.75rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\ninput,\ntextarea {\n  display: block;\n  width: 100%;\n  margin-top: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    0.875rem/1.5 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea {\n  resize: vertical;\n}\n\ninput:focus-visible,\ntextarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font:\n    500 0.9375rem/1.4 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button {\n  margin-left: 0.5rem;\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary {\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* A page's action and its alternative, side by side. */\n.choice {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choice form {\n  margin: 0;\n}\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices {\n  display: grid;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choices form {\n  margin: 0;\n}\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover {\n  border-color: var(--muted);\n}\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  vertical-align: -0.1875rem;\n}\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger {\n  border-color: var(--warn);\n  background: var(--warn);\n}\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.state {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  height: 1.625rem;\n  padding: 0 0.75rem 0 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n.verdict.pending {\n  opacity: 0.45;\n}\n.how .verdict {\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.3125rem;\n  vertical-align: -0.125rem;\n}\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\nh1 .verdict {\n  width: auto;\n  height: 2.25rem;\n}\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict {\n  width: auto;\n  height: 100%;\n}\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing {\n    padding: 0.3125rem 0.5rem;\n    text-box: trim-both cap alphabetic;\n  }\n  .state > span {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem 1.25rem;\n  font-size: 0.875rem;\n}\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n}\n\n.connection dl {\n  margin-bottom: 0.75rem;\n}\n.connection .side > :last-child {\n  margin-bottom: 0;\n}\n.connection pre {\n  margin: 0.75rem 0;\n  background: var(--surface);\n}\n.connection .actions {\n  margin-top: 0.875rem;\n}\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.actions form {\n  display: contents;\n}\n\n.actions button,\n.actions a.button {\n  margin: 0;\n  padding: 0.3125rem 0.75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n}\n\n.actions button:hover,\n.actions a.button:hover {\n  border-color: var(--muted);\n}\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--line);\n}\n.ending form {\n  margin: 0;\n}\n\n.ending button.danger {\n  padding: 0.3125rem 0.75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: 0.8125rem;\n}\n\nfieldset {\n  margin: 0 0 1.25rem;\n  padding: 1rem 1.125rem 0.25rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n}\n\nlegend {\n  padding: 0 0.375rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  color: var(--ink);\n  font-size: 0.9375rem;\n}\n\nfieldset input {\n  width: auto;\n  margin: 0;\n}\n\nfieldset p {\n  margin: 0.25rem 0 0.875rem 1.5rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n";
+export default ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    16px/1.65 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 {\n  margin-bottom: 1.25rem;\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) {\n  display: flex;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\nmain.single {\n  width: 100%;\n  max-width: 24rem;\n  margin: auto;\n  padding-bottom: 3rem;\n}\n\nh2 {\n  margin: 2rem 0 0.75rem;\n  font-size: 1.125rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\nh3 {\n  margin: 0 0 0.5rem;\n  font-size: 1rem;\n  font-weight: 620;\n}\n\np {\n  margin: 0 0 1rem;\n  overflow-wrap: break-word;\n}\n\na {\n  color: var(--accent);\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\na:hover {\n  text-decoration-thickness: 2px;\n}\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: 0.75rem 5.25rem 0.75rem 0.875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode {\n  font:\n    0.8125rem/1.6 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag {\n  color: var(--muted);\n}\n.hljs-name {\n  color: var(--syntax-tag);\n}\n.hljs-attr {\n  color: var(--syntax-attr);\n}\n.hljs-string {\n  color: var(--syntax-string);\n}\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.1875rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font:\n    500 0.75rem/1.5 system-ui,\n    sans-serif;\n  user-select: none;\n}\n\n.copy:hover {\n  color: var(--ink);\n  border-color: var(--muted);\n}\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: 0.75rem;\n  padding: 0.875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) {\n  max-width: 54rem;\n}\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.accounts .side {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  padding: 0.0625rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: 0.6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl {\n  margin-top: auto;\n}\n.accounts .rest {\n  display: flex;\n  flex-direction: column;\n}\n.accounts .rest > p:last-of-type {\n  margin-bottom: 0.625rem;\n}\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n  }\n  .subject {\n    width: calc(50% - 0.375rem);\n    margin-inline: auto;\n    text-align: center;\n  }\n  .subject .name {\n    justify-content: center;\n  }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 auto 0.75rem;\n  color: var(--muted);\n}\n\n.who {\n  margin: 0 0 0.125rem;\n  color: var(--muted);\n  font-size: 0.75rem;\n  font-weight: 550;\n  letter-spacing: 0.02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider {\n  display: inline-block;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.375rem;\n  vertical-align: -0.125rem;\n}\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 1rem;\n  margin: 0 0 0 -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n  font-size: 1.0625rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since {\n  position: relative;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n\n/* The dot sits in the gap before the date. */\n.name .since::before {\n  content: '·';\n  position: absolute;\n  left: -0.5rem;\n  transform: translateX(-50%);\n}\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a {\n  text-decoration: none;\n}\n\n.name a:hover {\n  text-decoration: underline;\n}\n\n.reference,\n.how {\n  margin: 0;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n}\n\n.identity + .how {\n  margin-top: 0.5rem;\n}\n.fingerprint {\n  font-family: ui-monospace, monospace;\n  text-wrap: balance;\n}\n.fingerprint span {\n  display: inline-block;\n  margin-right: 0.5ch;\n}\n.how.additional {\n  padding-left: 0.75rem;\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark {\n  display: inline-block;\n  margin-left: 0.3125rem;\n  padding: 0 0.375rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 0.0625rem;\n}\n\n.fine {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  margin-bottom: 0.625rem;\n}\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed {\n  font-size: 0.875rem;\n  line-height: 1.55;\n  margin-bottom: 0.875rem;\n}\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target {\n  margin-inline: -0.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: 0.8125rem;\n}\n\ndt {\n  color: var(--muted);\n}\n\ndd {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl {\n  margin: 0.5rem 0 1rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl {\n  padding-top: 0;\n  border-top: 0;\n}\n.side dl {\n  margin: 0.625rem 0 0;\n  padding-top: 0.625rem;\n}\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter {\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n}\nfooter > :last-child {\n  margin-bottom: 0;\n}\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child {\n  margin-bottom: 0;\n}\n\n/* What holds a control that cannot be undone. */\nsection.danger,\nsection.caution {\n  margin-top: 2rem;\n}\nsection.danger {\n  border-color: var(--warn);\n}\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution {\n  border-color: var(--caution);\n}\nsection > h2:first-child {\n  margin-top: 0;\n}\n\nform {\n  margin: 0 0 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin: 0 0 0.75rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\ninput,\ntextarea {\n  display: block;\n  width: 100%;\n  margin-top: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    0.875rem/1.5 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea {\n  resize: vertical;\n}\n\ninput:focus-visible,\ntextarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font:\n    500 0.9375rem/1.4 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button {\n  margin-left: 0.5rem;\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary {\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* A page's action and its alternative, side by side. */\n.choice {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choice form {\n  margin: 0;\n}\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices {\n  display: grid;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choices form {\n  margin: 0;\n}\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover {\n  border-color: var(--muted);\n}\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  vertical-align: -0.1875rem;\n}\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger {\n  border-color: var(--warn);\n  background: var(--warn);\n}\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.state {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  height: 1.625rem;\n  padding: 0 0.75rem 0 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n.verdict.pending {\n  opacity: 0.45;\n}\n.how .verdict {\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.3125rem;\n  vertical-align: -0.125rem;\n}\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\nh1 .verdict {\n  width: auto;\n  height: 2.25rem;\n}\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict {\n  width: auto;\n  height: 100%;\n}\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing {\n    padding: 0.3125rem 0.5rem;\n    text-box: trim-both cap alphabetic;\n  }\n  .state > span {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem 1.25rem;\n  font-size: 0.875rem;\n}\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n}\n\n.connection dl {\n  margin-bottom: 0.75rem;\n}\n.connection .side > :last-child {\n  margin-bottom: 0;\n}\n.connection pre {\n  margin: 0.75rem 0;\n  background: var(--surface);\n}\n\n/* The embed snippet is copied once, so it stays closed until asked for. */\n.embed summary {\n  width: fit-content;\n  cursor: pointer;\n}\n.embed summary:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n.embed pre {\n  margin-top: 0;\n}\n.connection .actions {\n  margin-top: 0.875rem;\n}\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.actions form {\n  display: contents;\n}\n\n.actions button,\n.actions a.button {\n  margin: 0;\n  padding: 0.3125rem 0.75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n}\n\n.actions button:hover,\n.actions a.button:hover {\n  border-color: var(--muted);\n}\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--line);\n}\n.ending form {\n  margin: 0;\n}\n\n.ending button.danger {\n  padding: 0.3125rem 0.75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: 0.8125rem;\n}\n\nfieldset {\n  margin: 0 0 1.25rem;\n  padding: 1rem 1.125rem 0.25rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n}\n\nlegend {\n  padding: 0 0.375rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  color: var(--ink);\n  font-size: 0.9375rem;\n}\n\nfieldset input {\n  width: auto;\n  margin: 0;\n}\n\nfieldset p {\n  margin: 0.25rem 0 0.875rem 1.5rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n";

package/dist/server/style.d.ts

@@ -8,7 +8,7 @@
  * leaves. So the styling does the two things that helps with, a measured column and a
  * legible hierarchy, and nothing that would make a record look like a product.
  */
-export declare const stylesheet = ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    16px/1.65 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 {\n  margin-bottom: 1.25rem;\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) {\n  display: flex;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\nmain.single {\n  width: 100%;\n  max-width: 24rem;\n  margin: auto;\n  padding-bottom: 3rem;\n}\n\nh2 {\n  margin: 2rem 0 0.75rem;\n  font-size: 1.125rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\nh3 {\n  margin: 0 0 0.5rem;\n  font-size: 1rem;\n  font-weight: 620;\n}\n\np {\n  margin: 0 0 1rem;\n  overflow-wrap: break-word;\n}\n\na {\n  color: var(--accent);\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\na:hover {\n  text-decoration-thickness: 2px;\n}\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: 0.75rem 5.25rem 0.75rem 0.875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode {\n  font:\n    0.8125rem/1.6 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag {\n  color: var(--muted);\n}\n.hljs-name {\n  color: var(--syntax-tag);\n}\n.hljs-attr {\n  color: var(--syntax-attr);\n}\n.hljs-string {\n  color: var(--syntax-string);\n}\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.1875rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font:\n    500 0.75rem/1.5 system-ui,\n    sans-serif;\n  user-select: none;\n}\n\n.copy:hover {\n  color: var(--ink);\n  border-color: var(--muted);\n}\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: 0.75rem;\n  padding: 0.875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) {\n  max-width: 54rem;\n}\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.accounts .side {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  padding: 0.0625rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: 0.6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl {\n  margin-top: auto;\n}\n.accounts .rest {\n  display: flex;\n  flex-direction: column;\n}\n.accounts .rest > p:last-of-type {\n  margin-bottom: 0.625rem;\n}\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n  }\n  .subject {\n    width: calc(50% - 0.375rem);\n    margin-inline: auto;\n    text-align: center;\n  }\n  .subject .name {\n    justify-content: center;\n  }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 auto 0.75rem;\n  color: var(--muted);\n}\n\n.who {\n  margin: 0 0 0.125rem;\n  color: var(--muted);\n  font-size: 0.75rem;\n  font-weight: 550;\n  letter-spacing: 0.02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider {\n  display: inline-block;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.375rem;\n  vertical-align: -0.125rem;\n}\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 1rem;\n  margin: 0 0 0 -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n  font-size: 1.0625rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since {\n  position: relative;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n\n/* The dot sits in the gap before the date. */\n.name .since::before {\n  content: '\u00B7';\n  position: absolute;\n  left: -0.5rem;\n  transform: translateX(-50%);\n}\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a {\n  text-decoration: none;\n}\n\n.name a:hover {\n  text-decoration: underline;\n}\n\n.reference,\n.how {\n  margin: 0;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n}\n\n.identity + .how {\n  margin-top: 0.5rem;\n}\n.fingerprint {\n  font-family: ui-monospace, monospace;\n  text-wrap: balance;\n}\n.fingerprint span {\n  display: inline-block;\n  margin-right: 0.5ch;\n}\n.how.additional {\n  padding-left: 0.75rem;\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark {\n  display: inline-block;\n  margin-left: 0.3125rem;\n  padding: 0 0.375rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 0.0625rem;\n}\n\n.fine {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  margin-bottom: 0.625rem;\n}\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed {\n  font-size: 0.875rem;\n  line-height: 1.55;\n  margin-bottom: 0.875rem;\n}\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target {\n  margin-inline: -0.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: 0.8125rem;\n}\n\ndt {\n  color: var(--muted);\n}\n\ndd {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl {\n  margin: 0.5rem 0 1rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl {\n  padding-top: 0;\n  border-top: 0;\n}\n.side dl {\n  margin: 0.625rem 0 0;\n  padding-top: 0.625rem;\n}\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter {\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n}\nfooter > :last-child {\n  margin-bottom: 0;\n}\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child {\n  margin-bottom: 0;\n}\n\n/* What holds a control that cannot be undone. */\nsection.danger,\nsection.caution {\n  margin-top: 2rem;\n}\nsection.danger {\n  border-color: var(--warn);\n}\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution {\n  border-color: var(--caution);\n}\nsection > h2:first-child {\n  margin-top: 0;\n}\n\nform {\n  margin: 0 0 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin: 0 0 0.75rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\ninput,\ntextarea {\n  display: block;\n  width: 100%;\n  margin-top: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    0.875rem/1.5 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea {\n  resize: vertical;\n}\n\ninput:focus-visible,\ntextarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font:\n    500 0.9375rem/1.4 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button {\n  margin-left: 0.5rem;\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary {\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* A page's action and its alternative, side by side. */\n.choice {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choice form {\n  margin: 0;\n}\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices {\n  display: grid;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choices form {\n  margin: 0;\n}\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover {\n  border-color: var(--muted);\n}\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  vertical-align: -0.1875rem;\n}\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger {\n  border-color: var(--warn);\n  background: var(--warn);\n}\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.state {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  height: 1.625rem;\n  padding: 0 0.75rem 0 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n.verdict.pending {\n  opacity: 0.45;\n}\n.how .verdict {\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.3125rem;\n  vertical-align: -0.125rem;\n}\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\nh1 .verdict {\n  width: auto;\n  height: 2.25rem;\n}\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict {\n  width: auto;\n  height: 100%;\n}\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing {\n    padding: 0.3125rem 0.5rem;\n    text-box: trim-both cap alphabetic;\n  }\n  .state > span {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem 1.25rem;\n  font-size: 0.875rem;\n}\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n}\n\n.connection dl {\n  margin-bottom: 0.75rem;\n}\n.connection .side > :last-child {\n  margin-bottom: 0;\n}\n.connection pre {\n  margin: 0.75rem 0;\n  background: var(--surface);\n}\n.connection .actions {\n  margin-top: 0.875rem;\n}\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.actions form {\n  display: contents;\n}\n\n.actions button,\n.actions a.button {\n  margin: 0;\n  padding: 0.3125rem 0.75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n}\n\n.actions button:hover,\n.actions a.button:hover {\n  border-color: var(--muted);\n}\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--line);\n}\n.ending form {\n  margin: 0;\n}\n\n.ending button.danger {\n  padding: 0.3125rem 0.75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: 0.8125rem;\n}\n\nfieldset {\n  margin: 0 0 1.25rem;\n  padding: 1rem 1.125rem 0.25rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n}\n\nlegend {\n  padding: 0 0.375rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  color: var(--ink);\n  font-size: 0.9375rem;\n}\n\nfieldset input {\n  width: auto;\n  margin: 0;\n}\n\nfieldset p {\n  margin: 0.25rem 0 0.875rem 1.5rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n";
+export declare const stylesheet = ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    16px/1.65 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 {\n  margin-bottom: 1.25rem;\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) {\n  display: flex;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\nmain.single {\n  width: 100%;\n  max-width: 24rem;\n  margin: auto;\n  padding-bottom: 3rem;\n}\n\nh2 {\n  margin: 2rem 0 0.75rem;\n  font-size: 1.125rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\nh3 {\n  margin: 0 0 0.5rem;\n  font-size: 1rem;\n  font-weight: 620;\n}\n\np {\n  margin: 0 0 1rem;\n  overflow-wrap: break-word;\n}\n\na {\n  color: var(--accent);\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\na:hover {\n  text-decoration-thickness: 2px;\n}\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: 0.75rem 5.25rem 0.75rem 0.875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode {\n  font:\n    0.8125rem/1.6 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag {\n  color: var(--muted);\n}\n.hljs-name {\n  color: var(--syntax-tag);\n}\n.hljs-attr {\n  color: var(--syntax-attr);\n}\n.hljs-string {\n  color: var(--syntax-string);\n}\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.1875rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font:\n    500 0.75rem/1.5 system-ui,\n    sans-serif;\n  user-select: none;\n}\n\n.copy:hover {\n  color: var(--ink);\n  border-color: var(--muted);\n}\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: 0.75rem;\n  padding: 0.875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) {\n  max-width: 54rem;\n}\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.accounts .side {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  padding: 0.0625rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: 0.6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl {\n  margin-top: auto;\n}\n.accounts .rest {\n  display: flex;\n  flex-direction: column;\n}\n.accounts .rest > p:last-of-type {\n  margin-bottom: 0.625rem;\n}\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n  }\n  .subject {\n    width: calc(50% - 0.375rem);\n    margin-inline: auto;\n    text-align: center;\n  }\n  .subject .name {\n    justify-content: center;\n  }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 auto 0.75rem;\n  color: var(--muted);\n}\n\n.who {\n  margin: 0 0 0.125rem;\n  color: var(--muted);\n  font-size: 0.75rem;\n  font-weight: 550;\n  letter-spacing: 0.02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider {\n  display: inline-block;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.375rem;\n  vertical-align: -0.125rem;\n}\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 1rem;\n  margin: 0 0 0 -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n  font-size: 1.0625rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since {\n  position: relative;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n\n/* The dot sits in the gap before the date. */\n.name .since::before {\n  content: '\u00B7';\n  position: absolute;\n  left: -0.5rem;\n  transform: translateX(-50%);\n}\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a {\n  text-decoration: none;\n}\n\n.name a:hover {\n  text-decoration: underline;\n}\n\n.reference,\n.how {\n  margin: 0;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n}\n\n.identity + .how {\n  margin-top: 0.5rem;\n}\n.fingerprint {\n  font-family: ui-monospace, monospace;\n  text-wrap: balance;\n}\n.fingerprint span {\n  display: inline-block;\n  margin-right: 0.5ch;\n}\n.how.additional {\n  padding-left: 0.75rem;\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark {\n  display: inline-block;\n  margin-left: 0.3125rem;\n  padding: 0 0.375rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 0.0625rem;\n}\n\n.fine {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  margin-bottom: 0.625rem;\n}\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed {\n  font-size: 0.875rem;\n  line-height: 1.55;\n  margin-bottom: 0.875rem;\n}\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target {\n  margin-inline: -0.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: 0.8125rem;\n}\n\ndt {\n  color: var(--muted);\n}\n\ndd {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl {\n  margin: 0.5rem 0 1rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl {\n  padding-top: 0;\n  border-top: 0;\n}\n.side dl {\n  margin: 0.625rem 0 0;\n  padding-top: 0.625rem;\n}\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter {\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n}\nfooter > :last-child {\n  margin-bottom: 0;\n}\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child {\n  margin-bottom: 0;\n}\n\n/* What holds a control that cannot be undone. */\nsection.danger,\nsection.caution {\n  margin-top: 2rem;\n}\nsection.danger {\n  border-color: var(--warn);\n}\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution {\n  border-color: var(--caution);\n}\nsection > h2:first-child {\n  margin-top: 0;\n}\n\nform {\n  margin: 0 0 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin: 0 0 0.75rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\ninput,\ntextarea {\n  display: block;\n  width: 100%;\n  margin-top: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    0.875rem/1.5 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea {\n  resize: vertical;\n}\n\ninput:focus-visible,\ntextarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font:\n    500 0.9375rem/1.4 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button {\n  margin-left: 0.5rem;\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary {\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* A page's action and its alternative, side by side. */\n.choice {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choice form {\n  margin: 0;\n}\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices {\n  display: grid;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choices form {\n  margin: 0;\n}\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover {\n  border-color: var(--muted);\n}\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  vertical-align: -0.1875rem;\n}\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger {\n  border-color: var(--warn);\n  background: var(--warn);\n}\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.state {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  height: 1.625rem;\n  padding: 0 0.75rem 0 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n.verdict.pending {\n  opacity: 0.45;\n}\n.how .verdict {\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.3125rem;\n  vertical-align: -0.125rem;\n}\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\nh1 .verdict {\n  width: auto;\n  height: 2.25rem;\n}\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict {\n  width: auto;\n  height: 100%;\n}\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing {\n    padding: 0.3125rem 0.5rem;\n    text-box: trim-both cap alphabetic;\n  }\n  .state > span {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem 1.25rem;\n  font-size: 0.875rem;\n}\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n}\n\n.connection dl {\n  margin-bottom: 0.75rem;\n}\n.connection .side > :last-child {\n  margin-bottom: 0;\n}\n.connection pre {\n  margin: 0.75rem 0;\n  background: var(--surface);\n}\n\n/* The embed snippet is copied once, so it stays closed until asked for. */\n.embed summary {\n  width: fit-content;\n  cursor: pointer;\n}\n.embed summary:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n.embed pre {\n  margin-top: 0;\n}\n.connection .actions {\n  margin-top: 0.875rem;\n}\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.actions form {\n  display: contents;\n}\n\n.actions button,\n.actions a.button {\n  margin: 0;\n  padding: 0.3125rem 0.75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n}\n\n.actions button:hover,\n.actions a.button:hover {\n  border-color: var(--muted);\n}\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--line);\n}\n.ending form {\n  margin: 0;\n}\n\n.ending button.danger {\n  padding: 0.3125rem 0.75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: 0.8125rem;\n}\n\nfieldset {\n  margin: 0 0 1.25rem;\n  padding: 1rem 1.125rem 0.25rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n}\n\nlegend {\n  padding: 0 0.375rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  color: var(--ink);\n  font-size: 0.9375rem;\n}\n\nfieldset input {\n  width: auto;\n  margin: 0;\n}\n\nfieldset p {\n  margin: 0.25rem 0 0.875rem 1.5rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n";
 /**
  * A short digest of the sheet above, put in the link's query so a release that changes the
  * styling changes its address. Without that the only safe cache is no cache: a reader who

package/dist/site/index.d.ts

@@ -1,4 +1,4 @@
-import type { Evidence, LocalKind, Visibility } from '../core/index.js';
+import { type Evidence, type LocalKind, type Visibility } from '../core/index.js';
 /**
  * For a site that uses a hosted Verily instance instead of running its own. The site's
  * backend does three things, and this is all of them: it vouches to the instance for its
@@ -120,10 +120,13 @@ export declare function createSiteClient(options: SiteClientOptions): {
      * them with. Only this site can read them. Every id asked for is in the answer, with an
      * empty list for a subject who has none. Revoked and expired records are included, so
      * show one only when its `status` is `verified`. With `cacheMs` set, an answer read
-     * within it is reused unless `fresh` asks for a new one.
+     * within it is reused unless `fresh` asks for a new one. With `maxAgeMs` set, a
+     * verified record whose account was last proved longer ago than that reads as
+     * `unconfirmed`.
      */
-    connections(ids: string[], { fresh }?: {
+    connections(ids: string[], { fresh, maxAgeMs }?: {
         fresh?: boolean;
+        maxAgeMs?: number;
     }): Promise<Record<string, Evidence[]>>;
     /**
      * For the return endpoint: the result a user came back with, if the instance signed it

package/dist/site/index.js

@@ -1,3 +1,4 @@
+import { withMaxAge } from '../core/index.js';
 /** How many subjects the instance reads in one request. */
 const maxReadIds = 50;
 const encoder = new TextEncoder();
@@ -127,9 +128,11 @@ export function createSiteClient(options) {
          * them with. Only this site can read them. Every id asked for is in the answer, with an
          * empty list for a subject who has none. Revoked and expired records are included, so
          * show one only when its `status` is `verified`. With `cacheMs` set, an answer read
-         * within it is reused unless `fresh` asks for a new one.
+         * within it is reused unless `fresh` asks for a new one. With `maxAgeMs` set, a
+         * verified record whose account was last proved longer ago than that reads as
+         * `unconfirmed`.
          */
-        async connections(ids, { fresh = false } = {}) {
+        async connections(ids, { fresh = false, maxAgeMs } = {}) {
             // No prototype, so an id such as `__proto__` is an entry like any other.
             const answer = Object.create(null);
             const found = Object.create(null);
@@ -169,7 +172,7 @@ export function createSiteClient(options) {
                 }
             }
             for (const [id, name] of names)
-                answer[id] = found[name] ?? [];
+                answer[id] = (found[name] ?? []).map((e) => withMaxAge(e, maxAgeMs, now));
             return answer;
         },
         /**

package/dist/verily.js

@@ -9577,6 +9577,7 @@ var Verily = (() => {
     Refused: () => Refused,
     accountsOf: () => accountsOf,
     attestationLabel: () => attestationLabel,
+    authenticatedEarlier: () => authenticatedEarlier,
     dialogPath: () => dialogPath,
     dialogRoute: () => dialogRoute,
     expired: () => expired,
@@ -9593,17 +9594,20 @@ var Verily = (() => {
     isRedirectProvider: () => isRedirectProvider,
     lastProved: () => lastProved,
     localSide: () => localSide,
+    parseMaxAge: () => parseMaxAge,
     place: () => place,
     presentConnections: () => presentConnections,
     proofTitle: () => proofTitle,
     providerMethod: () => providerMethod,
+    recent: () => recent,
     routeOf: () => routeOf,
     routePath: () => routePath,
     routes: () => routes,
     signedBy: () => signedBy,
     status: () => status,
     statusLabel: () => statusLabel,
-    verifySigned: () => verifySigned
+    verifySigned: () => verifySigned,
+    withMaxAge: () => withMaxAge
   });
 
   // src/core/signed.ts
@@ -9753,6 +9757,21 @@ var Verily = (() => {
     const main = evidence.attestations.external[0];
     return main.artifactUrl ? main.confirmedAt : evidence.authenticatedAt;
   }
+  function authenticatedEarlier(evidence) {
+    return evidence.approvedAt - evidence.authenticatedAt > 864e5;
+  }
+  function recent(evidence, maxAgeMs, now) {
+    return now - lastProved(evidence) <= maxAgeMs;
+  }
+  function withMaxAge(evidence, maxAgeMs, now) {
+    return maxAgeMs !== void 0 && evidence.status === "verified" && !recent(evidence, maxAgeMs, now) ? { ...evidence, status: "unconfirmed" } : evidence;
+  }
+  function parseMaxAge(text) {
+    const match = /^\s*(\d+)\s*([smhd]?)\s*$/.exec(text ?? "");
+    if (!match) return void 0;
+    const unit = { "": 1e3, s: 1e3, m: 6e4, h: 36e5, d: 864e5 }[match[2]];
+    return Number(match[1]) * unit;
+  }
   function statusLabel(evidence, now) {
     if (evidence.status === "revoked") return "Revoked";
     if (evidence.status === "retired") return "Retired";
@@ -10987,7 +11006,7 @@ ${claims(evidence)}`;
   }
 
   // src/version.ts
-  var version = "v0.9.5";
+  var version = "v0.10.0";
 
   // src/browser/evidence-dialog.ts
   function stampLink() {
@@ -11412,7 +11431,11 @@ ${claims(evidence)}`;
       ]);
     }
     const main = evidence.attestations.external[0];
-    if (main.artifactUrl && !retired) dateRows.push(["Last checked", main.confirmedAt]);
+    if (!retired) {
+      if (main.artifactUrl) dateRows.push(["Last checked", main.confirmedAt]);
+      else if (authenticatedEarlier(evidence))
+        dateRows.push(["Authenticated", evidence.authenticatedAt]);
+    }
     for (const [label, time] of dateRows) {
       dates.append(node("dt", label), node("dd", moment(time)));
     }
@@ -12228,7 +12251,7 @@ ${record2.external.id}`;
           }
         },
         latestGroup.get(element),
-        accounts,
+        (records) => accounts(aged(element, records)),
         managers.get(element),
         openHosts.has(element)
       );
@@ -12237,9 +12260,20 @@ ${record2.external.id}`;
   var stackedHosts = /* @__PURE__ */ new WeakSet();
   var quietHosts = /* @__PURE__ */ new WeakSet();
   var openHosts = /* @__PURE__ */ new WeakSet();
+  var maxAges = /* @__PURE__ */ new WeakMap();
+  function bound(element, maxAgeMs) {
+    if (maxAgeMs === void 0) maxAges.delete(element);
+    else maxAges.set(element, maxAgeMs);
+  }
+  function aged(element, records) {
+    const maxAgeMs = maxAges.get(element);
+    const now = Date.now();
+    return records.map((e2) => withMaxAge(e2, maxAgeMs, now));
+  }
   var stackedAccounts = 4;
   var peekedAccounts = 8;
-  function arrange(element, { stacked, peek, detailsOpen }) {
+  function arrange(element, { stacked, peek, detailsOpen, maxAgeMs }) {
+    bound(element, maxAgeMs);
     if (detailsOpen) openHosts.add(element);
     else openHosts.delete(element);
     if (stacked) stackedHosts.add(element);
@@ -12259,7 +12293,7 @@ ${record2.external.id}`;
     }));
   }
   function presentGroup(element, records, load2) {
-    const ordered = accounts(records.map(standing));
+    const ordered = accounts(aged(element, records.map(standing)));
     const verified = ordered.filter(live);
     const lead = verified[0] ?? ordered[0];
     latestGroup.set(element, records);
@@ -12341,8 +12375,8 @@ ${record2.external.id}`;
       });
       if (!response.ok) throw new Error("Verily request unavailable");
       const answer = await response.json();
-      const bound = response.headers.get("X-Verily-Flow");
-      if (bound && record(answer) && typeof answer.id === "string") bindings.set(answer.id, bound);
+      const bound2 = response.headers.get("X-Verily-Flow");
+      if (bound2 && record(answer) && typeof answer.id === "string") bindings.set(answer.id, bound2);
       return answer;
     }
     async function request(path, data) {
@@ -12491,7 +12525,12 @@ ${record2.external.id}`;
         if (!validEvidence(data)) throw new Error("Invalid evidence response");
         return data;
       },
-      async mountBadge(element, { connectionId, evidence }) {
+      async mountBadge(element, {
+        connectionId,
+        evidence,
+        maxAgeMs
+      }) {
+        bound(element, maxAgeMs);
         if (!evidence && !badgeShown(element)) renderBadgePending(element);
         const current = begin(element);
         try {
@@ -12508,7 +12547,7 @@ ${record2.external.id}`;
             return [fresh2];
           });
           const draw = () => {
-            const badge = renderBadge(element, standing(e2));
+            const badge = renderBadge(element, aged(element, [standing(e2)])[0]);
             if (badge) opens(element, badge);
           };
           draw();
@@ -12527,7 +12566,11 @@ ${record2.external.id}`;
       async mountBadges(element, { connectionIds, ...arrangement }) {
         const ids = [...new Set(connectionIds)];
         arrange(element, arrangement);
-        if (ids.length === 1) return client.mountBadge(element, { connectionId: ids[0] });
+        if (ids.length === 1)
+          return client.mountBadge(element, {
+            connectionId: ids[0],
+            maxAgeMs: arrangement.maxAgeMs
+          });
         if (!badgeShown(element)) renderBadgePending(element);
         const read2 = async () => {
           const answers = await Promise.allSettled(ids.map((id) => client.getConnection(id)));
@@ -12672,7 +12715,8 @@ ${record2.external.id}`;
           "connect",
           "stacked",
           "peek",
-          "details-open"
+          "details-open",
+          "max-age"
         ];
         handed;
         /**
@@ -12727,7 +12771,8 @@ ${record2.external.id}`;
           const arrangement = {
             stacked: this.getAttribute("stacked") !== null,
             peek: this.getAttribute("peek") !== "off",
-            detailsOpen: this.getAttribute("details-open") !== null
+            detailsOpen: this.getAttribute("details-open") !== null,
+            maxAgeMs: parseMaxAge(this.getAttribute("max-age"))
           };
           if (backendUrl && (handoffUrl !== null || this.getAttribute("connect") !== null)) {
             const client = init({ backendUrl, handoffUrl: handoffUrl ?? void 0 });
@@ -12781,7 +12826,12 @@ ${record2.external.id}`;
             renderBadgePending(this);
             return;
           }
-          if (backendUrl) void init({ backendUrl }).mountBadge(this, { connectionId, evidence });
+          if (backendUrl)
+            void init({ backendUrl }).mountBadge(this, {
+              connectionId,
+              evidence,
+              maxAgeMs: arrangement.maxAgeMs
+            });
         }
       }
     );

package/dist/version.d.ts

@@ -7,4 +7,4 @@
  * output stays what tsc emitted and nothing has to be substituted into it. A version bump
  * changes this line with package.json.
  */
-export declare const version = "v0.9.5";
+export declare const version = "v0.10.0";

package/dist/version.js

@@ -7,4 +7,4 @@
  * output stays what tsc emitted and nothing has to be substituted into it. A version bump
  * changes this line with package.json.
  */
-export const version = 'v0.9.5';
+export const version = 'v0.10.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bkazemi/verily",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "description": "Self-hosted account-to-account verification for Node.js",
   "type": "module",
   "license": "MIT",