@fectivnfy112358/minimax-code-web 0.1.0-preview.0 → 0.1.0-preview.3

package/server/assets/skills/pdf/templates/bilingual-menu-premium/README.md

@@ -0,0 +1,175 @@
+# bilingual-menu-premium
+
+> Distilled from reference examples m17 (Sakura Omakase tasting menu) and a
+> luxe refresh in 2026-04. Playwright HTML+CSS, A4 portrait, serif + two-
+> column parallel layout with leader dots, Roman-numeral courses, monogram
+> seal, sake-pairing sidebar, and CJK chop signature.
+
+## 1. When to use
+
+- **EN keywords**: bilingual menu, restaurant menu, omakase, two-language
+  layout, serif, premium dining, JP/EN menu, fine-dining menu, prix-fixe
+- **CN keywords**: 高端菜单、双语菜单、日料菜单、左右对照、餐厅菜单、和食、江戸前
+- **Sample user asks**:
+  - "Generate a dinner menu for a high-end Japanese restaurant in
+    Manhattan, JP left + EN right, three categories, per-item prices."
+  - "Make a high-end Japanese omakase menu, bilingual side-by-side,
+    serif typography, three categories."
+
+## 2. Pipeline
+
+**Playwright (headless Chromium) + HTML/CSS to PDF.** Renders via
+`bash scripts/make.sh render --in page.html --out menu.pdf`.
+
+Why HTML+CSS over the (now-removed) token pipeline: menus need very high
+visual density and precise typography (serif + generous whitespace +
+tabular numbers + leader dots). CSS Grid handles column widths with
+pixel precision; Playwright's @font-face + `document.fonts.ready`
+(handled by `render_html.cjs`) eliminates the web-font race.
+
+Font cascade (verified in production): `Cormorant Garamond` →
+`Hiragino Mincho ProN` (macOS native) → `Noto Serif JP` (Google Fonts,
+cross-platform) → `Yu Mincho` → `Songti SC` (CJK fallback).
+Sans-serif accents (eyebrow tags, prices, pairing labels) use `Inter`.
+
+## 3. Document shape
+
+- **Page size**: A4 portrait (595 × 842 pt). Switch to Letter via
+  `@page { size: Letter portrait }` if shipping to US-only audiences.
+- **Pages**: typically 1–2 (4 courses × 2 dishes ≈ 1 page; 6+ courses
+  with descriptions push to 2 pages).
+- **Margins**: 14 mm top/bottom, 16 mm left/right (`@page` rule).
+- **Columns**: two-column grid `1fr 1fr`, gap 14 pt, JP on the left,
+  EN on the right, hairline divider in between.
+- **Sections**: monogram + wordmark + tagline → double-rule → prix-fixe
+  block → repeating course (Roman-numeral + JP title + romaji subtitle,
+  then dish rows, optional sake-pairing sidebar) → chef's note with
+  signature + red seal → 3-column footer (address / website / contact)
+  + fine-print band.
+
+## 4. Visual params
+
+**Palette** (CSS variables on `:root` — swap once, the whole document
+re-skins):
+
+- `--paper #faf6ed` cream paper (use `#fff` for "white-paper formal")
+- `--ink #1a1814` near-black body
+- `--ink-2 #3d3528` / `--ink-3 #6b5e48` graded muted text
+- `--gold #9a7434` accent (course numerals, prices, eyebrow, pairing rule)
+- `--gold-2 #c5a866` decorative hairlines (double rule, leader dots)
+- `--hairline #dcc89a` row dividers
+- `--seal #a82828` chef's chop (CJK red square)
+
+**Typography**:
+
+- Wordmark: 30 pt 500-weight Cormorant Garamond, letter-spacing `.55em`
+- Course title (JP): 13 pt Hiragino Mincho letter-spacing `.14em`
+- Course numeral (Roman): 12 pt italic Cormorant in `--gold`
+- Course subtitle (EN romaji): 7 pt 500 Inter uppercase letter-spacing `.42em`
+- Dish JP name 10.5 pt 600 / EN name 11 pt italic 500
+- Dish description JP 8.5 pt / EN 9 pt
+- Price 9.5 pt Inter `tabular-nums` in `--gold` (or `included` in tiny caps)
+- Eyebrow / fineprint 7.5 pt / 6 pt Inter uppercase letter-spacing `.42em`
+
+**Premium-feel components in the skeleton**:
+
+| Component | What it is | Class / element |
+| --- | --- | --- |
+| Monogram | Single-letter inline SVG inside a 2-ring badge | `.monogram svg` |
+| Double rule | Two parallel hairlines with 2 pt gap | `.double-rule` |
+| Roman-numeral course | `I.` / `II.` / `III.` italic gold | `.course-head .num` |
+| Letterspaced eyebrow | Small uppercase Inter `letter-spacing: .42em` | `.tagline`, `.lbl`, `.head` |
+| Leader dots | Dotted line between dish name and price | `.en .leader` |
+| Tabular-nums prices | `font-variant-numeric: tabular-nums` for column align | `.en .price` |
+| Pairing sidebar | Left-rule callout with light gold tint | `.pairing` |
+| Chef's chop | CJK character on red square, slight tilt | `.signature .seal` |
+| 3-col footer | Address · website · contact, then fineprint band | `footer` grid |
+
+## 5. Skeleton
+
+See [`skeleton.html`](skeleton.html) (~210 lines self-contained, embedded
+`<style>`, all real content stubbed as `<!-- PLACEHOLDER -->`).
+
+**Quick start**:
+
+```bash
+cp templates/bilingual-menu-premium/skeleton.html /tmp/menu/page.html
+$EDITOR /tmp/menu/page.html       # replace every <!-- ... --> placeholder
+bash scripts/make.sh render --in /tmp/menu/page.html --out /tmp/menu/out.pdf
+pdfinfo /tmp/menu/out.pdf | grep Pages
+```
+
+## 6. Pitfalls
+
+- **Web-font race condition**: `render_html.cjs` waits for
+  `document.fonts.ready` automatically (15 s cap), but
+  `Cormorant + Inter + Noto Serif JP` is a 3-font cold-load. If the
+  output Helvetica's the body, bump `--wait` to `2000`+.
+- **CJK tofu / mojibake**: when the host has no Hiragino, Noto Serif JP
+  is the safety net (loaded via Google Fonts in the skeleton). For
+  air-gapped machines, vendor `NotoSerifJP-*.woff2` to
+  `assets/fonts/` and switch the `<link>` to a relative `@font-face`.
+- **JP/EN parity**: when a JP description exceeds 8 characters, the EN
+  side must carry equivalent content. m17 iter6 had Aji / Zuke Akami
+  entries fall out of parity; the critic flagged P1.
+- **Sparse last page**: 4 courses × 2 dishes is comfortable for 1 page;
+  6 courses pushes to 2. If the second page is < 1/3 full, expand the
+  chef's note or add a separate "wine list" section.
+- **Leader-dot height drift**: the dots use
+  `transform: translateY(-2pt)` to align with the baseline. If you
+  change the EN name font-size, tweak the `translateY` to keep the dots
+  centered between the descender and the price.
+- **Monogram letter spacing**: the wordmark uses `letter-spacing: .55em`
+  with a `margin-left: .55em` compensator so the visually-centered title
+  sits true-center under the monogram. Don't drop the compensator.
+
+## 7. Generalization
+
+**Required placeholders**:
+
+- `RESTAURANT_NAME`, `MONOGRAM_LETTER` (1 char for the badge)
+- `ESTABLISHED_YEAR`, `LOCATION_LINE`, `DATE_MONTH_YEAR`
+- `PRICE_LABEL`, `PRICE_AMT`, `PRICE_NOTE`
+- Per course: `COURSE_NUM` (`I.` / `II.` / …), `CATEGORY_JP`,
+  `CATEGORY_ROMAJI`, `CATEGORY_EN_SUBTITLE`
+- Per dish: `DISH_NAME_JP`, `DISH_KANA_JP`, `DISH_DESC_JP`,
+  `DISH_NAME_EN`, `PRICE` (or use `class="price included"` for
+  fixed-menu courses), `DISH_DESC_EN`
+- Closing: `CLOSING_TITLE`, `CHEF_PHILOSOPHY_OR_SOURCING_NOTE`,
+  `CHEF_SIGNATURE`, `SEAL_CHAR` (1–2 CJK chars)
+- Footer: `FOOTER_LEFT`, `FOOTER_CENTER`, `FOOTER_RIGHT`,
+  `HEALTH_DISCLAIMER`, `GRATUITY_NOTE`, `TAX_NOTE`
+
+**Optional / swappable**:
+
+- Pairing sidebar (drop the `.pairing` div if no wine/sake list).
+- Cuisine (omakase generalises to kaiseki / French tasting / Italian
+  prix-fixe — keep the columns, adjust `CATEGORY_JP/ROMAJI`).
+- Language pair (JP/EN baseline — swap to JP/CN, KR/EN, or FR/EN; the
+  grid is language-agnostic).
+- Palette via `:root` CSS variables. Quick re-skin presets:
+
+| Mood | --paper | --gold | --seal |
+| --- | --- | --- | --- |
+| Classic Japanese (default) | `#faf6ed` cream | `#9a7434` deep gold | `#a82828` red |
+| White-paper formal | `#ffffff` | `#1a3a5c` navy | `#1a3a5c` navy |
+| Italian trattoria | `#fdf6e3` | `#7a5236` terracotta | `#5a7d3a` olive |
+| French bistro | `#f7f3ec` | `#3a3a3a` graphite | `#9a2828` claret |
+| Modern monochrome | `#fafafa` | `#222` graphite | `#222` graphite |
+
+**Structural invariants** (do not change — they are what make the doc
+read as "premium"):
+
+- Two-column grid with a hairline border between left and right.
+- `break-inside: avoid` on rows, course sections, pairing, closing,
+  footer to prevent mid-element page splits.
+- Centered course titles with wide letter-spacing (≥ `.14em`).
+- 0.25 pt dotted dish-row separator (any thicker reads as "form").
+- Roman numerals for course numbering (Arabic numbers feel transactional).
+
+**Diversify every run.** Treat the §4 baseline (cream + gold + Hiragino
+Mincho + Cormorant Garamond) as a sanity check, not the default answer.
+Adapt the palette, typography, language pair, and cuisine to the user's
+restaurant brand, cuisine style, location, and mood — two back-to-back
+menu generations for different restaurants should NOT both come back
+cream/gold unless the user explicitly asked for that look.

package/server/assets/skills/pdf/templates/bilingual-menu-premium/skeleton.html

@@ -0,0 +1,343 @@
+<!doctype html>
+<!--
+  bilingual-menu-premium · skeleton (luxe edition)
+  ------------------------------------------------
+  Drop in via `bash make.sh render --in page.html --out menu.pdf`.
+
+  PLACEHOLDERS (replace before render):
+    RESTAURANT_NAME · MONOGRAM_LETTER (single char for the wordmark seal)
+    ESTABLISHED_YEAR · LOCATION_LINE · DATE_MONTH_YEAR
+    PRICE_LABEL · PRICE_AMT · PRICE_NOTE
+    Per course: COURSE_NUM (I./II./III./IV.) · CATEGORY_JP · CATEGORY_ROMAJI ·
+                CATEGORY_EN_SUBTITLE
+    Per dish: DISH_NAME_JP · DISH_KANA_JP · DISH_DESC_JP ·
+              DISH_NAME_EN · PRICE (or "included") · DISH_DESC_EN
+    Optional pairing: PAIRING_LABEL · PAIRING_TEXT
+    Closing: CLOSING_TITLE · CHEF_PHILOSOPHY_OR_SOURCING_NOTE ·
+             CHEF_SIGNATURE · SEAL_CHAR (1-2 CJK chars for the red chop)
+    Footer: FOOTER_LEFT · FOOTER_CENTER (website) · FOOTER_RIGHT ·
+            HEALTH_DISCLAIMER · GRATUITY_NOTE · TAX_NOTE
+-->
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<title><!-- RESTAURANT_NAME --> · <!-- DESCRIPTOR --></title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=Noto+Serif+JP:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  /* ============================================================
+     A4 portrait, 14mm top/bottom · 16mm left/right
+     Bilingual columns + leader dots + Roman-numeral sections + single-rule print aesthetic
+     ============================================================ */
+  @page { size: A4 portrait; margin: 14mm 16mm; }
+  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+  :root {
+    --paper:    #faf6ed;       /* Off-white paper; change to #fff for an elegant white-paper look */
+    --ink:      #1a1814;       /* Ink black */
+    --ink-2:    #3d3528;       /* Secondary text */
+    --ink-3:    #6b5e48;       /* Notes/Roman numerals */
+    --gold:     #9a7434;       /* Dark gold accent */
+    --gold-2:   #c5a866;       /* Pale gold decorative rules */
+    --hairline: #dcc89a;       /* Hairline divider */
+    --seal:     #a82828;       /* Seal red */
+  }
+
+  html, body {
+    margin: 0; padding: 0;
+    background: var(--paper); color: var(--ink);
+    font-family: "Cormorant Garamond", "Hiragino Mincho ProN", "Noto Serif JP",
+                 "Yu Mincho", "Songti SC", serif;
+    font-size: 9.5pt; line-height: 1.45;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* ── Brand monogram + wordmark ────────────────────────────── */
+  header.brand { text-align: center; padding-top: 2mm; }
+  .monogram { width: 28pt; height: 28pt; margin: 0 auto 4pt; display: block; }
+  header.brand .name {
+    font-family: "Cormorant Garamond", serif;
+    font-size: 30pt; font-weight: 500; letter-spacing: .55em;
+    margin: 0 0 5pt 0.55em;       /* Optically adjusted letter spacing */
+    color: var(--ink);
+  }
+  header.brand .tagline {
+    font-family: "Inter", sans-serif;
+    font-size: 7.5pt; letter-spacing: .42em; font-weight: 500;
+    color: var(--gold); text-transform: uppercase;
+  }
+  header.brand .tagline .sep { margin: 0 8pt; color: var(--gold-2); letter-spacing: 0; }
+
+  /* Double-rule divider, common in premium print */
+  .double-rule {
+    margin: 6pt auto 8pt; max-width: 60mm;
+    border-top:    0.6pt solid var(--gold-2);
+    border-bottom: 0.6pt solid var(--gold-2);
+    height: 2.2pt;
+  }
+
+  /* ── Prix-fixe block ────────────────────────────────────── */
+  .prix-fixe {
+    text-align: center; max-width: 90mm; margin: 0 auto 10pt;
+    padding: 5pt 0;
+    border-top:    0.4pt solid var(--gold);
+    border-bottom: 0.4pt solid var(--gold);
+  }
+  .prix-fixe .lbl {
+    font-family: "Inter", sans-serif;
+    font-size: 7.5pt; letter-spacing: .42em; text-transform: uppercase;
+    color: var(--gold); font-weight: 500;
+  }
+  .prix-fixe .amt {
+    font-family: "Cormorant Garamond", serif;
+    font-size: 22pt; font-weight: 500; letter-spacing: .04em;
+    color: var(--ink); margin-top: 2pt;
+  }
+  .prix-fixe .note {
+    font-size: 8.5pt; font-style: italic; color: var(--ink-3); margin-top: 1pt;
+  }
+
+  /* ── Course section ─────────────────────────────────────── */
+  section.course { margin-top: 8pt; break-inside: auto; }
+  .course-head {
+    display: grid; grid-template-columns: auto 1fr auto;
+    align-items: end; gap: 10pt; margin-bottom: 5pt;
+    padding-bottom: 3pt; border-bottom: 0.4pt solid var(--hairline);
+    break-after: avoid;
+  }
+  .course-head .num {
+    font-family: "Cormorant Garamond", serif;
+    font-size: 12pt; font-style: italic; color: var(--gold);
+    letter-spacing: .04em; min-width: 20pt;
+  }
+  .course-head .title {
+    font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif;
+    font-size: 13pt; letter-spacing: .14em; color: var(--ink);
+  }
+  .course-head .romaji {
+    font-family: "Inter", sans-serif;
+    font-size: 7pt; letter-spacing: .42em; color: var(--gold);
+    text-transform: uppercase; text-align: right; padding-bottom: 1pt;
+  }
+
+  /* ── Dish row (bilingual columns + leader dots) ────────────── */
+  .row {
+    display: grid; grid-template-columns: 1fr 1fr;
+    column-gap: 14pt; padding: 4pt 0;
+    border-bottom: 0.25pt dotted var(--hairline);
+    break-inside: avoid;
+  }
+  section.course .row:last-child { border-bottom: none; }
+
+  /* JP column */
+  .ja .name {
+    font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif;
+    font-size: 10.5pt; font-weight: 600; color: var(--ink);
+  }
+  .ja .kana {
+    font-family: "Hiragino Mincho ProN", serif;
+    font-size: 7.5pt; color: var(--ink-3); margin-left: 6pt; letter-spacing: .12em;
+  }
+  .ja .desc {
+    font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif;
+    font-size: 8.5pt; color: var(--ink-2); margin-top: 1pt; line-height: 1.5;
+  }
+
+  /* EN column */
+  .en { padding-left: 12pt; border-left: 0.3pt solid var(--hairline); }
+  .en .name-line {
+    display: grid; grid-template-columns: auto 1fr auto;
+    align-items: baseline; gap: 4pt;
+  }
+  .en .name {
+    font-family: "Cormorant Garamond", serif;
+    font-size: 11pt; font-style: italic; font-weight: 500; color: var(--ink);
+  }
+  .en .leader {                        /* Classic menu leader dots */
+    border-bottom: 0.4pt dotted var(--gold-2);
+    transform: translateY(-2pt); height: 1px;
+  }
+  .en .price {
+    font-family: "Inter", sans-serif;
+    font-size: 9.5pt; font-variant-numeric: tabular-nums;
+    color: var(--gold); letter-spacing: .04em; font-weight: 500;
+    white-space: nowrap;
+  }
+  .en .price.included {
+    font-style: italic; font-size: 7.5pt; letter-spacing: .25em;
+    text-transform: uppercase; color: var(--ink-3); font-weight: 400;
+  }
+  .en .desc {
+    font-family: "Cormorant Garamond", serif;
+    font-size: 9pt; color: var(--ink-2); margin-top: 1pt; line-height: 1.55;
+  }
+
+  /* ── Wine / sake pairing block (sidebar) ──────────────── */
+  .pairing {
+    margin: 6pt 0 0; padding: 4pt 8pt;
+    background: rgba(154,116,52,0.06);
+    border-left: 1.5pt solid var(--gold);
+    font-family: "Inter", sans-serif;
+    font-size: 7.5pt; letter-spacing: .04em; color: var(--ink-2);
+    break-inside: avoid;
+  }
+  .pairing .lbl {
+    color: var(--gold); font-weight: 600; letter-spacing: .25em;
+    text-transform: uppercase; margin-right: 5pt;
+  }
+
+  /* ── Closing / chef's note ─────────────────────────────── */
+  section.closing {
+    margin-top: 10pt; padding: 6pt 12pt 4pt;
+    border-top: 0.4pt solid var(--gold);
+    border-bottom: 0.4pt solid var(--gold);
+    break-inside: avoid;
+  }
+  .closing .head {
+    text-align: center;
+    font-family: "Inter", sans-serif;
+    font-size: 7.5pt; letter-spacing: .42em; text-transform: uppercase;
+    color: var(--gold); font-weight: 500; margin-bottom: 3pt;
+  }
+  .closing p {
+    font-family: "Cormorant Garamond", serif;
+    font-size: 9pt; line-height: 1.55; color: var(--ink-2);
+    margin: 0 0 3pt; text-align: center; font-style: italic;
+  }
+  .closing .signature {
+    text-align: right; margin-top: 4pt; font-style: italic;
+    font-size: 8.5pt; color: var(--ink-3); letter-spacing: .04em;
+  }
+  .closing .signature .seal {                      /* CJK seal style */
+    display: inline-block; width: 13pt; height: 13pt; margin-left: 5pt;
+    background: var(--seal); color: var(--paper);
+    font-family: "Hiragino Mincho ProN", serif;
+    font-size: 7pt; line-height: 13pt; text-align: center;
+    transform: translateY(2pt) rotate(-3deg); font-style: normal;
+    border-radius: 1pt;
+  }
+
+  /* ── Footer (two lines of fine text for a business aesthetic) ── */
+  footer {
+    margin-top: 8pt; padding-top: 5pt;
+    border-top: 0.4pt solid var(--gold-2);
+    display: grid; grid-template-columns: 1fr auto 1fr;
+    gap: 10pt; align-items: center;
+    font-family: "Inter", sans-serif;
+    font-size: 6.5pt; letter-spacing: .15em;
+    color: var(--ink-3); text-transform: uppercase;
+    break-inside: avoid;
+  }
+  footer .l { text-align: left; }
+  footer .c {
+    font-family: "Cormorant Garamond", serif;
+    font-style: italic; font-size: 8pt; color: var(--gold);
+    letter-spacing: .04em; text-transform: none;
+  }
+  footer .r { text-align: right; }
+  footer .fineprint {
+    grid-column: 1 / -1; margin-top: 3pt; padding-top: 3pt;
+    border-top: 0.25pt dotted var(--hairline);
+    font-size: 6pt; letter-spacing: .08em; color: var(--ink-3);
+    text-align: justify; text-transform: none; line-height: 1.55;
+  }
+  footer .fineprint .star { color: var(--gold); font-weight: 600; margin-right: 2pt; }
+
+  /* === Screen-emulation: open in browser → looks like the A4 PDF =========== */
+  @media screen {
+    html { background: #d0d0d0; }
+    body { margin: 0; padding: 20px 0; }
+    body > section {
+      width: 210mm; min-height: 297mm; margin: 0 auto 20px;
+      background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+      box-sizing: border-box; overflow: hidden;
+    }
+  }
+</style>
+</head>
+<body>
+
+<!-- ============== HEADER ============== -->
+<header class="brand">
+  <!-- Monogram: replace MONOGRAM_LETTER with the restaurant's initial. -->
+  <svg class="monogram" viewBox="0 0 60 60">
+    <circle cx="30" cy="30" r="28" fill="none" stroke="#9a7434" stroke-width="0.8"/>
+    <circle cx="30" cy="30" r="24" fill="none" stroke="#c5a866" stroke-width="0.4"/>
+    <text x="30" y="40" text-anchor="middle"
+          font-family="Cormorant Garamond, serif" font-size="26"
+          font-style="italic" fill="#9a7434"><!-- MONOGRAM_LETTER --></text>
+  </svg>
+  <div class="name"><!-- RESTAURANT_NAME --></div>
+  <div class="tagline">
+    EST. <!-- ESTABLISHED_YEAR --> <span class="sep">·</span>
+    <!-- LOCATION_LINE --> <span class="sep">·</span>
+    <!-- DATE_MONTH_YEAR -->
+  </div>
+</header>
+
+<div class="double-rule"></div>
+
+<div class="prix-fixe">
+  <div class="lbl"><!-- PRICE_LABEL --></div>
+  <div class="amt"><!-- PRICE_AMT --></div>
+  <div class="note"><!-- PRICE_NOTE --></div>
+</div>
+
+<!-- ============== REPEAT FOR EACH COURSE ============== -->
+<section class="course">
+  <div class="course-head">
+    <span class="num"><!-- COURSE_NUM --></span>
+    <span class="title"><!-- CATEGORY_JP --></span>
+    <span class="romaji"><!-- CATEGORY_ROMAJI --> &middot; <!-- CATEGORY_EN_SUBTITLE --></span>
+  </div>
+
+  <!-- REPEAT FOR EACH DISH IN THIS COURSE: -->
+  <div class="row">
+    <div class="ja">
+      <span class="name"><!-- DISH_NAME_JP --></span>
+      <span class="kana"><!-- DISH_KANA_JP --></span>
+      <div class="desc"><!-- DISH_DESC_JP --></div>
+    </div>
+    <div class="en">
+      <div class="name-line">
+        <span class="name"><!-- DISH_NAME_EN --></span>
+        <span class="leader"></span>
+        <span class="price"><!-- PRICE --></span>
+        <!-- For "included" courses: <span class="price included">included</span> -->
+      </div>
+      <div class="desc"><!-- DISH_DESC_EN --></div>
+    </div>
+  </div>
+  <!-- /REPEAT dish -->
+
+  <!-- Optional pairing block (drop if not needed): -->
+  <div class="pairing">
+    <span class="lbl"><!-- PAIRING_LABEL --></span><!-- PAIRING_TEXT -->
+  </div>
+</section>
+<!-- /REPEAT course -->
+
+<!-- ============== CLOSING ============== -->
+<section class="closing">
+  <div class="head"><!-- CLOSING_TITLE --></div>
+  <p><!-- CHEF_PHILOSOPHY_OR_SOURCING_NOTE --></p>
+  <div class="signature">
+    — <!-- CHEF_SIGNATURE --> <span class="seal"><!-- SEAL_CHAR --></span>
+  </div>
+</section>
+
+<!-- ============== FOOTER ============== -->
+<footer>
+  <div class="l"><!-- FOOTER_LEFT --></div>
+  <div class="c"><!-- FOOTER_CENTER --></div>
+  <div class="r"><!-- FOOTER_RIGHT --></div>
+  <div class="fineprint">
+    <span class="star">★</span> <!-- HEALTH_DISCLAIMER -->
+    <!-- GRATUITY_NOTE -->
+    <!-- TAX_NOTE -->
+  </div>
+</footer>
+
+</body>
+</html>

package/server/assets/skills/pdf/templates/brand-guide-2page/README.md

@@ -0,0 +1,140 @@
+# brand-guide-2page
+
+> Distilled from reference examples m19 (MiniMax brand guide). Playwright
+> HTML+CSS, **exactly 2 pages**, A4 portrait, sans-serif + multi-block
+> grid.
+
+## 1. When to use
+
+- **EN keywords**: brand guide, style guide, visual identity, brand
+  book, design system, brand standards, 2-page identity
+- **CN keywords**: 品牌指南、风格指南、品牌手册、视觉识别、设计系统、品牌册、2 页品牌
+- **Sample user asks**:
+  - "Generate a 2-page brand style guide for our company in PDF format."
+  - "Make a 2-page PDF brand guide with logo, palette, type, do's & don'ts."
+
+## 2. Pipeline
+
+**Playwright HTML+CSS to PDF.** Does NOT use the token pipeline.
+
+Why: brand guides have very high visual density (color blocks, logos,
+type specimens, gradients). HTML+CSS gives pixel-precise color
+fidelity, inline SVG embedding, and `@page` A4 hard pagination. The
+token pipeline cannot express the strict 2-page split.
+
+Architecture: a single `brand-guide.html` (CSS embedded inside `<style>`)
++ local/data-URI logo asset + optional `assets/fonts/` -> Playwright sync -> PDF.
+
+## 3. Document shape
+
+Exactly two A4 portrait pages (210 x 297 mm), 15 mm margins.
+
+- **Page 1 (Identity)**: header (lockup + title) -> logo block (lockup +
+  clearspace spec) -> color palette (six chips) -> typography (5-step
+  scale: H1/H2/H3/Body/Caption) -> footer.
+- **Page 2 (Voice & Application)**: header (running title) -> voice
+  pillars (3 cards) -> tagline lockup (display type + usage) -> Do's &
+  Don'ts (4 do / 7 don't, two columns) -> footer.
+
+Grid: 12 columns + 6 mm gutter; 8 mm gap between blocks. The page-2
+footer uses `margin-top: auto` to pin to the bottom.
+
+## 4. Visual params
+
+**Palette** (every hex is a CSS variable, override at will):
+- Charcoal `#181E25` (body text / wordmark)
+- Surface `#F7F8FA` (page background / cards)
+- Brand primary `<!-- BRAND_PRIMARY -->` (accent 1)
+- Brand secondary `<!-- BRAND_SECONDARY -->` (accent 2)
+- Muted `#5A6470` (secondary text / timestamps)
+- Rule `#E2E5EA` (hairline dividers)
+
+**Typography** (verified pairing — leave the CJK fallback alone):
+- Display: `Outfit, system-ui, sans-serif` (H1 / H2 / numbers / labels)
+- Body: `Poppins, system-ui, sans-serif` (body / captions)
+- Sizes: H1 48/56, H2 32/40, H3 20/28, Body 12/18, Caption 10/14
+- Tagline: 38pt + linear-gradient text fill
+
+**@page**:
+
+```css
+@page { size: A4 portrait; margin: 15mm; }
+.page { page-break-after: always; height: calc(297mm - 30mm); }
+.page:last-of-type { page-break-after: auto; }
+.page[data-page="2"] .footer { margin-top: auto; }  /* pin bottom */
+```
+
+## 5. Skeleton
+
+See [`skeleton.html`](skeleton.html) (~180 lines self-contained, CSS
+variables drive the palette, the logo is left as an inline SVG slot).
+
+**Case exemplar:** for a complete website-to-brand-guide workflow using the current MiniMax site, real logo asset, portable data-URI source, render command, and verification gates, read [`cases/minimax-web-brand-guide/README.md`](cases/minimax-web-brand-guide/README.md). Editable source: [`cases/minimax-web-brand-guide/source.html`](cases/minimax-web-brand-guide/source.html).
+
+**Important:** case HTML is a reference exemplar, not a deliverable shortcut. For any user-requested website brand guide, independently explore the live website first (HTML, linked CSS, visible copy, logo/image assets, product/navigation structure, and screenshots when useful), then author a fresh/meaningfully adapted guide. Do not directly copy the case `source.html` or ship a lightly patched case output; use it only for layout patterns, pagination math, and verification examples.
+
+**Quick start**:
+
+```bash
+cp templates/brand-guide-2page/skeleton.html /tmp/brand/page.html
+# Edit the :root CSS variables --primary / --secondary.
+# Edit <!-- BRAND_NAME --> / <!-- BRAND_LOGO_SVG --> / <!-- BRAND_TAGLINE -->.
+bash scripts/make.sh render --in /tmp/brand/page.html --out /tmp/brand/out.pdf --format A4 --wait 1200
+# Strict 2 pages: pdfinfo /tmp/brand/out.pdf | grep Pages must report 2.
+```
+
+## 6. Pitfalls (from m19 production)
+
+- **CJK font fallback**: a system Helvetica/Arial fallback destroys
+  wordmark identity. Embed Outfit + Poppins via `@font-face` from local
+  files (do not depend on a CDN — it breaks offline / under VPN
+  switching). Keep `system-ui` only as the very last fallback.
+- **SVG logo embedding**: inline `<svg>...</svg>` or
+  `data:image/svg+xml;base64,...` is the only stable form. `file://`
+  paths can intermittently fail in headless Chromium — prefer inline.
+- **@page A4 sizing**: use `@page { size: A4 portrait }`; never hardcode
+  pixels. Content area = `297mm - 30mm = 267mm`. The last section must
+  fit, otherwise pin the footer with `margin-top: auto`.
+- **Exact 2 pages**: every `.page` needs `page-break-after: always`.
+  Verify with `pdfinfo out.pdf | grep Pages` (must equal 2). More or
+  fewer pages means a section did not fit cleanly.
+- **Print color fidelity**: html / body need
+  `-webkit-print-color-adjust: exact; print-color-adjust: exact;`,
+  otherwise Chromium screen-optimises the colors and the printed swatches
+  drift.
+
+## 7. Generalization
+
+**Required placeholders**:
+- `<!-- BRAND_NAME -->` company / product name (1-20 characters)
+- `--primary: <!-- BRAND_PRIMARY -->` hex color (CSS variable)
+- `--secondary: <!-- BRAND_SECONDARY -->` hex color
+- `<!-- BRAND_LOGO_SVG -->` inline SVG (200-400 characters)
+- `<!-- BRAND_TAGLINE -->` slogan (3-10 words)
+
+**Optional**:
+- Number of palette swatches (4-8 ok).
+- Voice-pillar cards (2-5 ok).
+- Do/Don't ratio (4 / 7 is the baseline; 3-8 each is reasonable).
+- Fonts (Outfit + Poppins is the baseline; switching fonts changes the
+  wordmark feel as well).
+
+**Structural invariants** (changing these breaks the layout):
+- `@page` rules: A4 portrait, 15 mm margins, page-break-after on `.page`.
+- Grid: 12 columns, 6 mm gutter, 8 mm section gap (this is what makes
+  267 mm fit cleanly).
+- Page-1 block order: Header -> Logo -> Color -> Type -> Footer (the
+  density is calibrated for that order).
+- Page-2 block order: Header -> Voice cards -> Tagline -> Do/Don't ->
+  Footer.
+- Color rule of thumb: 60% neutral / 30% brand / 10% accent.
+- Tagline gradient: 180-deg vertical (top to bottom). Do not switch to
+  135 deg or radial.
+
+**Diversify every run.** The §4 baseline (Outfit + Poppins, charcoal +
+surface) is wired up so the layout renders the moment you fill the
+placeholders — it is **not** the default brand. The user's
+`--primary` / `--secondary` plus their domain (consumer / B2B / fintech
+/ creative agency) should drive the typography, palette intensity, and
+voice-pillar tone. Two brand guides for two different companies should
+not look like reskins of each other.