hoomanjs 1.47.0 → 1.55.0

package/dist/core/skills/built-in/hooman-config/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: hooman-config
-description: Read and update Hooman's own ~/.hooman/config.json and instructions.md. Use when the user asks about Hooman's config, custom instructions, agent name, model providers, LLMs/models, API keys, reasoning options, global reasoning display, web search settings, tool or prompt toggles, or compaction. Not for MCP servers (use hooman-mcp), channel integrations (hooman-channels), or installed skills (hooman-skills).
+description: Read and update Hooman's own ~/.hooman/config.json and instructions.md. Use when the user asks about Hooman's config, custom instructions, agent name, model providers, LLMs/models, API keys, reasoning options, global reasoning display, web search settings, tool or prompt toggles, compaction, or first-run setup (`hooman setup`). Not for MCP servers (use hooman-mcp), channel integrations (hooman-channels), or installed skills (hooman-skills).
 ---
 
 # Hooman Config
@@ -23,10 +23,17 @@ Read these files (next to this SKILL.md) only when the task needs the details th
 
 ## Effective Runtime View
 
-Use `hooman config` to inspect the merged runtime `config.json` for
-the current working directory (home config plus repo-local `.hooman/config.json`
-overlays walked from git root to the current directory). The command prints full
-`config.json` shape and redacts credential-like values.
+When `~/.hooman/config.json` is missing, the CLI (`hooman` / `hooman setup`) and
+the VS Code chat panel run a first-run **setup** wizard: pick inference + search,
+validate credentials, then write `config.json` with that provider's chat LLMs.
+Do not invent a dual llama.cpp+MLX file as "what setup wrote" — setup writes
+only the chosen provider (and the chosen search block).
+
+Use `hooman config` to open the interactive configuration UI (same as chat
+`/config`). Pass `hooman config --debug` (or `-d`) to dump the merged runtime
+`config.json` for the current working directory (home config plus repo-local
+`.hooman/config.json` overlays walked from git root to the current directory)
+with credential-like values redacted.
 
 ## Read/Write Rules
 
@@ -35,12 +42,15 @@ overlays walked from git root to the current directory). The command prints full
 3. `name`, `providers`, and `llms` are required. `providers` stores shared credentials/config, and `llms` must be a **non-empty array** of entries that reference provider names (see `providers.md`). `search`, `prompts`, `tools`, `compaction`, and top-level `reasoning` are optional in input, but Hooman expands them with defaults when loading.
 4. Unknown keys are unsupported and may be dropped when Hooman parses and persists the config.
 5. `tools` only manages built-in runtime toggles exposed in `config.json`.
-6. Any change to `config.json` or `instructions.md` requires restarting the running Hooman agent/session before it takes effect. In an interactive `chat` session, running the `/config` command applies this automatically: it reloads config and re-bootstraps the session on exit.
+6. Any change to `config.json` or `instructions.md` requires restarting the running Hooman agent/session before it takes effect. Running `hooman config` or chat `/config` applies this automatically when you return to an interactive session: chat reloads config and re-bootstraps on exit.
 7. When editing `providers` or `llms`, preserve unrelated entries and API keys unless the user asks to remove or replace them.
 
 ## Full Config Shape
 
-This is the default shape Hooman writes when `~/.hooman/config.json` is missing:
+Example of what **first-run setup** writes when the user picks llama.cpp +
+DuckDuckGo (hosted providers look the same with that provider's credentials and
+prefetched `llms`; MLX is the same shape with `provider: "mlx"` and MLX model
+ids). Preferred model is `default: true`; other listed chat LLMs follow:
 
 ```json
 {
@@ -50,11 +60,6 @@ This is the default shape Hooman writes when `~/.hooman/config.json` is missing:
       "name": "llama.cpp",
       "provider": "llama-cpp",
       "options": {}
-    },
-    {
-      "name": "mlx",
-      "provider": "mlx",
-      "options": { "promptCache": {} }
     }
   ],
   "llms": [
@@ -65,7 +70,8 @@ This is the default shape Hooman writes when `~/.hooman/config.json` is missing:
         "model": "unsloth/gemma-4-E2B-it-GGUF:Q4_K_M",
         "context": 131072
       },
-      "default": false
+      "metadata": { "name": "unsloth/gemma-4-E2B-it-GGUF:Q4_K_M" },
+      "default": true
     },
     {
       "name": "Qwen3.5 2B (llama.cpp)",
@@ -74,31 +80,15 @@ This is the default shape Hooman writes when `~/.hooman/config.json` is missing:
         "model": "unsloth/Qwen3.5-2B-MTP-GGUF:Q4_K_M",
         "context": 262144
       },
-      "default": false
-    },
-    {
-      "name": "Gemma 4 E2B (MLX)",
-      "provider": "mlx",
-      "options": {
-        "model": "mlx-community/gemma-4-e2b-it-OptiQ-4bit",
-        "context": 131072
-      },
-      "default": false
-    },
-    {
-      "name": "Qwen3.5 2B (MLX)",
-      "provider": "mlx",
-      "options": {
-        "model": "mlx-community/Qwen3.5-2B-OptiQ-4bit",
-        "context": 262144
-      },
+      "metadata": { "name": "unsloth/Qwen3.5-2B-MTP-GGUF:Q4_K_M" },
       "default": false
     }
   ],
   "search": {
-    "enabled": false,
-    "provider": "brave",
+    "enabled": true,
+    "provider": "duckduckgo",
     "brave": {},
+    "duckduckgo": {},
     "exa": {},
     "firecrawl": {},
     "litellm": {},
@@ -117,7 +107,7 @@ This is the default shape Hooman writes when `~/.hooman/config.json` is missing:
     "filesystem": { "enabled": true },
     "shell": { "enabled": true },
     "sleep": { "enabled": true },
-    "browser": { "enabled": false },
+    "browser": { "enabled": true },
     "subagents": { "enabled": true }
   },
   "compaction": {
@@ -128,6 +118,11 @@ This is the default shape Hooman writes when `~/.hooman/config.json` is missing:
 }
 ```
 
+If config is loaded or scaffolded without going through setup (e.g. Open
+Settings before the wizard), the in-memory default still includes **both**
+llama.cpp and MLX provider/LLM presets, with `tools.browser.enabled` defaulting
+to `false`. Prefer reading the user's actual file over assuming either shape.
+
 Hooman fills all optional sections with defaults on load and persist, so a minimal valid config is just `name`, `providers`, and `llms`.
 
 ## Top-Level Options
@@ -135,7 +130,7 @@ Hooman fills all optional sections with defaults on load and persist, so a minim
 - `name`: non-empty display name for the agent.
 - `providers`: required reusable provider definitions. Each entry has `name`, runtime `provider`, and provider-specific `options`. Supported runtime providers: `anthropic`, `azure`, `bedrock`, `google`, `groq`, `llama-cpp`, `minimax`, `mlx`, `moonshot`, `ollama`, `openai`, `openrouter`, `xai` — details in `providers.md`.
 - `llms`: required non-empty list of named LLM configs. Each entry has `name`, provider reference `provider`, model `options` (`model`, optional `temperature`, optional `topP`, optional `maxTokens`, optional `context` — local llama-cpp/mlx providers only), optional `metadata`, and `default` (mark exactly one entry `true`). Details in `providers.md`.
-- `search`: optional web search config; defaults to disabled Brave. Details in `search.md`.
+- `search`: optional web search config; defaults to enabled DuckDuckGo (no API key). Details in `search.md`.
 - `prompts`: optional built-in static prompt toggles; omitted fields default to `true`. Custom user instructions live in `~/.hooman/instructions.md`.
 - `tools`: optional tool toggles and tool-specific settings.
 - `compaction`: optional context compaction settings. `ratio` must be `0..1`; `keep` must be a non-negative integer.

package/dist/core/skills/built-in/hooman-config/search.md

@@ -1,15 +1,16 @@
 # Hooman Search Config Reference
 
-`search.provider` must be `"brave"`, `"exa"`, `"firecrawl"`, `"litellm"`, `"serper"`, or `"tavily"`.
+`search.provider` must be `"brave"`, `"duckduckgo"`, `"exa"`, `"firecrawl"`, `"litellm"`, `"serper"`, or `"tavily"`.
 
 ```json
 {
   "search": {
     "enabled": true,
-    "provider": "brave",
+    "provider": "duckduckgo",
     "brave": {
       "apiKey": "..."
     },
+    "duckduckgo": {},
     "exa": {
       "apiKey": "..."
     },
@@ -33,7 +34,8 @@
 
 Notes:
 
+- Hooman calls DuckDuckGo by fetching the HTML results page (`https://html.duckduckgo.com/html/`) and parsing it with **cheerio**. No API key is required. `freshness` maps to `df`, `country` to `kl` when known, and `safe_search` to `kp`. `start_date`/`end_date` are not supported.
 - Hooman calls Exa through the official **`exa-js`** SDK ([Exa search API](https://exa.ai/docs/reference/search-api-guide-for-coding-agents)).
 - Hooman calls Firecrawl through **`@mendable/firecrawl-js`** ([Firecrawl search API](https://docs.firecrawl.dev/api-reference/endpoint/search)).
 - The `litellm` provider calls a [LiteLLM](https://docs.litellm.ai/docs/search/) proxy's Perplexity-compatible `POST {baseURL}/v1/search/{tool}` endpoint using the virtual key as `apiKey`. It requires `baseURL`, `apiKey`, and `tool` (the `search_tool_name` registered on the proxy). The actual upstream search provider (perplexity, tavily, exa, brave, etc.) is chosen by the proxy config, so no provider API key is stored in Hooman.
-- Defaults: `enabled: false`, `provider: "brave"`, all provider API keys unset.
+- Defaults: `enabled: true`, `provider: "duckduckgo"`, all provider API keys unset.

package/dist/core/skills/built-in/hooman-design/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: hooman-design
+description: Required playbook for design work — activate in design mode (or whenever producing HTML prototypes, dashboards, or decks). Covers the strict discovery→template→theme→build→preview→QA→human review→export workflow, DESIGN.md / directions, craft rules, artifact layout under .hooman/design, and delivery export (PDF/PPTX/screenshot-backed .fig/.deck/.sketch).
+---
+
+# Hooman Design
+
+Act like a senior product designer who ships real CSS: clear hierarchy, intentional type, brand-faithful color, and no AI-slop defaults.
+
+## Strict workflow
+
+**Follow `references/workflow.md` in order for every new brief.** Summary:
+
+| Phase | Do                                                                                                              | Gate                                            |
+| ----- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| 0     | Activate this skill                                                                                             | Before any write                                |
+| 1     | Intake via `ask_user` (brand notes / fresh / reference images / other); honor injected `DESIGN.md` when present | Brief known                                     |
+| 2     | Clarify audience, surface, content, constraints                                                                 | Enough to pick a shell                          |
+| 3     | Offer **5 best-fit shells** + **Other / custom**                                                                | Shell chosen; read its HTML                     |
+| 4     | Theme: use `DESIGN.md`, else **5 best-fit directions** + **Other / custom**                                     | Tokens bound                                    |
+| 5     | Build under `.hooman/design/<slug>/`                                                                            | Meaningful `index.html`                         |
+| 6     | `preview_design` (keep open) → images → `design-review` → fix (≤2–3 rounds)                                     | Must-fix empty or capped                        |
+| 7     | Ask user to review the live preview                                                                             | User accepts or requests changes                |
+| 8     | Ask export format → `export_design` delivery formats                                                            | Files under `export/`                           |
+| 9     | `stop_design_preview`                                                                                           | **Only after** export (or user declines / ends) |
+
+Do **not** write HTML before phases 1–4. Do **not** stop preview before phase 9.
+
+## Before the first write
+
+1. Confirm this skill is active.
+2. Run phases 1–4 with `ask_user` (see `references/workflow.md`). One question per call; ≤6 options; recommended first; free-text always allowed for custom.
+3. Read craft siblings that apply (at least):
+   - `craft/anti-ai-slop.md`
+   - `craft/typography.md`
+   - `craft/layout-overflow.md` — **required for decks / fixed frames**
+   - `craft/deck-slides.md` — **required for `[data-slide]` work**
+   - `craft/spacing-density.md`
+   - `craft/color-surfaces.md`
+   - `craft/state-coverage.md`
+   - `craft/accessibility-baseline.md`
+   - plus forms / data-viz / responsive / print / motion / iconography when relevant
+4. Brand: injected `DESIGN.md` wins. Else use the direction chosen in phase 4 and copy `assets/tokens/<direction>.css` into the artifact `:root`.
+5. Read the chosen shell under `assets/` before inventing structure.
+6. Read `references/artifact-layout.md` for the on-disk contract.
+
+## Shells (`assets/`)
+
+| File                       | Use when                                             |
+| -------------------------- | ---------------------------------------------------- |
+| `prototype-shell.html`     | Generic marketing / one-pager starting point         |
+| `landing-shell.html`       | Nav + hero + feature grid + footer                   |
+| `pricing-shell.html`       | 2–3 plan comparison                                  |
+| `auth-shell.html`          | Sign-in / sign-up form (include error slots)         |
+| `contact-shell.html`       | Contact / inquiry form (name, email, topic, message) |
+| `newsletter-shell.html`    | Email subscribe strip / card                         |
+| `waitlist-shell.html`      | Early-access waitlist capture                        |
+| `settings-shell.html`      | Side nav + settings panel                            |
+| `dashboard-shell.html`     | Ops / metrics console                                |
+| `deck-shell.html`          | Slide deck with safe chrome bands (`[data-slide]`)   |
+| `email-shell.html`         | Transactional email (~600px)                         |
+| `empty-state-shell.html`   | Zero-data panel with primary CTA                     |
+| `onboarding-shell.html`    | Multi-step wizard                                    |
+| `article-shell.html`       | Long-form editorial / blog                           |
+| `data-table-shell.html`    | Dense tabular ops UI                                 |
+| `dialog-shell.html`        | Modal confirm / destructive action                   |
+| `mobile-frame-shell.html`  | Phone-width app chrome                               |
+| `resume-shell.html`        | One-page CV / resume (print-friendly)                |
+| `business-card-shell.html` | Digital business card (compact contact face)         |
+| `invite-shell.html`        | Event invite with when/where + RSVP                  |
+| `flyer-shell.html`         | Single-sheet promo flyer / handout                   |
+
+Direction token CSS: `assets/tokens/<id>.css` (`editorial-ink`, `swiss-grid`, `night-console`, `warm-atelier`, `fintech-clear`, `signal-mono`, `soft-product`, `harbor-navy`, `paper-mono`, `botanical-calm`, `midnight-editorial`, `copper-ledger`). See `directions.md` for posture + good-shell hints when ranking the top 5.
+
+## Build
+
+- Write only under `.hooman/design/<slug>/index.html` (+ optional `assets/`).
+- Prefer semantic HTML + CSS variables from `DESIGN.md` / the chosen direction tokens.
+- For decks, mark each slide with `data-slide` and follow `craft/deck-slides.md` + `craft/layout-overflow.md`.
+- After a meaningful write, run the **full** visual QA loop — capture without review is incomplete:
+  1. `preview_design` (localhost **hot-reload**; keep running through human review + export)
+  2. `export_design` with `format: "images"` (writes `reviews/`)
+  3. **Required next tool call:** `launch_subagent` with `kind: "design-review"` whose `query` lists every shot path and says to `read_file` each with `binary: true`
+  4. Fix Must-fix (overflow / overlap / clipping first)
+  5. Re-capture → re-review (max 2–3 rounds)
+- Then **ask the user** to review the live preview (phase 7) before any delivery export.
+
+## Figma / Sketch / PPTX
+
+- **Export** — after visual QA **and** user acceptance, `export_design` with `format: "figma"`, `"figma-deck"`, `"sketch"`, or `"pptx"`.
+- These formats are **screenshot-backed** (same path as PPTX): one image frame/slide/artboard per page. They are not native editable layer trees. See `references/export.md`.
+
+## Export
+
+- Ask which format they want (phase 8), then follow `references/export.md`.
+- Delivery formats (`pdf` / `images-to-pdf` / `pptx` / `figma` / `figma-deck` / `sketch`) only after internal QA + human go-ahead.
+- Call `stop_design_preview` **only after** delivery export (or the user declines export / ends the session).

package/dist/core/skills/built-in/hooman-design/assets/article-shell.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Article</title>
+    <style>
+      :root {
+        --bg: #f7f5f2;
+        --ink: #1a1a1a;
+        --muted: #5c5c5c;
+        --accent: #0f6b6b;
+        --border: #e8e4dc;
+        --font-display: Georgia, "Times New Roman", ui-serif, serif;
+        --font-body: system-ui, -apple-system, sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        font-family: var(--font-body);
+        background: var(--bg);
+        color: var(--ink);
+        line-height: 1.6;
+      }
+      article {
+        max-width: 40rem;
+        margin: 0 auto;
+        padding: 3rem 1.5rem 4rem;
+      }
+      .meta {
+        font-size: 0.8125rem;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--muted);
+        margin-bottom: 0.75rem;
+      }
+      h1 {
+        font-family: var(--font-display);
+        font-size: clamp(2rem, 4vw, 2.75rem);
+        line-height: 1.15;
+        letter-spacing: -0.02em;
+        margin: 0 0 1rem;
+      }
+      .lede {
+        font-size: 1.125rem;
+        color: var(--muted);
+        margin: 0 0 2rem;
+      }
+      h2 {
+        font-family: var(--font-display);
+        font-size: 1.35rem;
+        margin: 2rem 0 0.75rem;
+      }
+      p {
+        margin: 0 0 1rem;
+      }
+      a {
+        color: var(--accent);
+      }
+      hr {
+        border: 0;
+        border-top: 1px solid var(--border);
+        margin: 2rem 0;
+      }
+    </style>
+  </head>
+  <body>
+    <article>
+      <p class="meta">Essay · 6 min</p>
+      <h1>Title that earns the scroll</h1>
+      <p class="lede">One-sentence thesis. No lorem.</p>
+      <p>
+        Body copy with real sentences. Prefer short paragraphs and concrete
+        nouns.
+      </p>
+      <h2>Section</h2>
+      <p>
+        Continue the argument. Link out
+        <a href="#">sparingly</a>.
+      </p>
+      <hr />
+      <p class="meta">Author name · Date</p>
+    </article>
+  </body>
+</html>

package/dist/core/skills/built-in/hooman-design/assets/auth-shell.html

@@ -0,0 +1,143 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Sign in</title>
+    <style>
+      :root {
+        --bg: #f7f5f2;
+        --ink: #1a1a1a;
+        --muted: #5c5c5c;
+        --accent: #0f6b6b;
+        --surface: #ffffff;
+        --border: #e8e4dc;
+        --danger: #b42318;
+        --font-body: system-ui, -apple-system, sans-serif;
+        --space-3: 0.75rem;
+        --space-4: 1rem;
+        --space-5: 1.5rem;
+        --space-6: 2rem;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        font-family: var(--font-body);
+        background: var(--bg);
+        color: var(--ink);
+        line-height: 1.5;
+        padding: var(--space-5);
+      }
+      .card {
+        width: min(100%, 24rem);
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 0.375rem;
+        padding: var(--space-6);
+      }
+      h1 {
+        margin: 0 0 0.25rem;
+        font-size: 1.375rem;
+        letter-spacing: -0.02em;
+      }
+      .lede {
+        margin: 0 0 var(--space-5);
+        color: var(--muted);
+        font-size: 0.9375rem;
+      }
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+      }
+      label {
+        display: flex;
+        flex-direction: column;
+        gap: 0.35rem;
+        font-size: 0.8125rem;
+        font-weight: 600;
+      }
+      input {
+        font: inherit;
+        padding: 0.6rem 0.75rem;
+        border: 1px solid var(--border);
+        border-radius: 0.375rem;
+        background: #fff;
+        color: var(--ink);
+      }
+      input:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 1px;
+      }
+      .error {
+        color: var(--danger);
+        font-size: 0.8125rem;
+        font-weight: 400;
+      }
+      .btn {
+        margin-top: var(--space-3);
+        padding: 0.7rem 1rem;
+        border: 0;
+        border-radius: 0.375rem;
+        background: var(--accent);
+        color: #fff;
+        font: inherit;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .btn:focus-visible {
+        outline: 2px solid var(--ink);
+        outline-offset: 2px;
+      }
+      .btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+      .meta {
+        margin-top: var(--space-5);
+        font-size: 0.875rem;
+        color: var(--muted);
+        text-align: center;
+      }
+      .meta a {
+        color: var(--accent);
+      }
+      /* Show empty / error / pending by toggling [hidden] in prototypes */
+      [hidden] {
+        display: none !important;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+      <h1>Sign in</h1>
+      <p class="lede">Use your work email.</p>
+      <form>
+        <label>
+          Email
+          <input type="email" name="email" autocomplete="username" required />
+          <span class="error" hidden>Enter a valid email.</span>
+        </label>
+        <label>
+          Password
+          <input
+            type="password"
+            name="password"
+            autocomplete="current-password"
+            required
+          />
+          <span class="error" hidden>Password is required.</span>
+        </label>
+        <button class="btn" type="submit">Continue</button>
+      </form>
+      <p class="meta">
+        <a href="#">Forgot password?</a> · <a href="#">Create account</a>
+      </p>
+    </main>
+  </body>
+</html>

package/dist/core/skills/built-in/hooman-design/assets/business-card-shell.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Digital business card</title>
+    <style>
+      :root {
+        --bg: #0c0c0c;
+        --ink: #fafafa;
+        --muted: #a1a1aa;
+        --accent: #fbbf24;
+        --surface: #171717;
+        --border: #27272a;
+        --font-display:
+          "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+        --font-body: system-ui, -apple-system, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        font-family: var(--font-body);
+        background: var(--bg);
+        color: var(--ink);
+        padding: 1.5rem;
+      }
+      .card {
+        width: min(100%, 22rem);
+        aspect-ratio: 1.75 / 1;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 0.375rem;
+        padding: 1.35rem 1.4rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: relative;
+        overflow: hidden;
+      }
+      .card::before {
+        content: "";
+        position: absolute;
+        inset: 0 auto 0 0;
+        width: 3px;
+        background: var(--accent);
+      }
+      .kicker {
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: 0.625rem;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--muted);
+      }
+      .name {
+        margin: 0.35rem 0 0.15rem;
+        font-family: var(--font-display);
+        font-size: 1.5rem;
+        letter-spacing: -0.02em;
+        line-height: 1.1;
+      }
+      .title {
+        margin: 0;
+        font-size: 0.8125rem;
+        color: var(--muted);
+      }
+      .footer {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 0.5rem 1rem;
+        font-size: 0.75rem;
+      }
+      .footer a {
+        color: var(--ink);
+        text-decoration: none;
+      }
+      .footer a:hover {
+        color: var(--accent);
+      }
+      .footer span {
+        color: var(--muted);
+      }
+      @media (max-width: 380px) {
+        .card {
+          aspect-ratio: auto;
+          min-height: 11rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <article class="card" aria-label="Digital business card">
+      <header>
+        <p class="kicker">Northwind · Design</p>
+        <h1 class="name">Alex Rivera</h1>
+        <p class="title">Product designer</p>
+      </header>
+      <footer class="footer">
+        <a href="mailto:alex@example.com">alex@example.com</a>
+        <a href="https://example.com">example.com</a>
+        <span>+1 555 0100</span>
+      </footer>
+    </article>
+  </body>
+</html>